CSS layout, typografie Cvičení 2 Webová kartografie – úvod Podzim 2023 Filip Leitner Autoformat on save https://blog.yogeshchavan.dev/automatically-format-code-on-file-save-in-visual-studio-code-using-pr ettier VSCODE SKRATKY https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf Filip Leitner CSS layout, typografie STRUKTURA CSS Filip Leitner CSS layout, typografie PROCVIčOVÁNí 4 GODMODE: případně vyberte jen část textu, kterou vložíte do elementu vybranému elementu přiřaďte class spoiler pomocí CSS upravte vzhled elementu tak, aby nebyl v textu čitelný upravte CSS tak, aby se text odkryl, když na něj najedete myší vygooglete si a použijte selektory :not a :hover POSITION pro rozmístění elementů je možné použít: div#heading { position: absolute; top: 15px; left: 300px; } rozložení stránky je nepružné → rozbije se Filip Leitner CSS layout, typografie Absolute/Relative , fixed, static Absolute + Relative / Fixed https://codepen.io/filipleitner/pen/JjgYRMa?editors=1100 FLOAT používá se pro plovoucí elementy: obrázky, poznámky img.right-float { float: right; } opět nevhodné pro rozložení stránky, hodí se např. pro doplňující informace k textu Filip Leitner CSS layout, typografie MARGIN A PADDING Filip Leitner CSS layout, typografie MARGIN A PADDING .content { margin: 10px 10px 10px 10px //top right bottom left; margin: top-bottom right-left; margin: all margin-bottom: 10px; } Filip Leitner CSS layout, typografie https://codepen.io/filipleitner/pen/yLmYaVg FLEXBOX první „moderní“ varianta vhodné zejména pro sadu stejných prvků: obrázky, položky navigace, záložky, karty, apod. .container { display: flex; flex-direction: column; justify-content: center; } .item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; } Filip Leitner CSS layout, typografie Obrázok, na ktorom je snímka obrazovky, štvorec, text, dizajn Automaticky generovaný popis
1
...
4
FLEXBOX Filip Leitner CSS layout, typografie
1
...
4
Obrázok, na ktorom je text, snímka obrazovky, štvorec, písmo Automaticky generovaný popis Obrázok, na ktorom je snímka obrazovky, štvorec, text, dizajn Automaticky generovaný popis FLEXBOX A Complete Guide to Flexbox Průvodce všemi vlastnostmi Youtube. Filip Leitner CSS layout, typografie CSS GRID komplexní systém pro rozmístění prvků do mřížky .container { display: grid; grid-template-columns: auto auto auto; } prvky uvnitř .container se rozmístí pravidelně do třech sloupců se stejnou šířkou řádků bude mřížka obsahovat kolik bude třeba Filip Leitner CSS layout, typografie CSS GRID pokud bude v mřížce pět prvků, poslední buňka druhého řádku zůstane prázdná: Zdroj: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout více viz https://www.w3schools.com/css/css_grid.asp a https://css-tricks.com/snippets/css/complete-guide-grid/ Filip Leitner CSS layout, typografie CSS GRID A Complete Guide to Grid Kompletní příručka všech vlastností (s příklady) Youtube. Filip Leitner CSS layout, typografie display: flex; display: flex; flex-direction: column; justify-content: space-around; align-items: center; https://gist.github.com/FilipLeitner/4601ead7caa681e99656efbf20a498f0 JEDNOTKY px CSS pixel – více viz odkaz! % procenta z rodičovského elementu rem poměr vůči velikosti písma elementu em poměr vůči velikosti písma tohoto elementu vw poměr vůči 1 % šířky viewportu vh poměr vůči 1 % výšky viewportu ... Filip Leitner CSS layout, typografie ostatní jednotky nepoužíváme pokud to není nutné VELIKOST PíSMA základní velikost písma v dokumentu určujeme relativně k výchozí velikosti písma, tj. pomocí procent: html { font-size: 120%; } další deklarace zakládáme na této velikosti, používáme rem: .heading { font-size: 2rem; /* 2x font-size html */ } nav { font-size: 1.3rem; /* 1.3x font-size html */ } Filip Leitner CSS layout, typografie používáme max-width místo width, jinak by text mohl vyhrazenou oblast přetéct stanovení margin right a left: auto element vystředí vůči rodičovskému elementu ŠíŘKA TEXTU řádky zhruba nad 75 znaků se špatně čtou (viz rozdíl mezi mobilní a klasickou Wikipedií) měli bychom tedy šířku sloupce textu vhodně omezit, nejlépe opět pomocí rem/em .text { max-width: 40rem; margin-right: auto; margin-left: auto; } Filip Leitner CSS layout, typografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . KONTRAST Filip Leitner CSS layout, typografie DALší MATERIÁLY pružná typografie: https://www.smashingmagazine.com/2016/05/fluid-typography/ a https://www.vzhurudolu.cz/prirucka/reseni-elasticka-typografie interaktivní nástroj pro nastavení CSS deklarací: https://www.gridlover.net/try jednotky.pdf ve studijních materiálech fonty zdarma: https://fonts.google.com/ vhodné páry fontů: https://fontpair.co/ Filip Leitner CSS layout, typografie FLEX GRID Ptejte se Filip Leitner CSS layout, typografie kdykoliv kdekoliv jakkoliv co nejdřív … e-mail: 451242@mail.muni.cz