Kapka CSS - CSS2 - Tipy a triky [I]

Repetitorium jednotek, používaných v CSS

JEDNOTKY BAREV

Barva se, jak známo, na počítači vyjadřuje tzv. aditivním způsobem, tedy
mícháním tří základních barev červené (Red), zelené (Green) a modré (Blue) tzv.
systém RGB. Jsme takto schopni vyjádřit jakoukoli barvu spektra. V jazyce HTML
se barva zapisuje uvedením těchto tří složek v hexadecimálním (neboli
šestnáctkovém) tvaru za sebou (např. #FFFFFF) nebo přímo klíčovým slovem
definujícím určité odstíny barev (např. "white"). V kaskádových stylech jsou
podporovanými jednotkami barev oba uvedené způsoby, zadávaní RGB složek je
navíc poněkud rozšířeno. Uveďme si tedy jmenovitý přehled způsobů vyjádření
jednotek barev:

- Zadáním klíčových slov, tedy uvedením některého jména ze šestnácti základních
barev:

(aqua jasně modrozelená, black černá, blue modrá, fuchsia fialová, gray šedá,
green zelená, lime citronově zelená, maroon kaštanově hnědá, navy tmavě modrá,
olive olivová, purple purpurová, red červená, silver stříbrná, teal tmavě
modrozelená, white bílá, yellow žlutá), určujících odstín barvy

- Vyjádřením složky RGB formou:

1. #RRGGBB kde RR/GG/BB je 0-FF (hodnota v hexadecimálním/šestnáctkovém tvaru)
tedy 256 stupňů (FF hexadecimálně = 255 decimálně/desítkově, nesmíme zapomínat
ani na 0, což je samozřejmě také 1 stupeň)

2. #RGB kde R/G/B je 0-F (opět hodnota v hexadecimálním tvaru) tedy 16 stupňů

3. rgb(x,y,z) kde x/y/z je v rozsahu 0-255

4. rgb(x%,y%,z%) kde x/y/z jsou procentuální hodnoty v rozsahu 0-100, udávající
intenzitu dané složky ve výsledné barvě. Znamená to tedy, že výsledná barva
může být složena z 0-100 % červené barvy, 0-100 % zelené a 0-100 % modré barvy.
Dílčí procenta se pak přepočítávají na poměrnou část ze 100 % výsledné barvy
(např.: chceme bílou barvu. Musíme tedy nastavit R = 100%, G = 100%, B = 100%.
Intenzita všech je 100 %. Výsledkem je bílá barva, jejíž procentuální složení
je R = 33,3 %, G = 33,3 %, B = 33,3 %. Procentuální zastoupení ve výsledné
barvě je tedy u všech složek (RGB) 33,3 %).


JEDNOTKY DÉLKY

Vyjádření určité délky musí spolu nést i způsob, jakým byla nebo bude ona délka
měřena (např. pokud si jdeme koupit látku, poručíme si 2 m látky pokud řekneme
jen 2 látky, prodejce nám asi nebude rozumět). Jednotky délky tedy určují
způsob odměření určité dané vzdálenosti. Lze je rozdělit do dvou skupin, a sice
na relativní a absolutní. Relativní délka se vztahuje k délce celkové,
absolutní je sama o sobě celkem. Absolutní jednotkou délky tedy vyjádříme
reálnou vzdálenost, která bude vždy stejná, relativní naopak změníme délku v
závislosti na současné délce.

Syntaxe zápisu argumentu s použitím jednotky délky je: <+/-> délky> (v případě kladné hodnoty samozřejmě zápis znaménka + není nutný).
Například: 20cm (Pozor! Jednotka délky je uvedena bezprostředně za hodnotou,
není mezi nimi tedy povolena ani mezera).

Relativní:

- em (ems, výška vzhledem k aktuálně použitému písmu)
- ex (výška písmene \x\)
- px (pixely-obrazové body)


Absolutní:

- in (inch = palec; 1 palec = 2,54 cm)
- cm (centimetr; 1cm = 10 mm)
- mm (milimetr)
- pt (point = bod; 1bod = 1/72 palce)
- pc (pica = tiskařská jednotka; 1pc = 12 pt, tedy 12 bodů)


URL

URL (Uniform Resource Locator) adresy se používá jako argument u stylů, kde je
třeba zadat též cestu (adresu) ukazující na určitý objekt (např. soubor s
obrázkem).
yntaxe zápisu URL může mít tři způsoby: url(""); či url(\\); či
jenom url();

Například: url("http://www.mujweb.cz/zviratko.gif") nebo třeba
url("zviratko.gif");

Textový řetězec vyjadřující cestu k souboru může obsahovat i tzv.
escape-sekvence, což jsou krátké řetězce znaků (obvykle 2znakové) umožňující
vypsat některé běžně nepoužitelné, rezervované znaky (z logických důvodů např.
nelze obvyklým způsobem vypsat znak uvozovek ty totiž slouží k označení začátku
a konce řetězce, který se má vypsat; stejně tak se musí použít escape-sekvence
při výpisu znaku apostrof a mezery přesto v praxi ale mnohé prohlížeče tolerují
i uvedení těchto rezervovaných znaků samostatně, a to ne formou
escape-sekvence). Escape-sekvence se zapisují tak, že se napíše znak zpětného
lomítka (backslash) a bezprostředně za ním následuje požadovaný znak (např. \"
či \\). Znak zpětné lomítko je tedy z pochopitelných důvodů rovněž nutné zapsat
pomocí escape-sekvence, a to jeho zdvojením, tedy jako \\.


PROCENTUÁLNÍ JEDNOTKY

Procentuální jednotky jsou zcela typickým zástupcem jednotek relativních k
okolním hodnotám. Je výhodné použít je kupříkladu při designování stránky, kdy
nevíme, v jakém rozlišení bude zobrazena, a nemůžeme tedy ani počítat s přesným
rozmístěním; namísto přesného umístění si tedy zjistíme, jaké části to
odpovídá, a zapíšeme procenty.

Syntaxe zápisu argumentu s použitím jednotky délky je: <+/->% (v
případě kladné hodnoty samozřejmě zápis znaménka + není nutný). Například: 20%
(Pozor! Jednotka délky je uvedena bezprostředně za hodnotou, není mezi nimi
tedy povolena ani mezera).


1.Vyberte si tu nejlepší pozici

Značkovací jazyk HTML, je jazykem typografickým, což znamená, že výsledný
dokument pouze popisuje, ale jeho samotná interpretace, tedy výsledný tvar, je
už ponechána na cílovém prohlížeči, což nám občas trochu znepříjemňuje život.
Proto tedy v HTML leckdy citelně chybí jakékoliv nástroje pro možnost
konkrétního rozmístění prvků dokumentu. Tak se tedy stalo, že byly kaskádové
styly druhé úrovně konečně rozšířeny o nové vlastnosti, poskytující možnost
přesného umístění, určení přesných pozic (tzv. pozicování) jednotlivých prvků
dokumentu. Bylo tak stanoveno pět základních vlastnosti pro určování pozice
prvku způsob umístění a horizontální (od levého a pravého okraje) a vertikální
posun (od levého a pravého okraje). Blíže již detailní informace v tabulce
nahoře.


2.Jak vyzrát na myší kurzor

Hned ze začátku bychom si měli říci, že možnost změny masky kurzoru, tedy
obrázku, který zastupuje kurzor myši (ve Windows standardně např. klasická
šipka), zavedl jako první Microsoft ve svém prohlížeči Internet Explorer ve
verzi 4.0. V době jeho vydání byl jediný, který tuto funkci nabízel, dnes, díky
tomu, že funkce byla implementována do CSS2, to však dokáží i další velikáni na
poli webových prohlížečů.

Možná si teď říkáte, jakpak to, že žádný z uvedených prohlížečů nedokáže pomocí
stylů zvolit vlastní obrázek, nastavit vlastní masku kurzoru, když jste to již
na některém webu viděli a váš prohlížeč s tím tedy neměl problémy. To však bylo
zařízeno jinými fígly (např. systémem Comet Cursor pro změnu kurzoru myši
podrobnosti viz www.cometzone.com).

Pro tentokrát se s vámi tedy loučím, ale již teď se můžete těšit na další díl
tohoto seriálu na vaše podněty a připomínky čekám na adrese j.kysela@centrum.cz.