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ší článek: Další dva PostFixy pro Windows NT jsou na světě

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


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

Byli tam! Důkazy o přistání na Měsíci, Lunochody i čínská sonda jsou vidět z vesmíru

Byli tam! Důkazy o přistání na Měsíci, Lunochody i čínská sonda jsou vidět z vesmíru

** Sonda LRO pořídila z oběžné dráhy Měsíce zajímavé snímky ** Jsou na nich vidět artefakty všech misí programu Apolla, které přistály na povrchu Měsíce ** Jde například o části lunárních modulů, rovery a dokonce i vlajky

Petr Kubala | 65

Dell XPS 13: Když vás ostatní doženou až za tři roky

Dell XPS 13: Když vás ostatní doženou až za tři roky

** XPS 13 nastartoval trend notebooků bez rámečků ** Letošní model kompletně přechází na USB-C ** Navzdory malému tělu se řadí výkon ke špičce

Tomáš Holčík | 34

Loopwheels znovu vymyslelo kolo. Místo drátů má v ráfcích kompozitové pružiny, které vylepší komfort jízdy

Loopwheels znovu vymyslelo kolo. Místo drátů má v ráfcích kompozitové pružiny, které vylepší komfort jízdy

** Proč vymýšlet kolo? Protože ho lze vymyslet lépe! ** Kola Loopwheels nabízejí integrované odpružení ** Cílem je poskytnout pohodlnější a klidnější jízdu

Karel Kilián | 14


Aktuální číslo časopisu Computer

Jak vytvořit a spravovat vlastní web

Velký test herních klávesnic a DVB-T2 tunerů

Vše o formátu RAW

Vybíráme nejlepší základní desku