CSS Selektory tříd a ID, dědičnost, další vlastnosti Internetové publikování 1 Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace stylu pro každý element zvlášť Definice stylu v hlavičce dokumentu Připojení stylu z externího souboru 1
Styl v hlavičce HTML Definice stylu pro jediný HTML soubor Vlastní definice se uzavírá do komentářů, aby se zamezilo intrepretaci ve starších prohlížečích <head> <style type="text/css"> <!-- definice stylu --> </style> </head> Styl v externím souboru Umožňuje využití jedné definice stylu mnoha HTML dokumenty <head> <link href="jméno_souboru_se_stylem.css" type="text/css" rel="stylesheet"> </head> 2
Styl u každého elementu Atribut style Odporuje filozofii CSS, používat vyjímečně <p style="definice stylu">tento jediný odstavec bude formátován podle definice.</p> Opakování - struktura definice CSS selektor { vlastnost1: hodnota; vlastnost2: hodnota; vlastnostn: hodnota Selektor Doposud jsme znali pouze typový selektor odpovídá názvu elementu platí pro všechny elementy daného typu 3
Seskupování selektorů Selektory se stejnými deklaracemi je možné sloučit, takže následující zápis h1 { font-family: sans-serif h2 { font-family: sans-serif h3 { font-family: sans-serif je ekvivalentní zápisu: h1, h2, h3 { font-family: sans-serif POZOR neplést z dalšími typy selektorů při seskupování je oddělovačem vždy čárka Další selektory Univerzální selektor * - týká se každého elementu v dokumentu Např: * {color: blue Všechny elementy budou mít nastaveno modré písmo 4
Další selektory - třída Třída = podskupina elementů V HTML definována atributem class Např. <p class="modry">modry text</p> Definice v CSS pro třídu: (element).třída { vlastnost1: hodnota; vlastnost2: hodnota; vlastnostn: hodnota.modry { color: blue; Příslušnost k více třídám Jednotlivé třídy odděleny mezerami Např. <p class="modry inverzni">modry text</p> Definice v CSS pro třídu: p.modry {color: blue; p.inverzni {background-color: blue; Selektor pro element patřící do obou tříd p.modry.inverzni {background-color: blue; color: yellow; 5
Další selektory id elementu id = identifikátor jednoho konkrétního elementu na stránce V HTML definován atributem id Např. <p id="1odstavec">modry text</p> Definice v CSS pro id: #id { vlastnost1: hodnota; vlastnost2: hodnota; vlastnostn: hodnota #1odstavec { color: blue; Pseudotřídy Odkazy a:link dosud nenavštívený odkaz a:visited navštívený odkaz a:hover na odkaz se ukazuje myší a:active link je aktivní (vybrán klávesou TAB) :firstchild Element, který je prvním potomkem jiného elementu 6
Dědění vlastností <head> <style type="text/css"> p { color: red </style> </head> <body> <p>červený <em>text<em></p> </body> I slovo 'text' v příkladě se zobrazí červeně, protože tuto vlastnost zdědil od svého rodičovského elementu Priorita dědění vlastností - Kaskáda Definuje-li více selektorů stejnou vlastnost různě a týkajíli se stejného objektu má prioritu selektor s nejvyšší specifičností Specifičnost klesá v řadě 1. vlastnosti definované v atributu style="" 2. podle počtu ID atributů (#) 3. podle počtu jiných atributů (class) a pseudotříd 4. podle počtu názvů elementů 7
Vlastnosti seznamů Vlastnost Popis Hodnoty list-style-image nastaví zvolený obrázek jako odrážku seznamu none url list-style-position poloha odrážky inside outside list-style-type typ odrážky-číslování none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana Vlastnosti textu Vlastnost Popis Hodnoty letter-spacing Mezery mezi písmeny normal length text-align Zarovnání left right center justify text-decoration Ozdoba písma none underline overline line-through blink text-indent Odsazení 1. řádky length % text-transform Transformace velikosti písma none capitalize uppercase lowercase white-space Interpretace mezer a ostatních "bílých" znaků normal pre nowrap word-spacing Velikost mezer mezi slovy normal length 8