CSS layout, typografie
Cvičení 2
Webová kartografie – úvod
Podzim 2021
Filip Leitner
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
VSCode skratky
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Filip Leitner CSS layout, typografie Webová kartografie 2 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Struktura CSS
Filip Leitner CSS layout, typografie Webová kartografie 3 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Procvičování 4
nastylujte si HTML stránku pomocí CSS
připojte si samostatný soubor style.css nebo vložte kód přímo do
<style> tagu v index.html
změňte velikost a font písma v dokumentu
změňte barvu nadpisů
zvýrazněte <div> jednoho z filmů pomocí barvy pozadí
Filip Leitner CSS layout, typografie Webová kartografie 4 / 21
Procvičování 4
GODMODE:
vyberte si část textu – jeden element, který zakryjete jako spoiler
(bude začerněný)
případně vyberte jen část textu, kterou vložíte do elementu <span>
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 Webová kartografie 6 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Webová kartografie 7 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Margin a Padding
Filip Leitner CSS layout, typografie Webová kartografie 8 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Webová kartografie 9 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Webová kartografie 10 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Flexbox
Filip Leitner CSS layout, typografie Webová kartografie 11 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Flexbox
A Complete Guide to Flexbox
Průvodce všemi vlastnostmi
Youtube.
Filip Leitner CSS layout, typografie Webová kartografie 12 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Webová kartografie 13 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Webová kartografie 14 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
CSS Grid
A Complete Guide to Grid
Kompletní příručka všech vlastností (s příklady)
Youtube.
Filip Leitner CSS layout, typografie Webová kartografie 15 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Jednotky
px CSS pixel – více viz odkaz!
% procenta z rodičovského elementu
rem poměr vůči velikosti písma elementu <html>
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 Webová kartografie 16 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 */
}
ostatní jednotky nepoužíváme pokud to není nutné
Filip Leitner CSS layout, typografie Webová kartografie 17 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Šíř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;
}
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
Filip Leitner CSS layout, typografie Webová kartografie 18 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Kontrast
Filip Leitner CSS layout, typografie Webová kartografie 19 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Webová kartografie 20 / 21
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Ptejte se
kdykoliv
kdekoliv
jakkoliv
co nejdřív …
e-mail: 451242@mail.muni.cz
MS Teams
Filip Leitner CSS layout, typografie Webová kartografie 21 / 21