Kurz XHTML/CSS Část 2: Popis vzhledu dokumentu za pomocí CSS - kaskádových stylů

1. Kurz XHTML a CSS Část 2: Popis vzhledu dokumentu za pomocí CSS - kaskádových stylů

4. Příklad, který už známe XHTML: <h1>Vzhůru dolů</h1> CSS: h1 { color: blue; } Výsledek v prohlížeči: Vzhůru dolů

5. Tři způsoby zapisování CSS Přímo ve značce v XHTML: <h1 style=“color: blue“>Vzhůru dolů</h1> Stylopisem v XHTML: <style> h1 { color: blue } </style> ... <h1>Vzhůru dolů</h1> V externím CSS souboru: <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“screen.css&quot;>

6. Vzhůru do praxe: definujeme barvu a pozadí V CSS souboru: h1 { background: blue; color: white; } V XHTML souboru: <h1>Vzhůru dolů</h1>

7. Fonty - měníme přednastavený font V CSS souboru: body { pro celý dokument font-family: Arial, sans-serif; bezpatkové písmo font-size: 0.8em; velikost fontu line-height: 1.4em; výška řádku }

8. Zarovnání: doleva či doprava? V CSS souboru: h1 { text-align: center; }

9. Hrajeme si s odkazy V CSS souboru: a { definice pro odkazy font-weight: bold; tučné písmo text-decoration: none; bez podtržení color: red; červená barva } a:hover { po najetí myši text-decoration: underline; se odkaz podtrhne }

10. Okraje a rámečky V CSS souboru: h1 { margin: 1em; vnější okraj padding: 1em; vnitřní okraj border: 1px solid red; rámeček }

11. Okraje a rámečky Prvek dokumentu Vnitřní okraj = padding Rámeček = border Vnější okraj = margin

12. Jednotky: čím měříme v CSS? Pixely, obrazové body padding: 20px; Em, čtverčíky, šíře malého „m“ font-size: 0.8em; Procenta: font-size: 50%;

15. Sdružování tříd CSS: .cervenyText { color: red; } .velkePismo { font-size: 2em; } XHTML: <p class=“cervenyText velkePismo“> Vzhůru dolů </p>

16. Sdružování tříd CSS: .velkePismo { font-size: 2em; } .velkePismo.sedaBarva { color: grey; } XHTML: <p class=„velkePismo sedaBarva“> Vzhůru dolů </p>

17. Kaskádování CSS: h1 { font-size: 2em; } .sedaBarva { color: grey; } XHTML: <h1 class=“sedaBarva“> Vzhůru dolů </p>

18. Děkuji za pozornost www.vzhurudolu.cz/xhtml-css