Úvod do kaskádových stylů
12. 2. 2008
CSS
Kaskádové styly (CSS) jsou kód určující formátování založené na stylech. Oddělují obsah stránky od jejícho vzhledu. HTML vytváří obsah stránky a o její vzhled se postará CSS.Validaci můžeme provádět i u dokumentu CSS. Oficiální validátor W3C
Nástin možností CSS
- Nastavit libovolnou a přesnou velikost písma, prokládání, kapitálky
- Udělat odsazení prvního řádku odstavce, zvětšit řádkování
- Zrušit nebo zvětšit prázdný prostor po odstavci
- Automaticky formátovat nadpisy (například je všechny udělat zelené)
- Zvýrazňovat odkazy po přejetí myší
- Udělat automaticky grafické odrážky
- Určité části textu zneviditelnit, zprůhlednit nebo nezobrazit
- Předefinovat grafický význam běžných tagů (například všechno, co je kurzívou, udělat i tučně)
- Nastavit pozadí čehokoliv, stránky, tabulky ale třeba i odstavce; pozadí se nemusí opakovat a může mít přesnou pozici!
- Umístit nějaký objekt (třeba kus textu) kamkoliv do stránky, může se to i překrývat
- Přidat k čemukoli rolovací lišty, oříznout to, orámovat, nastavit okraje
- V kombinaci se skripty je dnes CSS nejmocnější zbraň pro "rozhýbání" stránek.
- Hlavní význam CSS spočívá v tom, že fungují hodně automaticky, přečemž se vzhled celého webu deklaruje jedním souborem.
Trojí použití CSS
Styl se může nadeklarovat třemi způsoby.
- Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". přímý styl (řádkový styl). Je to nešikovné, ale občas se to používá.
<p style="color: red">Tento odstavec bude červený.</p>
- Pomocí "stylopisu" (angl. "stylesheet") v hlavičce stránky. Stylopis je jakýsi seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například že nadpisy mají být zelené. Do stránky se stylopis píše mezi tagy <style> a </style>.
Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy <style></style>:
<style>
p {color: red;
font-size:20px}
</style>
- Značka style s parametrem type, která obsahuje hodnotu text/css říká prohlížeči, že bude následovat zápis kaskádových stylů.
- Nejprve uvedeme název značky následované vlastnostmi stylu ve složených závorkách({})
- Jednotlivé vlastnosti se oddělují středníkem;
- Všimněme si <ul> není v lomených závorkách
a do těla stránky se mohou psát odstavce:
<p>Tento odstavec bude červený. </p>- Kód můžeme umístit do samostatného souboru -- to je soubor *.css, na který se stránka odkazuje tagem <link>. V souboru je umístěný stylopis. Hlavní výhoda je v tom, že na jeden takový soubor se dá nalinkovat mnoho stránek, takže pak všechny vypadají podobně.
Do hlavičky html dokumentu, musíme napsat odkaz na tento soubor:
<link rel="stylesheet" type="text/css" href="styly.css">
Vytváření pravidel stylu
Blokové a řádkové elementy
Styly pro řádkové elementy vždy přebírají i styl nadřazených blokových prvků. Pokud ale pro řádkový elemtn nově nadefinujeme nějaký styl, který už byl definován pro blokový element, pak vlastnost řádkového přepíše tu vlastnost blokového elementu.
Seskupování
Do teď jsme přiřazovali jeden nebo více příkazů pouze jednomu typu značek, ale můžeme přiřazovat ten samý styl více značkám. Tak, že je oddělíme čárkou.
b,i{přiřazení stylu}
V jedné části style můžeme dofinovat více pravidel
<style type="text/css">
ul {
list-style-type:square}
ol {
list-style-type:lower-alpha}
</style>
Vnoření elementů do sebe
V jazyku HTML se často jednotlivé elementy navzájem do sebe vnořují. Často jedna tabulka leží v jiné nebo jeden seznam v druhém seznamu.
Kdyby jsme vytvořili styl pro značku <ul>, používaly by všechny položky nečíslovaný seznam stejné označení svých položek. Místo toho musíme urči, že chceme styl použít pouze u vnořených značek.
Zadáme nadřazený element do něhož je element vnořen a potom určíme ten, kterému chceme styl přiřadit.viz. příklad všechny čtvercové odrážky vnořené do číslovaného seznamu.
ol ul {
list-style-type:square}
Můžeme to však použít pro libovolnou vlastnost textu. Např.
ul b {color:blue}
Př. vytvořte konkrétní víceúrovňový seznam
Třídy
Slouží k tomu, aby každému prvku přiřadily jeden konkrétní styl. Třídy se dají používat dvěma způsoby.- Třídu můžeme přidělit určité značce. Tak, že za název značky napíšeme tečku
p.nadpis{vlastnosti}
platí pouze pro <p>, aby platila i pro jinou značku napište značky za sebe a oddělte je čárkou
p,h2.nadpis
platí pouze pro <p>, aby platila i pro jinou značku napište značky za sebe a oddělte je čárkou
p,h2.nadpis
- Třída může existovat i samostatně a pak ji můžeme používat u všech značek
.jmeno{vlastnosti CSS}
Přiřazujeme třídy pomocí parametru class
<p class="nadpis">nadpis</p>
Přiřazujeme třídy pomocí parametru class
<p class="nadpis">nadpis</p>
Identifikátory
Selektory ID se podobají v mnoha ohledech selektorům tříd.Zaprvé selektory ID jsou uvozeny znakem "hash" # a zadruhé se nedá odkazovat na hodnoty atributu class.
Třída se může použít pro více elementů v jednom dokumentu, zatímco identifikátor jednoznačně označuje jediný element v dokumentu.Což znamená, že třídy se dají přiřazovat jakémukoliv počtu prvků, např pro prvek p, pak i na prvek span a je možné jej aplikovat na mnoho dalších prvků. Ale ID se dá použít pouze jednou. Máme-li nějaký prvek, který má atribut id s nějakou hodnotou, pak žádný jiný prvek v dokumentu nemůže mít atribut id s touto hodnotou.
Nadefinujeme jej pomocí speciálního znaku #
#jmeno{vlastnosti}
Pro vytvoření identifikátoru přidáme do značky paramter id= takto:
<p id="jmeno">Obsah</p>