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, Element, Ožehavé téma, CSS level, CSS


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

Nová americká jaderná puma změní strategii boje

Nová americká jaderná puma změní strategii boje

** Bombardér Northrop Grumman B-2 Spirit amerického letectva nedávno svrhl jadernou pumu ** Šlo o test nové varianty pumy B61-12 ** Ta by měla mít hlavice schopné explodovat se silou 0,3 až 50 kilotun

Stanislav Mihulka | 58

Alza si za osobní odběr účtuje už 45 Kč. Když zaplatíte předem, dostanete slevu

Alza si za osobní odběr účtuje už 45 Kč. Když zaplatíte předem, dostanete slevu

** Osobní odběr v Alze vyjde na 45 Kč ** Když zaplatíte kartou předem, dostanete slevu 30 Kč ** Většina ostatních e-shopů poplatek za osobní odběr nevede

David Polesný | 171

Intel vs. AMD: souboj vícejádrových procesorů začal. AMD zesměšňuje Intel neuvěřitelně nízkou cenou

Intel vs. AMD: souboj vícejádrových procesorů začal. AMD zesměšňuje Intel neuvěřitelně nízkou cenou

** AMD představilo nové levné procesory až s 32jádry ** AMD útočí na serverový i domácí trh Intelu ** Intel nemá konkurenceschopnou nabídku

Karel Javůrek | 85

Modelářský zázrak: Maketa raketoplánu Columbia, která létá jako skutečná raketa

Modelářský zázrak: Maketa raketoplánu Columbia, která létá jako skutečná raketa

** Model raketoplánu Columbia od českého konstruktéra umí i létat ** Obdivuhodný model si vzal 1600 hodin práce ** Podívejte se na fotografie ze stavby a prvního letu

Karel Jeřábek | 20

Osudová havárie Concordu: Před 18 lety přišel konec nadzvukových dopravních letadel

Osudová havárie Concordu: Před 18 lety přišel konec nadzvukových dopravních letadel

** Concorde byl nejrychlejším dopravním letadlem ** Atlantik dokázal přeletět za cca 3 až 3,5 hodiny ** Před osmnácti lety tragická havárie provoz těchto letadel prakticky ukončila

David Polesný, Jiří Černý | 37

Američtí mariňáci si tisknou kasárna z betonu na 3D tiskárně

Američtí mariňáci si tisknou kasárna z betonu na 3D tiskárně

** Americká námořní pěchota nedávno představila 3D tištěná kasárna pro vojáky ** Ty jim tiskne velká 3D tiskárna na beton ** Výsledkem je solidní obytný prostor, který je slušně chráněný před nepřátelskou palbou

Stanislav Mihulka | 18


Aktuální číslo časopisu Computer

Megatest: 13 grafických karet

Srovnání 7 dokovacích stanic s USB-C

Jak na perfektní noční fotografie

Kvalitní zdroje informací pro sebevzdělávání