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!
 

Nyereményjáték!

Rovatunk elsődleges célja, hogy közelebbről is bemutassa a legismertebb webtechnológiákat. Azok között az olvasók között, akik minden héten követik rovatunkat, azaz velünk tanulják a programozás alapjait és kitöltik a feladatsort, a sorozat végén egy laptopot sorsolunk ki.
 

A játék heti kérdése:

A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!
 

Néhány szó rólunk:

Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban.