Egyes értékek esetében meg kell határoznunk a mértékegységet is — mekkora legyen a kép: 30 pixel széles, 30 centiméter széles vagy 30 ems?

Mai cikkünkben bemutatjuk a legfontosabb mértékegységeket, mint amilyenek a hosszúság, a szín, az egyszerűbb funkciók, de az olyan ritkábban használt mértékegységekre is kitérünk, mint amilyenek a mértékegység nélküli számbeli értékek.

A CSS-ben számos értékkel találkozhatunk — némelyikkel gyakrabban, némelyikkel ritkábban. Egy cikkben lehetetlen lenne lefedni mindet, ezért azokra fogunk összpontosítani, amelyek a CSS elsajátítása során elengedhetetlenek. Vegyük hát sorra ezeket az értékeket:

Számbeli értékek

A számbeli értékek meghatározzák az elem szélességét, a keret vastagságát, a betűméretet stb. Állhatnak mértékegység nélkül is, például ha a vonal relatív hosszát vagy az animáció lejátszásának számát akarjuk meghatározni. A számbeli értékek leggyakoribb típusai a következők:

Hosszúság és méret

A hosszúsággal/mérettel számos helyen futhatunk össze a CSS-ben. A mértékegységeket abszolút és relatív értékekre osztjuk. Az abszolút értékek mindig ugyanakkora méretet eredményeznek, a többi beállítástól függetlenül. A leggyakoribb abszolút mértékegység a pixel (px), de ritkábban találkozhatunk milliméterekkel, centiméterekkel és más mértékegységekkel is. A relatív mértékegységek más elemekhez viszonyulnak, ezért hasznosak, ha szeretnénk, hogy a weboldal kinézete elfogadható legyen akkor is, ha kisebb képernyőkön (például mobiltelefonon) böngészünk.

Mértékegység nélküli értékek

A CSS-ben mértékegység nélküli számbeli értékekkel is találkozhatunk — ez nem mindig hiba, sőt, néhány esetben megengedett és hasznos. Ha például szeretnénk egy elem margóit eltüntetni, használhatjuk a mértékegység nélküli nullát. A nulla minden esetben nulla, a mértékegységtől függetlenül! Mértékegység nélkül írhatjuk a sorközöket is, valamint az animációk esetében is használhatjuk őket.

Százalékok

A százalékok is hasznosak, azokban az esetekben, amikor meg szeretnénk határozni a relatív méretet vagy a hosszúságot — például a szülő elem szélességéhez vagy magasságához viszonyítva. Százalékos értékek segítségével is meghatározhatjuk a legtöbb olyan dolgot, amelyet specifikus számértékekkel szoktunk. A százalékok lehetővé teszik, hogy olyan dobozokat hozzunk létre, amelyek mindig a hordozó konténer szélességének egy megszabott százalékát teszik ki. Ezzel ellentétben ha specifikus számértéket határozunk meg a doboz szélességére, akkor az a hordozó konténer változásainak ellenére is mindig ugyanakkora marad.

Színek

A színeket főként a háttér vagy a szöveg színének meghatározására használjuk. A színeket több módon is meghatározhatjuk, és alkalmazhatjuk őket a háttér, a szöveg vagy bármilyen más elem stilizálására. A színek meghatározásának leggyakrabban használt módjai a következők:

Kulcsszavak

A legegyszerűbb, legrégebbi módszer a kulcsszavak megadása. Az elv egyszerű: csak beírjuk a kívánt szín nevét (természetesen angolul). Az egyszerűség ellenére ennek a módszernek van egy nyilvánvaló hátránya is: segítségével csak a legegyszerűbb és leggyakoribb színeket tudjuk megadni (mindössze 165 kulcsszó létezik a színekre).

Hexadecimális értékek

Az úgynevezett hex kódok a # jelből és hat hexadecimális számból állnak, melyek értéke 0 és f között lehet (0123456789abcdef). Minden értékpár egy színcsatornát (piros, zöld és kék) jelképez.

RGB

Az RGB-érték egy funkció — rgb() —, melynek három paramétere a piros, a zöld és a kék színcsatornát határozza meg. Az RGB-módszernél a csatornákat nem két hex szám jelöli, hanem egy decimális szám 0 és 255 között.

SL

Az RGB-nél némileg kevésbé támogatott modell a HSL. A piros, a zöld és a kék értékei helyett a hsl() funkció a színárnyalat, a telítettség és a fényesség értéket használja (hue, saturation, lightness).

Funkciók

A funkciók segítségével meghatározhatjuk például a háttérképet és annak árnyalatait. A programozásban a funkció a kód egy újra alkalmazható szekciója, mely többször is lefuttatható annak érdekében, hogy egy ismétlődő feladatot minimális igyekezettel el tudjon végezni a fejlesztő és maga a számítógép is. A funkciók főleg a JavaScript, a Python és a C++ nyelvekhez köthetőek, viszont a CSS-ben is találkozhatunk velük (például a színeknél említett rgb() funkcióval).

Ezekkel a mértékegységekkel a CSS-t taglaló leckéink során rengeteget fogsz találkozni, és megfigyelheted őket minden CSS-dokumentumban, mellyel a munkád során dolgod lesz. Hidd el, gyorsan megszokod majd őket!