Použití CSS v dokumentech HTML

Transkript

1 Použití CSS v dokumentech HTML Tabulky kaskádových stylů mohou být součástí dokumentu HTML, nebo být umístěny v separé souboru. Jsou tři možnosti použití: přímá definice stylu - jednoho prvku pomocí atributu style="...", vložení tabulky stylů do stránky pomocí html značky <style>, načtení externího CSS souboru pomocí HTML značky <link>. Přímá definice stylů Parametrem style můžeme definovat styl konretnímu tágu zapsaním definice přímo do jeho značky. Některé značky však tento způsob definování stylů neumožňují (base, basefont, head html, meta, param, script, style, title). Definice (obecně) se používá takto: <tag... style="seznam_definic"... > Konkrétně: <h3 style="font-size:1em;color:#3366cc;font-weight:bold"> 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 <div>: <head> <style type="text/css">  </style> </head> 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 <link> umístěna v sekci head. Její parametry určují typ dokumentu, a jak s tímto dokumentem nakládat. Syntaxe (obecně) je: <link href="url" rel="stylesheet" type="text/css"> Konkrétně: <link href="moje_styly.css" rel="stylesheet" type="text/css"> 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

2 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. <link href="moje_styly.css" rel="stylesheet" type="text/css" /> 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: italic bold 1.2em verdana; font-weight:bold; font-style: italic; font-size:1.2em; Př 3: Vyzkoušejte si předchozí ukázku sdružených vlastností stylu. Tabulky stylů Definují styl pro celý dokument a tvoří seznam 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

3 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

4 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

5 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 (6 3 =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

6 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; /*obecný selektor*/ p font-size: 12px /*selektor typu*/ h1.muj color: red /*rozšířené selektory*/ img[alt] border: 1px solid #FF3399 /*existence atributu*/ table[border="0"] background-color:#c90 /*atribut dané hodoty*/ /*ID selektory*/ #blok border: 1px solid #FF3399 /*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 </muj_tag>. Rozšířené selektory (s atributy) HTML znáčky mohou kromě vlastních názvů obsahovat tzv. atributy. Např. Ve značce <img src="obr.jpg" alt="popis"> 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

7 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 <h1 class="muj">nadpis 1. úrovně</h1>. 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 <div id="blok"> 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í*/ #blok 3... /*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ého 4 : h1 color: red h1, h2, h3,.modr_text color: red h2 color: red h3 color: red.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