CSS prakticky
Jak už jsem řekl v úvodu, styly se dají použít trojím způsobem:
- přímo u měněného elementu atributem style="..."
- stylopisem = seznamem stylů zapsaným <style></style> ve hlavičce dokumentu
- externím souborem CSS (externí stylopis)
V tomto textu napřed ukážu, jak se styly zapisují do stylopisu. Další dva způsoby přijdou později.
Příklad s nadpisy - Příklad s odkazy: pseudotřídy - Příklad s odsazením - Externí stylopis - Vlastní styly - Přímý styl - Testování stylů a hledání chyb - Preprocesory
Příklad s nadpisy
Při psaní textů se snažím používat nadpisy. V HTML se na to používají tagy <h1> až <h6>. Přitom třeba to, co je mezi tagy <h2>... </h2> je text nadpisu druhé úrovně. CSS mi umožňuje všechny takové nadpisy jednotně zformátovat, třeba aby byly modré a kurzívou.
<html>
<head>
<title>První příklad se stylopisem</title>
<style type="text/css">
h2 {color: blue;
font-style: italic;}
</style>
</head>
<body>
<h1>Hlavní nadpis</h1>
<h2>Nadpis druhé úrovně</h2>
<p>Odstavec s normálním textem</p>
<h2>Další nadpis druhé úrovně</h2>
<p>Odstavec s dalším textem, který by se měl formátovat normálně. </p>
</body>
</html>
Tento příklad si můžete zobrazit v prohlížeči. Do hlavičky dokumentu je zapsán stylopis (angl. stylesheet [stajlšít]). Je obalen tagy <style> a </style>. Můžete si všimnout, že tag style obsahuje atribut type="text/css". Není to zatím k ničemu, ale je slušnost to tam psát.
Co ale znamená
ten magický řádek:
h2 {color: blue; font-style: italic;}
Pokud nechcete studovat další příklady, můžete se rovnou podívat na seznam možných CSS vlastností a jejich hodnot.
Příklad s odkazy :pseudotřídy
Pomocí stylopisů se dají formátovat libovolné HTML tagy, ne pouze nadpisy. Obzvlášť efektní je to u odkazů. Nebudu vypisovat celý zdroj, omezím se na stylopis:
<style type="text/css">
a {text-decoration: none}
a:link {color: green}
a:visited {color: navy}
a:active {color: black}
a:hover {color: red; text-decoration: underline}
</style>
Celý soubor s tímto stylopisem si můžete zobrazit. Setkáváme se tu s deklarací formátu odkazů -- vnitřku tagu <a> </a>. Navíc tento tag má pseudotřídy (různé stavy), které umožňují různé zobrazení podle toho, zda už je odkaz navštívený nebo zda po něm jede myš. Takže konkrétně:
- text-decoration: none znamená, že odkazy nebudou podtrhávané
- a:link znamená nenavštívený odkaz (bude zelený)
- a:visited je už navštívený (tmavě modrý)
- a:active nebo a:focus je ten, na který se zrovna kliklo (černý), nebo ten, po kterém jede tabulátor
- a: hover je ten, přes který se jede myší (červený podtržený)
- text-decoration: underline znamená podtržení.
Pozor na syntaxi: mezi a a dvojtečkou není mezera!
První řádek stylopisu definuje nepodtrhávání odkazů pro všechny pseudotřídy. Pouze a:hover tuto deklaraci přebíjí, protože je uvedena později.
Tag A býval jediný, u něhož fungovaly pseudotřídy. Přibližně od roku 2010 lze bezpečně používat pseudotřídu :hover i na libovolný jiný tag.
Příklad s odsazením
Ve střední Evropě je zvykem začínat odstavec odsazením první řádky a odstavce k sobě víc hustit. V Americe je to jinak, tam se první řádek neodsazuje a mezi odstavci se dělá vertikální mezera.
Prohlížeče dávají mezi odstavce (tagy <p>) mezery a první řádek odstavce neodsazují. Po pravdě řečeno pro čtení z obrazovky je to tak lepší. Ale dejme tomu, že chci udělat odstavec podle českých zvyklostí.
CSS umožňují nadefinovat formát odstavce tak, aby vypadal česky. Do stylopisu se napíše:
<style type="text/css">
p {text-indent: 30px; margin: 0px;}
</style>
Zobrazte si tento příklad v prohlížeči.
Text-indent je odsazení prvního řádku a margin jsou okraje. Margin jsou okraje, zde nastavené všude na nulu. Dá se udělat třeba jiný horní okraj pomocí margin-top, ale to teď není podstatné.
Výše zmíněným zápisem se ovlivní všechny odstavce na stránce.
Externí stylopis
Kdyby se měl do každé stránky zadávat stylopis, byla by to nuda. Myšlenka CSS naopak počítá s tím, že se definice stylů umisťuje do externího souboru, který se pak už jenom odkazuje. Prostě místo toho, abych psal stylopis do hlavičky každé stránky, napíšu jej do nějakého nového souboru (třeba v Notepadu) a uložím s příponou css. Potom mohu libovolně mnoho stránek na tento css soubor nalinkovat.
Dejme tomu, že jsem si vytvořil soubor pokus.css. Má třeba tento obsah (vložil jsem sem všechny již zmíněné definice):
p {text-indent: 30px; margin: 0px 0px 0px 0px; }
a {text-decoration: none}
a:link {color: green}
a:visited {color: navy}
a:active {color: black}
a:hover {color: red; text-decoration: underline}
h2 {color: blue; font-style: italic}
h1 {color: green; text-align: center}
Nyní si vytvořím stránku, do které vložím odkaz na soubor pokus.css:
<html>
<head>
<title>Stránka s externím stylopisem</title>
<link rel="stylesheet" type="text/css" href="pokus.css">
</head>
<body>
<h1>Externě stylovaná stránka .... ATD.
Můžete se podívat, jak se vám to zobrazí v prohlížeči. Ve zdroji tohoto příkladu je důležitý řádek, kterým se css soubor do stránky "linkuje". Syntaxe, jak jsem ji napsal, je závazná (samozřejmě je třeba změnit cestu k css souboru), ale ten atribut type je zbytný (není to bez něj validní, ale funguje to bezvadně; nic nezkazíte, když tam type napíšete).
Záludnost
Externí stylopis v samostatném souboru nezačínejte tagem <style>. Jednak se to nemá, jednak Internet Explorer potom
ignoruje první deklaraci. Externí css soubor správně začíná rovnou první
deklarací bez jakýchkoli hlaviček, např. body {color: black}
Záludnost 2
Zkoušíte-li nové externí stylopisy tak, že je uložíte a občerstvíte linkovanou stránku, může se stát, že se neprojeví změna. Různě nastavené prohlížeče si totiž drží v cache paměti minulou verzi stylopisu, nebo něco zapomenete uložit. Proto doporučuji ladit napřed na nějaké stránce interní stylopis, a až když funguje, zkopírovat jej do externího.
Více stylů pro jednu stránku
K jedné stránce můžete přilinkovat více než jeden externí styl. To se docela často používá (z různých důvodů). Do stránky se prostě napíšou dva linky za sebe:
<link rel="stylesheet" href="prvni.css">
<link rel="stylesheet" href="druhy.css">
Import
Namísto tagu <link rel="stylesheet" href="pokus.css"> lze použít
zápis
<style type="text/css">
@import url('pokus.css');
</style>
Všimněte si středníku na konci zápisu, bez něj to nemusí fungovat.
Vlastní styly
Kdyby se daly definovat formáty jenom pro základní HTML tagy, byla by to pěkná nuda. Proto existují "třídy" a "identifikátory". Dají se deklarovat i styly tagů vložených do jiných tagů. Popis tříd je na delší čtení. Zatím tedy jen hlásím, že to jde.
Přímý styl
CSS se dá použít ve zdroji i přímo u stylovaného elementu. Považuji to za nejméně výhodné. Přesto se to občas použije. Dejme tomu, že chci odstavec zarovnat na střed stránky (a nebudu to dělat zastaralým HTML atributem align="center"). Napíšu:
<p style="text-align: center">Text odstavce ... ... ... </p>
Takže "style" je atribut HTML tagu a jeho hodnotou je deklarace stylu {bez složených závorek}, ale v uvozovkách. Style je atribut obecný, který se může použít u jakéhokoliv tagu, u kterého to má smysl.
Tagy <span> a <div>
Někdy je ale potřeba zformátovat kus textu, který není vymezen žádným konkrétním tagem. Proto se tam vloží nový tag (proč ne?). Zahrnuje-li formátovaná oblast více odstavců, použije se párový tag <div>, v rámci jednoho odstavce se používá <span>, protože <div> by to roztrhal do více odstavců. (Více o span a div.) Například:
<body>
... <!--normální odstavce -->
<div style="color: maroon">
... <!-- mnoho různých odstavců, všechny budou hnědé -->
</div>
...<!-- a už je to zase normál -->
A druhý příklad:
<p>Normální text a <span
style="font-style: italic">text kurzívou</span> a zase normální
text.</p>
se zobrazí takto:
Normální text a text kurzívou a zase normální text.
Testování stylů a hledání chyb
V poslední době jsem si velmi oblíbil nástroje, které pomáhají pochopit, co se ve stylech děje. Je to fantastický pokrok oproti době na přelomu letopočtu, kdy jsme jenom hádali, co se ve stránce vlastně děje. Nyní jsou rychlé možnosti:
- Ve Firefoxu klávesa F12 spouští Dev Tools
- Developer Tools je přímo zabudován také v prohlížeči Google Chrome (klávesa F12)
- Explorer verze 9 má Nástroje pro vývojáře také po zmáčknutí F12
Různé dev tools stačí aktivovat klávesou F12 a prohlížet si, který prvek na stránce má nastavený jaký styl. Také se dají styly přepisovat a koukat, co změna udělá (akorát pozor, nedá se to pak snadno uložit).
Do Developer Tools ve Chrome se dá dostat také kliknutím pravého tlačítka a příkazem "Zkontrolovat prvek". Opět je tu vidět, jaký prvek má nastaven jaký styl.
CSS preprocesory
Někteří autoři stránek raději píšou styl v trochu jiném jazyce než v CSS. SASS, LESS a Stylus jsou hlavní zástupci. Oproti samotnému CSS mají navíc proměnné, operátory, podmínky, importy a funkce. Po napsání stylu v preprocesoru příslušný program vygeneruje hotové CSS. Sám preprocesory nepoužívám, takže nemůžu nic víc radit nebo popisovat, ale je dobré se o nich zmínit.
Reklama
