Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Kurz XHTML a CSS Část 3:  Formátování vzhledu stránky pomocí CSS -- vyšší dívčí
Vzorový CSS předpis Nastavíme font pro celý dokument: body { font: 0.8em/1.4em Arial, sans-serif; } Nastavíme rodinu fontu...
Jednoduchá tabulka v CSS <ul><li>table { tabulka </li></ul><ul><li>border-collapse: collapse; úzký rámeček   </li></ul><ul...
Seznamy v XHTML <ul><li>Kromě použití v textu dokumentu jsou vhodné i pro definici navigace webu. </li></ul><ul><li><ul id...
Seznamy v CSS <ul><li>ul { </li></ul><ul><li>list-style-type: square; typ odrážky </li></ul><ul><li>} </li></ul><ul><li>li...
Formuláře <ul><li>form { vynulujeme okraje formuláře </li></ul><ul><li>margin: 0; </li></ul><ul><li>padding: 0; </li></ul>...
Šířka a výška <ul><li>#obsah { </li></ul><ul><li>width: 500px; šířka </li></ul><ul><li>height: 200px; výška </li></ul><ul>...
Float - základ CSS layoutu <ul><li>Vlastnost float „vytrhne“ prvek z toku dokumentu a umístí ho na stranu. </li></ul><ul><...
Clear - abychom neplavali v CSS layoutu <ul><li>Jakmile je vlastnost float jednou nastavena, všechny následující prvky se ...
Jednoduchý layout webu - nejdříve si jej nakreslíme Hlavička  (id=“hlavicka“) Patička  (id=“paticka“) Navigace  (id=“navig...
<ul><li>XHTML: </li></ul><ul><li><div id=„hlavicka“> … </div> </li></ul><ul><li><div id=„navigace“> … </div> </li></ul><ul...
<ul><li>V CSS dáme vše do obalu a pak nastavíme jednotlivé vlastnosti: </li></ul><ul><li>#obal {width: 700px; } </li></ul>...
Jak strukturovat CSS dokument? 1. Definice společné pro celý web:   velikost a rodina fontu, barva odkazů 2. Vynulování př...
Děkuji za pozornost www.vzhurudolu.cz/xhtml-css
Upcoming SlideShare
Loading in …5
×

CSS - vy&#353;&#353;í dív&#269;í

638 views

Published on

Kurz XHTML/CSS -- &#268;ást 3: Formátování vzhledu stránky pomocí CSS -- vy&#353;&#353;í dív&#269;í

Published in: Sports
  • Be the first to comment

  • Be the first to like this

CSS - vy&#353;&#353;í dív&#269;í

  1. 1. Kurz XHTML a CSS Část 3: Formátování vzhledu stránky pomocí CSS -- vyšší dívčí
  2. 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. 3. Jednoduchá tabulka v CSS <ul><li>table { tabulka </li></ul><ul><li>border-collapse: collapse; úzký rámeček </li></ul><ul><li>border-top: 1px solid black; rámečky: </li></ul><ul><li>border-left: 1px solid black; </li></ul><ul><li>} </li></ul><ul><li>th, td { buňky tabulky </li></ul><ul><li>border-bottom: 1px solid black; </li></ul><ul><li>border-right: 1px solid black; </li></ul><ul><li>vertical-align: top; vertikální zarovnání </li></ul><ul><li>} </li></ul><ul><li>th { buňky hlavičky tabulky </li></ul><ul><li>text-align: left; horizontální zarovnání </li></ul><ul><li>} </li></ul>
  4. 4. Seznamy v XHTML <ul><li>Kromě použití v textu dokumentu jsou vhodné i pro definici navigace webu. </li></ul><ul><li><ul id=&quot;navigace&quot;> </li></ul><ul><li><li><strong><a href=&quot;index.html&quot;>Úvod</a></strong></li> </li></ul><ul><li><li><a href=&quot;cenik.html&quot;>Ceník</a></li> </li></ul><ul><li></ul> </li></ul>
  5. 5. Seznamy v CSS <ul><li>ul { </li></ul><ul><li>list-style-type: square; typ odrážky </li></ul><ul><li>} </li></ul><ul><li>li { </li></ul><ul><li>padding-left: 0; okraje u odrážky </li></ul><ul><li>margin-left: 1.5em; </li></ul><ul><li>} </li></ul>
  6. 6. Formuláře <ul><li>form { vynulujeme okraje formuláře </li></ul><ul><li>margin: 0; </li></ul><ul><li>padding: 0; </li></ul><ul><li>} </li></ul><ul><li>input, textarea, input, textarea, option, select { </li></ul><ul><li>background: #ddd; nastavíme pozadí prvků </li></ul><ul><li>} </li></ul>
  7. 7. Šířka a výška <ul><li>#obsah { </li></ul><ul><li>width: 500px; šířka </li></ul><ul><li>height: 200px; výška </li></ul><ul><li>} </li></ul><ul><li>Výšku je třeba nastavit jenom výjimečně, proto se jí raději vyhýbejte! </li></ul><ul><li>Výška i šířka platí jen pro samotný prvek - bez okrajů a rámečků (padding, margin, border). </li></ul>
  8. 8. Float - základ CSS layoutu <ul><li>Vlastnost float „vytrhne“ prvek z toku dokumentu a umístí ho na stranu. </li></ul><ul><li>Využívá se v layoutu -- když chceme vzhled stránky ve více sloupcích. </li></ul><ul><li>#navigace { float: left; width: 200px; } </li></ul><ul><li>#obsah {float: right; width: 500px; } </li></ul>
  9. 9. Clear - abychom neplavali v CSS layoutu <ul><li>Jakmile je vlastnost float jednou nastavena, všechny následující prvky se jí řídí. </li></ul><ul><li>Je jí třeba zrušit vlastností clear. </li></ul><ul><li>.clear { clear: both; } </li></ul><ul><li>XHTML: </li></ul><ul><li><div id=„navigace“> … </div> </li></ul><ul><li><div id=„obsah“> … </div> </li></ul><ul><li><div class=„clear“>&nbsp;</div> </li></ul>
  10. 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. 11. <ul><li>XHTML: </li></ul><ul><li><div id=„hlavicka“> … </div> </li></ul><ul><li><div id=„navigace“> … </div> </li></ul><ul><li><div id=„obsah“> … </div> </li></ul><ul><li><div class=„clear“>&nbsp;</div> </li></ul><ul><li><div id=„paticka“> … </div> </li></ul>Jednoduchý layout webu: v XHTML
  12. 12. <ul><li>V CSS dáme vše do obalu a pak nastavíme jednotlivé vlastnosti: </li></ul><ul><li>#obal {width: 700px; } </li></ul><ul><li>#hlavicka { } </li></ul><ul><li>#navigace { float: left; width: 200px; } </li></ul><ul><li>#obsah {float: right; width: 500px; } </li></ul><ul><li>#paticka { } </li></ul><ul><li>.clear { clear: both; } </li></ul>Jednoduchý layout webu: v CSS
  13. 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. 14. Děkuji za pozornost www.vzhurudolu.cz/xhtml-css

×