Kurz XHTML a CSS Část 2:  Popis vzhledu dokumentu za pomocí CSS - kaskádových stylů
Co je CSS a proč je používat? <ul><li>Cascading style sheets = kaskádové styly. </li></ul><ul><li>Jazyk pro definici vzhle...
Co například umí CSS? <ul><li>Když chcete změnit barvu písma a prohodit sloupce v layoutu vašeho webu: </li></ul><ul><li>V...
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ů
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>...
Vzhůru do praxe: definujeme barvu a pozadí V CSS souboru: h1 {  background: blue; color: white; } V XHTML souboru: <h1>Vzh...
Fonty - měníme přednastavený font V CSS souboru: body {  pro celý dokument font-family: Arial, sans-serif; bezpatkové písm...
Zarovnání: doleva či doprava? V CSS souboru: h1 {  text-align: center; }
Hrajeme si s odkazy V CSS souboru: a {  definice pro odkazy font-weight: bold; tučné písmo text-decoration: none; bez podt...
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če...
Okraje a rámečky Prvek dokumentu Vnitřní okraj = padding Rámeček = border Vnější okraj = margin
Jednotky: čím měříme v CSS? Pixely, obrazové body padding: 20px; Em, čtverčíky, šíře malého „m“ font-size: 0.8em; Procenta...
Odlišení prvků dokumentu: identifikátory <ul><li>Atribut „id“ </li></ul><ul><li>V těle dokumentu jenom jednou </li></ul><u...
Odlišení prvků dokumentu:  třídy <ul><li>Atribut „class“ </li></ul><ul><li>V těle dokumentu může být vícekrát </li></ul><u...
Sdružování tříd CSS: .cervenyText { color: red; } .velkePismo { font-size: 2em; } XHTML: <p class=“cervenyText velkePismo“...
Sdružování tříd CSS: .velkePismo { font-size: 2em; } .velkePismo.sedaBarva  { color: grey; }  XHTML: <p class=„velkePismo ...
Kaskádování CSS: h1 { font-size: 2em; } .sedaBarva  { color: grey; }  XHTML: <h1 class=“sedaBarva“> Vzhůru dolů </p>
Děkuji za pozornost www.vzhurudolu.cz/xhtml-css
Upcoming SlideShare
Loading in …5
×

CSS

1,620 views

Published on

Kurz XHTML/CSS &#268;ást 2: Popis vzhledu dokumentu za pomocí CSS - kaskádových styl&#367;

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,620
On SlideShare
0
From Embeds
0
Number of Embeds
65
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. Kurz XHTML a CSS Část 2: Popis vzhledu dokumentu za pomocí CSS - kaskádových stylů
  2. 2. Co je CSS a proč je používat? <ul><li>Cascading style sheets = kaskádové styly. </li></ul><ul><li>Jazyk pro definici vzhledu webových stránek. </li></ul><ul><li>Jeden soubor se vzhledem pro všechny dokumenty </li></ul><ul><li>Menší objem XHTML dokumentů </li></ul><ul><li>Zrychlí váš web a zefektivní jeho správu! </li></ul>
  3. 3. Co například umí CSS? <ul><li>Když chcete změnit barvu písma a prohodit sloupce v layoutu vašeho webu: </li></ul><ul><li>V HTML: 1 hodina </li></ul><ul><li>V XHTML/CSS: 5 minut </li></ul>
  4. 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. 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. 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. 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. 8. Zarovnání: doleva či doprava? V CSS souboru: h1 { text-align: center; }
  9. 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. 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. 11. Okraje a rámečky Prvek dokumentu Vnitřní okraj = padding Rámeček = border Vnější okraj = margin
  12. 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%;
  13. 13. Odlišení prvků dokumentu: identifikátory <ul><li>Atribut „id“ </li></ul><ul><li>V těle dokumentu jenom jednou </li></ul><ul><li>XHTML: </li></ul><ul><li><p id=“paticka“>Copyright 2006</p> </li></ul><ul><li>CSS: </li></ul><ul><li>#paticka { </li></ul><ul><li>color: grey </li></ul><ul><li>} </li></ul>
  14. 14. Odlišení prvků dokumentu: třídy <ul><li>Atribut „class“ </li></ul><ul><li>V těle dokumentu může být vícekrát </li></ul><ul><li>XHTML: </li></ul><ul><li><p class=“cervenyText“>Bla bla</p> </li></ul><ul><li>CSS: </li></ul><ul><li>.cervenyText { </li></ul><ul><li>color: red; </li></ul><ul><li>} </li></ul>
  15. 15. Sdružování tříd CSS: .cervenyText { color: red; } .velkePismo { font-size: 2em; } XHTML: <p class=“cervenyText velkePismo“> Vzhůru dolů </p>
  16. 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. 17. Kaskádování CSS: h1 { font-size: 2em; } .sedaBarva { color: grey; } XHTML: <h1 class=“sedaBarva“> Vzhůru dolů </p>
  18. 18. Děkuji za pozornost www.vzhurudolu.cz/xhtml-css

×