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: <+/-><hodnota><jednotka></jednotka>
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(„<cesta>“); či url(\<cesta>\); či

jenom url(<cesta>);



Například: url(„http://www.mujweb.cz/zvi­ratko.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: <+/-><hodnota>% (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.









</hodnota></cesta></cesta></ces­ta></hodnota>