Navigačné menu

• XHTML, CSS a JavaScript
• Kapitola 1: Základy jazyka XHTML
  • Kapitola 1.1: Úvod do XHTML
  • Kapitola 1.2: Pravidlá XHTML
  • Kapitola 1.3: Kostra stránky
  • Kapitola 1.4: Nadpisy
  • Kapitola 1.5: Odkazy
  • Kapitola 1.6: Zoznamy
  • Kapitola 1.7: Tabuľky
  • Kapitola 1.8: Obrázky
  • Kapitola 1.9: Úlohy
• Kapitola 2: Kaskádové štýly
  • Kapitola 2.1: Úvod do CSS
  • Kapitola 2.2: Farby
  • Kapitola 2.3: Písmo
  • Kapitola 2.4: Zarovnanie
  • Kapitola 2.5: Odkazy
  • Kapitola 2.6: Zoznamy
  • Kapitola 2.7: Rámčeky a ohraničenie
  • Kapitola 2.8: Pozadie
  • Kapitola 2.9: Triedy a identifikátory
  • Kapitola 2.10: CSS vlastnosti - stručný prehľad
  • Kapitola 2.11: Úlohy
• Kapitola 3: Validácia web stránok
• Kapitola 4: Okná
  • Kapitola 4.1: Vytvorenie štruktúry okien
  • Kapitola 4.2: Určenie obsahu okna
  • Kapitola 4.3: Úlohy
• Kapitola 5: Formuláre
 
• Ďalšie študijné materiály

2. Kaskádové štýly

2.1. Úvod do CSS

2.1.1. História

CSS (Cascading Style Sheets) resp. kaskádové štýly vznikli ako súhrn metód pre úpravu vzhľadu stránok. Prvý návrh normy bol zverejnený v roku 1994, v roku 1996 bola vydána špecifikácia CSS 1, v roku 1998 CSS 2, v súčasnosti sa pracuje na verzi CSS 3.

2.1.2. Na čo je to dobré?

CSS sa využíva na formátovanie obsahu HTML, XHTML a XML dokumentov. V porovnaní s formátovaním pomocou atributov v HTML formátovacie schopnosti rozširuje. Štýly umožňujú presne určiť, ako bude ktorý element vypadať. Narozdiel od atributov štýlom môžeme definovať jednotný vzhľad elementu pre celý dokument (napr. že všetky nadpisy úrovne 1 budú červené) a to jediným zápisom pre príslušný element. Rovnako tak môžeme pomocou štýlu určiť odlišné formátovanie pre napr. len jediný výskyt určitého elementu. Tým sa jednak zbavíme veľkého množstva kódu, jednak sa tento kód stane oveľa prehľadnejší. Naviac pokiaľ sa raz rozhodneme zmeniť napríklad farbu písma všetkých odstavcov, bude to pre nás otázka niekoľko málo sekúnd, meniť každý atribút v každom elementu v HTML by bola katastrófa. Jeden štýl môžeme ľahko použiť pre ľubovoľné množstvo stránok.

Ukážka možností CSS

Nasledujúce linky odkazujú na stránky, ktoré majú rovnaký obsah. Rozdiel je iba v pripojenom súbore CSS, ktorý ovplyvňuje vzhľad celej stránky.

• Stránka bez štýlov - základ pre všetky stránky
• Jednoduché formátovanie 1 [zobraziť súbor CSS]
• Jednoduché formátovanie 2 [zobraziť súbor CSS]
• Formátovanie s menu [zobraziť súbor CSS]
• Komplexné formátovanie 1 [zobraziť súbor CSS]
• Komplexné formátovanie 2 [zobraziť súbor CSS]

2.1.3. Začínáme

Štýl sa skladá z pravidiel pre jednotlivé elementy, ktoré majú byť formátované. Každé takéto pravidlo má dve časti, selektor (názov elementu, pre ktorý má toto pravidlo platiť) a deklaráciu (čo má pre neho platiť). V deklarácii určujeme vlastnosť a jej hodnotu, deklarácia je uzavrena do zložených zátvoriek. Celé to zapisujeme takto:

selektor {vlastnosť: hodnota_vlastnosti}

h1 {
  color: blue
}

Selektorom, teda elementom, ktorý formátujeme je h1 (nadpis 1. úrovne). Deklarácia je {color: blue}. Ta určuje, že vlastnosť color bude mať hodnotu blue. Celé dokopy to teda znamená, že všetky nadpisy 1. úrovne v dokumentu budú mať modrú farbu.

Pokiaľ budeme chciet určiť elementu viac než jednu vlastnosť, jednotlivé vlastnosti od seba oddelíme bodkočiarkou. Takto môžeme definovať ľubovoľné množstvo vlastností.

selektor {
  vlastnosť1: hodnota_vlastnosti1; 
  vlastnosť2: hodnota_vlastnosti2;
}

Pokiaľ budeme chcieť určiť dvom elementom ich spoločnú vlastnosť, oddelíme od seba jednotlivé selektory čiarkou.

selektor1, selektor2 {
  vlastnost: hodnota_vlastnosti;
}

2.1.4. Dedičnosť

Väčšina vlastností sa dedí. To znamená, že element, ktorý nemá vlastnosť definovanú, dedí ju po nadradenom elemente. Týka sa to predovšetkým vlastností písma — farby, veľkosti, štýlu atď. Pokiaľ teda chceme definovať nejakú vlastnosť, ktorú budú mať všetky elementy spoločnú, definujeme ju pre element body.

2.1.5. Komentáre

Pokiaľ si chceme k štýlu písať nejaké poznámky pre lepšiu orientáciu, píšeme ich do komentárov. Tie sa v CSS tvoria pomocou /* a */. Medzi hviezdičky potom môžeme umiestniť aj niekoľkoriadkový komentár, ten sa samozrejme vo výslednom zobrazení neobjaví.

body {
  color: blue; /* komentár: všetky texty budú modré*/
}

2.1.6. Pripojenie štýlu k dokumentu

Štýl môžeme k dokumentu pripojiť rôznymi spôsobmi, môžeme definovať priamo v dokumente alebo v externom súbore, spôsoby môžeme aj kombinovať.

2.1.7. Externý súbor

Pokiaľ chceme mať štýl uložený v externom súbore (což je veľmi výhodné pri používaní jedného štýlu pre viac dokumentov), v nejakom textovom editore uložíme nami definovaný štýl do súboru s príponou css. Ten potom pripojíme k dokumentu zápisom v hlavičke (t.j. medzi tagmi <head> a </head>) buď v tagu link:

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

alebo v tagu style:

<style type="text/css">@import "styl.css";</style>

Pokiaľ je štýl umiestnený na inom serveri, tak môžeme použiť zápis:

<style type="text/css">@import url("http://www.neco.cz/styl.css");</style>

Zápisom @import "styl.css"; môžeme tiež vložiť jeden štýl do druhého štýlu.

Uloženie formátovacích informácií do samostatného súboru je výhodné aj na zníženie množstva prenášaných dát zo servera smerom ku klientom, pretože ak sú formátovacie dáta súčasťou každého webového dokumentu, sú prenášané vždy, keď je dokument vyžiadaný. V prípade ich uloženia do samostatného súboru sú prenesené raz, následne sa čítajú z vyrovnávacej pamäte počítača používateľa. V niektorých prípadoch sa takto darí znížiť množstvo prenášaných dát o desiatky percent.

Definovanie štýlu vnútri dokumentu

To môžeme vykonať opäť v tagu style kam tentokrát namiesto odkazu na externý štýl umiestníme priamo definíciu štýlu.

<style type="text/css">body {color: blue}</style>

Alebo môžeme definovať štýl priamo nejakému elementu, čo sa hodí zvlášt v prípade, kde máme definovaný jednotný štýl, ale pre napríklad jedno konkrétne slovo chceme použiť iné pravidlo. Potom použijeme v príslušnom tagu atribút style.

<h1 "style=color: green">nadpis</h1>

2.1.8. Váha štýlov

Pokiaľ v štýle definujeme pre rovnaký element rovnkú vlastnosť dvakrát, vyššiu váhu má deklarácia, ktorá bola definovaná neskôr (myslené na neskoršom riadku) a tá sa tiež vykoná. Pokiaľ by sme chceli niektorej deklarácii priradiť väčšiu dôležitosť, použijeme !important.

h1 {
  color: blue !important
}

Poznámka: staršie prehliadače štýly vôbec nepodporujú. Pokiaľ teda používate zápis pomocou tagu style a chcete tento prípad ošetriť, stačí celý štýl vložiť do komentárov: <!-- tu bude definovaný štýl -->.

2.2. Farby

2.2.1. Použitie

Na stránke sa farba používa na text, odkazy, pozadie a ohraničenie. Farbiť môžeme buď celý dokument selektorom body alebo jednotlivé elementy.

Farbu pozadia volíme tak, aby text bol dobre čitateľný, teda kontrastný k textu, farba by nemala byť príliš jasná, vyslovene nevhodné je použitie jasno červenej, opatrne aj s modrou. Signálne farby sú dobré pre zvýraznenie textu alebo odkazov. Pokiaľ predpokládáme, že užívatelia si budú stránku tlačiť, je treba dať pozor na podobnú sýtosť farieb (aby sa farby „nezliali”).

2.2.2. Vznik farieb

Pre zobrazenie farieb na monitore sa používa systém farieb RGB (Red Green Blue). Každá farba na monitore sa skladá z troch základných farieb (červenej, zelenej a modrej) v rôznom pomere. Farby sa vytvárajú aditivne – pridávaním k čiernej, sčítaním farieb. Čím viac farieb, tým bližšie k bielej. Čím menej farieb, tým bližšie k čiernej. Odstiene šedej farby vznikajú, keď sú všetky tri zložky majú rovnakú hodnotu.

2.2.3. Zápis farby

Pre zápis farby môžeme použiť:

• Názov farby (v anglickom jazyku)

  body {color: blue}

  Poznámka: Pri použití zápisu menom farby sú validné iba základné farby (16 VGA farieb).

• RGB zápis:

  – Percentuálne

  Intenzitu každej farby určujeme percentami 0% (minimálna intenzita) až 100% (maximálna intenzita)

  body {color: rgb(100%,0%,0%)}

  – Desiatkovo

  Čísla 0 až 255

  body {color: rgb(255,0,0)}

  – šestnástkovo

  00 až FF (t.j. 0-9, a-f), zápis začína hash-markom #

  body {color: #FF0000}

  Pokiaľ sú obe číslice odpovedajúce jednej farebnej zložke rovnaké, môžeme použiť skrátený zápis

  body {color: #F00}

2.2.4. Farbenie dokumentu

Vo väčšine elementov môžeme farbiť pozadie pomocou vlastnosti background-color. Napríklad:

body {background-color: #00FF00}

Text farbíme vlastnosťou color. Napríklad:

h1 {color: #FFFFFF}

Pokiaľ nedefinujeme žiadne farby, budú použité pôvodné farby prehliadača, t.j. transparentná pre pozadie, čierna pre text, modrá pre odkazy, fialová pre navštívené odkazy a červená pre aktívne odkazy.

2.2.5. Bezpečné farby

Bezpečné farby sú také farby, ktoré by mal podporovať akýkoľvek WWW klient na akomkoľvek operačnom systéme, podporujúci aspoň 256 farieb. Inými slovami, pokiaľ použijete na svojich stránkách tieto farby, máte zaručené, že každý, kto si vaše stránky bude pozerať, si ich bude pozerať vo farbách, v akých ste ich vytvorili. V prípade, že WWW klient nemá k dispozícii vami definovanú farbu, snaží sa ju „poskladať” z iných farieb (tzv. dithering).

Bezpečných farieb je 216 a 16 odstieňov šedej farby. Sú to farby, pri ktorých hodnota každej zložky (červená, zelená a modrá) nadobúda iba hodnoty 00, 33, 66, 99, CC alebo FF. Pri všetkých teda môžeme použiť zkrátený zápis farby (napr. #F09).

Poznámka: Pri posunutí kurzoru myši na farbu sa zobrazí jej RGB kód (pokiaľ nemáte vypnuté zobrazovanie popiskov).

2.2.6. Pomenované farby

Základných 16 VGA farieb

2.3. Písmo

Písmo na stránke by malo byť predovšetkým čitateľné. Je zbytočné, používať kdejaké zložité nepodporované písmo, keď si potom návštevník text nebude môcť ani prečítať. Čím jednoduchšie a obyčajnejšie písmo bude, tým lepšie. Je tiež zbytočné, používať rôzne písmo v rôznych častiach webu.

2.3.1. Rodina písma

Na určenie rodiny písma slúži vlastnosť font-family. V nej definujeme názvom písma aké konkrétne písmo bude použité (napr. Arial). Ďalej definujeme písmo, ktoré bude použité v prípade, že prvé definované písmo nemá prehliadač k dispozícii. Takto môžeme určiť aj niekoľko alternatívnych písiem. Pre prípad, že by prehliadač nemal k dispozícii žiadné z určených písiem ešte použijeme obecnú rodinu (tu by sme mali použiť vždy a to na konci výpisu písiem).

serif

pätkové písmo (napr. Times New Roman)

sans-serif

bezpätkové písmo (napr. Arial, Arial CE, Arial Narrow, Verdana, Helvetica)

monospace

neproporciálne písmo (napr. Courier, Courier New)

cursive

ozdobné kurzíva (napr. Comic Sans, )

fantasy

ozdobné písmo (napr. Western)

Celý zápis potom môže vypadať napr. takto:

body {font-family: Arial, Helvetica, sans-serif}

2.3.2. Štýl písma

Vlastnosť font-style určí, či sa bude jednať o písmo normálne, kurzívu, alebo sklonené písmo. Rozdiel medzi kurzívou a skloneným písmom je aj v tom, že kurzíva je jedinečným rezom písma. Sklonené písmo vzniká transformáciou normálneho rezu.

normal

normálne

italic

kurzíva

oblique

sklonené písmo

body {font-style: italic}

2.3.3. Varianta písma

Sú dve varianty písma: normálne písmo a kapitálky. Určujú sa vlastnosťou font-variant.

normal

normálne

small-caps

kapitálky

h1 {font-variant: small-caps}

2.3.4. Veľkosť písma

Veľkosť písma určíme vlastnosťou font-size. Takto môžeme určiť 7 rôznych veľkostí:

xx-small

x-small

small

medium

large

x-large

xx-large

h1 {font-size: large}

Veľkosť písma môžeme určiť tiež relativne vzhľadom k aktuálnej veľkosti písma.

larger

väčšie než aktuálne písmo

smaller

menšie než aktuálne písmo

h2 {font-size: larger}

Ďalej môžeme veľkosť určiť napr. v pixeloch (px) alebo iných jednotkách (pt, em, ex, cm, mm, in).

p {font-size: 16px}

Relatívne vzhľadom k aktuálnej veľkosti písma môžeme veľkosť určiť v percentách.

h1 {font-size: 150%}

2.3.5. Duktus písma

Duktus písma sa určuje vlastnosťou font-weight

normal

normálne

bold

tučné

h1 {font-weight: bold}

Tato vlastnosť môže mať ešte hodnotu bolder (o niečo silnejšie písmo ako normálne) a lighter (o niečo slabšie ako normálne).

2.4. Zarovnanie

2.4.1. Vertikálne zarovnanie

Vertikálne zarovnanie textu sa nastavuje vlastnosťou vertical-align. Ako jej hodnota sa používajú baseline, sub, super, top, text-top, middle, bottom, text-bottom, číslo, percento, inherit.

    
top
    
bottom
    
middle

text vertical-align: 30px text

text vertical-align: -150% text

text vertical-align: super text

text vertical-align: sub text

2.4.2. Horizontálne zarovnanie

Nastavenie horizontálneho zarovnania riadkových prvkov sa vykoná pomocou vlastnosti text-align. Ako jej hodnota sa používajú left, right, center, justify, inherit.

text-align: left
text-align: right
text-align: center
text-align: justify

2.5. Odkazy

Odkazy by mali byť od okolitého textu odlíšené tak, aby boli na prvý pohľad viditeľné. Návštevník stránok sa totiž na webe orientuje predovšetkým podľa odkazov, text treba ani nečíta, sleduje iba kam smerujú odkazy. Preto je dobré, keď odkazy z okolitého textu jasne vyčnievajú.

2.5.1. Farba odkazu

Defaultne sa odkazy v prehliadači zobrazujú modrou farbou a podtrhnuté. Navštívené odkazy sú fialové a aktívne odkazy sú červené. Pri prechode myši cez odkaz sa jeho vzhľad nijak nemení. Toto všetko ide samozrejme ľahko zmeniť.

Farbu odkazu zmeníme rovnako ako farbu akéhokoľvek iného elementu, teda pomocou vlastnosti color.

a {color: green}

2.5.2. Ozdobenie textu

Býva dobrým zvykom odkazy podtrhávať. Nie pre každého užívateľa je farebné odlíšenie odkazov od okolitého textu dostačujúci. Ďalším zvykom je nepočiarkovať žiadný iný text. Na definovanie štýlu ozdobenia slúži vlastnosť text-decoration. Má vlastnosti none (bez ozdobenia), underline (podčiarknutie), overline (nadčiarknutie), line-through (preškrtnutie). Použiť môžeme aj všetky hodnoty naraz.

a {text-decoration: underline overline}

2.5.3. Pseudotriedy

Pseudotriedy slúžia na odlišné definovanie vlastností odkazov (link), navštívených odkazov (visited) a aktívnych odkazov (active). Zapisujú sa s dvojbodkou za tag a.

a:visited {color: yellow}

Pokiaľ chceme, aby odkazy svoj vzhľad zmenili pri prechode myšou, použijeme hover.

a:hover {text-decoration: none}

Vypadať to potom môže treba takto: odkaz.

2.6. Zoznamy

Zoznamy môžeme v CSS formátovať ako akékoľvek iné elementy, naviac však môžeme určiť druh odrážky číslovaného aj nečíslovaného zoznamu. S použitím obrázku môžeme vytvoriť aj odrážky vlastné.

2.6.1. Odrážky a číslovanie

Druh odrážky aj číslovanie určujeme vlastnosťou list-style-type. Túto vlastnosť môžeme priradiť tak selektoru zoznamu ul alebo ol, ako aj položke zoznamu li.

ul {list-style-type: square}

2.6.2. Nečíslované seznamy

• disc – vyplnené koliečko v IE a Opere; vyplnený kosoštvorec v Mozille a Netscape
• circle – prázdne koliečko v IE a Opere; prázdny kosoštvorec v Mozille a Netscape
• square – štvorec vyplnený

2.6.3. Číslované seznamy

1. decimal – arabské číslice (1.)
2. lower-roman – malé rímské číslice (i.)
3. upper-roman – veľké rímské číslice (I.)
4. lower-alpha – malé písmená (a.)
5. upper-alpha – veľké písmená (A.)

• none – bez odrážky

2.6.4. Dalšie možnosti číslovania zoznamov, ktoré ale nefungujú vo všetkých prehliadačoch

1. decimal-leading-zero – arabské číslice, pri jednomiestných číslach začínajúce nulou (01.); nefunguje v IE a Opere
2. lower-greek – malé písmená greckej abecedy (α.); nefunguje v IE
3. lower-latin – malé písmená (a.); nefunguje v IE
4. upper-latin – veľké písmená (A.); nefunguje v IE
5. georgian – nefunguje asi nikde
6. armenian – arménština, nefunguje v IE, v Opere iba pokiaľ je dostupný font

2.6.5. Umiestnenie odrážky

Odrážku umiestňujeme pomocou vlastnosti list-style-position. Môže byť buď vnútri textu, tomu odpovedá hodnota inside, alebo zvonka textu s hodnotou outside.

2.6.6. Obrázok ako odrážka

Ako odrážku môžeme tiež použiť obrázok. Vlastnosť list-style-image má ako hodnotu URL obrázka.

ul {list-style-image: url("adresar/obrazok.gif");}

2.7. Rámčeky a ohraničenie

Ohraničenie elementov tvorí dosť často veľkú časť designu. Pomocou ohraničenia sa vytvárajú rôzne zvislé a vodorovné čiary, rámčeky pre obrázky a podobne.

Možnosti ohraničenia

Spôsob ohraničenia elementov určuje vlastnosť border – pre ohraničenie elementu „zo všetkých strán” a vlastnosti border-top, border-right, border-bottom a border-left pre ohraničenie zhora, zprava, zdola a zľava. Tieto vlastnosti majú tri hodnoty:

hrúbka ohraničenia

napr. 1px

štýl ohraničenia

• solid – jednoduchá čiara
• double – dvojitá čiara
• dotted – bodkovaná čiara

farba ohraničenia

napr. black (viac viď. Farby v CSS)

border-top: 2px solid green;

Bez ohraničenia

Hodnotou vlastnosti border môže byť tiež none. Element teda nebude mať žiadne ohraničenie (čo je standardné nastavenie). Túto vlastnosť využijeme napríklad pokiaľ máme obrázkový odkaz, keď sa okolo obrázku vytvorí spravidla modrý rámček.

img {border: none}

Samostatný zápis

Jednotlivé hodnoty vlastnosti border môžeme zapisovať tiež zvlášť pomocou vlastností border-width (hrúbka ohraničenia), border-style (štýl ohraničenia) a border-color (farba ohraničenia). Takto rozpísaný zápis bude totožný z prvým zápisom.

border-width:2px;
border-style:solid;
border-color:green;

Rozpísanie po jednotlivých vlastnostiach je vhodné napr. v prípade, že chceme všetky nadpisy ohraničiť tenkou čiarou, ale každý inou farbou. Potom definujeme hrúbku a štýl ohraničenia pre všetky nadpisy naraz a farbu definujeme zvlášť pre každú úroveň nadpisu.

2.8. Pozadie

Pozadie elementu a celej stránky môžeme vytvoriť buď prostým určením farby pozadia alebo použitím obrázku.

Pozadie určené farbou

Pre vytvorenie farebného pozadia použijeme CSS vlastnosť background-color. Jej hodnotou bude požadovaná farba (viac o farebných hodnotách viď. farby)

body {background-color:#aaa}

Obrázok ako pozadie

Pozadie elementu a stránky môže byť akýkoľvek obrázok. Je však nutné mať na zreteli, že je iba pozadím a dá sa predpokladať, že cez neho bude nejaký text, ktorý musí byť čitatelný, a to vo všetkých častiach obrázku.

Samotný obrázok určíme vlastnosťou background-image, jej hodnotou je cesta k obrázku, zapísaná v zátvorke za parametrom url.

body {background-image:url(obrazky/pozadie.gif)}

Opakovanie obrázku

Obrázok na pozadí sa môže opakovať (napr. ako nejaká vzorka) alebo môže byť umiestnený iba raz. Štandardne sa obrázok opakuje v oboch smeroch (x a y) až do zaplnenia celej plochy elementu.

Pre určenie spôsobu opakovania sa používa vlastnosť background-repeat. Pokiaľ chceme, aby sa obrázok opakoval len v smere x (t.j. horizontálne), použijeme hodnotu repeat-x, v smere y (t.j. vertikálne) repeat-y. Pokiaľ nechceme, aby sa obrázok opakoval (napr. ak ide o logo či iný grafický prvok, ktorý nemá vytvárať vzorku), použijeme hodnotu no-repeat.

body {background-repeat:repeat-y}

Pri opakovaní obrázku je vhodné použiť obrázok, ktorý „sám na seba nadväzuje”.

Umiestnenie pozadia (obrázku)

Pokiaľ chceme obrázok umiestniť inak, než s začiatočnou pozíciou (t.j. ľavý horný roh elementu), použijeme vlastnosť background-position. Umiestnenie určuje horizontálna a vertikálna hodnota. Hodnoty horizontálneho umiestnenia môžu byť left (vľavo), center (na stred) a right (vpravo). Hodnoty vertikálneho umiestnenia sú top (hore), center (na stred) a bottom (dole).

h1 {background-position:left center}

2.9. Triedy a identifikátory

Triedy a identifikátory v CSS slúžia k tomu, aby sme mohli rôzne elementy formátovať rôzne. Napríklad odkazy na stránke. Každý z nás asi chce mať na stránke rôzne druhy odkazov, nie iba jeden. Inak sa obvykle robia odkazy v menu, inak odkazy v texte.

2.9.1. Trieda class v CSS

Triedy vytvoríme ľahko tak, že k elementu v HTML pridáme atribut class. Jeho hodnotou bude nejaký reťazec písmen, rovnaký potom budeme používať v CSS štýle ako selektor.

<p class="poznamka">Nejaký text</p>

Týmto hovoríme, že tento odstavec bude formátovaný podľa pravidiel triedy poznamka, na formátovanie ostatných odstavcov sa tieto pravidlá neprejavia. Teraz musíme ešte tie pravidlá určiť v CSS štýle.

.poznamka {font-size: x-small; color: black}

Teraz teda budeme mať všetky odstavce rovnaké, iba odstavec s triedou poznamka bude vypadať inak (malým čiernym písmom). Resp. inak budú vypadať všetky odstavce s triedou poznamka, pretože rovnakú triedu môžeme použiť pri ľubovoľnom množstve elementov. Dokonca aj pri rôznych elementoch.

<p class="poznamka">Nejaký odstavec</p>
<li class="poznamka">Položka zoznamu</li>

.poznamka {color: black}  štýl sa aplikuje na všetky elementy s triedou poznamka
/* štýl sa aplikuje na všetky elementy s triedou poznamka */
li.poznamka {color: blue}  
/* štýl sa aplikuje iba na elementy li s triedou poznamka */

Dedičnosť

Trieda každého elementu bude dediť všetky vlastnosti daného elementu a naviac bude mať svoje vlastné, teda napr.:

p {text-align: center; color: blue}
.poznamka {font-size: x-small; color: black}

Týmto zápisom je naznačené, že všetky odstavce budú zarovnané na stred a ich text bude mať modrú farbu (prvá deklarácia). Toto obecne platí pre všetky odstavce stránky. Odstavec s triedou poznamka bude mať navyše ešte menšie písmo (druhá deklarácia). Farba je určená v oboch deklaráciach, v takomto prípade má vyššiu prioritu deklarácia zadaná neskôr, teda odstavec s triedou poznamka bude mať čierny text. Všetky odstavce teda budú modré, zarovnané na stred, okrem odstavca s triedou poznamka, ten bude čierny, s malým písmom, zarovnaný bude tiež na stred.

Kontextová deklarácia s triedou

<p class="poznamka"><a href=" … ">Odkaz</a> Nejaký text</p>

a.poznamka {color: red}

Možnosť kontextovej deklarácie platí aj pre triedu. Tento zápis hovorí, že odkazy v odstavci triedy poznamka budú červené.

2.9.2. Identifikátor id v CSS

Identifikátor sa od triedy líši tým, že sa jedná vždy o jednoznačný identifikátor. To znamená, že ho na každej stránke môžeme použiť iba raz. Oproti tomu triedu sme mohli použiť viackrát na každej stránke webu.

Identifikátory sa teda používajú práve tam, kde je isté, že sa daný element objaví v stránke iba raz. Ideálne sa teda hodí pre veci ako je box celej stránky, menu, záhlavie alebo zápatie. Identifikátory sa označujú dvojkrížkom (#). Inak je ich zápis rovnaký ako zápis triedy.

<div id="menu"> … </div>

#menu {width:14em; background-color:black}
#menu a {color: white}

2.9.3. Absolútna a realatívna pozícia - pracovná verzia

<html> 
  <head> 
    <style> 
    #lavy { 
      position:absolute; 
      width:176px; 
      top:0px; 
      left:0PX; 
      height:100%; 
      float: left; 
      background-color: #c0c0c0; 
    } 
    #stred { 
      position:absolute; 
      top:0px; 
      width:550px; 
      height:100%; 
      left:177px; 
      background-color: #ffff99; 
    } 
    </style>     
  </head> 
<body>              

<!-- Menu -->
<div id="lavy"> 
<a href="linka1.html" >LINKA 1</a><br /> 
<a href="linka1.html" >LINKA 1</a><br /> 
<a href="linka1.html" >LINKA 1</a><br /> 
</div> 
<!-- Menu -->

<!-- Hlavna stranka -->
<div id="stred"> 
<p>Text Text Text</p>
</div> 
<!-- Hlavna stranka -->

</body> 
</html>

2.10. CSS vlastnosti - stručný prehľad

Tu nájdete kompletný prehľad vlastností CSS1 a niektoré vlastnosti a hodnoty CSS2.1 (označené *). V tabuľkách je zapísaný názov CSS vlastnosti a jej opis, možné hodnoty (tučne vyznačená hodnota je pre danú vlastnosť implicitná), význam hodnoty, elementu, pre ktorý je možné danú vlastnosť použiť a dedičnosť vlastnosti.

Vlastnosti písma

Vlastnosti farby a pozadia

Vlastnosti textu

Vlastnosti boxov

Klasifikačné vlastnosti

Vlastnosti polohovania

2.11. Úlohy