Vlastní styly

v CSS aneb třídy, identifikátory a složené deklarace

Příklad s podtitulem - Identifikátor - Složené deklarace - Skládání stylů - Pseudoelementy - Shrnující příklad - Více tříd pro jeden prvek - Nejisté znaky - Nové selektory

V HTML existuje několik podporovaných stylů textu (tagů), například nadpisy, seznamy, definice. Jejich zobrazení a formátování se dá ovlivnit pomocí CSS stylů, o tom byly minulé kapitoly. Aby se mohl potenciál kaskádových stylů rozvinout do krajnosti, mohou si tvůrci webových stránek definovat styly vlastní.

Příklad: podtitul

Příkladem vlastního stylu může být podtitul. (Nepatří do nadpisu a přece by měl být formátován odlišně než normální text.) Dá se formátovat přímo, ale aby byl ve všech dokumentech stejný, je dobré nadefinovat jej jako styl. HTML ale nemá pro podtitul žádný tag <podtitul>, a tak si musím pomoci jinak. Vytvořím třídu s názvem podtitul, ve stylopisu mu nadefinuji vlastnosti (třeba tučnost, zarovnání na střed) a u daného textu jenom řeknu, že patří do třídy podtitul.

Jak vypadá stylopis:

<style> .podtitul { text-align: center; font-weight: bold; text-decoration: overline} /* zarovnání na střed, tučné písmo a nadtržení*/ </style>

a potom v těle dokumentu to vypadá takhle:

<p class="podtitul">Text podtitulu</p>

A v prohlížeči potom takhle:

Text podtitulu

Text uvnitř "zaklasovaného" elementu se bude formátovat podle definice ve stylopisu. Ještě je třeba všimnout si tečky na začátku deklarace ve stylopisu. Ta vyjadřuje, že deklarace se nebude týkat html tagu, ale třídy.

Atribut class (třída) se může použít u libovolného elementu (tagu). Symbolicky:

Element se stejnou class se v dokumentu může vyskytovat mnohokrát (na rozdíl od ID -- identifikátoru, o tom později). Potom se tento element zformátuje podle definice.

Takto je možné vytvořit si mnoho vlastních tříd -- stylů. Já mám například kromě podtitulu nadeklarovaný formát poznámek, odkazových lišt a důležitějších odstavců. Je možné toho vymyslet desítky, to se dočtete v kapitole o strukturovaném textu.

Identifikátor

Pro jednoznačný popis nějakého elementu (zejména pro potřeby skriptů) existuje univerzální atribut ID. I jemu se může ve stylopisu přiřadit nějaká deklarace, ale na rozdíl od třídy nezačíná tečkou, ale dvojkřížkem #. V těle dokumentu by se element s jedním identifikátorem měl vyskytovat jenom jednou.

Kdybych v předchozím příkladu použil identifikátoru namísto třídy, deklarace by vypadala takhle:

#podtitul { text-align: center; font-weight: bold; text-decoration: overline}

a v těle by se odstavci přiřadila identifikace atributem id:

<p id="podtitul">Text podtitulu</p>

Identifikátor id se z hlediska CSS chová stejně jako třída class. Rozdíly jsou právě jen ve skriptech a v parsování dokumentu. Osobně identifikátory pro formátování nepoužívám, stačí mi třídy.

Složené deklarace

Hromadná deklarace

Stylopisy umožňují nadeklarovat vlastnosti pro více elementů najednou. Například deklarace

H1, H2, H3 {color: green}

obarví všechny nadpisy první, druhé i třetí úrovně na zeleno. Hromadnou deklaraci používám, pokud zadávám mnoho stejných vlastností pro mnoho elementů. Důležitá je čárka mezi selektory! Kdyby tam nebyla, šlo by o něco jiného, totiž o kontextový selektor.

Kontextová deklarace

Vysvětlím příkladem:

H3 A {font-style: italic}

Tato deklarace by udělala kurzívou všechny odkazy uvnitř nadpisů třetí úrovně (elementy A uvnitř elementu H3).

<h3>Obyčejný text nadpisu s <a>odkazem kurzívou</a></h3>
<p>Obyčejný odstavec s <a>obyčejným odkazem</a></p>

Odkazy v obyčejných odstavcích to nijak neovlivní, stejně tak obyčejný text trojkového nadpisu.

Zápisy selektorů kontextového zápisu jsou odděleny pouze mezerou.

Osobně tuto vlastnost považuji za nejfantastičtější a výborně použitelnou vlastnost CSS. Použil jsem ji třeba v příkladu o různých barvách odkazů.

Skládání stylů

Díky CSS se na jeden element může navrstvit mnoho různých deklarací (proto styly kaskádové), někdy i protichůdných. Jak se rozhodne, která deklarace převládne? Zpravidla ta poslední.

Když chci, aby nějaká dřívější deklarace převládla, napíšu do deklarace řetězec "! important". Taková deklarace potom nebude přehlušena žádnou pozdější. (Tuto vlastnost doporučuji používat s rozvahou, protože způsobuje zmatek při pozdějším ladění designu.)

Pseudoelementy

Ve specifikaci CSS1 se vyskytují pseudoelementy :first-line a :first-letter. Znamenají první řádek a první písmeno. Například zápis:

p:first-line {color: blue}

p:first-letter {font-size: 200%}

by měl způsobit, že odstavce budou mít první řádek modrý a první písmeno dvakrát větší.

Z prohlížečů to podporují Mozilla 5, Internet Explorer 5.5 (nikoliv IE 5.0) a IE 6 (myslím ale, že Internet Explorer to umí jenom u tagu <p>).

Shrnující příklad

Ve stylopisu (v hlavičce či v externím souboru) se mohou vyskytovat i takovéhle věci:

Doufám, že význam je zřejmý. Všechno to funguje. Důležité je v příkladu snad jen to, že se může jeden element deklarovat vícekrát a že kontextová deklarace se může kombinovat s třídami a pseudotřídami.

Více tříd pro jeden prvek

Když potřebuji, aby nějaký prvek stránky přebral formátování dvou tříd, pak je prostě stačí uvést obě v atributu class a oddělit je mezerou.

Styl může například vypadat takto:

Prvek dostane obě třídy:

<div class="zlutepozadi vlevo">
obsah prvku
</div>

Obsah prvku bude odplavaný doleva a bude mít žluté pozadí. Vezme prostě vlastnosti obou tříd. Ve většině případů je samozřejmě lepší spojit deklaraci do jedné třídy, ale vyskytují se stránky, kde ostatní prvky chcete oclassovat odděleně.

Nejisté znaky

Ve jménech tříd a identifikátorů se vyvarujte používání podtržítka _ (a raději i češtiny a jiných pochybných znaků, ale mínus je v pohodě). Internet Explorer 5 a novější prohlížeče podtržítko v názvu třídy nebo ID snesou a správně zobrazí, ovšem starší prohlížeče ne.

Když už píšu o podtržítku -- pokud podtržítko napíšete před název existující vlastnosti, pochopí tu vlastnost pouze Internet Explorer (libovolné verze). Tomu se říká podtržítkový hack. Ovšem to se netýká tříd.

Název třídy ani identifikátoru by podle specifikace neměl začínat číslicí, tedy například třída .3cunici je špatně. Internet Explorer 6 takovou třídu nebo identifikátor umí použít, ale pouze v případě, kdy je stránka v quirk módu. Standardní mód Exploreru 6, Firefox, Opera ani Chrome takovou třídu nepoužijí a chovají se, jako kdyby neexistovala. V tuto chvíli nevím, jak se chová quirk mód IE 7 a 8.

Nové selektory

Kromě výše popsaných selektorů existují selektory, které dokážou

vybrat všechny prvky (tagy) na stránce (selektor *)
vybrat prvek podle přítomnosti nebo hodnoty jeho atributu (selektor [])
vybrat prvek podle toho, jestli je přímým potomkem jiného prvku (selektor >)
nebo podle toho, že následuje za jiným prvkem (selektor +).

Popisuju je stručně ve spodní tabulce v přehledu CSS hodnot, můžete s tím zkoušet experimentovat.

Je ale potřeba zdůraznit, že tyhle nové selektory nefungují ve všech verzích Internet Exploreru, takže třeba já se jim snažím zatím vyhýbat (to "zatím" platí zatím i pro rok 2010).

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně