CSS jak a proč, prostě začínáme

Začínáme další seriál, ve kterém vás budeme pravidelně seznamovat s kaskádovanými styly a jejich praktickým využitím.

Jazyk pro tvorbu WWW stránek (HTML - Hypertext Markup Language) je navržen tak, že s pomocí tagů určujeme význam jednotlivých částí textu. Autoři stránek používají k dosažení poutavého vzhledu různé triky - prázdné obrázky, tabulky, mezery, definici fontu atd. Tento přístup je však pracný a většinou vede k nepřehledné změti HTML kódu. Takto vytvořený design se také velmi těžce mění. Je třeba editovat všechny stránky, což se může stát zdrojem chyb. Naštěstí jde vývoj nezadržitelně kupředu a přináší nám kaskádové definice stylů - Cascading Style Sheets (CSS). V tomto díle si řekneme něco o historii CSS, základní syntaxi použití a způsobech, jak začlenit CSS do HTML dokumentu.

Doporučení CSS level 1 bylo navrženo v prosinci 1996 konzorciem W3C. Základním přístupem CSS je oddělení obsahu HTML dokumentu od definice jeho vzhledu. Kaskádové styly jsou podporovány v IE od verze 3.0 a v Netscape Navigatoru a Communicatoru od verze 4.0. Co může být pomocí CSS definováno? Téměř všechno:

  • Písmo (typ fontu, rodina fontu, velikost...)
  • Vlastnosti textu (řádkování, zarovnání, mezery mezi slovy, mezery mezi písmeny, podtržení...)
  • Nastavení pozice (možnost nastavení absolutní i relativní pozice textu a obrázků...)
  • Barvy a pozadí (barva textu, barva pozadí, obrázek na pozadí...)

Práce se styly je velmi stylová. Tato jednoduchá definice způsobí, že všechny odstavce uvozené tagem <P> budou psány modrým písmem:

     P { color : blue }
Obecně platí, že se kaskádové definice stylu skládají z pravidel s touto syntaxí:
selektor.třída { vlastnost1 : hodnota;  /* poznámka, která */                 vlastnost2 : hodnota;  /* nemá na styl */                 ... }                  /* žádný vliv */
Prohlížeč je software hloupý. Musíme jej proto informovat o tom, že chceme náš dokument formátovat pomocí CSS. Existují čtyři možností, jak začlenit styly do HTML dokumentu:
  • Tag <LINK> slouží k připojení externího souboru s definicí stylů. Jedná se o jednoduchý textový soubor, většinou s příponou css. Na tento soubor může ukazovat jak relativní tak i absolutní URL.
    <HEAD><TITLE>Tento dokument používá CSS</TITLE><LINK REL=STYLESHEETTYPE="text/css"HREF="http://www.styl.cz/css/styl.css"TITLE="Stylový styl"></HEAD>
  • Příkaz @import v definici stylu může zařídit to samé. Pozor však na odlišný formát odkazu!
    <HEAD><STYLE TYPE="text/css">@import url(http://www.styl.cz/css/styl.css);P { color : blue }</STYLE></HEAD>
  • Tag <STYLE> v hlavičce stránky
    <HEAD><STYLE TYPE="text/css">P { color : blue }</STYLE></HEAD>
  • Atribut STYLE můžeme použít pro definici stylu pro konkrétní element. To ale odporuje původnímu určení stylů oddělit obsah stránky od její grafické prezentace.
    <BODY><P STYLE="color: red">Tento odstavec je psán červeně</P></BODY>

Pro zachování kompatibility s prohlížeči, které nepodporují CSS je vhodné uzavřít definici stylu do komentáře:

<STYLE TYPE="text/css"><!-- P { color : blue } --></STYLE>
Pak je tato definice staršími prohlížeči ignorována.

Tak, a to je pro dnešek vše. V příštím díle si povíme více o způsobech definice CSS a hlavně více praktických příkladů.

Váš názor | Další dva PostFixy pro Windows NT jsou na světě

Témata článku: Software, Programování, Jednoduchá pozice, Stylový obrázek, CSS, Syntax, Mezera, Head, Pre

Určitě si přečtěte


Aktuální číslo časopisu Computer

Zachraňte nefunkční Windows

Jak nakupovat a prodávat kryptoměny

Otestovali jsme konvertibilní notebooky

Velký test 14 herních myší