Predmetová komisia ELT a INF


Učebnica HTML - Štýly - CSS

HTML - Advanced - Styles


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

S HTML 4.0 celé formátovanie môže byť vyňaté preč z HTML dokumento a definované v jednom style sheete. Zápis stylu dokumentu. Párový tag <style> obsahujuje zápis stylu. Styl je zapísaný v jazyku CSS (Cascading Style Sheets), který nie je súčasťou HTML (aj keď na HTML úzko nadväzje).


Vyskúšajte si príklady:

Použitie štýlov v HTML
Ako pridať štýl informácií do sekcie <head> .

Odkaz , ktorý nie je podčiarknutý
Ako urobiť odkaz , ktorý nie je podčiarknutý, so štýlom atribút.

Odkaz na externé kaskádové štýly
Ako používať <link> tag pre odkaz na externú šablónu štýlov.


Ako používať štýly

Každý prehliadač "prečíta štýl a následne formátuje stránku podľa neho.

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

  • Ako obsah tagu <style>
  • Externým súborom - tagom <link rel=stylesheet href="subor.css"> sa dokument nalinkuje na súbor *.css, v ktorom sú definicie štýlu.
  • Priamo pri každom elemente pomocou obecného atributu style, ktorého hodnotou je CSS zápis. Pri tomto zápise na nepoužíva tag <style>.

Externé štýly

Pri vonkajších (externých) štýloch je ideálne, keď je štýl aplikovaný na mnoho stránok. S externým štýlov môžete zmeniť vzhľad celého webu zmenou jedného súboru. Každá stránka musí byť odkazovaná na štýl pomocou tagu <link>. Tag by mal byť v umiestnený - <head>v hlavičke stránky</head>.

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

Vnútorné štýly

Vnútorné štýly môžu byť použité v prípade jedného dokumentu ktorý má jedinečný štýl . Vnútorné štýly sú definované v <head> HTML stránky , pomocou <style> tagu napríklad:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

Inline štýly

Inline štýl môže byť použitý ako jedinečný štýl keď je nutné použiť ho na jeden výskyt elementu.

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

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

Ak sa chcete dozvedieť viac o štýloch navštívte náš CSS tutoriál


HTML Značky pre štýly

Tag Popis
<style> Definuje štýl informácie o dokumente
<link /> Definuje vzťah medzi dokumentom a externým zdrojom


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