CSS: Prvek a atribut style

Nyní se podíváme na prvek <style>:

<style type="text/css">
.jméno_třídy { deklarace }
#jméno_identifikátoru { deklarace }
jméno_tagu { deklarace }
</style>

V praxi to může vypadat třeba takto:

<style type="text/css">
.modra
{color: blue}
#zeleny
{color: green;
font-size: 11px}
input {color: red }
</style>

Tímto jsme definovali třídu modra, identifikátor modry a tag input. Navíc u většíny prvků můžeme definovat parametr style:

<input style="color: green; font size: 11px">

Třídy - class

Třídy se definují v tagu <style> takto:

.název_třídy { deklarace }

Chceme-li potom třídu použít uěláme to pomocí atributu class jehož parametrem je název třídy:

<input class="název_třídy">

Tím předáme deklaraci třídy danému tagu

Identifikátory - id

Mají stejné využití jako třídy, ale užívají se spíše ve spojení s JavaScriptem, kde se na stránce vyskytuje pouze jeden identifikátor, jinak skript funguje chybně a nebo nefunguje - ID exituje na stránce pouze jednou.
Deklarace identifikátoru:

#název_identifikátoru { deklarace }

odkaz na identifikátor:

<input id="název_identifiktoru">

Selektory

Jak jsem již řekl můžete definovat styl jednotlivých tagů tag { deklarace }:

h1 {color: blue}

Nadpisy budou nyní vždy modré. Důležité je tag zapsat bez spičatých závorek!! Také můžeme deklarovat styl hned několika prvků.

 
h1, h2, h3 {color: blue}

Nebo podle pořadí tagů

h1 strong {color: blue}

Pokud použijete v nadpisu první úrovně prvek <strong>, formátovaný text bude modrý

A:link { styl nenavštíveného odkazu }
A:visited { styl navštíveného odkazu }
A:active { styl aktivního odkazu }
A:hover { styl odkazu po přejetí myši }
P:first-line { styl prvního řádku odstavce }

Dohromady

Nakonec můžete použít třídu, identifikátor a selektor dohromady

A#idx.classx:hover {color: red}
A.classx:hover#idx { color: red}
A:hover.classx#idx { color: red} 

Všechny řádky jsou naprosto ekvivalentní a styl se bude aplikovat pouze na takto upraven odkaz

<a href="nekam.html" class="classx" id="idx">Odkaz</a>

Soubory *.css

Tak jako skripty v JavaScriptu, tak i styly můžete mít uložené mimo stránku - externě. Což je nejednodušší možnost aplikaci stylů na všechny stránky webu.

Soubor stylů ma koncovku css a odvolat se na něj můžeme v hlavičce stránky pomocí prvku

<link href="soubor.css" rel="stylesheet" type="text/css" />

Samotný soubor obsahuje jen obsah, který by normálně byl mezi tagy <style> a </style>

Navigace