Importované CSS styly
Vložený kaskádový styl je nejčastěji využíván pro skupinu dokumentů, které mají shodné nastavení. Výhodou je že vytvoříte jediný soubor se svými CSS styly a pak se můžete na tento soubor odkazovat ze všech vašich dokumentů. Tento způsob hlavně zjednodušuje psaní HTML kódu a také budou mít všechny dokumenty shodný vzhled.
Vložený styl je samostatný soubor (*.CSS), na který se odkazujeme pomoci HTML tágu <LINK>
, který je zadán v hlavičce dokumentu mezi HTML tágem <HEAD>
.
Níže popíši celý příklad použití vloženého kaskádového stylu, nejdříve si vytvoříme samostatný soubor "styly.css" s kaskádovými styly.
Příklad 1:
/* nastavení HTML tágu SPAN */ span { background-color: #000000; color: #FFFF00; } /* nastavení HTML tágu pomoci třídy, umožňuje nastavení jakéhokoliv HTML tágu */ .new { background-color: #000000; color: #FFFF00; } /* nastavení jen pro tág DIV se zadáním třídy */ div.abc { background-color: #000000; color: #FFFF00; }
V druhém příkladu naleznete kompletní ukázku jak propojíme dokument se souborem, který obsahuje naše kaskádové styly.
Příklad 2:
<HTML> <HEAD> <TITLE> Ukázka vloženého kaskádového stylu </TITLE> <!-- spojení k souboru s kaskádovými styly --> <LINK HREF="styly.css" REL="stylesheet" TYPE="text/css"> </HEAD> <BODY> <SPAN> Text nastavený dokumentovým stylem pro tág SPAN. </SPAN> <P CLASS="new"> Text nastavený vlastním dokumentovým stylem, a to po zadání jména_třídy (.new), lze použít v různých tágech. </P> <DIV CLASS="abc"> Text nastavený dokumentovým style pro tág DIV. Tento text bude nastaven jen po zadání jména_třídy (abc), jméno_třídy je platné pouze pro tágy DIV. </DIV> <DIV> Text není změněn, není zadána třída (CLASS="abc"). </DIV> ... </BODY> </HTML>
Druhý způsob umožňuje vytvořit importovaný kaskádový styl, který je používán pro skupinu dokumentů, které mají shodné nastavení. Je v podstatě shodný jako vložený kaskádový styl. Importovaný styl se také odkazuje na soubor, který obsahuje kaskádové styly. Rozdíl mezi těmito styly je v tom jak se na soubor s kaskádovými styly odkazujeme. U vloženého stylu pomoci HTML tágu <LINK>
, ale u importovaného stylu pomoci HTML tágu <STYLE>
.
Importovaný styl je samostatný soubor (*.CSS), na který se odkazujeme pomoci HTML tágu <STYLE>
, který je zadán v hlavičce dokumentu mezi HTML tágem <HEAD>
.
Tak jako u vloženého kaskádového stylu si vytvoříme nejdříve samostatný soubor "styly.css" s kaskádovými styly. (viz Příklad 1)
V třetím příkladu naleznete kompletní ukázku jak propojíme dokument se souborem, který obsahuje naše kaskádové styly.
Příklad 3:
<HTML> <HEAD> <TITLE> Ukázka importování kaskádového stylu </TITLE> <!-- importování kaskádového stylu ze souboru --> <STYLE TYPE="text/css"><!-- @import url('styly.css'); --></STYLE> </HEAD> <BODY> <SPAN> Text nastavený dokumentovým stylem pro tág SPAN. </SPAN> <P CLASS="new"> Text nastavený vlastním dokumentovým stylem, a to po zadání jména_třídy (.new), lze použít v různých tágech. </P> <DIV CLASS="abc"> Text nastavený dokumentovým style pro tág DIV. Tento text bude nastaven jen po zadání jména_třídy (abc), jméno_třídy je platné pouze pro tágy DIV. </DIV> <DIV> Text není změněn, není zadána třída (CLASS="abc"). </DIV> ... </BODY> </HTML>