Your SlideShare is downloading. ×
0
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS

1,269

Published on

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

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

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

  • Be the first to like this

No Downloads
Views
Total Views
1,269
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Kurz XHTML a CSS Část 2: Popis vzhledu dokumentu za pomocí CSS - kaskádových stylů
  • 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. 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. 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%;
  • 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. 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. 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

×