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 Další článek: Oracle si drží rekordní růst, u zisku dokonce větší než Microsoft

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


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

Nechcete platit za Total Commander? Těmito bezplatnými programy ho můžete nahradit

Nechcete platit za Total Commander? Těmito bezplatnými programy ho můžete nahradit

** Total Commander je na Windows takřka legendou ** Licence však stojí více než tisíc korun ** Našli jsme pro vás deset alternativ dostupných zdarma

Karel Kilián | 133

Šmírovačka kamerami Googlu: Koukněte se, co nového zachytily na Street View

Šmírovačka kamerami Googlu: Koukněte se, co nového zachytily na Street View

Google stále fotí celý svět do své služby Street View. A novodobou zábavou je hledat v mapách Googlu vtipné záběry. Podívejte se na výběr nejlepších!

redakce | 43

Jak dopadl velký den Applu s náloží novinek: Sledujte, co letos připravil

Jak dopadl velký den Applu s náloží novinek: Sledujte, co letos připravil

** Apple večer představil novinky ** Ukáže nové operační systémy, ale čekala se i nová zařízení ** Začíná vývojářská konference Applu WWDC 2018

Karel Javůrek | 87

PrusaLab a FutLab: Praha se dočkala špičkových komunitních dílen pro hackery

PrusaLab a FutLab: Praha se dočkala špičkových komunitních dílen pro hackery

** Nejprve svoji velkou dílnu otevřelo Brno ** Letos se přidala i Praha ** Nabízí malé 3D tiskárny i velké průmyslové stroje

Jakub Čížek | 11


Aktuální číslo časopisu Computer

Kdy necháme řídit chytrá auta?

6 Wi-Fi Mesh systémů ve velkém testu

Srovnali jsme 7 sportovních kamer

Znáte pravidla pro létání s drony?