Úvod do CSS

Obsah lekce:

Vznik a princip CSS

CSS (Cascading Style Sheets) neboli kaskádové styly je technologie pro definici vzhledu internetové stránky. Vznik se datuje do roku 1996, kdy vznikla potřeba oddělit formu od obsahu - vzhled od struktury. Jak víme, tak HTML je technologie pro označkování dokumentu neboli definici jeho struktury. Zjednodušeně HTML značky říkají následující:

• toto je nadpis (jaké úrovně) - značka h1, h2,...
• toto je odstavec - značka p
• toto je odkaz (a kam) - značka a
• toto je obrázek - značka img
• toto je tabulka - značka table
• toto je zvýrazněný text - značky em, strong
• toto je seznam položek - značky ul, li,...

Je jimi tedy popsána struktura dokumentu. CSS má za úkol vyřešit problém vzhledu. CSS tedy řeší na následující problémy:

• jak vypadá nadpis (jaké úrovně) - značka h1, h2,... - jak velkým písmem bude, jaké písmo bude použito, jakou bude mít barvu,...
• jak vypadá odstavec - značka p -
• jak vypadá odkaz (a kam) - značka a
• jak vypadá obrázek - značka img
• jak vypadá tabulka - značka table
• jak vypadá zvýrazněný text - značky em, strong
• jak vypadá seznam položek - značky ul, li,...

Soubor CSS pravidel se zpravidla nazývá šablona stylů. Jedná se zpravidla o jednoduchý textový soubor obsahující jedno nebo více pravidel. Pravidla ovlivňují (pomocí vlastností a jejich hodnot) jak se mají elementy webové stránky zobrazit (typ písma, barva textu, layout, pozice elementu, požadavky tisku). Pomocí CSS je možno také definovat dynamické vlastnosti (objevování a mizení položek, rozbalovací nabídky, menu).

V současné době existují různé verze CSS. Poslední relativně dobře podporovaná je CSS 2.1.

Styly se vytváří mimo webovou stránku (i když jsou v ní vloženy, ale jedná se o izolovanou množinu pravidel) a následně se mohou aplikovat na všechny stránky i velmi rozsáhlého webu naráz (například e-shop). Máme-li například pravidlo, které říká jakou barvou budou ve stránce zobrazeny odkazy, pak jedninou změnou v souboru kaskádových stylů se tato změna může okamžitě aplikovat na všechny odkazy na webu. Tak se ušetří čas a množství přenesených dat (proč?). Nutnou podmínkou pro co nejefektivnější nasazení stylů je vytvořit dobrou strukturu stránek v (X)HTML kódu (tzn. dobře označkovat všechny části html stránky).

Zbýbá ještě odpovědět na otázku "Proč se pomocí kaskádových stylů ušetří množství přenesených dat?". Představme si následující situaci. Máme rozsáhlé webové stránky s mnoha tabulkami a chceme, aby každá tabulka měla například žlutou barvu pozadí a šířku 100 %. Tuto skutečnost bychom v html mohli napsat nějak takto: <table bgcolor="yellow" width="100%">. Vše toto lze zapsat pomocí pravidla table{background-color:yellow; width:100%;}. Představme si, že takových tabulek je na našich stránkách například 200. Znamená to 200x napsat řetězec bgcolor="yellow" width="100%" nebo místo něj na jedno místo (například do vloženého css souboru) napsat jedno pravidlo, které toto řeší pro všehny tabulky na našich stránkách. Další výhoda je, že barvu pozadí VŠECH tabulek snadno změním na jednom jediném místě a to je velmi efektivní.

Než se pustíme do výkladu problematiky CSS, tak se podíváme na stránky http://www.csszengarden.com/. Na těchto stránkách je ilustrován obrovský potenciál CSS, která dokáže pro nadefinovaný html dokument pouhou změnou vkládaného CSS souboru v hlavičce ZCELA DRAMATICKY měnit vzhled celého webu (stačí klikat na různé polžky menu "select a design"). Podívejme se, co lze například změnou jediného řádku (vloženého CSS souboru) dosáhnout:

Je důležité si uvědomit, že celý HTML kód stránky BEZ použití kaskádových stylů vypadá takto:

Sami si můžeme prohlédnout libovolnou internetovou stránku (strukturu bez css) snadno například v prohlížeči Firefox tak, že v menu Zobrazení vybereme položku Styl stránky a zvolíme bez stylu.

CSS pravidla

Každé CSS pravidlo se skládá ze dvou částí:

• Selektor – určuje jaký element bude pravidlo ovlivňovat (formátovat) - selektorem tedy může být například html element p nebo h1 nebo jiná html značka.
• Deklarace – jedna či více deklarací vlastností pomocí jejich hodnot, které specifikují co se má stát. Například nadpis může mít vlastnost, že je červeně, že je písmem Myriad apod.

Například pravidla, která používá tato stránka si můžeme sami prohlédnout v souboru ivtstyly.css.

Zápis pravidel

V zápisu pravidel se ignorují mezery, tabulátory i volné řádky. Každou deklaraci nutno oddělit středníkem (není třeba za poslední deklarací, ale zvykněme si jej tam dávat také - snadno se stane, že jej tam nedáme a následně přidáme další deklaraci a pravidlo nám přestane fungovat). Důležitou skutečností je také fakt, že pokud uděláme v pravidle nějakou chybu (stačí například malý překlep, chybějící středník), tak jej prohlížeč ignoruje. Velmi špatně se pak chyba hledá.

Komentáře

Stejně jako v HTML i v CSS existují komentáře. Jsou užitečné zejména v začátku, kdy je často třeba udělat do CSS souboru k nějakému pravidlu poznámku o tom, jak funguje, proč tam je, co ještě nefunguje atp. Komentářem v CSS se rozumí cokoli mezi značkami /* */.

Dávejme si ale pozor co do komentářů uvedeme a kolik toho bude, protože libovolný uživatel si váš soubor CSS pravidel může prohlédnout a cokoli si v něm přečíst. Navíc velké množství komentářů zvětšuje velikost souboru s CSS styly.

Umístění

Zbývá zodpovědět otázku kde všude mohu kaskádové styly definovat. Je to možné celkem na třech místech:

• Externí soubor - samostatný soubor uložený v adresářové struktuře webu (zpravidla v kořenovém adresáři ve složce css). Vkládá se do hlavičky stránky pomocí příkazu (případně druhá varianta, pokud je soubor přímo v kořenové složce webu)

  <link rel="stylesheet" href="css/název souboru se styly.css" type="text/css" />

  <link rel="stylesheet" href="název souboru se styly.css" type="text/css" />

• Hlavička dokumentu - kaskádové styly lze přímo psát do hlavičky HTML dokumentu. Řeší se tak například situace, kdy je třeba změnit něco, co je definováno ve vloženém souboru. Například na stránkách GJŠ je tímto způsobem předefinováno pozadí banneru podle aktuální potřeby takto

  <style type="text/css">div#banner{background-image:url(images/design/banner/34.jpg);}</style> 

• Ve zdrojovém kódu stránky pomocí atributu style přímo jako atributu html značky. Text v takto ostylovaném odstavci bude zarovnán doprava, což nařizuje atribut style jako atribut ve značce pro odstavec:

  <p style="text-align:right;"><a href="index.php"> Text v odstavci </a></p>

Úkol

Pokuste se na Internetu najít specifikaci CSS 2.1 a pozdějších verzí.

Otázky

1. Co znamená zkratka CSS?
2. K čemu se používá CSS?
3. Jaké jsou hlavní výhody CSS?
4. Co je hlavním předpokladem pro dobré použití CSS?
5. Co lze pomocí CSS stylů dosáhnout?
6. Jak vypadá CSS pravidlo?
7. Lze v CSS zapsat komentář? Jak?
8. Jakými způsoby mohu umístit CSS pravidla do stránky?