Jak funguje CSS

Cílem CSS je definovat, jak má být obsah WWW stránky prezentován. Největší pozornost je věnována vizuální prezentaci, nicméně CSS obsahuje například i nástroje na ovlivňování hlasového výstupu.

Základem CSS je přibližně stovka vlastností, jako například barva, velikost textu či rozměry mezer. Ty jsou přiřazeny každému prvku stránky a jejich hodnoty určují jeho prezentaci. Sortiment vlastností je pevně dán definicí CSS a klient by je měl interpretovat tak, jak CSS předepisuje.

Stylový předpis

K nastavení hodnot jednotlivých vlastností slouží stylový předpis, nazývaný též CSS definice. Je složen z pravidel, jež mají tvar:

selektor {
     vlastnost: hodnota;
     vlastnost: hodnota;
     ...
}

Selektor rozhoduje, na které prvky stránky se pravidlo vztahuje. Těm, jež mu vyhovují, budou nastaveny hodnoty vlastností podle obsahu (těla) pravidla. Předpis může obsahovat pravidel co hrdlo ráčí. Například tento předpis:

h1  {   color: red;
        font-size: xx-large;    }
h2  {   color: red;     }

nastaví nadpisům <h1> a <h2> červenou barvu, pro <h1> navíc nastaví co největší písmo.

Vazba na stránku

Stylový předpis lze stránce a jejím prvkům přiřadit třemi různými způsoby:

Odkazem na externí soubor

Stylový předpis uložíte do samostatného souboru (konvencí je přiřadit mu příponu .css) a na něj se odkázat z kódu stránky. Zajistí to následující prvek:

<link rel="stylesheet" href="adresa">

Prvek <link> obecně slouží ke vkládání odkazů na materiál, který nějak souvisí s dotyčnou stránkou. Atributem rel určíte, jaký je vztah tohoto materiálu ke stránce – pro stylový předpis je povinnou hodnotou stylesheet. Atribut href obsahuje adresu (URL) souboru. Je-li relativní, stanoví se vůči URL stránky.

Prvek <link> musí být uveden v záhlaví stránky, tedy v těle <head>. Například:

<!DOCTYPE html>
<html>
<head>
  <title>Jak funguje CSS</title>
  <link rel="stylesheet" href="/css/tmavy.css">
</head>
<body>
...

Prvkem style

Prostřednictvím prvku <style> můžete stylový předpis vložit přímo do stránky. Prvek se normálně uvádí v hlavičce a jeho tělem jsou přímo jednotlivá pravidla. Pokud mu ovšem přidáte atribut scoped (nový v HTML5), může se vyskytnout kdekoli v dokumentu. V tom případě se vztahuje pouze na prvek, v němž je obsažen, a jeho potomky. Například

<!DOCTYPE html>
<html>
<head>
  <title>Jak funguje CSS</title>
  <style>
    body { color: white;
           background-color: black;
  </style>
</head>
<body>
...
<p>
  <style scoped>
    p { color: green; }
  </style>
  Tento odstavec bude zelený.
  I jeho <em>potomci</em>.
</p>
<p>A tenhle už ne.</p>

Atributem style

Každému prvku na stránce můžete přiřadit atribut style a v jeho hodnotě předepsat hodnoty jednotlivých vlastností CSS. Tentokrát se nezapisují celá pravidla, jen jejich těla. Selektor by neměl smysl – jelikož stylový předpis je atributem konkrétního prvku, je jasné, na který prvek má být uplatněn. Například:

<p style="background-color: yellow">Pozor! ...</p>

Co použít

Která z uvedených tří alternativ je nejlepší? Obecně řečeno ta první.

Hlavní výhoda vložení stylového předpisu odkazem na externí soubor spočívá v tom, že na tentýž soubor se může odkazovat celá řada stránek. Jelikož autor zpravidla usiluje o homogenní vzhled celé prezentace, budou pravděpodobně všechny její stránky odkazovat na společný stylový předpis.

To přináší jednak úsporu přenosového pásma (jakmile jej WWW prohlížeč načte pro některou ze stránek, uloží si jej do vyrovnávací paměti a pro ostatní rovnou použije, aniž by jej znovu přenášel). Hlavní výhodou ale je konzistentní vzhled (všechny stránky používají stejný styl) a jeho snadná změna. Jakmile upravíte společný stylový předpis, změní se vzhled všech stránek, které jej používají. To vám radikálně usnadní jakékoli úpravy vzhledu WWW prezetace, jež dříve vyžadovaly zásahy do všech zúčastněných stránek a byly proto noční můrou všech autorů. Dnes jen sáhnete do stylového předpisu a vše je rázem hotovo.

Připojení prvkem <style> či atributem style má smysl použít, pokud potřebujete na dané konkrétní stráce udělat určitou úpravu, která je unikátní a zaručeně ji nebudete potřebovat jinde. Například já jsem při demonstraci průhlednosti potřeboval umístit obrázky na konkrétní světlé a tmavé pozadí. Nikde jinde nic podobného nepoužívám, takže jsem se rozhodl nezatahovat příslušné definice do společného stylového předpisu, ale řešit je lokálně. Konkrétně atributem style.

Rozšiřující informace

Média pro CSS

zpět: vytváření WWW stránek