Styly CSS VýhodyDruhyZápis. Výhody CSS oddělení struktury od formátování oddělení struktury od formátování přilinkováním souboru styl.css lze formátovat.

Prezentace na téma: "Styly CSS VýhodyDruhyZápis. Výhody CSS oddělení struktury od formátování oddělení struktury od formátování přilinkováním souboru styl.css lze formátovat."— Transkript prezentace:

1 Styly CSS VýhodyDruhyZápis

2 Výhody CSS oddělení struktury od formátování oddělení struktury od formátování přilinkováním souboru styl.css lze formátovat celý web najednou přilinkováním souboru styl.css lze formátovat celý web najednou lze dosáhnout dynamiky pohybu, zvláštních efektů lze dosáhnout dynamiky pohybu, zvláštních efektů bloky textu, obrázků, odkazů atd. lze jednoduše umístit do určité pozice bloky textu, obrázků, odkazů atd. lze jednoduše umístit do určité pozice

3 Druhy selektorů nastavení vlastností tagů nastavení vlastností tagů nastavení vlastností celých skupin tagů určením třídy (class) – společným pojmenováním nastavení vlastností celých skupin tagů určením třídy (class) – společným pojmenováním určení vlastností identifikátorem (jedinečným pojmenováním) určení vlastností identifikátorem (jedinečným pojmenováním)

4 Vlastnosti tagu XHTML: XHTML:<span> Stránka se stínovaným nadpisem Stránka se stínovaným nadpisem CSS: CSS: span { font-weight: bold; }

5 Vlastnosti třídy XHTML XHTML: XHTML: Popisek obrázku Popisek obrázku

6 Vlastnosti třídy CSS div.obrpopis { div.obrpopis { float: right; width: 25%; border: thin silver solid; margin: 0.5em; padding: 0.5em; background-color: Silver; }

7 Vlastnosti identifikátoru XHTML Stránka se stínovaným nadpisem Stránka se stínovaným nadpisem Stránka se stínovaným nadpisem Stránka se stínovaným nadpisem</span>

8 Vlastnosti identifikátoru CSS #titulek { font: bold 45px serif, 'Times New Roman', Georgia, Times; font: bold 45px serif, 'Times New Roman', Georgia, Times; position: relative; position: relative; top: 5px; top: 5px; left: 5px; left: 5px;} #text{ #text{ color: Blue; position: relative; z-index: 2; top: 0; left: 0; } #stin{ #stin{ color: #999999; color: #999999; position: absolute; position: absolute; z-index: 1; z-index: 1; top: 3px; top: 3px; left: 3px; } left: 3px; }

9 Vlastnosti CSS pseudotřídy a:hover { a:hover { background-color: Navy; color: White; }