CSS
0 likes719 views
Kurz XHTML/CSS Č叩st 2: Popis vzhledu dokumentu za pomoc鱈 CSS - kask叩dov箪ch stylů
CSS
- 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? Cascading style sheets = kask叩dov辿 styly. Jazyk pro definici vzhledu webov箪ch str叩nek. Jeden soubor se vzhledem pro v邸echny dokumenty Men邸鱈 objem XHTML dokument哲 Zrychl鱈 v叩邸 web a zefektivn鱈 jeho spr叩vu!
- 3. Co nap鱈klad um鱈 CSS? Kdy転 chcete zmnit barvu p鱈sma a prohodit sloupce v layoutu va邸eho webu: V HTML: 1 hodina V XHTML/CSS: 5 minut
- 4. P鱈klad, kter箪 u転 zn叩me XHTML: <h1>Vzh哲ru dol哲</h1> CSS: h1 { color: blue; } V箪sledek vprohl鱈転ei: Vzh哲ru dol哲
- 5. Ti zp哲soby zapisov叩n鱈 CSS P鱈mo ve znace 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="stylesheet" type="text/css" href=screen.css">
- 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 - mn鱈me pednastaven箪 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; tun辿 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叩meky V CSS souboru: h1 { margin: 1em; vnj邸鱈 okraj padding: 1em; vnitn鱈 okraj border: 1px solid red; r叩meek }
- 11. Okraje a r叩meky Prvek dokumentu Vnitn鱈 okraj = padding R叩meek = border Vnj邸鱈 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 Atribut id V tle dokumentu jenom jednou XHTML: <p id=paticka>Copyright 2006</p> CSS: #paticka { color: grey }
- 14. Odli邸en鱈 prvk哲 dokumentu: t鱈dy Atribut class V tle dokumentu m哲転e b箪t v鱈cekr叩t XHTML: <p class=cervenyText>Bla bla</p> CSS: .cervenyText { color: red; }
- 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. Dkuji za pozornost www.vzhurudolu.cz/xhtml-css