Selektory 1 1. Selektor elementu Deklarované styly budou použité při každém vyskytování elementu v dokumentu. Selektor elementu se obvykle používá pro.

Prezentace na téma: "Selektory 1 1. Selektor elementu Deklarované styly budou použité při každém vyskytování elementu v dokumentu. Selektor elementu se obvykle používá pro."— Transkript prezentace:

1 Selektory 1 1. Selektor elementu Deklarované styly budou použité při každém vyskytování elementu v dokumentu. Selektor elementu se obvykle používá pro nastavení základních stylů, které budou nastavené v celém dokumentu. Např. následující pravidlo může být použito pro nastavení stylu všech odstavců dokumentu. p { font-size:24px; color:blue; } 2. Selektor třídy V případě, když potřebujeme použít různé styly na identické elementy (např. ), které se vyskytují v různých místech dokumentu, můžeme vytvořit třídu (class)..nazevtridy Syntaxe:.nazevtridy (například.mt) Teď můžeme přidat libovolný element do této třídy. Např. …… ….. …. Pro třídu mt definujeme styly:.mt {color:blue; font-size:28px; } které budou použité pro všechny elementy, které patří do třídy. mt Třída mt

2 Selektory 2 3. Slučování (combining) selektoru elementu s selektorem třídy. Např. a.mt { font-size: 30px;} kombinovaný selektor vybere odkazy (element ) pouze ze třídy (.mt) a aplikuje definované styly pouze na vybrané odkazy. Na ostatní odkazy, které jsou v dokumentu, styly nebudou aplikované. Příklad: Odstavec ………….. odkaz ………….. Odstavec ………….. odkaz ………….. Obvykle kombinovaný selektor se používá, když chceme pro jeden z elementů, který patří do třídy, změnit nebo přidat styl..mt { font-size:40px; color:red;} a.mt { font-size:90px; color:green;} Odstavec Odkaz Odstavec Odkaz

3 Selektory 3 4. ID selektor Používá se pro výběr jednoho konkrétního elementu, na který budou aplikované definované styly. atribut ID Nejdříve přidáme atribut ID do elementu, na který chceme aplikovat styly. - hodnota atributu ID musí být unikátní vzhledem k celému dokumentu. Text definice stylu je následující: #unik {color:red;} 5. Selektory potomků Předpokládáme, že dokument je rozdělený na časti (např. 3 časti) a jedná z častí má několik odstavců. Potřebujeme nastavit styly pro všechny odstavce této časti. Jsou dvě možnosti: 1. Ke každému odstavci, který patří do této časti, můžeme přidat atribut class. 2. Je možné umístit tuto část do kontejneru i přidat pouze jedenkrát atribut class do elementu. Odstavec Definice stylů: p {color:blue;}.newstyl p {color:red;} Pro odstavci v ostatních častí dokumentu

4 Selektory 4 6. Selektory přímých potomků Příklad: Odstavec Ostavec Odstavec Definice stylů: p { color:blue;}.one>p {color:red;} 7. Selektory sousedního elementu (adjancent selectors) Selektor vybere pouze element, který je sousedící s určitým elementem. Příklad: Nazev Odstavec Pouze první odstavec bude mít červenou barvu. Přímé potomky Potomky (descendant) Definice stylů: p { color: black;} h1+p { color: red;}

5 Selektory 5 8. Selektory pseudo-třídy pro odkazy a:link { ….} a:visited { ….} a:hover { ….} a:active { ….} Tento typ selektoru je určen pro prezentaci stavu cílového elementu. Pořadí selektorů pseudo-třídy je důležité. 9. Selektor pseudo-třídy pro první dítě :first-child Na rozdíl od selektoru sousedního elementu, selektor pseudo-třídy pro první dítě vybírá element jen když element je prvním dítětem svého rodíce. Na rozdíl od selektoru přímých potomků, selektor pseudo-třídy pro první dítě vybírá jenom jedno dítě (konkrétně, první dítě). Definice stylů:.myclass p:first-child Dynamické selektory Statické selektory

6 Selektory 6 10. Selektor pseudo-třídy (:hover) Pseudo-třída :hover může být použitá nejenom pro odkazy (element ) ale i pro jiné elementy. Např. h1:hover {color:red;} 11. Univerzální Selektor ( * ) Např. pro odstranění implicitního padding a všech margings * { maging: 0; padding: 0; } Technika se jmenuje jako globální znovunastavení bílých (nebo prázdných míst). 12. Pseudo-třídy pro text. Např. p:first-line p:first-letter