CSS

Z WikiKnihovna
Přejít na: navigace, hledání

Autor: Petr Fiala

Klíčová slova: CSS, webdesign, W3C standardy

Synonyma: Cascading Style Sheets, kaskádové styly

Související pojmy:

nadřazené - HTML
podřazené - ---


Charakteristika

CSS (Cascading Style Sheets, česky kaskádové styly), je speciální programovací jazyk. Je to nadstavba značkovacích jazyků (HTML, XML), která umožňuje autorům popsat vzhled jejich dokumentů. Cílem CSS je oddělit popis struktury dokumentu od definice vzhledu (obsahu a formy). Pomocí stylů lze definovat formátovací vlastnosti (písmo, zarovnání, barvy atd.) pro každý logický prvek dokumentu (nadpisy, běžný text, odkazy atd.). Definice je pak uplatněna v celém dokumentu.


Historie

Vývoj CSS spravuje a specifikace jednotlivých verzí publikuje organizace World Wide Web Consortium (W3C). První návrh zveřejnil v roce 1994 Håkon Wium Lie. V prosinci roku 1996 pak byla vydána specifikace CSS level 1 (definuje všechny základní vlastnosti pro fonty, okraje, barvy atd.), v květnu 1998 CSS level 2 (rozšiřuje předchozí verzi o absolutně pozicované elementy, automatické číslování, zalamování stran, umí pracovat s textem psaným zprava doleva a další). Aktuální verzí je CSS 2.1 (level 2 revision 1) a pracuje se na verzi CSS level 3 (doplní nové selektory, styly okrajů a pozadí, vertikální text, prostředky pro interakci s uživatelem a mnohé další). Všechny verze jsou zpětně kompatibilní.


Použití

Připojení stylů

Tabulky kaskádových stylů mohou být součástí dokumentu HTML, nebo být umístěny v samostatném souboru. Ten se k dokumentu připojí během jeho načítání. Možné způsoby použití jsou tři:

  • Přímá definice stylu - Pomocí atributu style můžeme definovat styl konkrétnímu prvku zapsáním definice přímo do jeho značky. Takto definovaný přímý styl platí jen pro daný prvek (hodnoty se ale mohou dále dědit).

Příklad:

<a href=“stranka.html“ style=“color:green; font-size:smaller“>odkaz</a>
  • Vložení tabulky stylů - Pro zápis tabulky stylů se používá značka <style></ode>. Je párová a umisťuje se do hlavičky dokumentu (tj. mezi značky <code><head></head>). Jejím obsahem je seznam pravidel, neboli tabulka stylů.

Příklad:

<head>
...
<style type=“text/css“>
tabulka stylů
</style>
...
</head>
  • Načtení externí tabulky stylů - V HTML slouží k připojování jiných dokumentů značka <link>. Pro připojení souboru s tabulkami stylů je třeba použít minimálně atributy rel=“stylesheet“, type=“text/css“ definující typ dokumentu a href=“adresa“ udávající adresu souboru s tabulkou stylů. Značka <link> musí být rovněž umístěna v sekci <head>.

Příklad:

<link rel=“stylesheet“ type=“text/css“ href=“styly.css“ />

Syntaxe

V jazyce CSS definicemi stylů přiřazujeme hodnoty jednotlivým vlastnostem. Tyto definice jsou vždy ve tvaru vlastnost:hodnota a vyjadřují přiřazení příslušné hodnoty této vlastnosti. Definice se mohou spojovat do seznamu definic, v němž jednotlivé definice oddělujeme středníkem (;). Dvojtečka musí následovat přímo za názvem vlastnosti, ostatní mezery jsou libovolné. V CSS se používají hodnoty několika typů a společně s nimi i celá řada jednotek. Každá vlastnost má dán seznam povolených hodnot, všechny ostatní musí prohlížeč ignorovat (implementace kaskádových stylů se však v prohlížečích značně liší). Pokud již nejsou definice přiřazeny konkrétnímu prvku stránky, musí jim v tabulce stylů ještě předcházet určení, na které prvky se tyto definice mají vztahovat. To popisují tzv. selektory. Dvojice selektor + seznam definic se nazývá pravidlo a zapisuje se ve tvaru: selektor {vlastnost: hodnota; vlastnost2: hodnota2; ...}

Příklad:

body {
  font-size: 12pt;
  background-color: yellow;
  margin: 20px;
}


Odkazy

Domovská stránka CSS na webu W3C

Specifikace CSS level 1

Specifikace CSS level 2 revision 1

Návrh vlastností CSS level 3

World Wide Web Consortium

Škola CSS

Základní kurz CSS


Použitá literatura

  1. SKLENÁK, Vilém. Data, informace, znalosti a Internet. Vyd. 1. Praha : C.H. Beck, 201. 507 s. ISBN 80-7179-409-0.
  2. STANÍČEK, Petr. CSS Kaskádové styly : kompletní průvodce. První vyd. Praha : Computer Press, 2003. 178 s. ISBN 80-7226-872-4.
  3. BOS, Bert. World Wide Web Consortium (W3C) [online]. 2010, Last updated: 2010/05/21 13:32:38 [cit. 2010-05-24]. Cascading Style Sheets. Dostupné z WWW: <http://www.w3.org/Style/CSS/>.
  4. LIE, Håkon W.; BOS, Bert. World Wide Web Consortium (W3C) [online]. 2010 [cit. 2010-05-24]. Chapter 20 The CSS saga. Dostupné z WWW: <http://www.w3.org/Style/LieBos2e/history/>.