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

Prezentace na téma: "1 Kurz XHTML a CSS Část 2: Popis vzhledu dokumentu za pomocí CSS - kaskádových stylů."— Transkript prezentace:

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? 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 3 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

4 4 Příklad, který už známe XHTML: Vzhůru dolů 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: Vzhůru dolů Stylopisem v XHTML: h1 { color: blue }... Vzhůru dolů V externím CSS souboru:

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

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  Atribut „id“  V těle dokumentu jenom jednou XHTML: Copyright 2006 CSS: #paticka { color: grey }

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

15 15 Sdružování tříd CSS:.cervenyText { color: red; }.velkePismo { font-size: 2em; } XHTML: Vzhůru dolů

16 16 Sdružování tříd CSS:.velkePismo { font-size: 2em; }.velkePismo.sedaBarva { color: grey; } XHTML: Vzhůru dolů

17 17 Kaskádování CSS: h1 { font-size: 2em; }.sedaBarva { color: grey; } XHTML: Vzhůru dolů

18 18 Děkuji za pozornost www.vzhurudolu.cz/xhtml-css