CSS - kaskákové štýly
Č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 <head>)
- Inline štýl (vnútri elementu HTML)
Obsah
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:
selektror: {vlastnosť: hodnota;}
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í:
body {color: black}
p {font-family: "sans serif"}
p {text-align:center; color:red}
V prípade, ak chceme definovať rovnaké vlastnosti viacerým HTML elementom, tieto elementy oddelíme čiarkou:
h1,h2,h3,h4,h5,h6 { color: green }
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".
p.right {text-align: right}
.right{text-align: right}
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.
p#right {text-align: right}
#right{text-align: right}
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.
/* Toto je komentár */
p
{ text-align: center;
/* komentár: pre elementy p definujem čiernu farbu, ... */
color: black; font-family: arial
}
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 <head>
Tento spôsob vkladá odkaz na CSS súbor pomocou HTML tagu link
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
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 <style>.
<head>
<style>
@import url("mysheet2.css");
</style>
</head>
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 <head>. Štýl musíme písať medzi značky <style> a </style>. Tento spôsob je avšak menej univerzálny.
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
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.
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
