CSS

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

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!

Co například umí CSS? Když chcete změnit barvu písma a prohodit sloupce v layoutu vašeho webu: V HTML: 1 hodina V XHTML/CSS: 5 minut

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> h1 { color: blue } </style> ... <h1>Vzhůru dolů</h1> V externím CSS souboru: <link rel="stylesheet" type="text/css" href=“screen.css">

Vzhůru do praxe: definujeme barvu a pozadí V CSS souboru: h1 { background: blue; color: white; } V XHTML souboru: <h1>Vzhůru dolů</h1>

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 }

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 podtržení color: red; červená barva } a:hover { po najetí myši text-decoration: underline; se odkaz podtrhne }

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 }

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: font-size: 50%;

Odlišení prvků dokumentu: třídy Atribut „class“ V těle dokumentu může být vícekrát XHTML: <p class=“cervenyText“>Bla bla</p> CSS: .cervenyText { color: red; }

Sdružování tříd CSS: .cervenyText { color: red; } .velkePismo { font-size: 2em; } XHTML: <p class=“cervenyText velkePismo“> Vzhůru dolů </p>

Sdružování tříd CSS: .velkePismo { font-size: 2em; } .velkePismo.sedaBarva { color: grey; } XHTML: <p class=„velkePismo sedaBarva“> Vzhůru dolů </p>

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

CSS

More Related Content

Viewers also liked (6)

More from Martin Michálek (20)

CSS