Jednotky
Pri
zápise hodnôt sa používajú jednotky ako pixel, milimeter. S
príchodom CSS3 sa zoznam jednotiek dosť rozšíril. V článku nájdete kompletný
zoznam všetkých jednotiek a farebných zápisov.
|
Jednotka | Popis | |
%
|
Percento. Väčšinou percento z
podielu. Používa sa napríklad keď potrebujete definovať veľkosti
jednotlivých stĺpcov v tabuľke. Táto
jednotka je relatívna k veľkosti monitora. To znamená že je jedno
aké rozlíšenie monitora má užívateľ. Element bude mať stále
rovnakú veľkosť.
| |
cm
|
Centimeter. Používa sa pri
definovaní veľkosti elementov. Táto jednotka je relatívna k
veľkosti monitora
| |
Em
|
1em je aktuálna veľkosť písma.
2Em je dvojnásobná veľkosť. Ak má element veľkosť písma 13px
tak po aplikovaní 2em bude mať 24px. V podstate ide o násobič.
Môžete tak zadefinovať jednu veľkosť písma v px a zvyšné
písmo len násobiť alebo deliť. Ak budete potrebovať zmenšiť
alebo zväčšiť písmo, spravíte tak zmenou jednej hodnoty.
| ex
| 1ex je šírka písma pri aktuálnom fonte. Napríklad môžete nastaviť dĺžku na 60ex a podľa toho aký font nastavíte bude box dlhý.
| gd
| Takzvaná grid jednotka. Používa sa hlavne pri definovaní layout-grid-u. Inak veľmi málo používaná.
p { layout-grid: strict both 20pt 15pt; margin: 1gd 3gd 1gd 2gd }
| in
| Inch alebo palec. Pre tých ktorý nepoznajú centimeter. 1in = 2.54 cm. Táto jednotka je relatívna k veľkosti monitora | | mm | Milimeter. Táto jednotka je relatívna k veľkosti monitora.
| pc
| Pica. 1pc = 12px. | pt
| Point. 1pt = 1/72in.
| px
| Pixel, alebo bod. Táto jednotka je absolútna k veľkosti monitora. | rem
| Root em. Definuje veľkosť fontu relatívne k aktuálnemu elementu. Viac o tejto jednotke nájdete na stánke: http://xph.us/2009/02/02/rem-in-firefox.html
| vw
| viewport's width. Je to relatívna jednotka k šírke obrazovky alebo média. Pričom 100 je celá šírka obrazovky. Využiteľné napríklad pri definovaní veľkosti fontu. div { font-size: 8vw }. Element bude mať veľkosť 8% zo šírky obrazovky.
| vh
| viewport's height. Obdoba jednotky viewport's width. Namiesto šírky je jednotka relatívna k výške obrazovky alebo média. Použiteľne pri obrazovkách mobilov. Namiesto pracného generovania CSS na základe veľkosti obrazovky stačí použiť túto jednotku.
| vm
| Opäť ide o viewport jednotku len sa použije tá ktorá je menšia. Teda ak je šírka menšia ako výška použije sa táto veľkosť. Užitočné pri mobilných zariadeniach kde sa šírka a výška môžu meniť podľa natočenia displeja.
| ch
| Je šírka nuly „0“ vo fonte ktorý je aktuálne používaný. Ak nie je vo fonte dostupná nula je vypočítaná priemerná šírka podľa všetkých dostupných písmen.
| deg
| Jednotka stupne. Napríklad otočenie textu o 45 stupňov spravíme napísaním rotate(45deg) | grad
| Uhlová jednotka gradient. Obdoba rad. Napríklad 90 rad = 100 grad. Jeden gradient je 1/400 plného kruhu. Teda pravý uhol je 100 gradientov.
| rad
| Uhlová jednotka radián. Radián je definovaný ako rovinný uhol, ktorý s vrcholom v strede kružnice vytína na obvode tejto kružnice oblúk dĺžky rovnajúcej sa jej polomeru.
| turn
| O tejto jednotke sa mi pohužiaľ nepodarilo nič zistiť, len to že podľa špecifikácie existuje.
| ms
| Milisekundy. Používa sa pri zvukových CSS direktívach. Tie slúžia hlavne na zvukový prepis textu na hlas.
| s
| Sekunda. Platí to isté čo pre ms.
| hz
| Opäť nastavenie zvukových direktív. Jednotka hz udáva frekvenciu.
| khz
| Rovnaké ako jednotka hz. 1Khz = 1000 hz |
Farby
Pri definovaní farby je možné použiť rôzne zápisy. Napríklad rgb(255,255,255), alebo #ffcc4a. CSS3 prináša aj nové zápisy.
Farba podľa menaVeľmi starý spôsob zápisu farby. CSS má definovaných 16 farieb, ktoré je možné zapísať menom. Týchto 16 farieb bolo možné zobraziť na starých monitoroch s nízkou farebnou hĺbkou bez ditheringu. Neskôr sa farby rozšírili o ďalších 200 farieb, ktoré boli označené ako „Web Save Colors“. Už sa ale neoznačovali podľa mena. Keď ste použili tieto farby, mali ste istotu, že užívateľom ktorí majú monitor s hĺbkou farieb 256 sa vaša stránka zobrazí korektne. V súčastnosti toto obmedzenie nemá zmysel.
Tabuľka
so zoznamom mien jednotlivých farieb:
| aqua |
black |
blue |
fuchsia |
gray |
| green |
lime |
maroon |
navy |
olive |
| purple |
red |
silver |
teal |
white |
yellow |
Zápis farby je celkom jednoduchý.
<a href='' style='color:red'>LINK</a>
Výsledok
LINK
Výstupom je link červenej farby. Tento zápis je užitočný málokedy. Predsa len 16 farieb je dosť málo. RGB zápis RGB = red, green, blue. Teda červená, zelená, modrá. Červený link zapíšeme nasledovne:
<a href='' style='color:rgb(255,0,0)'>LINK</a>
Výsledok
LINK
Každé číslo, môže nadobúdať hodnotu 0-255. Pre dosiahnutie červeného linku treba samozrejme pridať čo najviac červenej farby. Preto je prvé číslo 255. Keďže máme 3 hodnoty od 0 do 255. Máme na výber celkom 16.7 milióna farieb (256 x 256 x 256). Čo je dostatočný počet. RGBA zápis Obdoba RGB zápisu. Len sa pridalo písmeno „A“, ktoré znamená alpha. Alfa udáva ako veľmi má byť farba priesvitná. Vyskúšajte:
<div style='background-color:blue;padding:30px'>
<a href='' style='background-color:rgba(255,0,0,0.5)'>LINK</a>
</div>
Výsledok
Aplha číslo znamená ako veľmi bude farba priesvitná. 0 je bez priesvitnosti. 1 je úplná priesvitnosť. Takáto farba nebude vôbec viditeľná. Takýto zápis však nepodporuje každý prehliadač. Zoznam podporovaných prehliadačov nájdete na konci článku v linkách. Hexa zápis Najčastejšie používaný zápis je práve pomocou 16-tkovej sústavy. Je to podobné ako zápis pomocou RGB. Len namiesto desiatkovej sústavy použijete šestnástkovú. Namiesto zápisu 255,255,255 použijeme FF,FF,FF. Tento zápis je podstatne efektívnejší. Červený link zapíšeme nasledovne:
<a href='' style='color:#ff0000'>LINK</a>
Výsledok
LINK
Tento zápis je ešte možné skrátiť. V prípade že sa prvé písmeno alebo číslo zhoduje s tým druhým. Skrátený červený link zapíšeme nasledovne:
<a href='' style='color:#f00'>LINK</a>
Výsledok
LINK
Jediná nevýhoda takého zápisu je nemožnosť definovať priesvitnosť priamo pri definovaní farby Zdrojehttp://www.w3.org/TR/css3-values/ - Dozviete sa tu viac o CSS jednotkách.
http://www.academictutorials.com/css2/css2-properties-aural-style-sheets.asp – Viac o zvukových CSS direktívach. Táto časť CSS sa volá aural CSS.
http://www.w3schools.com/css/css_colors.asp – Dozviete sa viac o Web Save Colors.
http://css-tricks.com/rgba-browser-support/ - Zoznam prehliadačov, ktoré podporujú RGBA zápis farby. |
Technológie 
