CSS Syntax

Syntax

CSS syntax sa skladá z troch ?astí: selector (selektor), property (vlastnos?) a value (hodnota):

selector {property: value}

Selector je normálne HTML element/tag, ktorý chcete definova?, property (vlastnos?) je atribút, ktorý chcete zmeni? a ka?dé property mô?e ma? hodnotu. Property a value sú oddelené dvojbodkou a ohrani?ené mno?inovými zátvorkami:

body {color: black}

Note: Ak je hodnota viacslovná, dajte ju do úvodzoviek:

p {font-family: "sans serif"}

Pozn: Ak chcete ur?i? viac, ako jednu vlastnos?, musíte oddeli? ka?dú vlastnos? bodko?iarkou. Príklad dole ukazuje, ako definova? na stred-zarovnaný odstavec s ?ervenou farbou textu:

p {text-align:center;color:red}

Aby boli definície ?týlu ?itate?nej?ie, mô?ete napísa? ka?dú property na nový riadok, ako toto:

p
{
text-align: center;
color: black;
font-family: arial
}

Zoskupovanie

Mô?ete aj zoskupova? selektory. Oddelte ka?dý selektor ?iarkou. V príklade dolu som zoskupil v?etky elementy hlavi?iek. V?etky elementy hlavi?iek budú teraz zobrazené v zelenej farbe textu:

h1,h2,h3,h4,h5,h6
{
color: green
}

class Selector

S class selectorom mô?ete definova? rozli?né ?týly pre ten istý typ HTML elementu.

Povedzme, ?e by ste chceli ma? dva typy odstavcov vo va?om dokumente: jeden by mal by? zarovnaný doprava a druhý dostredu. Tu je vysvetlený tento príklad:

p.right {text-align: right}
p.center {text-align: center}

Musíte pou?i? class atribút vo va?om HTML dokumente:

<p class="right">
Tento odstavec bude zarovnaný napravo.
</p>

<p class="center">
Tento odstavec bude zarovnany na stred.
</p>

Pozn: Na aplikovanie viac ne? jedného class (triedy) na daný element, je syntax takýto:

<p class="center bold">
Toto je odstavec.
</p>

Odstavec hore bude zo?týlovaný triedou class="center" A triedou class="bold".

Mô?ete aj vynecha? názov tagu v selektore, na definíciu ?týlu, ktorý bude pou?itý vo v?etkých HTML elementoch, ktoré majú ur?itý class. V príklade dole maju v?etky HTML elementy triedu class="center" a budú zarovnané na stred:

.center {text-align: center}

V kóde dolu majú obidva - h1 element a p element - class="center". To znamená, ?e obidva elementy budú naformátované tak, ako je to nastavené v "center" selektore:

<h1 class="center">

Táto hlavi?ka bude zarovnaná na stred.
</h1>

<p class="center">
Tento odstavec bude zarovnaný na stred.
</p> 

NEZA?ÍNAJTE názov triedy s ?íslom! Nebude to fungova? v Mozilla/Firefox.

Pridanie ?týlov na elementy s podrobnými atribútmi

Mô?ete pridáva? ?týly aj do elementov s podrobnej?ími atribútmi.

Nastavenie tohto ?týla dole bude zahr?ova? v?etky elementy, ktoré budú ma? atribút s hodnotou "text":

input[type="text"] {background-color: blue}

id Selector

Mô?ete aj definova? ?týly pre HTML elementy s id selektorom. id selektor je definovaný, ako #.

?týl dole bude zahr?ova? v?etky elementy, ktoré majú id atribút s hodnotou "green":

#green {color: green}

?týl dole bude zahr?ova? p element, ktorý má id s hodnotou "para1":

p#para1
{
text-align: center;
color: red
}

NEZA?ÍNAJTE názov ID s ?íslom! Nebude to fungova? v Mozilla/Firefox.

CSS Komentáre

Komentáre sa pou?ívajú na vysvetlenie vá?ho kódu, ktoré vám mô?u pomôc? hociekdy v budúcnosti, ke? budete kód editova?. Komentár bude ignorovaný prehliada?mmi. CSS komentár sa za?ína s "/*", a kon?í s "*/", ako toto:

/* Toto je komentár */
p
{
text-align: center;
/* Toto je ?al?í komentár */
color: black;
font-family: arial
}