Cascading Sytle Sheets neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. První návrh 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 slouží CSS
CSS slouží k formátováni xhtml, html nebo xml dokument?. Srovnáme-li formátováni pomocí artibut? HTML tak CSS rozši?uje formátováni dokumentu.
Styly p?esn? ur?í, jak bude element vypadat. Narozdíl od artibut? u tagu m?žeme díky CSS definovat vzhled pro jednotlivý element v celém dokumentu nap?:(Všechny nadpisy první úrovn? budou ?erven?.) Ale také lze pomocí CSS ur?it vzhled jen jednoho elementu, který se vyskytuje v dokumentu vícekrát(ale o tom až pozdeji).
Díky tomu se jednak zbavíme velkého množství kódu a také když budeme chtít pozd?ji m?nit nap?. barvu písma u nadpis? první úrovn? tak nemusíme m?nit každý zvláš?, ale sta?í p?epsat CSS.
Za?ínáme
Style je složen pravidlem pro jednotlivé elementy, které formátujeme.
Každé z t?chto pravidel má dv? ?ásti a to
Selektor
To je název elementu, pro který pravidlo platí
a
Deklaraci
To jest to co pro n?j platí, v deklaraci ur?ujeme vlastnost a hodnotu jež platí pro ur?itý element.
Celé to pak zapíšeme asi takto
selektor {vlatnost: hodnota_vlastnosti}
nap?: h1 {color: blue}
Selektorem jež formátujeme je zde h1(nadpis 1.úrovn?) a deklarací je {color: blue} (to ur?í že vlastnost color = barva , bude mít hodnotu blue = modrá)
Pokud chceme aby elemnt m?l více vlastností odd?líme vlastnosti od sebe st?edníkem(;)
Nap? selektor {vlastnost: hodnota; vlastnost:hodnota}
konkrétn?ji
h1 {color: blue ; text-decoration: underline}
Pokud chceme dv?ma elemnt?m ur?it jejich spole?nou vlastnost odd?líme je od sebe ?árkou (,)
nap?: selektor1,selektor2 {vlastnost: hodnota ; vlastnost: hodnota}
D?di?nost
V?tšina vlastností se d?dí. To znamená že lement jež nemá definovanou vlastnost ji d?dí po nad?azeném lementu.
Týka se to hlavn? Barvy písma, velikosti atd. Pokud tedy chceme definovat spole?nou vlastnost pro všechno elementy, defunujeme ji do elementu (body)
Komentá?e
Pokud si chceme 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 ale ve výsledku nezobrazí.
nap?: body {color: blue} /* tady si píši komentá?, že mám všechny texty modré*/
P?ipojení stylu k dokumentu
Styly lze p?ipojit k dokumentu vícero zp?soby, lze je definovat p?ímo v dokumentu a nebo v externím souboru, zp?soby lze i kombinovat
Kam vkládat styly
Pokud máme styl v externím souboru který ma koncovku .css vložíme jej mezi <head>a </head> a to takto
<head> <link rel="stylesheet" type="text/css" href="styl.css" /> </head>
Nebo p?ímo v dokumentu
Zde použijeme taky tag style, ale místo odkazu na externí soubor, umístíme p?imo definici stylu
<head> <style type="text/css">body {color: blue} </style> </head>
A nebo jej m?žeme definovat p?ímo u elementu
<h1 "style=color: green">Nadpis</h1>
