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 <font>, 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í
Návrh a tvorba WWW stránek 2/20 Příklady: h1 { Káskádové styly = CSS color:red; /* červená barva písma */ background:yellow; /* ž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 */
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: <h1 style="color:red;font-size:30px;">červený nadpis</h1> definice celého odstavce: <p style="color:red;font-weight:bold;">tučný odstavec</p> definice celé stránky: <body style="color:red;background:black;">...</body>
Návrh a tvorba WWW stránek 5/20 Globální definice stylů na úrovni jednoho XHTML dokumentu definice se vkládají do hlavičky dokumentu mezi značky <style> a </style> <head> <title>globální definice stylů</title> <style type="text/css"> h1 { color:red;font-size:30px; p { color:red;font-weight:bold; </style> </head>
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 <link> v hlavičce <head> <title>externí definice stylů</title> <link rel="stylesheet" type="text/css" href="styly.css" media="screen" /> </head> 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 8/20 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ů
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; 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;
Návrh a tvorba WWW stránek 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 - <b>, <i>, <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;
Návrh a tvorba WWW stránek 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, %)
Návrh a tvorba WWW stránek 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ů"
Návrh a tvorba WWW stránek 16/20 Styly hypertextových odkazů (pouze) pro značku <a> 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í!
Návrh a tvorba WWW stránek 17/20 vlastnosti značek <ul>, <ol>,<li> list-style-image (url) Styly seznamů 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;
Návrh a tvorba WWW stránek 18/20 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é */ <p>tento odstavec bude červený.</p> <p class="zeleny">druhý odstavec bude zelený.</p>
Návrh a tvorba WWW stránek 19/20 Obecné třídy pro všechny značky Třídy a identifikátory p {color:red; /* nastavení stylu odstavců */ h1 {color:red; /* nastavení stylu nadpisu h1 */.zeleny {color:green; /* zelené písmo kdekoli */ <p>tento odstavec bude červený.</p> <p class="zeleny">druhý odstavec bude zelený.</p> <h1>červený nadpis</h1> <h1 class="zeleny">zelený nadpis</h1> NEBO <p class="zeleny">všechno v tomto odstavci, co není jinak definováno v CSS, bude napsáno zeleným písmem. </p>
Návrh a tvorba WWW stránek 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; <div id="zahlavi">záhlaví stránky</div> V XHTML nahrazuje atribut id dříve používaný atribut name.
Návrh a tvorba WWW stránek 21/21 Značky <div> a <span> jediné dvě značky, které nenesou žádný význam ( nemají) ideální pro potřeby CSS <div class="obalovaci"> <p class="obalovaci"> <p>odstavec</p> <p>odstavec</p> <p>další odstavec</p> <p>další</p>...... </div> </p> <div> je element blokový, <span> je element řádkový, neboli <div> před a za sebou zalomí řádek, <span> nikoli <div> by se neměl vyskytovat v rámci řádkové značky