Co je to CSS?

HTML je značkovací jazyk, z toho vyplývá, že jednotlivé značky (tagy) mají vyznačovat význam jednotlivých částí textu. Přesto se v HTML v průběhu let objevilo několik atributů a elementů, které ovlivňují pouze grafický vzhled, a některé z původních tagů určených pro logiské členění textu, je často účelově využíváno k dosažení určitých grafických efektů. Aby se předešlo těmto nešvarům, a bylo možné jednoduše oddělit strukturální formátování textu od grafického formátování, definovalo v roce 1997 koncorsium W3C soubor metod pro grafickou úpravu webových stránek. Tento soubor metod se jmenuje Cascading Style Sheets (CSS), česky "kaskádové styly".

Kaskádové styly umožňují definovat způsob zobrazení (velikost a druh písma, barvu, zarovnání, orámování, pozadí apod.) u každého html elementu. Tento předpis vzhledu není přímo součástí textu stránky, a díky tomu je zápis stránky přehlednější a dobře strukturovaný. Navíc styly umožňují definovat jednotný vzhled konkrétního elementu v celém dokumentu jedním zápisem tzn. nemusí se opakovat u každého elementu. Pokud styl uložíme do externího souboru, může ho využívat více stránek najednou. Definice vzhledu všech stránek je uložena na jednom místě. Při požadavku na změnu vzhledu stránek, stačí upravit styl na jednom místě, a změny se automaticky promítnou do všech stránek.

Jak je běžné ve světě webdesignu, i podpora kaskádových stylů v jednotlivých prohlížečích webových stránek je různá. Jednotlivé prohlížeče mají vlastní výklad či pravidla CSS. V současné době existují dvě verze kaskádových stylů – CSS1 ( http://www.w3.org/TR/REC-CSS1) a CSS2 (http://www.w3.org/TR/REC-CSS2). V našem seriálu se budeme zabývat verzí CSS2.

Princip CSS

selektor {deklarace}

selektor: zde uvedu jen seznam a níže osvětlím jednotlivé druhy.

• selektor typu (type)
• selektor třída (class)
• selektor id
• selektor pseudotřídy (pseudo-class)
• selektor pseudo-elementu (pseudo-element)
• univerzální selektor

• vlastnost:hodnota;
• vlastnost:hodnota₁ hodnota₂;
• vlastnost:hodnota₁, hodnota₂, hodnota₃;

Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a čárky. Pokud si některé znaménko popletete, nebude vám to pravděpodobně fungovat. Mezery a konce řádků příliš velkou roli nehrají, mohou se přidávat a vypouštět. Velikost písmen také nehraje roli.

Selektory

V příkladech budu uvádět již konkrétní deklarace stylu, bez nějakého bližšího osvětlení co, která z vlastností či hodnot nastavuje. V nasledujících dílech si postupně probereme jednotlivé vlastnosti a jejich hodnoty.

typu (type)

Jméno selektoru je odvozeno od jména html elementu (tagu). Je možné nastavit současně styl pro několik elementů, pak jsou jednotlivé elementy oddělěny čárkou. Takto nastavený styl se projeví u všech elementů daného druhu v dokumentu.

třída (class)

Jméno selektoru definuje autor tak, že zapíše tečku, a za ni uvede jméno třídy.V HTML dokumentu může použít tuto třídu jako hodnotu atributu class nějakého elementu. Počet elementů příslušné třídy v jednom dokumentu není omezen.

id

Jméno tohoto selektoru definuje autor tak, že zapíše znak hash (#), a za něj uvede jméno id. V HTML dokumentu může použít id jako hodnotu atributu id libovolného elementu. V celém dokumentu může být příslušné id použito jen u jednoho elementu.

pseudotřídy (pseudo-class)

Použitím selektorů pseudo-třídy zajišťujeme, v závislosti na aktuálním stavu dokumentu, jeho struktuře nebo prohlížení, přiřazení vlastnosti elementům. Selektor pseudo-třídy zapíše autor tak, že uvede znak dvojtečka, za který napíše název pseudo-třídy.

Mezi pseudotřídy patří:

• first-child
• link
• visited
• hover
• active
• focus
• lang

pseudo-elementu (pseudo-element)

Pseudo-elementy nám umožní přiřadit vlastnosti elementům v závislosti na stavu dokumentu. Selektor pseudo-elementu zapíše autor tak, že uvede znak dvojtečka, za který napíše název pseudo-elementu.

Mezi pseudo-elementy patří:

• first-line
• first-letter
• before
• after

univerzální

V jazyce CSS byl definován i univerzální selektor. Ten je zapsán pomocí znaku hvězdička *. Použitím tohoto selektoru specifikujeme, že vlastnosti u tohoto selektoru uvedené, budou aplikovány na všechny elementy dokumentu.

Závěr

V následujícím díle se podíváme na způsob připojení kaskádových stylů k dokumentu.