Logó{CSS3 Tutoriál}

Értékek

A CSS szabályok értékei:

A CSS tulajdonságoknak adható értékek két nagy csoportba oszthatók. Vannak az elõre definiált kulcsszavak, amik részletesen ismertetésre kerülnek majd a késõbbi fejezetekben. És vannak a bizonyos szabályoknak eleget tevõ kifejezések. Ebben a részben velük ismerkedhetünk meg közelebbrõl.

Hosszúságértékek:

A CSS szabályok definícióiban a tulajdonságok egy részének hosszúságértékeket kell megadnunk értékül. Ezek két nagy csoportra oszthatók: abszolút- és relatív hosszúságértékekre.

Abszolút hosszúságértékek:

Az abszolút hosszúságértékek rendszerint hosszúságmértékben vannak megadva, azaz minden értékhez hozzátartozik az a hosszmérték, amiben értelmezendõ.

Ezek a következõk lehetnek:

  • in: inch
  • cm: centiméter
  • mm: milliméter
  • pt: pont (1/72 inch)
  • pc: pica (12 pont)

Relatív hosszúságértékek:

A relatív hosszúságértékek önmagukban sosem fejeznek ki semmit, mivel értékük más értékektõl függ. A segítségükkel megváltoztathatjuk egy tulajdonság aktuális vagy megörökölt értékét.

Három fajtája van:

  • em: Ekkor az em elé írt szám jelképezi azt a szorzót ahány szorosára kívánjuk változtatni az aktuális (vagy megöröklött) értéket.
  • ex: Relatív érték az adott betûtípus kis x betûjének magasságához képest.
  • px (pixel): Mivel a képpixelek mérete nagyban függ a képernyõ tulajdonságitól, így a pixelben megadott távolságok nem garantálnak egységes megjelenést.

Százalékos értékek:

A százalékos értékek relatívak, azaz értékük más értékekbõl számolódik ki. Ez lehet alapérdemezett, vagy örökölt érték. Megadása egy számérték és egy azt követõ százalék jel segítségével történik.


URL-ek:

URL-ek segítségével "külsõ" objektumokra hivatkozhatunk, ami a teljesség igénye nélkül lehet: CSS fájl, JavaScript fájl, HTML fájl, videó vagy akár kép. Egy ilyen érték az url kulcsszóval kezdõdik, amit zárójelek között, a hivatkozott objektum pontos relatív vagy abszolút címe követ.


Színek:

Színek megadása kulcsszóval:

Színek megadására használhatunk elõre definiált színeket. Ezekre a nevükkel hivatkozhatunk, amelyek a színek angol nevei.

Színek megadása hexadecimális RGB kódjukkal:

Minden szín elõállítható a vörös, kék és zöld színek keverékeként. Ezt használja fel az RGB kód, amely segítségével a színeket e komponensek arányával adhatjuk meg. Az értékeket 16-os számrendszerben adhatjuk meg, azaz egy számjegy 0-tól f-ig vehet fel értéket. A hexadecimális RGB kódok rendszerint # jellel kezdõdnek, amit a vörös zöld és végül a kék komponensek aránya követ. Például a fehér szín: #ffffff, a fekete #00000, a lila pedig #ff00ff.

Színek megadása decimális RGB kódjukkal:

RGB kód megadása decimális értékekkel is lehetséges. Ekkor az egyes komponensek értékei 0-255 közötti intervallumba esnek. A szintaxis a következõ: a színt az rgb kulcsszó vezeti be, amit zárójelek között a három komponens értéke vesszõvel elválasztva követ. Például a kék szín rgb(0,0,255) a lila pedig rgb(255,0,255).

Színek megadása százalékos RGB kódjukkal:

RGB kód megadása százalékos értékekkel is lehetséges. Ekkor az egyes komponensek értékei 0% és 100% közötti intervallumba esnek. A szintaxis a következõ: a színt az rgb kulcsszó vezeti be, amit zárójelek között a három komponens százalékos értéke vesszõvel elválasztva követ. Például a kék szín rgb(0%,0%,100%) a lila pedig rgb(100%,0%,100%).

Színek megadása HSL kódjukkal:

A színeket megadhatjuk azok HSL kódjukkal is, ahol a "H" a színárnyalatot (Hue), az "S" a színtelítettséget (Saturation), az "L" pedig a világosságot (Lightness) jelképezi. A színárnyalat egy 0-360 intervallumba tartozó egész szám. A telítettség és a világosság pedig egy 0% és 100% közötti százalékos érték. A szintaxis a következõ: a színt a hsl kulcsszó vezeti be, amit zárójelek között a három komponens értéke vesszõvel elválasztva követ.

Átlátszóság:

A színkódjainkat egy negyedik Alpha átlátszóságot szabályzó paraméterrel áttetszõ színeket definiálhatunk. A paraméter értéke százalékos esetben 0%(teljesen átlátszó) és 100%(teljesen átlátszatlan), még számos megadásban egy 0.0(teljesen átlátszó) és 1.0(teljesen átlátszatlan) közötti érték.

  • RGB kód esetén: rgba(R,G,B,A)
  • HSL kód esetén: hsla(H,S,L,A)

Szög:

Néhány tulajdonságnak szögeket adhatunk értékül.

Ezek megadási módja a következõ:

  • deg: szöggel. Például: 120deg.
  • rad: radiánnal. Például: 1.5rad.
  • grad: gradienssel. Például: 100grad.

Tárnok Tamás Attila - CSS3 Tutoriál - 2010