Výhody tabulek stylů oproti vkládaným stylům.
Tabulky stylů
Dá se říct, že se tabulky stylů řadí do dvou skupin. Globální tabulky stylů a externí tabulky stylů. No začneme tedy s tabulky globálních stylů. Skládají se ze dvojce selektor a deklarační blok. Slovo selektor se dá přeložit asi jako "přepínač". Je to něco jako popis prvku, kde následuje deklarační blok, což je vlastnost s hodnotou a to uzavřené ve složených závorkách. Příklad kusu tabulky stylů.
...
span {font-weight: bold;}
...
Selektor jednoduše definuje prvek a deklarační blok přiřadí prvku vzhled. V tomto případě přidá textu tučnost. Selektory jsou většinou tagy jazyka HTML, ale můžou to být i globální třídy a atributy. Třeba jako id. Selektory se dálé třídí podle hodnoty atributů, ále to si necháme na později. Pozor - v tabulkách stylů se používají HTML tagy, ale NIKDY nepíšeme uzavírací lomené závorky! V uvedeném příkladě budou mít tučný text všechny prvky span, obsahující nějaký text.
Globální tabulky stylů jsou součástí dokumentu HTML. Tabulka stylů je uzavřena elementy style a musí být v hlavičce dukumentu. Pokud bude globální tabulka stylů umístěná jinde než v hlavičce, nebo nebude uzavřena tagy <style> jedná se o neplatnou tabulku! Nepleťte si globální tabulku stylů se styly vkládynými tj. in-line styly, které se zapisují takto: <span style="font-weight: bold;">.
...
<head>
<style>
span {font-weight: bold; font-style: italic;}
</style>
</head>
...
<span>Toto je text v prvku span</span>
Tento text není v prvku span.
...
Zkuste si doplnit ůdaje za tečky(pokud nevíte jak založte diskusi a potejte se, nebo se bez urážky nejdříve naučte alespoň HTML) a uložte soubor třeba jako tabulky.html. Když porovnáte příklad z druhého dílu s tímto. Výsledek by měl být stejný. Jěště jednou si rozebereme syntaxi tohoto příkladu, pro lepší pochopení CSS :). Vytvoříme hlavičku, mezi tagy <style> umístíme selektor, mezeru a deklarační blok uzavřený ve složených závorkách, kde je název vlastnosti, dvojtečka a hodnota vlastnosti. Může následovat nepovinný středník. Středník je povinný pouze pokud chcete pokračovat ve vlastnostech.
Teď budu demonstrovat "opakovatelnost použití". Protože jsme uvedli deklaraci tagu span. Bude tato deklarace platit pro všechny tagy span, pokud chcete pro nějaký tag span udělat výjímku použijte in-line styl.
...
<head>
<style>
span {font-weight: bold; font-style: italic;}
</style>
</head>
...
<span>Toto je text v prvku span</span>
Tento text není v prvku span.
<span>Toto je text v prvku span</span>
Tento text není v prvku span.
<span>Toto je text v prvku span</span>
Tento text není v prvku span.
...
Kdyby jste tohoto chtěli docílit pomocí HTML, tak by jste asi napsali více řádků. Pomalu se přibližuji k výhodám CSS oproti HTML.
Nyní si ukážeme více vlastností a přepisování implicitně nastavených hodnot. Implicitně nastavené hodnoty jsou správně tabulky stylů prohlížeče, ale o tom napíši později. V tagu <span> se nic nepřepisuje, protože <span> a <div> jsou tagy bez jakéhokoliv formátování tj. že jako např. u tagu <b> přidá formátování tučného textu. V následujícím příkladě změníme hodnoty tagů <h1> a <h2> a vytvoříme tag <span>.
...
<head>
<style>
h1 {font-size: 16pt; font-weight: bold; color: red;}
h2 {font-size: 24pt; font-style: italic; color: green;}
span {font-weight: bold; font-style: italic;}
</style>
</head>
...
<span>Toto je text v prvku span.</span>
<h1>Toto je nadpis první úrovně, H1.</h1>
<h2>Toto je nadpis druhé úrovně, H2.</h2>
...
Vlastnost font-size určuje velikost písma. S hodnotou 24pt u prvku h1, je písmo veliké 24 bodů. Vlastnost color určuje barvu prvku a s vlastností red u prvku h1 bude text červený.
Doufám že je Vám vše jasné a že se můžeme pustit do externích tabulek stylů.
Možnosti formátování popsané v předchozím textu nekončí na úrovni jedné stránky. Pomocí externí tabulky stylů je možné nastavit vzhled pro více stránek nebo pro vzhled stránek na celém serveru. Externí tabulka stylů je jednoduše textový soubor obsahující definice stylů, uložený s příponou CSS. Na tento externí soubor se jednoduše v každém dokumentu HTML odkazuje tagem <link>. Styly v předchozím příkladu (jen text mezi elementy style více ne) si skopírujeme do prázdného textového souboru a uložíme jako styles.css.
V externích tabulkách stylů se nesmí objevit žádný tag HTML jen jakoby obsah elementů style v hlavičce. Nyní si vytvoříme HTML stránku s tímto kódem.
...
<link href="styles.css" rel="stylesheet" type="text/css"
...
<span>Toto je text v elementu span</span>
<h1>Toto je nadpis první úrovně, H1.</h1>
<h2>Toto je nadpis druhé úrovně, H2.</h2>
<h2 style="font-size: 36pt">Toto je modifikovaný nadpis druhé úrovně</h2>
...
Tag <link> lze použít pouze v hlavičce dokumentu. Tento tag obsahuje atribut href.
Stejně jako u tagu <img> definuje tento tag umístění souboru. Atribut rel říká, že daný odkaz je na tabulku stylů a atribut type specifikuje typ tabulky stylů. V současné době je podporován jediný typ tabulky stylů a to je text/css.
Externí tabulka stylů by se měla chovat stejně jako globální tabulka stylů, ale výhoda je v tom že je lze použít pro více dokumentů najednou. Externí tabulka stylů je vhodné řešení pro značkovací jazyk XHTML, protože účel XHTML je oddělit kód značkovacího jazyka od atributů a vlastností (jakoby grafiky, laicky řečeno) dokumentu. A už se blížíme k hlavní výhodě CSS, ale to až později :). Lze použít i příkaz @import k importování z jedné tabulky stylů do druhé, ale to není příliš podporované tak se o tom vyjádřím jen na požádání.
< br>
Příště si ukážeme Seskupování a zkrácené definice vlastnosti, Dědičnost, Třídy.
Autor: Mrazik
2024 ©