Káskádové styly = CSS

Návrh a tvorba WWW stránek

1/20

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í


2/20

Káskádové styly = CSS Příklady: h1 { color:red; background:yellow;

/* červená barva písma */ /* žlutá barva pozadí */

} 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 */


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


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: ...


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


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í


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"


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


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); }


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; }

• vlastnost font-family p { font-family:Arial; font-family:sans-serif; font-family:'Arial CE','Verdana CE',Arial,Verdana, sans-serif; }

• vlastnost font-size (v jednotkách px, pt, mm, %) p { font-size:12px; }


11/20

Typy písma a jeho formátování • vlastnost font-weight – tučnost písma (normal, bold, 100-900) p { font-weight:bold; }

• vlastnost font-style – kurzíva (normal, italic) p { font-style:italic; }

• 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.


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


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;


14/20

Okraje a rámečky border-color:red;

border-style:solid; border-style:dashed;

border: solid green 4px;

border-style:dotted;

• border-width (thin, medium, thick, hodnota) • border-style (dotted, dashed, solid, double, groove, ridge, in(out)set • border-color • border-top, border-right, border-bottom, border-left • margin, margin-top, margin-right, ... (auto, hodnota, %) • padding, padding-top, padding-right, ... (auto, hodnota, %)


15/20

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ů"


16/20

Styly hypertextových odkazů • (pouze) pro značku existují speciální pseudotřídy a:link {color:#00ff00;} /* barva nenavštíveného odkazu */ a:visited {color:#00ff00;} /* barva navštíveného odkazu */ a:hover {color:red;} /* barva odkazu pod kurzorem myši */ a:active {color:red;} /* barva odeslanéhho odkazu */

Mezi a a dvojtečkou NENÍ MEZERA!!

Záleží na pořadí!


17/20

Styly seznamů • vlastnosti značek
,
,
• list-style-image (url) • list-style-type (disc, circle, square, decimal, lower-roman, upperroman, lower-alpha, upper-alpha, lower-greek, hebrew, ...) • list-style-position (inside, outside) – zarovnání • sdružená vlastnost list-style ul { list-style:decimal outside; }


Třídy a identifikátory • efektivní využití vlastních stylů • třídu kaskádového stylu určuje atribut class • třídy lze používat v rámci XHTML dokumentu opakovaně Třídy vztahující se k použité značce p {color:red;} /* nastavení stylu odstavců */ p.zeleny {color:green;} /* některé budou zelené */

Tento odstavec bude červený.

Druhý odstavec bude zelený.

18/20


19/20

Třídy a identifikátory Obecné třídy pro všechny značky p {color:red;} /* nastavení stylu odstavců */ h1 {color:red;} /* nastavení stylu nadpisu h1 */ .zeleny {color:green;} /* zelené písmo kdekoli */

Tento odstavec bude červený.

Druhý odstavec bude zelený.

Červený nadpis

Zelený nadpis

NEBO
Všechno v tomto odstavci, co není jinak definováno v CSS, bude napsáno zeleným písmem.


20/20

Třídy a identifikátory • identifikátor kaskádového stylu určuje atribut id • v XHTML dokumentu lze identifikátor použít pouze jednou • spíše pro blokové prvky #zahlavi {color:green;

/* formát záhlaví stránky */

background:yellow;}

Záhlaví stránky

V XHTML nahrazuje atribut id dříve používaný atribut name.


21/21

Značky
a <span> • jediné dvě značky, které nenesou žádný význam (≠ nemají) • ideální pro potřeby CSS

odstavec

další odstavec
...

odstavec

další
...

•
je element blokový, <span> je element řádkový, neboli
před a za sebou zalomí řádek, <span> nikoli •
by se neměl vyskytovat v rámci řádkové značky

Káskádové styly = CSS

Recommend Documents

Červený nadpis

Červený nadpis

Zelený nadpis