Historie. K čemu je to dobré? Začínáme. Úvod do CSS Historie K čemu je to dobré? Začínáme

Transkript

1 Úvod do CSS Historie K čemu je to dobré? Začínáme Historie CSS (Cascading Sytle Sheets) boli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu strák. První návrh normy byl zveřejněn v roce 1994, v roce 1996 byla pak vydána specifikace CSS 1, v roce 1998 CSS 2, nyní se pracuje na verzi CSS 3. K čemu je to dobré? CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s formátováním pomocí atributů v HTML formátovací schopnosti rozšiřuje. Styly umožňují přesně určit, jak bude který element vypadat. Narozdíl od atributů stylem můžeme definovat jednotný vzhled elementu pro celý dokument (např. že nadpisy úrovně 1 budou červené) a to jediným zápisem pro příslušný element (nikoli v každém tagu příslušného elementu). Stejně tak můžeme pomocí stylu určit odlišné formátování pro třeba jen jediný výskyt určitého elementu. Tím se jednak zbavíme velkého množství kódu, jednak se tento kód sta mnohem přehlednější. Navíc pokud se jednou rozhodme změnit například barvu písma všech odstavců, bude to pro nás otázka několika málo vteřin, měnit každý atribut u každého elementu v HTML by byla katastrofa. Jeden styl můžeme snadno použít pro libovolné množství strák. Začínáme Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány. Každé takové pravidlo má dvě části, selektor (název elementu, pro který má toto pravidlo platit) a deklaraci (co pro něj má platit). V deklaraci určujeme vlastnost a její hodnotu, deklarace je uzavřena do složených závorek. Celé to zapisujeme takto: selektor {vlastnost: hodnota_vlastnosti} A konkrétně: h1 {color: blue} Selektorem, tedy elementem, který formátujeme je zde h1 (nadpis 1. úrovně). Deklarací je {color: blue}. Ta určuje, že vlastnost color bude mít hodnotu blue. Celé dohromady to tedy znamená, že nadpisy 1. úrovně v dokumentu budou mít modrou barvu. Pokud budeme chtít určit elementu více ž jednu vlastnost, jednotlivé vlastnosti od sebe oddělíme středníkem. Takto můžeme definovat libovolné množství vlastností. selektor {vlastnost1: hodnota_vlastnosti1; vlastnost2: hodnota_vlastnosti2;} Pozn.: Samozřejmě je možný i zápis každé vlastnosti zvlášť, ale to je zbytečné. Pokud budeme chtít určit dvěma elementům jejich společnou vlastnost, oddělíme od sebe jednotlivé selektory čárkou. selektor1, selektor2 {vlastnost: hodnota_vlastnosti;}

2 Dědičnost Většina vlastností se dědí. To znamená, že element, který má vlastnost definovanou jí dědí po nadřazeném elementu. Týká se to především vlastností písma barvy, velikosti, stylu atd. Pokud tedy chceme definovat nějakou vlastnost, kterou budou mít elementy společnou (a později případně je vytvářet výjimky) definujeme ji pro element body. Komentáře Pokud si chceme ke stylu psát nějaké poznámky pro lepší orientaci, zapíšeme ji do komentářů. Ty se v CSS tvoří pomocí /* a */. Mezi hvězdičky pak můžeme umístit i několikařádkový komentář, ten se samozřejmě ve výsledném zobrazení objeví. body {color: blue} /* tady si píši komentář, že mám texty modré*/ Připojení stylu k dokumentu Styl můžeme k dokumentu připojit několika způsoby, můžeme definovat přímo v dokumentu bo v externím souboru, způsoby můžeme i kombinovat. Externí soubor Pokud chceme mít styl uložený v externím souboru (což je velmi výhodné při používání jednoho stylu pro více dokumentů), v nějakém textovém editoru uložíme námi definovaný styl do souboru s příponou css. Ten pak připojíme k dokumentu zápisem v hlavičce (tj. mezi tagy <head> a </head>) buď v tagu link <link rel="stylesheet" type="text/css" href="styl.css" /> bo v tagu style <style type="text/css">@import "styl.css";</style> Pokud je styl umístěn na jíném serveru, tak můžeme použít zápis: <style type="text/css">@import url(" "styl.css"; můžeme také vložit jeden styl do druhého stylu. Definování stylu uvnitř dokumentu To můžeme provést opět v tagu style kam tentokrát místo odkazu na externí styl umístíme přímo definici stylu. <style type="text/css">body {color: blue}</style> Nebo můžeme definovat styl přímo nějakému elementu, což se hodí zvláště v případě, kdy máme definovaný jednotný styl, ale pro například jedno konkrétní slovo chceme použít jiné pravidlo. Potom použijeme v příslušném tagu atribut style. <h1 "style=color: green">nadpis</h1> Váha stylů Pokud ve stylu definujeme pro stejný element stejnou vlastnost dvakrát, vyšší váhu má ta deklarace, která byla definovaná později (myšleno na pozdějším řádku) a ta se také provede. Pokud bychom chtěli některé deklaraci přiřadit větší důležitost, použijeme!important. h1 {color: blue!important}

3 Pozn.: Starší (ale opravdu hodně staré) prohlížeče styly vůbec podporují. Pokud tedy používáte zápis pomocí tagu style a chcete tento případ ošetřit, stačí celý styl vložit do komentářů:  BARVY Použití Na stránce se barví text, odkazy, pozadí a ohraničení. Barvit můžeme buď celý dokument selektorem body bo jednotlivé elementy. Barvu pozadí volíme tak, aby text byl dobře čitelný, tedy kontrastní textu, barva by měla být příliš jasná, vysloveně vhodné je použití jasně červené, opatrně i s modrou. Signální barvy jsou dobré pro zvýraznění textu bo odkazů. Pokud předpokládáme, že uživatelé si budou stránku tisknout, je třeba dát pozor na podobnou sytost barev (aby se barvy slily ). Vznik barev Pro zobrazení barev na monitoru se používá systém barev RGB (Red Green Blue). Každá barva na monitoru se skládá ze tří základních barev (červené, zelené a modré) v různém poměru. Barvy se vytváří aditivně přidáváním k černé, sčítáním barev. Čím více barev, tím blíže k bílé. Čím méně barev, tím blíže k černé. (tzn. čím větší číslo, tím světlejší barva) Odstíny šedi vznikají, když jsou tři složky na stejné hodnotě. Zápis barvy Pro zápis barvy můžeme použít: Název barvy (v angličtině) u předdefinovaných (pojmenovaných) barev body {color: blue} Pozn.: Při použití zápisu jmém barvy je validních pouze základních 16 VGA barev. RGB zápis: Procentuálně Intenzitu každé barvy určujeme procenty 0% (minimální intenzita) až 100% (maximální intenzita) body {color: rgb(100%,0%,0%)} Desítkově Čísly 0 až 255 body {color: rgb(255,0,0)} Šestnáctkově 00 až FF (tj. 0-9, a-f), zápis začíná hash-markem #

4 body {color: #FF0000} Pokud jsou obě číslice odpovídající jedné barevné složce stejné, můžeme použít zkrácený zápis body {color: #F00} Barvení dokumentu U většiny elementů můžeme barvit pozadí pomocí vlastnosti background-color. Například: body {background-color: #00FF00} Text barvíme vlastností color. Například: h1 {color: #FFFFFF} Pokud definujeme žádné barvy, budou použity defaultní barvy prohlížeče, což je obvykle transparentní pro pozadí, černá pro text, modrá pro odkazy, fialová pro navštívené odkazy a červená pro aktivní odkazy. Bezpečné barvy Bezpečné barvy (též tzv. Netscape paleta) jsou takové barvy, které by měl podporovat jakýkoliv WWW klient na jakémkoliv operačním systému, podporujícím alespoň 256 barev. Jinými slovy, pokud použijete na svých stránkách tyto barvy, máte vpodstatě zaručeno, že každý, kdo si vaše stránky bude prohlížet, si je bude prohlížet v barvách, v jakých jste je vytvořili. Jinak, v případě, že WWW klient má k dispozici vámi definovanou barvu, snáží se jí poskládat z jiných barev (tzv. dithering). Bezpečných barev je 216 a 16 odstínů šedi. Jsou to barvy, u kterých hodnota každé složky (červená, zelená a modrá) nabývá pouze hodnot 00, 33, 66, 99, CC bo FF. U všech tedy můžeme použít zkrácený zápis barvy (např. #F09) Pozn.: Při najetí kursorem myši na barvu se zobrazí její RGB kód (pokud máte vypnuté zobrazování popisků).

5 PÍSMO Písmo na stránce by mělo být především čitelné. Je zbytečné, používat kdejaké složité podporované písmo, když si pak návštěvník text bude moci ani přečíst. Čím jednodušší a obyčejnější písmo bude, tím lépe. Je také zbytečné, používat různé písmo v různých částech webu. Rodina písma K určení rodiny písma slouží vlastnost font-family. V té definujeme názvem písma jaké konkrétní písmo bude použito. (např. Arial). Dále definujeme písmo, které bude použito v případě, že první definované písmo má prohlížeč k dispozici. Takto můžeme určit i několik alternativních písem. Pro případ, že by prohlížeč měl k dispozici žádné z určených písem ještě použijeme obecnou rodinu (tu bychom měli použít vždy a to na konci výpisu písem). serif patkové písmo (např. Times New Roman) sans-serif bezpatkové písmo (např. Arial, Arial CE, Arial Narrow, Verdana, Helvetica) monospace proporciální písmo (např. Courier, Courier New) cursive ozdobná kurzíva (např. Comic Sans, ) fantasy ozdobné písmo (např. Western) Celý zápis pak může vypadat např. takto: body {font-family: Arial, Helvetica, sans-serif} Styl písma Vlastnost font-style určí, zda se bude jednat o písmo normální, kurzívu, bo skloněné písmo. Rozdíl mezi kurzívou a skloněným písmem je mimo jiné v tom, že kurzíva je jedičným řezem písma, kdežto skloněné písmo vzniká transformací normálního řezu. normal normální italic kurzíva oblique skloněné písmo body {font-style: italic} Varianta písma Varianty písma jsou dvě: normální písmo a kapitálky. Určuje se vlastností font-variant. normal normální SMALL-CAPS kapitálky

6 h1 {font-variant: small-caps} Velikost písma Velikost písma určíme vlastností font-size. Takto můžeme určit 7 různých velikostí: xx-small x-small small medium large x-large xx-large h1 {font-size: large} Velikost písma můžeme určit také relativně vzhledem k aktuální velikosti písma. larger větší ž aktuální písmo smaller menší ž aktuální písmo h2 {font-size: larger} Dále můžeme velikost určit např. v pixelech (px) bo jiným jednotkách (pt, em, ex, cm, mm, in). p {font-size: 16px} Relativně vzhledem k aktuální velikosti písma můžeme velikost určit v procentech. h1 {font-size: 150%} Duktus písma Duktus písma je poměr tloušťky písmových tahů k výšce písma, tedy to, jak je písmo silné. Určuje se vlastností font-weight normal normální bold tučné h1 {font-weight: bold} Tato vlastnost může mít hodnotu ještě bolder (o něco silnější písmo ž normální) a lighter (o něco slabší ž normální). Nějak mám ale pocit, že to zas až tak funguje. Podobně je to s hodnotami 100, 200, 300, 400, 500, 600, 700, 800, 900. Tady funguje jako normal a jako bold.

7 ODKAZY Barva odkazu Ozdobení textu Pseudotřídy Jak se tvoří odkazy Odkazy by měly být od okolního textu velmi dobře odlišeny, tak, aby byly na první pohled viditelné. Návštěvník strák se totiž na webu orientuje především podle odkazů, text třeba ani čte, sleduje jen kam směřují odkazy. Proto je dobré, když odkazy z okolního textu jasně vyčnívají. Barva odkazu Defaultně se odkazy v prohlížeči zobrazují modré, podtržené. Navštívené odkazy jsou fialové a aktivní odkazy červené. Při přejetí myší přes odkaz se jeho vzhled nijak mění. To vše jde samozřejmě snadno změnit. Barvu odkazu změníme stejně jako barvu jakéhokoliv jiného elementu, tedy pomoci vlastnosti color (více viz. barvy). a {color: green} Ozdobení textu Bývá dobrým zvykem odkazy podtrhávat. Ne pro každého uživatele je barevné odlišení odkazů od okolního textu dostačující. Stejně tak dobrým zvykem je podtrhávat žádný jiný text. K definování stylu ozdobení slouží vlastnost text-decoration. Má vlastnosti no (bez ozdobení), underli (podtržení), overli (nadtržení), li-through (přeškrtnutí). Použít můžeme i hodnoty najednou. a {text-decoration:underli overli} Pseudotřídy Psudotřídy slouží k odlišnému definování vlastností odkazů (link), navštívených odkazů (visited) a aktivnách odkazů (active). Zapisují se s dvojtečkou za tag a. a:visited {color: yellow} Pokud chceme, aby odkazy svůj vzhled změnili při přejetí myší, použijeme hover. a:hover {text-decoration: no} Vypadat to pak může třeba takto: odkaz Seznamy Odrážky a číslování Umístění odrážky Obrázek jako odrážka Jak se tvoří seznamy v XHTML list-style-type

8 Seznamy můžeme v CSS formátovat jako jakékoliv jiné elementy, navíc však můžeme určit druh odrážky číslovaného i číslovaného seznamu. S použitím obrázku můžeme vytvořit i odrážky vlastní. Odrážky a číslování Druh odrážky i číslování určujeme vlastností list-style-type. Tuto vlastnost můžeme přiřadit jak selektoru seznamu ul bo ol, tak i položce seznamu li. ul {list-style-type:square} Nečíslované seznamy disc vyplněné kolečko v IE a Opeře; vyplněný kosočtverec v Mozille a Netscape circle prázdné kolečko v IE a Opeře; prázdný kosočtverec v Mozille a Netscape square čtvereček vyplněný Číslované seznamy 1. decimal arabské číslice (1.) 2. lower-roman malé římské číslice (i.) 3. upper-roman velké římské číslice (I.) 4. lower-alpha malá písmena (a.) 5. upper-alpha velká písmena (A.) no bez odrážky Další možnosti číslování seznamů, které ale fungují ve všech prohlížečích 1. decimal-leading-zero arabské číslice, u jednomístných čísel začínající nulou (01.); funguje v IE a Opeře 2. lower-greek malá písmena řecké abecedy (α.); funguje v IE 3. lower-latin malá písmena (a.); funguje v IE 4. upper-latin velká písmena (A.); funguje v IE 5. georgian funguje asi nikde 6. armenian arménština, funguje v IE, v Opeře jen pokud je dostupný font Nespecifikované V Mozille je ještě podporováno číslováni hebrew (hebrejština), to ale ní v CSS specifikaci. Dále také (možná) někde existují hodnoty cjk-ideographic, hiragana-iroha, hiragana, katakana-iroha, katakana. Čert ví, co to je. Specifikace to ale ví :-) Pozn.: Funkčnost zjišťována v prohlížečích Intert Explorer 6.0 (IE), Mozilla 1.3.1, Opera 7.11, Netscape 6 Umístění odrážky Odrážku umisťujeme pomocí vlastnosti list-style-position. Může být buď uvnitř textu, tomu odpovídá hodnota inside, bo vně textu s hodnotou outside.

9 Obrázek jako odrážka Jako odrážku můžeme také použít obrázek. Vlastnost list-style-image má jako hodnotu URL obrázku. ul {list-style-image:url("adresar/obrazek.gif");} Rámečky a ohraničení Možnosti ohraničení Bez ohraničení Samostatný zápis Ohraničení elementů tvoří dost často velkou část designu. Pomocí ohraničení se vytváří různé svislé i vodorovné čáry, rámečky pro obrázky a podobně. Možnosti ohraničení Způsob ohraničení elementů určuje vlastnost border pro ohraničení elementu ze všech stran a vlastnosti border-top, border-right, border-bottom a border-left pro ohraničení zeshora, zprava, zdola a zleva. Tyto vlastnosti mají tři hodnoty: tloušťka ohraničení např. 1px styl ohraničení solid jednoduchá čára double dvojitá čára dotted tečkovaná čára barva ohraničení např. black (více viz. Barvy v CSS) border-top:2px solid green; Bez ohraničení Hodnotou vlastnosti border může být také no. Element tedy bude mít žádné ohraničení (což je standardní nastavení). Tuto vlastnost využijeme například pokud máme obrázkový odkaz, kdyz se kolem obrázku vytvoří zpravidla modrý rámeček. a img {border:no} Samostatný zápis Jednotlivé hodnoty vlastnosti border můžeme zapisovat také zvlášť pomocí vlastností borderwidth (tloušťka ohraničení), border-style (styl ohraničení) a border-color (barva ohraničení). Takto rozepsaný zápis bude totožný se zápisem prvním. border-width:2px; border-style:solid; border-color:green; Obvykle je jednodušší první zápis všech hodnot najednou. Rozepsání po jednotlivých vlastnostech je vhodné např. v případě, že chceme třeba nadpisy ohraničit tenkou čárou, ale každý jinou

10 barvou. Pak definujeme tloušťku a styl ohraničení pro nadpisy najednou a barvu definujeme zvlášť pro každou úroveň nadpisu. Pozadí Pozadí určené barvou Obrázek jako pozadí Čtěte také: Obrázky na web Pozadí elementu i celé stránky můžeme vytvořit buď prostým určením barvy pozadí bo použitím obrázku. Pozadí určené barvou Pro vytvoření barevného pozadí použijeme CSS vlastnost background-color. Její hodnotou bude požadovaná barva (více o barevných hodnotách viz. barvy) body {background-color:#aaa} Obrázek jako pozadí Pozadí elementu a stránky může být jakýkoliv obrázek. Je však nutné mít na paměti, že je pouhým pozadím a dá se předpokládat, že přes něj bude nějaký text, který musí být čitelný, a to ve všech částech obrázku (černý text na černobílé fotografii prostě čitelný ní). Samotný obrázek určíme vlastností background-image, její hodnotou je cesta k obrázku, zapsaná v závorce za parametrem url. body {background-image:url(obrazky/pozadi.gif)} Opakování obrázku Obrázek na pozadí se může opakovat (např. jako nějaký vzorek) bo může být umístěn jen jednou. Standardně se obrázek opakuje v obou směrech (x i y) až do zaplnění celé plochy elementu. Pro určení způsobu opakování se používá vlastnost background-repeat. Pokud chceme, aby se obrázek opakoval jen ve směru x (tj. horizontálně), použijeme hodnotu repeat-x, ve směru y (tj. vertikálně) repeat-y. Pokud chceme, aby se obrázek opakoval (např. jde-li o logo či jiný grafický počin, který má vytvářet vzorek), použijeme hodnotu no-repeat. body {background-repeat:repeat-y} Při opakování obrázku je vhodné použít obrázek, který sám na sebe navazuje. V opačném případě bychom vytvořili kromě námi zamýšleného vzorku ještě nějaké to čtverečkování navíc. Opakovat bychom také měli jeden velký obrázek, který obsahuje vzor, ale třeba jen jeden objekt. Zkrátka a dobře vypadá nikterak pěkně čtyři a půl krát se opakující papoušek na pozadí stránky :-) Umístění pozadí (obrázku) Pokud chceme obrázek umístit jinak, ž s výchozí pozicí (tj. levý horní roh elementu), použijeme

11 vlastnost background-position. Umístění určuje horizontální a vertikální hodnota. Hodnoty horizontálního umístění mohou být left (vlevo), center (na střed) a right (vpravo). Hodnoty vertikálního umístění jsou top (nahoru), center (na střed) a bottom (dolů). h1 {background-position:left center} Třídy a identifikátory Čtěte také: CSS vlastnosti a hodnoty Třídy a identifikátory v CSS slouží k tomu, abychom mohli různé elementy formátovat různě. Například odkazy na stránce. Každý z nás asi chce mít na stránce různé druhy odkazů, jen jeden. Jinak seobvykle dělají odkazy v menu, jinak odkazy v textu. Třída class v CSS Třídy vytvoříme snadno tak, že k elementu v HTML přidáme atribut class. Jeho hodnotou bude nějaký řetězec písmen, stejný pak budeme používat v CSS stylu jako selektor. <p class="poznamka">nějaký text</p> Tímto říkáme, že tento odstavec bude formátován podle pravidel třídy poznamka, na formátování ostatních odstavců se tato pravidla projeví. Teď musíme ještě ta pravidla určit v CSS stylu..poznamka {font-size: x-small; color: black} Teď tedy budeme mít odstavce stejné, jen odstavec s třídou poznamka bude vypadat jinak (malým černým písmem). Resp. jinak budou vypadat odstavce s třídou poznamka, protože stejnou třídu můžeme použít u libovolného množství elementů. Dokonce i u různých elementů. <p class="poznamka">nějaký odstavec</p> <li class="poznamka">položka seznamu</li>.poznamka {color: black} styl se aplikuje na elementy s třídou poznamka li.poznamka {color: blue} styl se aplikuje jen na elementy li s třídou poznamka Dědičnost Třída každého elementu bude dědit vlastnosti daného elementu a navíc bude mít své vlastní, tedy např.: p {text-align: center; color: blue}.poznamka {font-size:x-small; color: black} Tímto zápisem je řečeno, že odstavce budou zarovnány na střed a jejich text bude mít modrou barvu (první deklarace). Toto obecně platí pro odstavce stránky. Odstavec s třídou poznamka bude mít navíc ještě menší písmo (druhá deklarace). Barva je určená v obou deklarací, v takovém případě ma vyšší prioritu deklarace zadaná později, tedy odstavec s třídou poznamka bude mít černý text. Všechny odstavce tedy budou modré, zarovnané na střed, kromě odstavce s třídou poznamka, ten bude černý, s malým písmem, zarovnaný bude také na střed.

12 Kontextová deklarace s třídou <p class="poznamka"><a href=" ">Odkaz</a> Nějaký text</p>.poznamka a {color: red} Možnost kontextové deklarace platí i pro třídu. Tento zápis říká, že odkazy v odstavci třídy poznamka budou červené. Identifikátor id v CSS Identifikátor se od třídy liší tím, že se jedná vždy o jednoznačný identifikátor. To znamená, že ho na každé stránce můžeme použít jen jednou. Tím myslím opravdu na každé stránce, tedy v každém souboru.html jen jednou, v rámci celého webu můžeme stejný identifikátor použít libovolněkrát. Oproti tomu třídu jsme mohli použít libovolněkrát na každé stránce webu. Identifikátory se tedy používají právě tam, kde je jisté, že se daný element objeví ve stránce jen jednou. Ideálně se tedy hodí pro věci jako je box celé stránky, menu, záhlaví bo zápatí. Identifikátory se označují dvojkřížkem (#). Jinak je jejich zápis stejný jako zápis třídy. <div id="menu"> </div> #menu {width:14em; background-color:black} #menu a {color: white} CSS vlastnosti stručný přehled Vlastnosti písma Vlastnosti barvy a pozadí Vlastnosti textu Vlastnosti boxů Klasifikační vlastnosti Vlastnosti pozicování Zde najdete kompletní přehled vlastností CSS1 a některé vlastnosti a hodnoty CSS2.1 (označené *). V tabulkách je zapsán název CSS vlastnosti a její popis, možné hodnoty (tučně vyznačená hodnota je pro danou vlastnost implicitní), význam hodnoty, elementy, pro kterou je možné danou vlastnost použít a dědičnosti vlastnosti. Vlastnosti písma Vlastnost Hodnoty Význam font-family rodina písma font-style styl písma font-variant varianta písma <family-name> <geric-family> normal italic oblique normal small-caps jméno rodiny písma obecná rodina písma normální kurzíva skolněné normální kapitálky Element y Dědění ano ano ano

13 Vlastnost Hodnoty Význam font-weight duktus písma font-size velikost písma font písmo normal bold bolder lighter <absolute-size> <relative-size> <percentage> <font-style> <font-variant> <font-weight> <font-size> <font-family> caption* icon* menu* message-box* small-caption* status-bar* normální tučné tučnější slabší číselné vyjádření absolutní velikost relativní velikost procentuální zvětšení styl písma varianta písma duktus písma velikost písma rodina písma pro ovládací prvky pro označení ikon pro menu pro dialogová okna pro malé ovládací prvky pro stavový řádek Element y Dědění ano ano ano Vlastnosti barvy a pozadí obrázek na pozadí Vlastnost Hodnoty Význam Elementy Dědění color <color> barva ano barva backgroundcolor barva pozadí backgroundimage backgroundrepeat směr opakování pozadí <color> transparent <url> no repeat repeat-x repeat-y no-repeat barva průhledná URL obrázku žádný opakování všemi směry opakování ve směru x opakování ve směru y bez opakování

14 připevnění pozadí Vlastnost Hodnoty Význam Elementy Dědění backgroundattachment backgroundposition umístění obrázku na pozadí background pozadí Vlastnosti textu scroll fixed <percentage> top center bottom left center right <backgroundcolor> <backgroundimage> <backgroundrepeat> <backgroundattachment> <backgroundposition> roluje se je fixní nahoru vertikální střed dolů vlevo horizontální střed vpravo barva pozadí obrázek na pozadí opakovánípozadí připevnění pozadí umístění obrázku na pozadí blokové nahrazovan é Vlastnost Hodnoty Význam word-spacing zvětšení mezislovní mezery letter-spacing zvětšení mezery mezi znaky (prostrkání) text-decoration ozdobení textu normal normal no underli overli li-through blink bez zvětšení zvětšení o délku bez zvětšení zvětšení o délku žádné podtržení nadtržení přeškrtnutí blikání Element y Dědění ano ano

15 Vlastnost Hodnoty Význam vertical-align vertikální zarovnávání text-transform transformace textu text-align text-indent zarovnávání odsazení 1. řádky odstavce li-height výška řádky baseli sub super top text-top middle bottom text-bottom <percentage> capitalize uppercase lowercase no left right center justify <percentage> normal <number> <percentage> na řádek horní index dolní index k jvyššímu elementu k vršku rodičovského na střed rodičovského na spod rodičovského k jnižšímu elementu první písmena slov velká všechna velká všechna malá žádná změna vlevo vpravo na střed do bloku normální číslo Element y inli Dědění ano blokové ano blokové ano ano Vlastnosti boxů Vlastnost Hodnoty Význam Elementy Dědění margin-top <percentage> vnější horní okraj maticky margin-right <percentage> vnější pravý okraj maticky margin-bottom <percentage> vnější spodní okraj maticky margin-left <percentage> vnější levý okraj maticky

16 Vlastnost Hodnoty Význam Elementy Dědění margin <percentage> vnější okraj maticky padding-top <percentage> vnitřní horní okraj padding-right <percentage> vnitřní pravý okraj padding-bottom <percentage> vnitřní spodní okraj padding-left <percentage> vnitřní levý okraj padding <percentage> vnitřní okraj border-top-width thin tenká medium střední thick tlustá šířka horního rámečku border-rightwidth šířka pravého rámečku border-bottomwidth šířka spodního rámečku border-left-width šířka levého rámečku border-width šířka rámečku border-color barva rámečku thin medium thick thin medium thick thin medium thick thin medium thick tenká střední tlustá tenká střední tlustá tenká střední tlustá tenká střední tlustá <color> barva

17 Vlastnost Hodnoty Význam Elementy Dědění no žádný dotted tečkovaný dashed čárkovaný border-style solid jednoduchý double dvojitý styl rámečku groove rýha ridge hřbet inset vsazený outset vysazený border-top horní rámeček border-right pravý rámeček border-bottom spodní rámeček border-left levý rámeček border rámeček width šířka height float výška plovoucí objekt clear čekání na skončení plovoucích objektů <border-topwidth> <border-style> <color> <border-rightwidth> <border-style> <color> <borderbottom-width> <border-style> <color> <border-leftwidth> <border-style> <color> <border-width> <border-style> <color> <percentage> left right no no left right both šířka horního rámečku styl rámečku barva šířka pravého rámečku styl rámečku barva šířka spodního rámečku styl rámečku barva šířka levého rámečku styl rámečku barva šířka rámečku styl rámečku barva maticky maticky vlevo vpravo žádný efekt žádné zleva zprava z obou stran blokové nahrazovan é blokové nahrazovan é

18 Klasifikační vlastnosti Vlastnost Hodnoty Význam Elementy Dědění block blokový display inli inli list-item položka seznamu druh elementu no zobrazuje se white-space mezery list-style-type typ odrážky seznamu list-style-image obrázek odrážky seznamu list-style-position umístění odrážky seznamu list-style odrážka seznamu normal pre nowrap disc circle square decimal decimal-leadingzero lower-roman upper-roman lower-greek lower-alpha upper-alpha armenian georgian no <url> no inside outside disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha no inside outside <url> normální předformátovaný text zalamuje mezery plné kolečko prázdné kolečko čtvereček číslo číslo doplněné nulou malá římská číslice velká římská číslice malé řecké písmeno malé písmeno velké písmeno arménské georgiánské bez odrážky URL obrázku odrážky žádný odrážka vsazená do textu odrážka předsazená textu blokové display:listitem display:listitem display:listitem plné kolečko prázdné kolečko čtvereček číslo malé písmeno velké písmeno malé řecké písmeno display:listitem velké řecké písmeno bez odrážky, bez obrázku odrážka vsazená do textu odrážka předsazená textu URL obrázku odrážky ano ano ano ano ano

19 Vlastnosti pozicování Vlastnost Hodnoty Význam Elementy Dědění static normální position* relative relativní absolute absolutní umístění elementu fixed fixní top* posun odshora o right* posun zprava o bottom* posun zespoda o left* posun zleva o width* šířka elementu height* výška elementu overflow* způsob zobrazení elementů, které se vejdou do svých rozměrů clip* definice viditelné části elementu visibility* viditelnost elementu z-index* umístění elementu na ose z <percentage > <percentage > <percentage > <percentage > <percentage > <percentage > visible hidden scroll <shape> visible hidden collapse <integer> bez posunu bez posunu bez posunu bez posunu matická matická přetečení elementu skrytí přetečeného přidání scroll-barů vždy přidání scroll-barů jen pokud skutečně přeteče zadání vrcholů normální zobrazení viditelný skrytý normální číslo pozicované pozicované pozicované pozicované blokové nahrazované blokové nahrazované blokové nahrazované buňky inli bloky position:abs olute ano pozicované

20 CSS validátor W3C časté chyby HTML validátor W3C CSS vlastnosti CSS validátor slouží k validaci CSS stylu. Tedy najde chyby, které CSS styl obsahuje. K validaci použijeme validátor W3C, nachází se na adrese jigsaw.w3.org/css-validator. Validovat můžete: CSS styl z Intertu zápisem URL adresy stylu do políčka Validate by URI a stisknutím tlačítka check. CSS styl uložený na disku vašeho počítače přímým zápisem cesty k souboru na lokálním disku do políčka Validate by File Upload bo výběrem s procházením disku pomocí tlačítka browse a stisknutím tlačítka check Validní CSS Pokud je CSS styl správně (Podle CSS specifikace) zobrazí se hláška No error or warning found a Congratulations!. Následuje kód pro přidání CSS validní ikonky a výpis validovaného CSS stylu. Chybové hlášky errors V případě chybného zadání cesty k CSS stylu a tedy jeho nalezení validátorem vyskočí hláška Not found. Jinak se vypisují již jen chyby ve stylu (u každé chybové hlášky je napsán selektor, ke kterému se zmíněná chyba vztahuje): Property doesn't exist Použitá CSS vlastnost existuje. Buď je to překlep bo jste si jí vymysleli. A bo je to jedna z nadstandardních vlastností Intert Exploreru (Ty v IE fungují, ale jsou to platné CSS vlastnosti a fungují v ostatních prohlížečích). Týká se to především nastavování barevných vlastností scrollbaru, různých filtrů na obrázky, kurzoru myši a podobně. Invalid number : color darkorange is not a color value : darkorange Tato chyba říká, že zápis hodnoty barvy je špatný, že (v tomto případě) darkorange ní platnou hodnotou vlastnosti color. Znamená to buď, že jste zadali existující barvu bo jste sice použili existující pojmenovanou barvu, ale patřila mezi 16 základních, které se v CSS mohou psát jmém barvy, bude tedy potřeba zapsat barvu číslem Více: Barvy v CSS Zápis hodnoty color Invalid number : font too few values for the property 1.2em : 1.2em Prý příliš málo hodnot pro vlastnost font. Validátoru se líbí, že pro vlastnost font, která by měla obsahovat možné hodnoty vlastností písma, je jen jedna hodnota, tedy velikost. Pokud ní potřeba ostatní doplnit (třeba proto, že jsou děděné bo je chceme pochat na výchozí hodnotě), bude lepší použít vlastnost pro souhrnné nastavení (v tomto případě tedy font), ale přímo vlastnost pro velikost písma (font-size). Invalid number : font-size only 0 can be a length. You must put an unit after your number : 10 Vlastnost font-size byla zadána bez jednotky, což je možné pouze u čísla 0. Tato chyba se může týkat všech vlastností s hodnotou délky, které zadáte bez jednotky

21 Invalid number : font Parse Error - weight: bold Nějaká chyba v zápisu, v tomto případě to může být chybějící pomlčka mezi font a weight. Jindy to může být způsobeno třeba chybějící dvojtečkou. Upozornění warnings font-family: You are encouraged to offer a geric family as a last alternative Vlastnost font-family by měla mít jako poslední alternativu obecnou rodinu písma. Více: Písmo v CSS CSS vlastnost font-family