CSS – selektory Mgr. Lenka Švancarová. CSS – selektory Hromadná deklarace slouží ke zkrácení zápisu.  Místo h1 { color: #996666; background-color: rgb(255,255,102);}

Prezentace na téma: "CSS – selektory Mgr. Lenka Švancarová. CSS – selektory Hromadná deklarace slouží ke zkrácení zápisu.  Místo h1 { color: #996666; background-color: rgb(255,255,102);}"— Transkript prezentace:

1 CSS – selektory Mgr. Lenka Švancarová

2 CSS – selektory Hromadná deklarace slouží ke zkrácení zápisu.  Místo h1 { color: #996666; background-color: rgb(255,255,102);} h2 { color: #996666; } lze psát h1, h2 { color: #996666; } h1 { background-color: rgb(255,255,102); }

3 CSS – selektor následníka … li a {font-weight: bold} normální text seznamu a tučný odkaz na seznam Odkaz na centrum není tučný.

4 CSS – selektory Selektor následníka – definice se uplatní u poslední uvedené značky (z2) v případě, že se vyskytuje uvnitř předchozí značky (z1).  z1 z2 { format_dle_css }  Lze vnořovat i mnohonásobně: z1 z2 z3{ format_dle_css } Termín následník označuje prvek jakkoli hluboko uvnitř předka. Nemusí tedy jít o přímého potomka.

5 CSS – selektory Selektor potomka se váže k prvku, který je přímým potomkem (bezprostředním následníkem) jiného prvku.  z1 > z2 { format_dle_css }  body > p {background-color: rgb(255,255,102);} podbarví odstavce, které jsou přímo v body. Např. na odstavec v tabulce se definice nevztahuje, protože ten je potomek buňky tabulky. Pozn.: body p {background-color: rgb(255,255,102);} se vztahuje ke všem odstavcům, protože jsou následníci body.

6 CSS – selektor sousedních sourozenců … h1 + p {font-weight: bold} Nadpis1 a bezprostředně za ním Tučný odstavec Lorem Ipsum Lorem Ipsum

7 CSS – selektory Selektor sousedních sourozenců – definice se uplatní u značky z2 v případě, že značka z2 bezprostředně následuje za značkou z1.  z1 + z2 { format_dle_css }  h1 + h2 { margin-top: -5px;} zmenšuje prázdný prostor oddělující nadpis1 a nadpis2, následují-li v uvedeném pořadí bezprostředně za sebou.