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>