Tágu h3 jsme definovali velikost písma (font-size) 1em, barvu (color) #3366CC a řez písma (font-weight) tučně. Př 1: Vyzkoušejte si předchozí ukázku

přímé difinice stylu.

Vložení tabulky stylů Pro zápis tabulky stylů se používá párová značka <style> umístěna do sekce head. Jejím obsahem je seznam CSS-pravidel neboli tabulka stylů. Tuto značku je vhodné uzavírat do komentářů , aby tabulku stylů ignorovaly prohlížeče, které CSS neznají (styly jsou podporovány až od HTML verze 3.2). Do značky <style> je nutno uvést i tzv. MIME-typ "text/css". Ukážeme si vše na konrétním příkladu (styl přiřazujeme blokové značce

: <style type="text/css"> Př 2: Vyzkoušejte si předchozí ukázku

vložení stylu a přemýšlejte o významu jednotlivých definic.

Načtení externí tabulky stylů1 V HTML slouží k připojování jiných dokumentů značka umístěna v sekci head. Její parametry určují typ dokumentu, a jak s tímto dokumentem „nakládat“. Syntaxe (obecně) je:

Konkrétně:

Pro doplnění teoretických vědomostí praktickými dovednostmi navštivte následující web. 1 Doporučovaný způsob definice stylů. 2/9

studijní materiál – tvoříme www kaskádovými styly

Použití CSS v dokumentech XHTML Nové specifikace jazyka XHTML úplně oddělují obsah od formy, a proto zde budeme uvažovat pouze s externími styly. Ve standardu 1.1 už nejsou podporovány přímé styly a navíc jsou přednostně doporučovány externí tabulky stylů. Na rozdíl od jazyka HTML vyžaduje XHTML striktní uzavírání i nepárových tágu, proto načtení externího CSS musí být ve tvaru.

Popis syntaxe CSS Definice CSS Definice stylů spočívá v přiřazení hodnot jednotlivým vlastnostem. Tyto definice jsou zapisovány ve tvaru vlastnost: hodnota (mezera není syntakticky povinná). Definice se spojují do seznamu definic, v němž se jednotlivé definice oddělují středníky. obecně: konkrétně: vlastnost_1: hodnota_1; vlastnost_2: hodnota_2; … vlastnost_n: hodnota_n;

color:#333333; margin-top: 3em; … background:#990000;

Sdružené vlastnosti Některé vlastnosti CSS jsou deklarovány jako vlastnosti sdružené. V jediné definici umožňují nastavit více vlastností současně. Hodnotou sdružené vlastnosti je seznam dílčích definic (oddělený mezerami). Např. skupinu definic: lze nahradit: font-family: verdana; font-weight:bold; font-style: italic; font-size:1.2em;

Př 3: Vyzkoušejte si předchozí ukázku

font: italic bold 1.2em verdana;

sdružených vlastností stylu.

Tabulky stylů Definují styl pro celý dokument a tvoří seznam pravidel a @pravidel. Definice zde již jsou přiřazeny konkrétnímu prvku stránky. Musí jim tedy předcházet určení, tzv. Selektor. Pravidla Dvojice selektor+seznam definic se nazývá pravidlo a zapisujeme jej ve tvaru: selektor {seznam definic}

V následující ukázce je na každém řádku jedno pravidlo. Výrazy před složenými závorkami jsou selektory. Uvnitř složených závorek jsou seznamy definic jejich stylů. Za poslední definicí nemusí být středník. body { background: #FCFCFC; /*barva pozadí*/ color: #333333; } /*barva textu*/ p.nadpis { margin: 1em; /*mezery mezi blokem a okolními prvky*/ padding:1ex 20 px 1em 40 px /*mezery mezi obsahem bloku a jeho hranicí*/ }

3/9

studijní materiál – tvoříme www kaskádovými styly

Komentáře Slouží pro přehlednost kódu. Zapisují se do znaků /* komentář v CSS*/. Vše co je mezi nimi je při načítaní tabulky ignorováno. Mohou být prakticky kdekoliv, je se nesmí vsouvat doprostřed výrazů a slov. A zde je pár příkladu použití komentářů: /*moje CSS*/ body /*formát těla dokumentu*/ { background:#FCFCFC; /*barva pozadí*/ font-family:Verdana, Arial, Helvetica, sans-serif; color:#333333; font-size: /*velikost písma*/ 12px; }

zatímco zde jsou chybné případy: body { font-/*písmo*/size: 12pt; } h2.nadpis { font-size:12/*velikost písma*/px }

Na závěr kapitoly o komentářích si připomeňme, že komentáře v HTML dokumentech se uzavírají do znaků .

4/9

studijní materiál – tvoříme www kaskádovými styly

Hodnoty a jednotky Klíčová slova Některé hodnoty mohou být zadány pomocí klíčových slov. Tak například žlutou barvu můžeme zadat hned třemi ruznými způsoby: klíčovým slovém: rgb-režimem: hexadecimálním zadáním:2 color: yellow;

color: rgb(100%,100%,0);

color: #FFFF00;

další příklady, kdy je hodnota nahrazena klíčovým slovem jsou: display: none;

font-size: medium;

font-weight:bold;

Klíčová slova se nazapisují do uvozovek ani do apostrofů. Čísla V CSS se setkáme se dvěma typy čísel: • celá čísla – zapisují se pouze pomocí číslic 0 – 9, před nimiž může být znak „+“ či „-“ (bez mezery). • reálná čísla – čísla celá nebo desetinná. Desetinnou část odděluje znak „.“ (tečka). Uveďme si zase pár příkladů: font-size:12px; margin-left: 0.5em; padding-top: 1.2ex;

Velikost Pomocí velikostí definujeme vzálenosti velikosti a proporce jednotlivých prvku. Zapisujeme je ve tvaru číslo+jednotka (bez mezery), např. 12px. Pokud je hodnota nějaké vlastnosti rovna nule, jednotka se vynechává. Některé vlastnosti povolují i záporné hodnoty. Pro zadávání velikostí se používají jednotky: • relativní (em, ex, px) • absolutní (mm, cm, in) Relativní jednotky em – velikost 1em odpovídá vypočítané hodnotě vlastnosti font-size pro daný prvek. Jinými slovy je to velikost písma právě používaného prvku. Na vysvětlenou si ukažme příklad: p { }

font-size:12px; /*velikost písma je 12px*/ margin: 0.5em /*vzdálenost odstavce (bloku) od okolních prvků je 0.5*12px=6px*/

ex – velikost 1ex odpovídá x-výšce, tj. výška malého písmene „x“. Měla by se tedy lišit podle zvoleného typu písma. Většina prohlížečů však často interpretuje 1ex zjednodušeně jako polovinu em. px – velikost 1px chápe většina autorů pouze jako 1 bod obrazovky. Na obrazovkách počítače to platí, ale pro jiná zařízení by tato definice nebyla korektní. A to je důvodem, proč je px jednotkou relativní. Zavisí totiž na rozlišení, typu vystupního zařízení (jinak na TV, tiskárně, či velkoplošném projektoru). 2 Doporučovaný způsob 5/9

studijní materiál – tvoříme www kaskádovými styly

Absolutní jednotky Absolutní jednotky je možné požít tam, kde známe fyzické vlastnosti výstupního zařízení, např. Velikost papíru v tiskárně. V CSS se používají tyto absolutní jednotky: • mm – milimetr • cm – centimetr • in – palec (angl. inch); 1'' = 25,4 mm • pt – typografický bod (angl. point); 1pt = 1/72'' = 0,3528 mm • pc – typografická jednotka pica; 1pc = 12pt Procenta Hodnoty v procentech se zapisují ve tvaru číslo+% (bez mezery). Procenta se vždy vztahují k jiné hodnotě. Například chceme-li, aby byla šířka bloku 30% z celkové šířky prohlížeče, zapíšeme to takto: #blok {

width: 30%; /*šířka bloku*/

}

Barvy Barvy se v CSS zapisují pomocí klíčových slov (blue, green, red,...), nebo pomocí číselného zadání barvy. Číselně můžeme barvu určit definováním jednotlivých složek červené (R), zelené (G) a modré(B). V CSS mohou být složky zadávány hexadecimálně, dekadicky i procenty. Používá se rozsah celočíselných hodnot od 0–255, 00–FF hexadecimálně, 0–100% procentuálně, tzn. 100%=255). Hexadecimální hodnoty se zapisují ve tvaru #RRGGBB, kde RR, GG, Ilustrace 1: BB jsou po řadě hodnoty červené, zelené a modre složky barvy. Např.: #B1F836 (R=B1, G=F8, B=36) . Pro webové barvy, jejichž složky jsou zapsány stejnými znaky (např. #FF6633), můžeme použít i zkrácený zápis #RGB (např. #F63). Dekadické a procentní hodnoty se zapisují pomocí funkce rgb(), která má tři parametry oddělené čarkou – udávající po řadě složky R, G a B. Tyto mohou být zadávány dekadicky v rozsahu 0–255, např. rgb(127,0,255), nebo procentuálně 0–100%, např. Rgb(50%,0,100%). Př 4: Vyzkoušejte si různá

zadávání barev dle následující ukázky:

Řešení příkladu naleznete zde. V souvislosti s barvami je nutno zmínit pojem bezpečné batvy pro web (Web Safe Colors). Je to podmožina barevného prostoru RGB tvořena hodnotami zadanými hexadecimáně jen pomocí čísel a znaků 00, 33, 66, 99, CC a FF (63=216 barev; např. #FF3399, #C90). Většina HTML editoru umožňuje navolit příslušnou barvu přímo z barevné paletky (viz. Ilustrace 1).

6/9

studijní materiál – tvoříme www kaskádovými styly

Selektory v tabulkách stylů Selektory určují, ke kterým konkrétním prvkům dokumentu se definované vlastnosti vztahují. Je jich více druhů a existují pro ně i různé operátory. Zde jsou příklady selektorů: /*příklady selektorů*/ * {margin: 0;padding: 0;} p {font-size: 12px} h1.muj {color: red} /*rozšířené selektory*/ img[alt] {border: 1px solid #FF3399} table[border="0"] {background-color:#C90} /*ID selektory*/ #blok {border: 1px solid #FF3399}

/*obecný selektor*/ /*selektor typu*/ /*existence atributu*/ /*atribut dané hodoty*/ /*selektor ID*/

Základní selektory • univerzální selektor – označuje se symbolem „*“ a vyhovují mu všechny prvky dokumentu. * {margin: 0;padding: 0} /*často používaný př. pro vynulování margin, padding */

• selektor typu – tomuto selektoru vyhovují všechny prvky daného typu značky jazyka HTML, XHTML. Označuje se názvem značky. Dokonce si můžeme vytvářet své vlastní selektory a jim odpovídající značky. body /*selektor typu body*/ { background:#FCFCFC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#333333; font-size:12px; } img /*selektor typu img*/ { border: solid 1px red; } muj_tag /*selektor typu muj_tag*/ { font-family:"Courier New", Courier, monospace; font-size:1.2em; background:#CCCCCC; color:#000000; }

V HTML dokumentu pak použijeme párovou značku <muj_tag> Text formátován stylem muj_tag . Rozšířené selektory (s atributy) HTML znáčky mohou kromě vlastních názvů obsahovat tzv. atributy. Např. Ve značce jsou atributy src a alt. Základní selektory mohou být omezeny vlastností některého z atributů – vyhovují jim prvky, které mají nejen odpovídající značku, ale i atribut vyhovující zadání. • existence atributu – selektoru img[title] vyhovují ty prvky typu img, které mají definován uvedený atribut title . Přičemž na hodnotě tohoto prvku nezáleží, podstatná je pouze jeho existence ve značce. img[title] { border: solid 1px red; 7/9

studijní materiál – tvoříme www kaskádovými styly }

V HTML budou červenou 1px čarou ohraničeny pouze ty obrázky, u nichž je definován atribut title. • atribut dané hodnoty – selektoru table[border="0"] vyhovují všechny prvky typu table, jejichž atribut border je roven 0. Hodnotami atributů mohou být identifikátory (např. id nebo jmeno třídy), nebo řetězce, proto musí být zapsány v uvozovkách. table[border="0"] /*atribut dané hodnoty; konkr. border="0"*/ { background-color: #CCCCCC; color:#0066FF; font-weight:bold; }

• selektory s více atributy – atributy v selektorech mohou být i vícenásobné. Např. pravidlu a[lang="cs"][title] vyhovují ty prvky a, které mají lang="cs" a současně mají definován atribut title. • selektory tříd – v jazyce HTML (XHTML) se hojně používá atribut class pro určení třídy daného prvku. Chceme-li např. definovat styl pro prvky h1 třídy muj, použijeme selektor h1.muj. V HTML (XHTML) dokumentu se pak na tento styl odkážeme zápisem

Nadpis 1. úrovně

. Př 5:

Pokusy se selektory naleznete v tomto příkladu.

Selektory ID Jazyky dokumentů mohou ve svých prvcích používat atributy označené jako identifikátory prvku (atribut typu ID). Takový atribut se od ostatních liší svou jednoznačností, tj., že v dokumentu nesmí existovat prvky se stejným identifikátorem a jeden prvek nesmí mít více identifikátorů. V jazyce HTML je tímto identifikátorem atribut id. Pro prvek

jsou možné tyto zápisy: div[id=blok] {...} /*v podstatě selektor s konkrétní hodnotou atributu*/ div#blok {...} /*zkrácený zápis; ne však ekvivalentní z hlediska kaskádování*/ #blok3 {...} /*z důvodu jednoznačnosti prvku neuvádíme jmeno značky*/

Kombinování selektorů Selektory můžeme vzájemně kombinovat a vytvářet tak selektory složitější. Kombinované selektory umožňují zpřesňovat prvky v tabulce stylů podle jejich kontextu a vazeb na okolí, či naopak rozšiřovat jejich pole působnosti. Selektory se kombinují pomocí operátorů>, + a mezera. Slučování selektorů

Pomocí operátoru, (čárka) je možné do jednoho pravidla sloučit více selektorů, které mají mít shodnou definici stylů. Např.: sadu pravidel několika různých selektorů lze sloučit do pravidla jediného4: h1 {color: h2 {color: h3 {color: .modr_text

red} red} red} {color: red}

h1, h2, h3, .modr_text {color: red}

3 Nejčastěji používaný způsob. 4 Tento zp. je vhodné použít, má-li několik selektorů společné některé vlastnosti a v ostatních se liší (ty doplníme ostatními pravidly). Viz. přiklad 5. 8/9