Home | | HTML | | CSS | | XHTML |
 
CSS Základné
Úvod
CSS Syntax
CSS Ako na to
CSS Pozadia
CSS Texty
CSS Font
CSS Bordery
CSS Okraje
CSS Margin
CSS Padding
CSS Odrá?ky
CSS Tabu?ky
 
CSS Roz?írené
CSS Dimenzie
CSS Zatrie?ovanie
CSS Umiest?ovanie
CSS Pseudo-triedy
CSS Pseudo-element
CSS Jas obrázku
CSS Typy médií
CSS Zhrnutie
 
CSS Príklady
CSS Príklady
 
Zdroje
CSS2 Zoznam
CSS2 Tla?
CSS2 Po?utelné
CSS Jednotky
CSS Farby
CSS Hodnoty farieb
CSS Názvy farieb
 
CSS Quiz
CSS Quiz
 

CSS Ako na to?

obrazok obrazok

Príklady

Ako vlo?i? Style Sheet

Ke? browser ?íta style sheet, naformátuje dokument podla neho. Sú tri spôsoby, ako vlo?i? style sheet:

Externý Style Sheet

Externý style sheet (?alej u? len CSSko) je ideálny, ke? je ?týl aplikovaný na ve?a stránok. S externým CSSkom mô?ete zmeni? vzh?ad celého vá?ho webu, zmenením jednoho súboru. Ka?dá stránka musí obsahova? link na style sheet, s pou?i?ím <link> tagu. <link> tag sa vkladá do head sekcie: 

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

Browser pre?íta definície ?týlu zo súboru mystyle.css a naformátuje dokument podla neho

Externé CSSko mô?e by? napísané v ka?dom textovom editore. Súbor by nemal obsahova? ?iadne html tagy. CSSka by ste mali uklada? s .css koncovkou. Príklad CSSka, ukázaný dolu: 

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

Remark NENECHÁVAJTE medzery medzi hodnotou property (vlastnos?) a jednotkami! Ak pou?ijete "margin-left: 20 px" namiesto "margin-left: 20px", tak to mo?no bude fungova? len v IE6, ale nikde inde!.

Interný Style Sheet

Interné CSSko by sa malo pou?íva? v jednom dokumente, ktorý má jedine?né ?týly. Definujete interné ?týly v head sekcií, pou?i?ím <style> tagu, ako toto: 

<head>
<style type="text/css">

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

Browser pre?íta definície ?týlu a naformátuje dokument pod?a toho.

Pozn: Browser normálne ignoruje neznáme tágy. To znamená, ?e starý browser, ktorý nepodporuje ?týly, bude ignorova? <style> tag, ale obsah tohot <style> tagu bude zobrazený na stránke. Je mo?né predís? starým prehliada?om, aby to nezobrazovali = a to vlo?ením ?týlu do komentára:

<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ýl stráca ve?a výhod CSSka, mixovaním obsahu s prezentáciou. Pou?ívajte túto metódu úsporne, ako ke? je ?týl aplikovaný len na jeden vý?kyt nejakého elementu.

Aby ste mohli pou?íva? inline ?týly, pou?ívajte style atribút v konkrétnom tágu. Style atribút mô?e nadobúda? v?etky CSS vlastnosti. Príklad dolu predvádza, ako zmeni? farbu textu a ?avý margin v odstavci: 

<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ú 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 interný style sheet má tieto vlastnsoti pre h3 selektor:

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

Ak stránka s interným style sheetom bude tie? odkazova? na externý style sheet, vlastnosti pre h3 budú:

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

Farba je braná do úvahy z externého CSSka a text-align a font-size je nahradené s interným CSSkom.

obrazok obrazok
© 2008 Nikes