CSS referencia => Egységek

CSS, 6. fejezet - Egységek

• 6.1 Hosszúság egységek
• 6.2 Százalékos egységek
• 6.3 Színjelölések
• 6.4 URL

Vissza a hivatkozó oldalra

6.1 Hosszúság egységek

A hosszúságértékek meghatározott formátuma egy opcionális +, vagy - jelből (alapértelmezett a +), az azt közvetlenül követő számból és a számot közvetlenül követő egység-azonosítóból (annak kétbetűs rövidítéséből) áll. A 0 (nulla) szám után az egység-azonosító opcionális.

Néhány tulajdonság használatánál engedélyezett a negatív érték használata, de ez bonyolíthatja a formázásmodellt és lehetnek megvalósításbeli korlátozásai is. Ha egy negatív érték nincs támogatva, az a legközelebbi támogatott értékkel lesz helyettesítve.

A hosszúság-egységeknek két típusa használható: a relatív és az abszolút. A relatív egységek a méretet egy másik hosszúság-tulajdonsághoz viszonyítva adják meg. Azok a stíluslapok, amelyek a méreteket relatívan adják meg, könnyebben skálázhatók egyik médiatípusról a másikra (pl.: számítógép képernyőről nyomtatóra). A százalékos egységek (lásd alább) hasonló előnyöket kínálnak fel.

A következő relatív egységek használhatók:

H1{ margin: 0,5em }  /* -szoros, az elem fontméret-magasságához képest */
H1{ margin: 1ex }    /* x-magasság, az 'x' betű magasságához képest    */
P { font-size: 12px }/* pixelben, a vászonhoz képest                   */

Az em és ex értékek az elem fontméretéhez viszonyulnak. E szabály alól az egyetlen kivétel a font-size tulajdonság, ahol az em és ex értékek a szülő elem fontméretéhez viszonyítandók.

A pixel egységek (ahogy a példa mutatja) a vászon (leggyakrabban számítógép-képernyő) felbontásához viszonyulnak. Ha a kimeneti eszköz pixelsűrűsége nagyban különbözik a számítógép képernyőjétől, a megjelenítő eszköz¹ átszámolja a pixelértékeket. A javasolt referencia pixel mérete egy pixel látható szöge az olvasó ember karhosszúságában levő 90 dpi pixelsűrűségű eszközön. Egy átlagos karhosszúságot 71 cm-nek (28 inch) véve, egy pixel 0,0227° alatt látszik.

A gyermek elemek nem a relatív, hanem a számított értéket öröklik:

BODY {
       font-size: 12pt;
       text-indent: 3em;       /* értsd: 36pt */
     }
H1   { font-size: 15pt }

Fenti példában a H1 elemek text-indent tulajdonságának értéke 36pt lesz, nem pedig 45pt.

Az abszolút hosszúságegységeket csak akkor érdemes használni, ha a kiviteli eszköz fizikai tulajdonságai ismertek. A következő abszolút egységek támogatottak:

H1 { margin: 0,5in }    /* inch; 1 inch = 2.54 cm  */
H2 { line-height: 3cm } /* centiméter              */
H3 { word-spacing: 4mm }/* milliméter              */
H4 { font-size: 12pt }  /* pont; 1 pt = 1/72 inch  */
H4 { font-size: 1pc }   /* pica; 1 pc = 12 pt      */

Abban az esetben, ha a meghatározott méret nem támogatható, a böngészők megpróbálják hozzávetőlegesen megközelíteni.

Vissza a hivatkozó oldalra

6.2 Százalékos egységek

A százalékos értékek meghatározott formátuma egy opcionális +, vagy - jelből (alapértelmezett a +), az azt közvetlenül követő számból és a számot közvetlenül követő % jelből áll.

A százalékos egységek mindig valamely más egységre vonatkoznak, ez leggyakrabban hosszúság-egység. Minden tulajdonságnál, amelyeknél százalékos egységek alkalmazhatók, meg van határozva, hogy a százalékos egység mire hivatkozik. A hivatkozási alap leggyakrabban az adott elem fontmérete.

P { line-height: 120% }  /* Az elemnél alkalmazott 'font-size' 120%-a */

Minden örökölt CSS tulajdonságnál, ha értéke százalékosan van megadva, a leszármazott elemek a számított értéket öröklik, nem a százalékosat.

Vissza a hivatkozó oldalra

6.3 Színjelölések

A színek meghatározása történhet a szín nevével, vagy numerikusan, a szín RGB kódjával.

A javasolt színmegnevezések a következők: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white és yellow. Ez a 16 szín található a Windows VGA palettáján, RGB értékük nincs meghatározva ebben a specifikációban.

BODY { color: black; background: white }
H1   { color: maroon }
H2   { color: olive }

Az RGB modell számszerű színmeghatározásokat használ. A következő példák ugyanazt a színt (vörös) eredményezik.

EM { color: #f00 }             /* #rgb                    */
EM { color: #ff0000 }          /* #rrggbb                 */
EM { color: rgb(255,0,0) }     /* egész számok: 0 - 255   */
EM { color: rgb(100%,0%,0%) }  /* százalékos  : 0% - 100% */

Az RGB értékek hexadecimális formátuma: egy # karakter, amelyet közvetlenül követ vagy három, vagy hat hexadecimális karakter. A háromszámjegyes RGB kifejezések (#rgb) hatszámjegyes formába (#rrggbb) a számjegyek ismétlésével, nem 0-k (nullák) hozzáadásával konvertálhatók. (Tehát a #b0 kifejtve #bb00) Ez biztosítja, hogy a fehér (#ffffff) meghatározható legyen rövid formában is (#fff), függetlenítve a megjelenítő eszköz színmélységétől.

Az RGB értékek funkcionális formátuma: az rgb karkterlánc, amelyet közvetlenül követ a három színérték vesszővel elválasztott felsorolása (vagy három egész szám 0 - 255 értékhatáron belül, vagy három százalékos kifejezés 0% - 100% értékhatáron belül).

A megadott értékhatárokon kívüli számértékek nem értelmezhetőek, csonkítva lesznek. A következő három deklaráció értelmét tekintve megegyezik.

EM { color: rgb(255,0,0) }     /* egész számok: 0 - 255   */
EM { color: rgb(300,0,0) }     /* csonkítva 255 -re       */
EM { color: rgb(110%,0%,0%) }  /* csonkítva 100% -ra      */

Vissza a hivatkozó oldalra

6.4 URL

Az URL rövidítés a Uniform Resource Locator kifejezést takarja, amelynek magyar megfelelője: Egységes Erőforrás Helymeghatározás.

BODY { background: url(images/hatter.jpg) }

Az URL kifejezés formája: url kulcsszó, amelyet közvetlenül követ zárójelben ( ( ) ) opcionálisan egyszeres, vagy kétszeres idézőjelek ( ',  " ) közé zárva maga az URL.

Relatív URL megadásakor az elérési utat nem a dokumentumhoz kell viszonyítani, hanem a stíluslaphoz.

előző  tetejére  következő