Káskádové styly = CSS • CSS = Cascading Style Sheets = tabulky kaskádových stylů • na začátku byl stylesheet – soubor pravidel definující vzhled textu nezávisle na obsahu • pomocí CSS lze nadefinovat společný vzhled souboru stránek • v HTML bez podpory CSS vzhled definován pro každou značku zvlášť, typicky pomocí značky , XHTML ji již nepodporuje • nyní CSS 2.1 – http://www.w3.org/Style/CSS • CSS je tvořen pravidly ve tvaru selektor { vlastnost1: hodnota; vlastnost2: hodnota; ... }
• selektor – seznam značek, kterých se uvedená pravidla týkají
} h1,h2,h3 {color:red;}/* pravidla platí pro h1, h2, h3*/ h1 {color:red;} /* alternativní zápis výše uvedeného */ h2 {color:red;} h3 {color:red;} ol ol {color:red;} /* 2. úroveň uspořádaného seznamu */
Návrh a tvorba WWW stránek
3/20
CSS – možnosti definice stylů • lokální definice stylů – platí v rámci značky • globální definice stylů – platí v rámci XHTML dokumentu • externí definice stylů – lze použít pro libovolný XHTML dokument Při použití různých typů definic se uplatňuje kaskáda v pořadí LOKÁLNÍ → GLOBÁLNÍ → EXTERNÍ definice V pořadí EXTERNÍ → GLOBÁLNÍ → LOKÁLNÍ definice se naopak uplatňuje dědičnost
Návrh a tvorba WWW stránek
4/20
Lokální definice stylů • na úrovni jednotlivých značek XHTML • platí jen v rámci použité značky • styly se vkládají pomocí atributu style přímo do značky:
Červený nadpis
definice celého odstavce:
Tučný odstavec
definice celé stránky: ...
Návrh a tvorba WWW stránek
Globální definice stylů • na úrovni jednoho XHTML dokumentu • definice se vkládají do hlavičky dokumentu • mezi značky <style> a Globální definice stylů <style type="text/css"> h1 { color:red;font-size:30px; p
} { color:red;font-weight:bold; }
5/20
Návrh a tvorba WWW stránek
6/20
Externí definice stylů • pro jeden či více XHTML dokumentů • nejvýhodnější – společný styl souboru stránek • snadná změna vzhledu stránek – pouze úprava CSS • CSS v samostatném souboru • do XHTML se vkládá pomocí nepárové značky v hlavičce Externí definice stylů
• atribut rel – specifikuje, že jde o CSS • atribut type – není povinný, specifikace CSS ve formě textu • atribut href – cesta k externímu CSS souboru • media – určuje výstupní zařízení
Návrh a tvorba WWW stránek
7/20
Externí definice stylů – atribut media • určuje pro jaké výstupní zařízení se má použít specifikovaný styl media="screen" – zobrazení na monitoru media="print" – tisk media="handheld" – mobilní zařízení (nízké rozlišení) media="aural" – hlasové syntetizéry – lze nastavit hlasitost, barvu media="all, projection, tv, braille"
Návrh a tvorba WWW stránek
Základní použití CSS stylů • barva, případně obrázek na pozadí • typy písma a jeho formátování • velikost a obtékání • okraje, rámečky • zarovnávání • seznamy • styly odkazů
8/20
Návrh a tvorba WWW stránek
9/20
Nastavení pozadí dokumentu • vlastnost společná pro celý dokument - selektor body • pro nastavení barev lze použít předdefinované názvy (17), hexadecimální tvar (např. #000000 – černá), RGB zápis rgb(255,0,0) body { background-color: red; /* nastavení barvy pozadí */ background-color:#0000ff; /* color:rgb(0,0,255);*/ background-image:url(pozadi.gif); /* obrázek */ }
• obrázek je menší než obrazovka – vydláždění pozadí body { background-image:url(pozadi.gif); background-repeat:repeat-x; background-image: no-repeat; background-position: top right; background-attachement: scroll (fixed); }
Návrh a tvorba WWW stránek
10/20
Typy písma a jeho formátování • barva písma – atribut color • pozadí písma – atribut background h1 { color:red; background-color: yellow; }
• font-variant – kapitálky (normal, small-caps) • sdružená vlastost font p { font: italic small-caps bold 12px arial }
Kdekoli v XHTML dokumentu (Transitional) lze používat klasické značky pro formátování písma - , , <strong>, <em> atd.
Návrh a tvorba WWW stránek
12/20
Velikost a obtékání, práce s blokem • uvedené atributy se vztahují k rodičovské značce • vlastnost width – šířka rodiče (px, pt, %, auto) • vlastnost height – výška rodiče (px, pt, %, auto) • vlastnost float – umístění obtékaného objektu (left, right, none) • vlastnost clear – ukončení obtékání objektů (left, right, both, none) • vlastnost display – především možnost skrytí bloku (např. tisk) – definice řádkového/blokového prvku
Návrh a tvorba WWW stránek
13/20
Okraje a rámečky • mají význam u blokových elementů – odstavce, buňky tabulky atd. • vlastnost margin – šířka vnějšího okraje (auto, px, pt, %) – margin-top (right, bottom, left) – u tabulek cellspacing • vlastnost padding – šířka vnitřního okraje (px, pt, %) – padding-top (right, bottom, left) – u tabulek cellpadding • vlastnost border – rámeček kolem blokového elementu (px, pt) - border-width (px), border-top-width (atd.) - border-color - border-style (solid, dotted, dashed, groove atd.) - border-top: solid 1px red;
Zarovnávání a úpravy textu • text-align – horizontální zarovnání v bloku (left, right, center) p { text-align:center; /* text bude zarovnán na střed */ }
• vertical-align – vertikální zarovnání v bloku (top, middle, bottom, pouze pro řádkové elementy) td { vertical-align:top; /* zarovnání nahoru */ }
• text-decoration – none, underline, overline, line-through, blink • text-transform – none, capitalize, uppercase, lowercase • letter-spacing, word-spacing – mezery mezi písmeny, slovy • direction (ltr, rtl) – směr textu • text-indent – odsazení prvního řádku • white-space (normal, pre, nowrap)– chování "bílých znaků"
