Jako generální sponzor Vám přinášíme Informační server Bechyňska - www.Bechyňsko.cz
Mrkněte na novinku - panoramatické fotografie.
Na zkoušku spuštěn nový design www stránek.
Kaskádové styly - (CSS styly) - deklarace stylů
Kaskádové styly (CSS styly)
Kaskádové styly (Cascading Style Sheets - CSS) je obecně rozšíření základního HTML o možnosti popsání vzhledu textu několika základními parametry běžného DTP. V CSS se stránka skládá ze dvou částí: z vlastního kódu vyjadřujícího její strukturu a z definice stylů.
Definice stylů mohou být do dokumentu začleněny čtyřmi způsoby:
|
1. <PRVEK style=""> |
jako součást každé značky HTML |
| 2. <SPAN> ... </SPAN> | druhou možností je párová značka (ke změně stylu jen několika znaků) |
| 3. <STYLE type="text/css"> ... </STYLE> | třetí možností je definice stylů v záhlaví dokumentu pomocí kontejneru |
| 4. <LINK rel="StyleSheet" href="..." type="text/css"> | poslední možností je uložení definic stylů ve zvláštním samostatném souboru s doporučovanou příponou .CSS; v tomto případě musí být uložení definic ve stránce oznámeno prostřednictvím značky <LINK rel="StyleSheet" href="..." type="text/css"> (aby prohlížecí program poznal, že se jedná o definici stylů) |
Pravidla kaskádování
Vzhledem k tomu, že výše uvedená metoda umožňuje na stejný prvek uplatnit několik pravidel z různých zdrojů jsou stanovena pravidla (pravidla kaskádových stylů), určující které z konfliktních pravidel se uplatní:
- vyšší prioritu lze předepsat direktivou !important (u hodnoty vlastnosti)
- vyhledají se všechny deklarace použitelné pro daný prvek
- deklarace s direktivou !important mají přednost před obyčejnými
- deklarace na stránce mají přednost před deklaracemi v nastavení prohlížeče
- konkrétní deklarace mají přednost před obecnými (konkrétnost se měří podle počtu identifikátorů, tříd a značek v selektoru; nejkonkrétnější jsou identifikátory; mají-li obě deklarace stejný počet identifikátorů, posuzuje se podle tříd, ... atd.
- nerozhodne-li žádné z předchozích kritérií, vítězí pozdější pravidlo
Deklarace stylů
Základem deklarace stylů jsou pravidla tvaru:
| selektor1[,selektor2[....]] { deklarace1[;deklarace2[....]] } | ||||
kde:
Například: H1 { font_family:helvetica; color:red !important } H1, H2, H3, H4, H5 { color:blue } |
Specifikace deklarace stylu:
| Specifikace kontextu | pokud je třeba zapsat deklaraci pro určitý kontext, lze zapsat kontextový selektor uvedením série prvků v pořadí, v němž vytvářejí kontext např.: BLOCQUOTE A { backgroundcolor:#FFFF99 } je pravidlo, které deklaruje hyperlinky (odkazy) se žlutým pozadím uvnitř značky <BLOCQUOTE> |
| Specifikace třídy | .jméno_třídy { deklarace1[;deklarace2[;...]] } pro zápis deklarace pro individuální použití slouží v CSS třídy; jméno třídy se v deklaraci uvádí tečkou a v HTML značce se třída použije prostřednictvím atributu class="jméno_třídy" např. deklaraci třídy .podpis {text-align:right; font-style:italic} lze použít dejme tomu jako <P class="podpis">Jan Novák</P> |
| Specifikace identifikátoru | #identifikátor { deklarace1[;deklarace2[;...]] } k zápisu deklarace pro individuální použití lze použít alternativní způsob pomocí identifikátoru; jméno identifikátoru se v deklaraci uvádí symbolem # a v HTML značce se identifikátor použije prostřednictvím id="identifikátor" např. deklaraci identifikátoru #podpis {text-align:right; font-style:italic} lze použít dejme tomu jako <P id="podpis">Jan Novák</P> |
| Specifikace pseudotřídy | pro značku <A> zavádí CSS následující tři pseudotřídy; jméno pseudotřídy se v deklaraci uvádí dvojtečkou: A:link {color:hodnota} A:visited {color:hodnota} A:active {color:hodnota} |
| Specifikace pseudoprvku | pro značku <P> zavádí CSS dva pseudoprvky; jméno pseudoprvku se v deklaraci uvádí dvojtečkou: P:first-letter P:first-line |
Selektor může být zapsán jako:
|
Jednotky pro uvádění rozměrů a specifikace barvy:
| |||||||||||||||||||||||||||||||||||||||||||||||
Přebráno z: http://broe.hyperlink.cz/ucebnice/L7/index.html