Úvod do CSS Historie — K čemu je to dobré? — Začínáme
Historie CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. 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 všechny 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 stane mnohem přehlednější. Navíc pokud se jednou rozhodneme 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ánek.
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 všechny nadpisy 1. úrovně v dokumentu budou mít modrou barvu. Pokud budeme chtít určit elementu více než 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;}
Dědičnost Většina vlastností se dědí. To znamená, že element, který nemá 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 všechny 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í neobjeví. body {color: blue} /* tady si píši komentář, že mám všechny 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 nebo 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 a ) buď v tagu link nebo v tagu style <style type="text/css">@import "styl.css"; Pokud je styl umístěn na jíném serveru, tak můžeme použít zápis: <style type="text/css">@import url("http://www.neco.cz/styl.css"); Zápisem @import "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} 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.
nadpis
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}
Pozn.: Starší (ale opravdu hodně staré) prohlížeče styly vůbec nepodporují. 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ářů:
Použití Na stránce se barví text, odkazy, pozadí a ohraničení. Barvit můžeme buď celý dokument selektorem body nebo jednotlivé elementy. Barvu pozadí volíme tak, aby text byl dobře čitelný, tedy kontrastní textu, barva by neměla být příliš jasná, vysloveně nevhodné je použití jasně červené, opatrně i s modrou. Signální barvy jsou dobré pro zvýraznění textu nebo 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 „neslily”).
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 všechny 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énem 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 #
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 nedefinujeme žá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 nemá 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 nebo 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 nemáte vypnuté zobrazování popisků).
PÍSMO Písmo na stránce by mělo být především čitelné. Je zbytečné, používat kdejaké složité nepodporované písmo, když si pak návštěvník text nebude 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 nemá prohlížeč k dispozici. Takto můžeme určit i několik alternativních písem. Pro případ, že by prohlížeč nemě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 neproporciá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, nebo skloněné písmo. Rozdíl mezi kurzívou a skloněným písmem je mimo jiné v tom, že kurzíva je jedineč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
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ší než aktuální písmo smaller menší než aktuální písmo h2 {font-size: larger} Dále můžeme velikost určit např. v pixelech (px) nebo 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 než normální) a lighter (o něco slabší než normální). Nějak mám ale pocit, že to zas až tak nefunguje. Podobně je to s hodnotami 100, 200, 300, 400, 500, 600, 700, 800, 900. Tady funguje 100-500 jako normal a 600-900 jako bold.
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ánek se totiž na webu orientuje především podle odkazů, text třeba ani neč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 nemě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 nepodtrhávat žádný jiný text. K definování stylu ozdobení slouží vlastnost text-decoration. Má vlastnosti none (bez ozdobení), underline (podtržení), overline (nadtržení), line-through (přeškrtnutí). Použít můžeme i všechny hodnoty najednou. a {text-decoration:underline overline}
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: none} 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
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 nečí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 nebo 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. 2. 3. 4. 5.
decimal – arabské číslice (1.) lower-roman – malé římské číslice (i.) upper-roman – velké římské číslice (I.) lower-alpha – malá písmena (a.) upper-alpha – velká písmena (A.)
•
none – bez odrážky
Další možnosti číslování seznamů, které ale nefungují ve všech prohlížečích 1. decimal-leading-zero –arabské číslice, u jednomístných čísel začínající nulou (01.); nefunguje v IE a Opeře 2. lower-greek – malá písmena řecké abecedy (α.); nefunguje v IE 3. lower-latin – malá písmena (a.); nefunguje v IE 4. upper-latin – velká písmena (A.); nefunguje v IE 5. georgian – nefunguje asi nikde 6. armenian – arménština, nefunguje 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 není 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 neví :-) Pozn.: Funkčnost zjišťována v prohlížečích Internet 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, nebo vně textu s hodnotou outside.
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é none. Element tedy nebude 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:none}
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 všechny nadpisy ohraničit tenkou čárou, ale každý jinou
barvou. Pak definujeme tloušťku a styl ohraničení pro všechny 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í nebo 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ý není). 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) nebo 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 nechceme, aby se obrázek opakoval (např. jde-li o logo či jiný grafický počin, který nemá 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é neměli jeden velký obrázek, který neobsahuje vzor, ale třeba jen jeden objekt. Zkrátka a dobře nevypadá 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, než s výchozí pozicí (tj. levý horní roh elementu), použijeme
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ů, ne 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.
Nějaký text
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 neprojeví. Teď musíme ještě ta pravidla určit v CSS stylu. .poznamka {font-size: x-small; color: black} Teď tedy budeme mít všechny odstavce stejné, jen odstavec s třídou poznamka bude vypadat jinak (malým černým písmem). Resp. jinak budou vypadat všechny 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ů.
Nějaký odstavec
Položka seznamu
.poznamka {color: black} styl se aplikuje na všechny 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 všechny 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 všechny odstavce budou zarovnány na střed a jejich text bude mít modrou barvu (první deklarace). Toto obecně platí pro všechny 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.
.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í nebo zápatí. Identifikátory se označují dvojkřížkem (#). Jinak je jejich zápis stejný jako zápis třídy.
…
#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.
normální tučné tučnější slabší číselné vyjádření absolutní velikost relativní velikost délka 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
všechny ano
všechny ano
všechny ano
Vlastnosti barvy a pozadí Vlastnost
Hodnoty
color
Význam
Elementy
Dědění
•
•
barva
všechny
ano
•
transparent
•
barva průhledná
všechny
ne
none
•
URL obrázku žádný
všechny
ne
opakování všemi směry opakování ve směru x opakování ve směru y bez opakování
všechny
ne
barva
backgroundcolor
•
•
barva pozadí
backgroundimage
• •
•
obrázek na pozadí
backgroundrepeat směr opakování pozadí
• • • • •
repeat repeat-x repeat-y no-repeat
• • •
Vlastnost
Hodnoty
backgroundattachment
• •
Význam
scroll fixed
•
top center bottom left center right
•
•
roluje se je fixní
Elementy
Dědění
všechny
ne
připevnění pozadí •
backgroundposition umístění obrázku na pozadí
• • • • • • • • •
background pozadí
• • •
• • • • • • •
• • • • •
procentuálně délka nahoru vertikální střed dolů vlevo horizontální střed vpravo
• •
blokové nahrazovan ne é
barva pozadí obrázek na pozadí opakovánípozadí všechny připevnění pozadí umístění obrázku na pozadí
ne
Vlastnosti textu Vlastnost
word-spacing zvětšení mezislovní mezery
Hodnoty • •
Význam
normal
•
normal
•
none underline overline line-through blink
•
•
Element Dědění y
bez zvětšení zvětšení o délku
všechny ano
bez zvětšení zvětšení o délku
všechny ano
žádné podtržení nadtržení přeškrtnutí blikání
všechny ne
letter-spacing •
zvětšení mezery mezi znaky • (prostrkání)
text-decoration
• •
• • •
ozdobení textu
• •
•
• • • •
Vlastnost
Hodnoty
• • • • •
vertical-align
• •
vertikální zarovnávání
• • • •
baseline sub super top text-top middle bottom text-bottom
• • • • • • •
•
text-transform
• •
transformace textu
• •
text-align
• •
zarovnávání
•
text-indent
•
odsazení 1. řádky odstavce
• •
line-height
• •
výška řádky
•
Element Dědění y
Význam
capitalize uppercase lowercase none
•
left right center justify
•
•
normal
•
• • • • • •
•
• • •
na řádek horní index dolní index k nejvyššímu elementu k vršku rodičovského inline ne na střed rodičovského na spod rodičovského k nejnižšímu elementu procentuálně první písmena slov velká všechna velká všechny ano všechna malá žádná změna vlevo vpravo blokové ano na střed do bloku délka procentuálně
blokové ano
normální číslo délka procentuálně
všechny ano
Vlastnosti boxů Vlastnost
Hodnoty • margin-top • • auto vnější horní okraj • margin-right • • auto vnější pravý okraj
margin-bottom
• •
vnější spodní okraj
margin-left
• • •
vnější levý okraj
•
Význam • délka • procentuálně • automaticky • • •
auto
•
auto
•
• • • •
Elementy
Dědění
všechny
ne
délka procentuálně automaticky
všechny
ne
délka procentuálně automaticky
všechny
ne
délka procentuálně automaticky
všechny
ne
Vlastnost
margin vnější okraj
padding-top vnitřní horní okraj
padding-right vnitřní pravý okraj
padding-bottom vnitřní spodní okraj
padding-left vnitřní levý okraj
padding vnitřní okraj
border-top-width
Hodnoty • • • auto
border-rightwidth šířka pravého rámečku
border-bottomwidth šířka spodního rámečku
border-left-width
všechny
ne
délka procentuálně
všechny
ne
délka procentuálně
všechny
ne
délka procentuálně
všechny
ne
délka procentuálně
všechny
ne
délka procentuálně
všechny
ne
tenká střední tlustá délka
všechny
ne
tenká střední tlustá délka
všechny
ne
tenká střední tlustá délka
všechny
ne
všechny
ne
všechny
ne
všechny
ne
•
•
•
•
thin medium thick
•
thin medium thick
•
thin medium thick
•
•
•
thin medium thick thin medium thick
•
tenká střední tlustá délka tenká střední tlustá délka
Hodnoty Význam • blokový • block • inline • inline • položka seznamu • list-item • nezobrazuje se • none • normální • normal • předformátovaný text • pre • nezalamuje mezery • nowrap • disc • plné kolečko • circle • prázdné kolečko • square • čtvereček • decimal • číslo • decimal-leading• číslo doplněné nulou zero • malá římská číslice • lower-roman • velká římská číslice • upper-roman • malé řecké písmeno • lower-greek • malé písmeno • lower-alpha • velké písmeno • upper-alpha • arménské • armenian • georgiánské • georgian • bez odrážky • none
URL obrázku odrážky display:listano žádný item odrážka vsazená do textu odrážka předsazená textu plné kolečko prázdné kolečko čtvereček číslo malé písmeno velké písmeno malé řecké písmeno 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
display:listano item
display:listano item
Vlastnosti pozicování Vlastnost
Hodnoty Význam Elementy • normální • static position* • relativní • relative všechny • absolutní • absolute umístění elementu • fixní • fixed • • délka top* • • bez posunu posun odshora o • auto • • délka right* • • bez posunu posun zprava o • auto • • délka bottom* • • bez posunu posun zespoda o • auto • • délka left* • • bez posunu posun zleva o • auto • • délka width* • • nahrazované • automatická šířka elementu • auto • • délka height* • • nahrazované • automatická výška elementu • auto • přetečení elementu overflow* • skrytí přetečeného • blokové • visible • přidání scroll-barů • nahrazované • hidden způsob zobrazení vždy • buňky • scroll elementů, které se • přidání scroll-barů • inline bloky • auto nevejdou do svých jen pokud rozměrů skutečně přeteče
clip* •
definice viditelné části elementu
visibility*
• • •
viditelnost elementu
•
z-index* •
umístění elementu na ose z
•
<shape> auto visible hidden collapse auto
• •
• •
• •
zadání vrcholů normální zobrazení
Dědění ne
ne
ne
ne
ne
ne
ne
ne
•
position:abs ne olute
viditelný skrytý
•
všechny
normální číslo
•
pozicované ne
ano
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 Internetu 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 nebo 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 nenalezení 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 neexistuje. Buď je to překlep nebo jste si jí vymysleli. A nebo je to jedna z nadstandardních vlastností Internet Exploreru (Ty v IE fungují, ale nejsou to platné CSS vlastnosti a nefungují 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 není platnou hodnotou vlastnosti color. Znamená to buď, že jste zadali neexistující barvu nebo jste sice použili existující pojmenovanou barvu, ale nepatřila mezi 16 základních, které se v CSS mohou psát jménem 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 nelíbí, že pro vlastnost font, která by měla obsahovat všechny možné hodnoty vlastností písma, je jen jedna hodnota, tedy velikost. Pokud není potřeba ostatní doplnit (třeba proto, že jsou děděné nebo je chceme ponechat na výchozí hodnotě), bude lepší nepouží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
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 generic 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
