CSS – Dědictví aneb…

Dnes se budeme věnovat kaskádovým stylům a dědičnosti.
V minulém díle jsme si popsali historii kaskádových definic stylů, základy použití a způsoby začlenění CSS do webovských stránek. Dnes náš rychlokurz pokračuje - na příkladech si ukážeme další vlastnosti a možnosti použití kaskádových definic stylů.

Jako selektor můžeme použít buďto název HTML elementu (P, A, CODE…), tento název následovaný třídou (A.dulezite, P.zvyraznit…), pouze třídu (.poznamka, .dulezite) a nebo tzv. pseudotřídu (A:link, A:active, A:visited, A:hover). Tyto pseudotřídy znamenají definici odkaz, aktivní odkaz, navštívený odkaz a odkaz, nad kterým je umístěn ukazatel myši. Definice pak mohou vypadat následovně:

P { color : darkblue }
  P.zvyraznit { font-weight : bold }
  .poznamka { font-style : italic}
  A:hover { color : red
   background-color : gold }
  
Pokud bychom pak chtěli nějaký odstavec označit jako poznámku (text bude psaný kurzívou), stačí napsat:

Toto je text poznamky


  
Abychom si ušetřili při psaní CSS práci, můžeme použít tzv. slučování definic. Můžeme tak například zařídit, aby text odstavce uvozeného tagem <P> a zároveň například seznam <UL> byly centrované:

P, UL { text-align : center }
  
Další z vlastností kaskádových stylů je dědění vlastností. Pokud chceme určitý styl aplikovat na celý dokument, můžeme k tomu použít selektor BODY:

BODY { color : blue;
   font-size : 12pt}
  
V tomto případě všechny elementy zdědí barvu a text zdědí velikost 12 bodů. Pokud bychom chtěli, aby například zvýrazněný text byl větší než zděděných 12 bodů, museli bychom tuto vlastnost definovat pomocí pravidla:

EM { font-size : 14pt }
  
V případě, že chceme odlišit určitý element pouze pokud je například součástí odstavce nebo tabulky, můžeme k tomu použít tzv. kontextových selektorů. Na rozdíl od sloučených definic nejsou selektory odděleny čárkou. Následující definice způsobí, že pokud bude text uvozený tagem <CODE> součástí tabulky, bude zobrazen tučným písmem:

TD CODE { font-weight : bold }
  
Kontextové selektory můžeme s výhodou použít k tvorbě vnořených seznamů. Stačí definovat toto pravidlo:

LI UL, LI OL { font-size : smaller }
  
Tak a to je pro dnes vše přátelé. V příštím díle si povíme něco o tom, kterak měnit vlastnosti textu – jeho barvu, velikost fontu, zarovnání a další. Také nakousneme ožehavé téma kompatibility prohlížečů se standardem CSS level 1.


  
Váš názor | Oracle si drží rekordní růst, u zisku dokonce větší než Microsoft

Témata článku: Software, Programování, Ožehavé téma, CSS, Element, Pre

Určitě si přečtěte


Aktuální číslo časopisu Computer

Zachraňte nefunkční Windows

Jak nakupovat a prodávat kryptoměny

Otestovali jsme konvertibilní notebooky

Velký test 14 herních myší