Predmetová komisia ELT a INF

Učebnica CSS - Ako na to..

CSS - How To

« Predchádzajúca Ďalšia kapitola »

Prehliadač načíta štýl a naformátuje stránku podľa neho.

Tri spôsoby, ako vložiť CSS

Existujú tri spôsoby vkladania štýlov:

* Externé štýlov
* Vnútorné štýlov
* Inline štýl

Externé štýly

Externé štýly sú vhodné vtedy, keď je štýl aplikovaný na viac stránok. S externým štýlom, môžete zmeniť vzhľad celého webu zmenou jedného súboru. Každá stránka musí mať odkaz na štýl pomocou tagov <link>. Tag <link> musí byť v hlavovičkovej časti kódu (<head>).

<head>
<link rel="stylesheet" type="text/css" href="mojstyl.css" />
</head>

Externé štýly môžu byť napísané v ľubovoľnom textovom editore. Tento súbor by nemal obsahovať žiadne HTML značky. Súbor so štýlmi byva uložený s príponou .css. Príklad štýlu v súbore je uvedený nižšie:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Tip: Nenechávajte medzery medzi hodnotou a jednotkou v pixeloch! "margin-left:20 px" (namiesto "margin-left:20px") bude to síce fungovať v IE, ale nie vo Firefoxe alebo Opere.

Vnútorné štýly

Vnútorné štýly by mali byť použité v jedinom dokumente pokiaľ sa jedná o jedinečný štýl. Interné štýly môžete definovať v hlavičkovej sekcii HTML stránky, pomocou tagu <style> takto:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline štýly

Inline štýly strácajú mnoho výhod štýlov zmiešaním s kódom stránky. Používajte túto metódu veľmi opatrne!

Ak chcete použiť inline štýly, ktoré daný štýl používajú atribút v danom tagu. Štýl atribút môže obsahovať ľubovoľnú CSS vlastnosť. Tento príklad ukazuje, ako zmeniť farbu na ľavom okraji odseku:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Mnohonásobné Style Sheety

Ak boli niektoré vlastnosti uvedené pre ten istý selektor v rozličných CSSkách, hodnoty budú zahrnuté (brané do úvahy) z CSSka, kde je selektor viac zadefinovaný

Napríklad, externý style sheet má tieto vlastnosti pre H3 selektor:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

A vnútorný štýl má tieto vlastnosti H3 selektora:

h3
{
text-align:right;
font-size:20pt;
}

Ak má stránka s vnútorným štýlmi aj odkazy na externé kaskádové štýly vlastnosti H3 bude:

color:red;
text-align:right;
font-size:20pt;

Farba sa dedí z externých štýlov a text - zarovnanie a font - veľkosť sa nahrádza z vnútorných štýlov.

Viac štýlov bude "kaskádovať" do jedného

Štýly môžu byť uvedené vo:

  • vnútri elementu HTML
  • vnútri sekcie head stránky HTML
  • v externom súbore CSS

Tip: Aj viac externých štýlov možno odkazovať v rámci jedného dokumentu vo formáte HTML.

Kaskádové poradie

Ktorý štýl bude použitý, ak je viac ako jeden štýl určený pre element HTML?

Všeobecne sa dá povedať, že všetky štýly budú "kaskádovať" do nového "virtuálneho" štýlu týmito pravidlami, kde číslo štyri má najvyššiu prioritu:

  1. Prehliadač predvolené
  2. Externé štýlov
  3. Vnútorná štýlov (v hlavovej časti)
  4. Inline štýl (vnútri elementu HTML)

Takže, inline štýl (vnútri elementu HTML) má najvyššiu prioritu, čo znamená, že prepíše štýl definovaný vo vnútri <head>, alebo v externom štýlov, alebo v prehliadači (implicitná hodnota).

Poznámka: Pokiaľ odkaz na externý súbor štýlov je umiestnený za vnútorným štýlom v HTML <head>, externé štýly potlačia vnútorné štýly!

« Predchádzajúca Ďalšia kapitola »