| Začíname s HTML |
Ján Guniš, PF UPJŠ Košice |
| 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
Kaskádové štýly (Cascading Style Sheets CSS)
Ak váš web začne naberať na mohutnosti, počet stránok sa vyjadruje v desiatkach
či stovkách zistíte, že html začina byť dosť nepraktické. A to nehovoríme
o tom, keď sa rozhodnete zmeniť "vizáž" vašich stránok. Nekonečné
prepisovanie formátu odsekov, zoznamov a nadpisov vám dá poriadne zabrať.
Ale naľakajte sa, na pomoc prichádzajú kaskádové štýly.
Pôvodná verzia HTML predpokladala formátovanie textu až pri zobrazení
stránky pomocou HTML značiek ako napr.: H1, P, FONT atď. Pomocou CSS si v úvode
stránky, alebo v externom súbore vieme vytvoriť niekoľko štýlov,
definujeme ich atribúty a v ďalšom texte sa na ne odkazujeme. Celý dizajn
webu, (formátovanie, zarovnanie, farby, ..) môže byť uložený v jednom
externom súbore.
Štýly vznikli niekedy koncom roku 1996 (CSS1) a rozšírenia v podobe CSS2
sa dočkali v máji 1998, takže dnešné prehliadače by nemali mať žiaden
problém s ich interpretáciou. Momentálne (apríl 2004) je vo vývoji verzia
CSS3. Kompletnú špecifikáciu CSS2
podľa W3C nájdete na serveri rayman.
Poďme sa bližšie pozrieť na praktické použitie štýlov. Štýly sa dajú
v zásade použiť dvoma spôsobmi. Je možné modifikovať už existujúce
vlastnosti štýlov (napr. P, H1 ...) alebo vytvárať štýly úplne nové. Pri
tvorbe úplne nového štýlu, je potrebné definovať všetky vlastnosti, čo môže
byť dosť náročné. V praxi sa preto častejšie používa spôsob, keď
"dodefinujeme" nové vlastnosti už existujúcim štýlom.
Štýl môžeme definovať niekoľkými spôsobmi.
- priamo, v texte zdojového súboru pri formátovacej značke
- pomocou "štýlopisu" v hlavičke stránky, štýlopis je zoznam
štýlov, ktoré sa použijú v danom dokumente
- pomocou "štýlopisu" v externom súbore, na ktorý sa v konkrétnom
dokumente odvolávame pomocou značky LINK (príp. cez @import)
Predstavme si napr., že chceme definovať štýl nadpisu úrovne 3 (teda
zmeniť vlastnosť H3). Urobíme to troma spôsobmi:
Definícia priamo pri značke v dokumente. Definujeme štýl nadpisu H3 tak,
aby bol nadpis modrou farbou.
| časť zdrojového kódu stránky |
výsledok v prehliadači |
| <H3 style="color:
#0000FF">Nadpis
3</H3> |
Nadpis 3
|
Definícia v štylopise v hlavičke dokumentu. Definujme štýl nadpisu H3
nasledovne: veľkosť 20 pixelov, farba zelená.
| časť zdrojového kódu stránky |
výsledok v prehliadači |
...
<head>
<style type="text/css">
H3 {color: "#00FF00"; font-size: 20px}
</style>
</head>
<body>
...
<H3>Nadpis
3</H3>
...
</body>
... |
Nadpis 3
|
Definícia v štýlopise v externom súbore. Definujme štýl nadpisu H3
nasledovne: veľkosť 30 pixelov, farba červená, zarovnanie do stredu.
| časť zdrojového kódu stránky/externého súboru |
výsledok v prehliadači |
obsah súboru styl.css:
h3 { color: #FF0000;
font-size: 30px;
text-align: Center }
|
|
obsah html dokumentu:
<head>
<style type="text/css">
@import "styl.css"
</style>
</head>
<body>
...
<H3>Nadpis
3</H3>
...
</body>
... |
Nadpis 3
|
alebo
<head>
<link rel="stylesheet" type="text/css" href="styl.css">
</head>
<body>
...
<H3>Nadpis
3</H3>
...
</body>
... |
Nadpis 3
|
No, a čo by sa stalo, keby sme všetky tri definície zlúčil dohromady?
| časť zdrojového kódu stránky/externého súboru |
výsledok v prehliadači |
obsah súboru styl.css:
h3 { color: #FF0000;
font-size: 30px;
text-align: Center }
|
|
obsah html dokumentu:
<head>
<style type="text/css">
@import "styl.css";
H3 {color: "#00FF00"; font-size: 20px}
</style>
</head>
<body>
...
<H3 style="color:
#0000FF">Nadpis
3</H3>
...
</body>
... |
Nadpis 3
|
Takže nadpis je zarovnaný v strede (podľa styl.css), má veľkosť 20 (podľa
definície v hlavičke) a je modrý (podľa defínície pri značke H3). Inak
povedané, ak dôjde ku "kolízii" štýlov, aplikuje sa ten, ktorý bol
implementovaný ako posledný (alebo ten, ktorý je najbližšie k textu).
Pri definovaní vlastností štýlov môžeme postupovať aj spôsobom, kedy
vytvoríme novú triedu (class). Trieda je v podstate pomenovanie vlastnosti,
alebo súhrnu vlastností, na ktoré sa môžeme potom odkazovať v značke v
html dokumente.
Ak
by sme potrebovali v našom webe používať konkrétnu farbu pri viacerých
objektoch, môžeme to spraviť nasledovne:
| časť zdrojového kódu stránky |
výsledok v prehliadači |
obsah html dokumentu:
<head>
<style type="text/css">
.farba1 {color: #FF0000}
.farba2 {color: #00FF00}
.farba3 {background-color: #0000FF}
</style>
</head>
<body>
...
<H3 class="farba2">Nadpis
3</H3>
<p class="farba1">text odseku</p>
<TABLE>
<TR>
<TD CLASS="farba3"><p class="farba1">ahoj</p></TD>
</TR>
</TABLE>
...
</body>
... |
Nadpis 3
text odseku
|
Ukážme si ešte niektoré vlastnosti štýlov:
Relatívne jednotky:
- em: výška aktuálneho písma (je rovnaká, ako šírka písmena
"M")
- ex: výška písmena "x"
- px: pixel/bod obrazovky
Absolútne jednotky:
- in: palce (inches), 1 palec je 2.54 centimetra
- cm: centimetre
- mm: millimetre
- pt: body (points), použiteľné v CSS2, 1 pt je 1/72
palca.
- pc: picas, 1 pica je 12 bodo (points).
Vlastnosti písma:
- Font-family: názov písma (, názov písma 2, ..), generické meno
(predstavuje názov pre rodinu písiem):
serif | sans-serif | cursive | fantasy | monospace / pätkové písmo | bezpätkové
písmo | ozdobné písmo, kurzíva | ornamentálne písmo | neproporcionálne
písmo
- Font-style: štýl písma:
normal | italic | oblique / normálne, šikmé, sklonené
- Font-variant: variant písma:
normal | small-caps / normálne | kapitálky
- Font-weight: tučnosť písma:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 |
800 | 900
- Font-size: veľkosť písma:
absolútna (xx-small | x-small | small | medium | large | x-large | xx-large)
relatívna (larger | smaller)
v percentách voči okolitému písmu
výška (v jednotkách ptm, em )
Farby textu a pozadia:
- color: farba textu
#rgf - od 0 do F
#rrggbb - od 00 do FF
rgb(r,g,b) - od 0 do 255
rgb(r%, g%, b%) - od 0% do 100%
- background-color: farba pozadia:
color | transparent / farba | priehľadná,
#rgf - od 0 do F
#rrggbb - od 00 do FF
rgb(r,g,b) - od 0 do 255
rgb(r%, g%, b%) - od 0% do 100%
- background-image: obrázok na pozadí:
URL("adresa") | none / adresa obrázku | bez obrázku v pozadí
- background-repeat: opakovanie obrázku v pozadí
repeat | repeat-x | repeat-y | no-repeat / opakovať obrázok v pozadí v
oboch smeroch| len horizontálne | len vertikálne | neopakovať
- background-attachment: pripevnenie pozadia na pozadie
scroll | fixed / skrolujúce pozadie | fixované pozadie
- background-position: presné umiestnenie obrázku na pozadí
percentá x% y%, napr. 10% 20% znamená, že bod obrázku vzdialený od jeho
ľavého horného rohu 10% zo šírky obrázku v smere x a 20% z výšky
obrázku v smere y bude vzdialený od ľavého horného rohu oblasti
10% zo šírky oblasti v smere x a 20% z výšky oblasti v smere y
dĺžka x y, napr. 10cm 50px znamená, že ľavý horný roh obrázku je od
ľavého horného rohu oblasti vzdialený 10cm v smere x a 50pixelov v smere
y, percentá a dĺžky môžeme navzájom kombinovať (napr.: 10cm 20%)
top | center | bottom, umiestnenie vzhľadom na oblasť vertikálne
left | center | right, umiestnenie vzhľadom na oblasť horizontálne
Formátovanie textu:
- text-indent: odsadenie prvého riadku textu (odstavca) od ľavého
okraja
dĺžka | percentá / v jednotkách dĺžky | v percentách šírky oblasti
- text-align: zarovnanie textu horizontálne
left | right | center | justify / | vľavo | vpravo | do stredu | na oba
okraje
- text-decoration: efekty textu
none | [ underline || overline || line-through || blink] / žiadny efekt |
[podčiarknutý text || nadčiarknutý text || prečiarknutý text || blikajúci
text, nie každý prehliadač podporuje blikanie]
- letter-spacing: nastavenie medzier medzi znakmi
normal | dĺžka / normálna vzdialenosť | presná dĺžka medzier, môžeme
zadávať aj záporné hodnoty
- word-spacing: nastavenie medzery medzi slovami
normal | dĺžka / normálna vzdialenosť | presná dĺžka medzier, môžeme
zadávať aj záporné hodnoty
- text-transform: transformácie textu
capitalize | uppercase | lowercase | none / kapitálky | všetky veľké | všetky
malé | bez transformácie
- vertical-align: zarovnanie vertikálne, napr. v bunkách tabuľky
baseline | sub | super | top | text-top | middle | bottom | text-bottom |
percentá | dĺžka / na základňu | dolný index | horný index | horný
okraj najvyššieho elementu | vrchná časť textu | na stred | spodný
okraj najnižšieho elementu | spodný okraj textu | posunutie o počet
percent z výšky textu | presná vzdialensť
- line-height: riadkovanie
normal | číslo | dĺžka | percentá / normálne riadkovanie (110%, vzhľadom
na diakritiku by sme mali používať aspoň 120%) | násobok normálneho
riadkovanie | konkrétna hodnota | percentom z výšky písma|
Rámčeky (neviditeľný rámček obklopujúci text/objekt, jeho
oddelenie od okolitej časti)
- margin-top: miesto nad textom
dĺžka | percento / vdialenosť v dĺžkových jednotkách | v percentách
zo šírky oblasti
- margin-bottom: miesto po textom
dĺžka | percento / vdialenosť v dĺžkových jednotkách | v percentách
zo šírky oblasti
- margin-left: miesto vľavo od textu
dĺžka | percento / vdialenosť v dĺžkových jednotkách | v percentách
zo šírky oblasti
- margin-right: miesto vpravo od textu
dĺžka | percento / vdialenosť v dĺžkových jednotkách | v percentách
zo šírky oblasti
- padding-top: zväčšenie rámčeku nad textom
dĺžka | percento / vdialenosť v dĺžkových jednotkách | v percentách
zo šírky oblasti
- padding-bottom: zväčšenie rámčeku pod textom
dĺžka | percento / vdialenosť v dĺžkových jednotkách | v percentách
zo šírky oblasti
- padding-left: zväčšenie rámčeku vľavo od textu
dĺžka | percento / vdialenosť v dĺžkových jednotkách | v percentách
zo šírky oblasti
- padding-right: zväčšenie rámčeku vpravo od textu
dĺžka | percento / vdialenosť v dĺžkových jednotkách | v percentách
zo šírky oblasti
- border-top(bottom/left/right)-width - šírka hranice rámčeka
hore (dole/vľavo/vpravo)
thin | medium | thick | hodnota / tenká | stredná | tučná | presná
hodnota
- border-top(bottom/left/right)-color - farba hranice rámčeka hore
(dole/vľavo/vpravo)
#rgf - od 0 do F
#rrggbb - od 00 do FF
rgb(r,g,b) - od 0 do 255
rgb(r%, g%, b%) - od 0% do 100%
- border-top(bottom/left/right)-style - štýl hranice rámčeka hore
(dole/vľavo/vpravo)
none - ruší vykreslenie rámčeka
hidden - skrité vykreslenie
dotted - bodkované
dashed - čiarkovane
solid - spojitá čiara
double - dvojitá čiara
groove - priestorový rámček
ridge - priestorový vystúpený rámček
inset - osvetlený priestorový vtlačený rámček
outset -osvetlený priestorový vtlačený rámček
Určenie pozície:
Existujú dva odlišné spôsoby určovanie pozície objektu na obrazovke.
Absolútny a relatívny. Absolútna pozícia umiestni objekt na do stránku na
určené súradnice, bez ohľadu na text okolo neho. Relatívna pozícia určuje,
o koľko a má objekt posunúť oproti svojej normálnej pozícii.
- position: určenie pozície elementu na stránke
absolute: absolútne určenie pozície elementu na stránke
left, right, top, bottom - pozícia zľava, z prava, z hora a zdola
relative: relatívne určenie pozície elementu na stránke
left, right, top, bottom - pozícia zľava, z prava, z hora a zdola
- z-index: "vrstva", v ktorej sa element nachádza, pri pozíciovaní
sa môžu elementy prekrývať, z-index určuje, ktorý bude hore
hodnota - celé číslo, element s väčším z-indexom prekrýva element s nižším
z-indexom
Odkazy:
Štýly môžeme priradiť aj odkazom. Dokonca aj v závislosti od toho, či
je aktívny alebo navštívený, príp. ak sa naň nastavíme myškou.
- a.link: normálny odkaz
- a.visited: navštívený odkaz
- a.hover: odkaz, nad ktorým je myška
- a.active: aktívny odkaz
A na koniec, "čerešnička na torte", zmena užívateľského
prostredia
- cursor: zmena kurzora
url("adresa") - adresa na subor *.cur
auto - automaticky, podľa objektu
crosshair - krížik
default - štandardný (šípka)
hand - odkaz na linku
move - presúvanie
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize,
w-resize - zmena veľkosti okna
text - textový kurzor
wait - čakacie hodinky
help - pomoc
Posuvné lišty okna. Nasledujúce informácie nie sú súčasťou štandardu
W3C, preto uvedené vlastnosti nebude podporovať každý prehliadač (IE ich
podporuje, Netscape nie).
- scrollbar-face-color: farba
farba1
- scrollbar-shadow-color: farba
farba2
- scrollbar-highlight-color: farba
farba3
- scrollbar-3dlight-color:
farba4
- scrollbar-darkshadow-color: farba
farba5
- scrollbar-track-color: farba
farba6
- scrollbar-arrow-color: farba
farba7