Juraj: Vytvorená stránka „{{Navigacne menu - webovske technologie}} '''Čo je to CSS?''' CSS je skratka pre Cascading Style Sheets(kaskádové štýly) Štýly definujú spôsob, ako zobraziť HTM…“

2010-09-29T17:10:25Z

Vytvorená stránka „{{Navigacne menu - webovske technologie}} '''Čo je to CSS?''' *CSS je skratka pre Cascading Style Sheets(kaskádové štýly) *Štýly definujú spôsob, ako zobraziť HTM…“

Nová stránka

{{Navigacne menu - webovske technologie}}
'''Čo je to CSS?'''
*CSS je skratka pre Cascading Style Sheets(kaskádové štýly)
*Štýly definujú spôsob, ako zobraziť HTML elementy
*Štýly boli pridané do HTML 4.0 pre vyriešenie problémov zobrazovania stránky
*Externé štýly môžu ušetriť veľa práce pri vytváraní webu
*Externé štýly sú uložené v CSS súborov
*Viacero definícií štýlov sa kaskádovo zlučujú do jednej, výslednej definície.

'''Poradie kaskádovania:'''

Určitý typ definície štýlov má väčšiu prioritu než ostatné štýly definovania. Uvádzame poradie v akom sa vyhodnocujú CSS pravidlá pre vykresľovanie (renderovanie) výslednej web stránky. Začíname na úrovni s najnižšou prioritou.
#Preddefinované hodnoty internetového prehliadača
#Externá definícia štýlov (súbor .css)
#Interná definícia štýlov (vo vnútri elementu <nowiki><head></nowiki>)
#Inline štýl (vnútri elementu HTML)

==Verzie CSS==
Jazyk CSS má 3 verzie:
===CSS 1===
Prvá špecifikácia CSS (CSS level 1) sa stala oficiálnym odporúčaním W3C v decembri 1996. Medzi jeho vlastnosti patrí:
* Vlastnosti písma,
* Farba textu, pozadia a iné
* Text atribúty, ako sú medzery medzi slovami, písmenami a riadky textu
* Orientácia textu, obrázkov, tabuliek a ďalších prvkov
* Okraj, hranice, odsadenie a poziciovanie a pre väčšinu prvkov
* Unikátna identifikácia elementov

===CSS 2===
CSS level 2 bol vyvinutý konzorciom W3C a bol publikovaný ako odporúčanie v máji 1998. Nadmnožinou CSS1 - CSS2 obsahuje rad nových funkcií, ako je absolútne, relatívne a pevné umiestnenie prvkov, z-index, typy médií, podpora zvukových štýlov a obojsmerný text. Nové vlastnosti písma, ako sú napríklad tiene.

===CSS 3===
CSS level 3 je vo vývoji od 15.decembra 2005. CSS3 je modulárny a skladá sa z niekoľkých samostatných odporúčaní. Keďže CSS 3 je vo vývoji, podpora tohto odporúčanie nemusí byť v súčasných browseroch úplne implementovaná.

==Základná syntax CSS==
Štýl zozbrazavania vždy definujeme jednému alebo viacerým HTML elementom. Základná syntax je nasledujúca:
<source lang="css">
selektror: {vlastnosť: hodnota;}
</source>
Kde:
*selektor: vo všeovecnosti sa jedná o HTML element
*vlastnosť: vlastnosť podľa špecifikácie CSS
*hodnota: hodnota, ktorú sme definovali danej vlastnosti.

Zakladná definícia vlastností:
<source lang="css">
body {color: black}
p {font-family: "sans serif"}
p {text-align:center; color:red}
</source>

V prípade, ak chceme definovať rovnaké vlastnosti viacerým HTML elementom, tieto elementy oddelíme čiarkou:
<source lang="css">
h1,h2,h3,h4,h5,h6 { color: green }
</source>
V prípade, ak chceme definovať určité vlastnosti len niektorým elementom rovnakého typu (napr. len určitým odstavcom), použijeme selektor pre výber určitej triedy.

V príkalde definujeme nové vlastnosti len tým elementom p, ktoré majú hodnotu atribútu class="right". V druhom prípade definujeme zarovnanie vpravo všetkým HTML elementom, ktoré majú stribút class="right".
<source lang="css">
p.right {text-align: right}
.right{text-align: right}
</source>

Podobným spôsobom môžeme pracovať aj s atribútom id. V nasledujúcej ukážke sú definované rovnaké pravidlá ako v predchádzajúcom príklade. Rozdiel je v tom, že teraz nepracujeme s atribútom class, ale s atribútom id.
<source lang="css">
p#right {text-align: right}
#right{text-align: right}
</source>

'''Komentáre v CSS'''

Aj v CSS štýloch si môžeme písať komentáre, pre neskoršie ľahšie pochopenie napísaných pravidiel. V nasledujúcich pravidlách napíšeme aj komentár.
<source lang="css">
/* Toto je komentár */
p
{ text-align: center;
/* komentár: pre elementy p definujem čiernu farbu, ... */
color: black; font-family: arial
}
</source>

==Ako vložiť na web stránku CSS štýl==
===Externá definícia štýlov===
Najuniverzálnešia definícia štýlov je v externých CSS súboroch. Odkazy na tieto súbory musíme následne vložiť na web stránku do časti <nowiki><head></nowiki>

Tento spôsob vkladá odkaz na CSS súbor pomocou HTML tagu [[HTML_-_značkovací_jazyk#Vloženie externých súborov do HTML|link]]
<source lang="html4strict">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
</source>
Druhý spôsob je vloženie odkazu pomocou pravidiel jazyka CSS. Jedná sa o importovacie pravidlo @import. Hodnotou tohto pravidla je url adresa súboru zo štýlmi. Keďže sa jedná o CSS pravidlo, musí byť toto pravidlo v značkách <nowiki><style></nowiki>.
<source lang="html4strict">
<head>
<style>
@import url("mysheet2.css");
</style>
</head>
</source>
===Interná definícia štýlov===
Druhým spôspbom ako definovať CSS štýl je zapísať ich priamo do HTML súboru, do časti <nowiki><head></nowiki>. Štýl musíme písať medzi značky <nowiki><style> a </style></nowiki>. Tento spôsob je avšak menej univerzálny.
<source lang="css">
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
</source>
===Inline definovanie CSS štýlov===
Štýly môžeme definovať jednotlivým HTML elementom v mieste ich použitia. Je to najmenej efektívny spôsob, keďže musíme meniť priamo HTML kód.
<source lang="html4strict">
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
</source>

<source lang="css">
</source>

CSS - kaskákové štýly - História úprav

Juraj: Vytvorená stránka „{{Navigacne menu - webovske technologie}} '''Čo je to CSS?''' *CSS je skratka pre Cascading Style Sheets(kaskádové štýly) *Štýly definujú spôsob, ako zobraziť HTM…“

Juraj: Vytvorená stránka „{{Navigacne menu - webovske technologie}} '''Čo je to CSS?''' CSS je skratka pre Cascading Style Sheets(kaskádové štýly) Štýly definujú spôsob, ako zobraziť HTM…“