A CSS-tulajdonságoknak adható értékek két nagy csoportba oszthatók. Vannak az előre definiált kulcsszavak, melyeket a későbbi fejezetekben részletesen ismertetünk. És vannak a bizonyos szabályoknak eleget tevő kifejezések. Ebben a részben velük ismerkedhetünk meg közelebbről.
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.
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:
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:
Bár a CSS szabvány a pixelt (képpontot) relatív mértékegységek közé sorolja, kerülendő a használata a betűméret megadása során. Sajnos több böngészőprogram nem képes nagyítani az így megadott méretű szöveget, ami hátrányos a gyengén látó felhasználóknak. Használjuk inkább a többi relatív méretmegadást ebben az esetben!
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.
body {
background-image: url('kepek/hatter.jpg');
}
li {
list-style: url(‘http://www.vala.hol/kep.png’) disc
}
Néhány kontextusban az URL megadása stringként (karakterláncként) is lehetséges az url() használata nélkül.
Például a stíluslap importálásánál egyaránt működik az alábbi két változat:
@import url("nyomtat.css");
@import "nyomtat.css";
Az aposztróf helyettesíthető idézőjellel, illetve el is hagyható, ha a hivatkozott URL nem tartalmaz szóközt és egyéb speciális karaktert.
A színek megadása többféle módon is történhet. Az arculattervezés során használt grafikai programok is számos színkoordinárendszert ismernek, így szabadon választhatunk, hogy melyik szerint adjuk meg a színeket.
A szöveg színét a color, az elem háttérszínét a background-color paraméterrel adhatjuk meg. A színt meghatározó érték sokféle lehet, megadhatjuk kulcsszóval, de kódokkal is.
Színek megadására használhatunk előre definiált színeket. Ezekre a nevükkel hivatkozhatunk, amelyek a színek angol nevei.
<p style="color:BlueViolet">
Tudjuk, hogy a számítógépes kijelzők a vörös, kék és zöld színek keverékeként állítják elő a színeket. Ezt használja fel az RGB kód, amely segítségével a színeket e komponensek mennyiségével 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 # 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 bíbor pedig #ff00ff.
<p style="color:#f69"> <p style="color:#deb887">
Láthatjuk, hogy nem csak 6 hosszú színkódot használhatunk, hanem 3 hosszút is.
A #f69 megadás megegyezik a #ff6699 színkóddal, annak rövidebb változata.
A HTML színválasztó oldalon egy adott színre kattintva megkapjuk a szín hexadecimális kódját.
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 bíbor pedig rgb(255,0,255).
<p style="color:rgb(51,71,28);">
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 bíbor pedig rgb(100%,0%,100%).
<p style="color:rgb(50%,70%,30%);">
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.
<p style="color:hsl(300,50%,70%)">
A CSS3 egyik gyakran használt új funkciója az átlátszóság. A grafikai programokban is gyakran használunk átlátszó színeket, vagy akár rétegeket. Az átlátszóság mértékét transparency, az átlátszatlanságot opacity néven találhatjuk általában a programokban, illetve az úgynevezett alfa csatorna (rövidítve A) segítségével tudunk még átlátszóságot beállítani.
A CSS szabványban ezt az alfa értéket kell megadnunk 0 és 1 között. A 0 érték a teljesen átlátszó, az 1 a teljesen átlátszatlan változatot jelenti.
Az rgb helyet használhatunk rgba, hsl helyett hsla megadást.
<p style="background-color: rgba(255, 255, 255, 0.5);"> <p style="color:hsla(300,50%,70%,0.3);">
Érdemes gondoskodnunk arról, hogy az átlátszóságot nem ismerő böngészők is megjelenítsenek egy megfelelő (nem átlátszó) színt.
Az alábbi példában az rgba-t nem ismerő böngészőkben beállításra kerül egy szín, amelyet felülírunk később, de ezt csak az rgba-t ismerő böngészők veszik figyelembe.
section {
background: rgb(180,50,50); /* fallback*/
background: rgb(180,50,50,0.3);
}
Több CSS3-as tulajdonságnál is szükség lehet egy szög megadására.
Ezek megadási módja a következő:
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.