Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Bevezetés a stíluslapok használatába /A CSS-szabályok értékei, mértékegységek

A CSS-szabályok értékei, mértékegységek

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.

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:

Vissza a tartalomjegyzékhez

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:

Kapcsolódó akadálymentességi elvek

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-k megadása

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.

Példa
Forráskód
body { 
       background-image: url('kepek/hatter.jpg'); 
       }
li { 
       list-style: url(‘http://www.vala.hol/kep.png’) disc 
       } 
Fontos

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.

Színek megadása

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.

Vissza a tartalomjegyzékhez

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.

Példa
Forráskód
<p style="color:BlueViolet">

Vissza a tartalomjegyzékhez

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

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élda
Forráskód
<p style="color:#f69">
<p style="color:#deb887">
Magyarázat

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.

Tanulási tipp

A HTML színválasztó oldalon egy adott színre kattintva megkapjuk a szín hexadecimális kódját.

Vissza a tartalomjegyzékhez

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 bíbor pedig rgb(255,0,255).

Példa
Forráskód
<p style="color:rgb(51,71,28);">

Vissza a tartalomjegyzékhez

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 bíbor pedig rgb(100%,0%,100%).

Példa
Forráskód
<p style="color:rgb(50%,70%,30%);">

Vissza a tartalomjegyzékhez

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.

Példa
Forráskód
<p style="color:hsl(300,50%,70%)"> 

Vissza a tartalomjegyzékhez

Átlátszóság

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élda
Forráskód
<p style="background-color: rgba(255, 255, 255, 0.5);"> 
<p style="color:hsla(300,50%,70%,0.3);">

Fallback – gondoskodás a régi böngészőkben való elérhetőségről

É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.

Példa
Forráskód
  section {
         background: rgb(180,50,50);  /* fallback*/
         background: rgb(180,50,50,0.3);  
   }

Szög megadása

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ő:

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

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.