CSS - vyšší dívčí
0 likes403 views
Kurz XHTML/CSS -- Část 3: Formátování vzhledu stránky pomocí CSS -- vyšší dívčí
CSS - vyšší dívčí
- 1. Kurz XHTML a CSS Část 3: Formátování vzhledu stránky pomocí CSS -- vyšší dívčí
- 2. Vzorový CSS předpis Nastavíme font pro celý dokument: body { font: 0.8em/1.4em Arial, sans-serif; } Nastavíme rodinu fontu pro všechny prvky: body, input, textarea, option, select, td, th { font-family: Arial, sans-serif; } Nastavíme okraje pro všechny blokové prvky: ul, ol, p, blockquote { padding: 0; margin: 0 0 1em 0; } Nastavíme barvu odkazu: a { color: red; } Vynuluje přednastavené okraje: a img { border: 0; } form { margin: 0; padding: 0; }
- 3. Jednoduchá tabulka v CSS table { tabulka border-collapse: collapse; úzký rámeček border-top: 1px solid black; rámečky: border-left: 1px solid black; } th, td { buňky tabulky border-bottom: 1px solid black; border-right: 1px solid black; vertical-align: top; vertikální zarovnání } th { buňky hlavičky tabulky text-align: left; horizontální zarovnání }
- 4. Seznamy v XHTML Kromě použití v textu dokumentu jsou vhodné i pro definici navigace webu. <ul id="navigace"> <li><strong><a href="index.html">Úvod</a></strong></li> <li><a href="cenik.html">Ceník</a></li> </ul>
- 5. Seznamy v CSS ul { list-style-type: square; typ odrážky } li { padding-left: 0; okraje u odrážky margin-left: 1.5em; }
- 6. Formuláře form { vynulujeme okraje formuláře margin: 0; padding: 0; } input, textarea, input, textarea, option, select { background: #ddd; nastavíme pozadí prvků }
- 7. Šířka a výška #obsah { width: 500px; šířka height: 200px; výška } Výšku je třeba nastavit jenom výjimečně, proto se jí raději vyhýbejte! Výška i šířka platí jen pro samotný prvek - bez okrajů a rámečků (padding, margin, border).
- 8. Float - základ CSS layoutu Vlastnost float „vytrhne“ prvek z toku dokumentu a umístí ho na stranu. Využívá se v layoutu -- když chceme vzhled stránky ve více sloupcích. #navigace { float: left; width: 200px; } #obsah {float: right; width: 500px; }
- 9. Clear - abychom neplavali v CSS layoutu Jakmile je vlastnost float jednou nastavena, všechny následující prvky se jí řídí. Je jí třeba zrušit vlastností clear. .clear { clear: both; } XHTML: <div id=„navigace“> … </div> <div id=„obsah“> … </div> <div class=„clear“> </div>
- 10. Jednoduchý layout webu - nejdříve si jej nakreslíme Hlavička (id=“hlavicka“) Patička (id=“paticka“) Navigace (id=“navigace“) Obsah (id=“obsah“)
- 11. XHTML: <div id=„hlavicka“> … </div> <div id=„navigace“> … </div> <div id=„obsah“> … </div> <div class=„clear“> </div> <div id=„paticka“> … </div> Jednoduchý layout webu: v XHTML
- 12. V CSS dáme vše do obalu a pak nastavíme jednotlivé vlastnosti: #obal {width: 700px; } #hlavicka { } #navigace { float: left; width: 200px; } #obsah {float: right; width: 500px; } #paticka { } .clear { clear: both; } Jednoduchý layout webu: v CSS
- 13. Jak strukturovat CSS dokument? 1. Definice společné pro celý web: velikost a rodina fontu, barva odkazů 2. Vynulování předdefinovaných hodnot: okraje u formulářů a obrázků, blokové značky 3. Layout celého webu 4. Univerzální třídy a identifikátory 6. Výjimky pro jednotlivé stránky
- 14. Děkuji za pozornost www.vzhurudolu.cz/xhtml-css