TNPW 1

1. Cvičení 6 Kaskádové styly Technologie pro publikování na webu 1 TNPW 1

2. Kaskádové styly • Slouží k definování formy dokumentu • Oddělují formu od obsahu • Umožňují znovupoužitelnost definovaných stylů • Vytváří podmínky pro snadnou údržbu kódu

3. Napojení CSS na stránku • Inline stylování elementu • Žádná znovupoužitelnost, platí pro všechna média • Deklarace stylu v tagu <style> • Styly jsou znovupoužitelné, je možno rozlišovat média • Deklarece stylů v externím souboru • Nejčistčí způsob, nemísí se XHTML a deklarace stylů, ext. soubor lze nalinkovat do jiné stránky. <pstyle="color:black; font-weight:bold;">Text</p> • <styletype="text/css"media="screen"> p {color: black; font-family: Tahoma;} </style> <linkrel="stylesheet"type="text/css"href="style.css"media="screen"/>

4. Příklad stylování odstavce Selektor p { font-family: Verdana; font-size: 12px; color: red; } Seznam definic pokud je selektor shodný s názvem XHTML elementu, je tento formát nastaven pro všechny elementy daného názvu na stránce. Vazba přes název elementu je vhodná v případě záměru stylovat stejně všechny tyto elementy. Zmíněnou deklarací je řečeno: Všechny odstavce budou psány písmem Verdana o velikosti 12px a budou červené.

5. Příklad stylování vnořených elementů ul { background-color: black; } ulli { list-style-type: square; color: white; } ulliulli { text-decoration: underline; }

6. Příklad definice třídy (pro textbox) .muj_textbox { color: Black; background-color: White; font-size: 0.5em; font-weight: bold; border: 1pxsolidblack; /* poznamka - mistosdruzene definice lze definovat takto */ border-width: 1px; border-style: solid; border-color: Black; } třídu lze v XHTML propojit s elementem přes atribut class=“muj_textbox“. Tuto třídu lze samozřejmě propojit i s jiným elementem, než je textbox (například s tlačítkem, odstavcem…). Obecně ale není cílem psát třídy, které jsou využitelné pro více elemrntů.

7. Příklad třídy definované speciálně pro odstavec p.mujodstavec { width: 60%; /* sirka 60% rodic. prvku */ height: auto; /* automatickavyska */ background-color: Black; /* barva pozadi */ color: White; /* barva textu */ text-align: center; /* zarovnani textu */ font-family: Verdana; /* rodina pisem */ border: 1pxsolidred; /* ohraniceni - sdruzena definice */ } Pro rozšíření obzorů o existujících vlastnostech doporučuji navštívit web http://www.w3schools.com/css/

8. Bodovaný úkol – max. 2 body • XHTML 1.0 Strict validní stránka, ve které bude • alespoň u jednoho elementu použito inline stylování v atributu style=“…“ • v hlavičce XHTML stránky bude element <style>, ve kterém bude deklarován styl jednoho elementu/třídy/id • Do dokumentu bude napojen externí soubor stylů, který bude obsahovat • min. 1 def. stylu pro element • min. 1 def. obecné třídy, min. 1 def. třídy pro určitý el. • min. 1 def. id • min. 1 def. vnořeného elementu • definované styly v ext. souboru budou náležitě spojené s elementy na stránce.

9. Bodovaný úkol - doporučení • Na již zmíněném webu lze css vlastnosti dobře odzkoušet • Jako vnořené elementy lze použít například vnořené seznamy, ať už číslované nebo nečíslované, nebo obrázek uvnitř odkazu. V každém případě musí vnořený element vypadat jinak, než nevnořený – v tomto případě. Toto nezapomeňte vyzkoušet !!