O CSS podrobněji. Box model Document flow Layout

Transkript

1 O CSS podrobněji Box model Document flow Layout

2 O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin)

3 O CSS podrobněji Box model

4 O CSS podrobněji <style> ul { background: yellow; margin: 12px; padding: 10px; border: 3px solid black; } li { color: white; background: blue; margin: 12px; padding: 12px; list-style: none; } </style> <ul> <li>první položka seznamu</li> <li>druhá položka seznamu</li> </ul>

5 O CSS podrobněji Obsah LI LI padding (spadávka) LI margin (okraj) li { color: white; background: blue; margin: 12px; padding: 12px; list-style: none; border: 3px solid red; }

6 O CSS podrobněji pokud se setkají dva prvky s okrajem, nejsou "napláclé" na sobě... Okraje (margins) prvků se překryjí (overlapping) a výsledná mezera bude "větší z obou okrajů" "Collapsed margin"

7 O CSS podrobněji Obsah LI LI padding (spadávka) Okraj obou LI (není vidět, zvýrazněno pouze pro lepší pochopení) UL padding (ta mezera mezi okrajem LI a rámečkem UL) UL border

8 O CSS podrobněji Šířka obsahu elementu LI Šířka obsahu elementu UL... a zároveň... Šířka boxu elementů LI Šířka boxu elementu UL

9 Box model Prvky mají obsah (content) Okolo contentu je spadávka (padding) Okolo spadávky je rámeček (border) Okolo rámečku je okraj (margin) Analogie: Obsah prostor, kam se píše na papír Spadávka prostor, který necháváme volný

10 Levá, pravá,... #colored { border-top:10px solid red; border-bottom: 10px solid magenta; border-right: 10px solid cyan; border-left: 3px solid red; }

11 Levá, pravá,... #colored { padding-top: 10px; padding-right: 20px; padding-bottom: 0px; padding-left: 40px; }

12 Levá, pravá,... #colored { padding: 10px 20px 0px 40px; } Zkrácený zápis: TOP RIGHT BOTTOM LEFT (ve směru hodinových ručiček)

13 Levá, pravá,... #colored { padding: 10px 20px 0px 40px; margin: 10px 10px 20px 0px; border: 3px 3px 3px 0px; } Zkrácené zápisy: padding: 10px; = 10px 10px 10px 10px; padding: 10px 20px; (nahoře+dole / vlevo+vpravo) = 10px 20px 10px 20px; padding: 10px 20px 30px; = 10px 20px 30px 20px;

14 Shrnutí Vlastnosti padding, margin, border lze nastavovat hromadně (pro všechny 4 strany), jednotlivě (pomocí -left, -top, -right, -bottom) v jedné definici (pořadí T R B L, odděleno mezerou) sdruženě (T+B L+R; T L+R B;)

15 Shrnutí Kaskádové nastavení: border: 3px; border-left: 7px; "Specifičtější vlastnosti přepíšou ty obecné"

16 Shrnutí - padding Určuje mezeru mezi vlastním obsahem (resp. nejmenším obdélníkem opsaným) a rámečkem (border) Pozadí má vlastnosti definované pro pozadí prvku.

17 Shrnutí - margin Určuje mezeru mezi rámečkem (border) a ohraničujícím boxem (tedy největší rozměr prvku) Pozadí má vlastnosti definované pro pozadí nadřazeného prvku. Tam kde se potkávají dva okraje, je jejich šířka dána tím širším (overlapping)

18 Shrnutí - border Určuje vizuální vlastnosti rámečku ("obtažení") lze nastavit barvu, tloušťku čáry a její styl (plný, tečkovaný, čárkovaný...) border-color (např. red) border-width (např. 3px) border-style (např. dotted) společná vlastnost "border" border: 3px dotted red; Sdružování funguje i jinde...

19 Vsuvka o sdružování Pokud máme několik pod-vlastností pro jednu vlastnost (border-width, border-style, border-color; font-weight, font-style, font-family), kde každá má jinou jednotku (tj. nedojde ke zmatení), lze je zapsat jako jednu společnou vlastnost. Některé vlastnosti vyžadují specifické pořadí parametrů (font, background)!

20 Shrnutí záporné rozměry Lze určit i záporné rozměry #prvni { margin-left:10px; } #druha { margin-left:0px; } #treti { margin-left:-10px; } #ctvrta { margin-left:-30px; }

21 Prázdné prvky Při designování je někdy zapotřebí vytvořit nějaký logický blok prvků (menu, titulkovou lištu, patičku...) a tomu určit vizuální styl. Pokud pro tento účel má HTML elementy, použijeme ty (HTML5: header, footer, aside, nav,...) Pokud k tomu účelu nenajdeme vhodný prvek, neznásilňujeme existující, ale použijeme "prázdné prvky" <div> a <span> Zásadní rozdíl: <div> je blokový, <span> řádkový.

22 Třídy Můžeme chtít různým prvkům předepsat společné vizuální vlastnosti (např. označit některé odstavce, některé popisky, chceme odlišit aktivní prvky menu od neaktivních) pak používáme tzv. TŘÍDY Třídu prvku zapíšeme v HTML pomocí atributu class: <p class="upozorneni"> Třídu v CSS označíme pomocí zápisu s tečkou (.upozorneni).upozorneni { color: red;}

23 Třídy Rozdíl mezi třídou a ID: ID je unikátní; na stránce může být jen jeden jediný prvek s daným ID Třídu může mít víc prvků stejnou Prvek může mít jedno jediné ID Prvek může mít víc tříd <p id="zivotopis" class="poznamka">

24 Prázdné prvky - příklad Patička webu, která bude obsahovat: - copyright - odkaz na autorovy stránky - poděkování <p> 2011 Martin Malý</p> <p><a href=" <p>děkuji vám pěkně!</p> Chceme s tím společně pracovat, dát tomu jednotný styl... jak????????

25 Prázdné prvky - příklad Patička webu je "blok informací", takže použijeme blokový element <div>. Přiřadíme mu jednoznačný identifikátor ID (patička je na stránce jen jedna) <div id="footer"> <p> 2011 Martin Malý</p> <p><a href=" <p>děkuji vám pěkně!</p> </div>

26 Prázdné prvky - příklad V tuto chvíli můžeme celou patičku stylovat najednou: #footer { color: #aaa; border-top:3px solid #aaa; margin-top:5px; padding-top: 5px;}

27 Prázdné prvky - příklad POZOR! V HTML5 bychom to řešili speciálním elementem <footer>