033.3 Lecke 1

Tanúsítvány:

Web Development Essentials

Verzió:

1.0

Témakör:

033 CSS - A tartalom formázása

Fejezet:

033.3 CSS formázás

Lecke:

1/1

Bevezetés

A CSS-ben több száz tulajdonság van, amelyekkel módosítható a HTML-elemek megjelenése. A legtöbbjüket csak tapasztalt dizájnereknek sikerül megjegyezni, azonban praktikus ismerni az alapvető tulajdonságokat, amelyek minden elemre alkalmazhatók; valamint néhány elemspecifikus tulajdonságot is. Ebben a fejezet néhány népszerű tulajdonságot nézünk meg, amelyeket valószínűleg használni fogunk a jövőben is.

CSS általános tulajdonságok és értékek

Sok CSS-tulajdonság értékének ugyanaz a típusa. A színeknek például ugyanaz a numerikus formátuma, akár a betűszínt, akár a háttérszínt változtatjuk meg. Ehhez hasonlóan a betűtípus méretének módosításához rendelkezésre álló mértékegységeket a szegély vastagságának módosításához is használhatjuk. Az érték formátuma azonban nem mindig egyedi. A színeket például különböző formátumokban lehet megadni, amint azt a következőkben látni fogjuk.

Színek

Egy elem színének megváltoztatása valószínűleg az egyik első dolog, amit a dizájnerek megtanulnak a CSS-ben. Megváltoztathatjuk a szöveg színét, a háttérszínt, az elemek szegélyének színét és még sok mást.

Egy szín CSS-ben leírható szín kulcsszóként (azaz a szín nevével) vagy az egyes színkomponenseket felsoroló számértékként. Az összes gyakori színnév, mint például black, white, red, purple, green, yellow, és blue elfogadott kulcsszavak. A CSS által elfogadott színkulcsszavak listája elérhető a W3C weboldalon. A színek pontosabb szabályozásához a numerikus értéket használhatjuk.

Szín kulcsszavak

Nézzük először a szín kulcsszót, mert az az egyszerűbb. A color tulajdonság megváltoztatja az elemhez tartozó szöveg színét. Ha tehát az oldalon lévő összes szöveget lilára szeretnénk színezni, az alábbi CSS-szabályt kell használnunk:

* {
  color: purple;
}

Numerikus színértékek

Bár intuitívak, a szín kulcsszavak nem kínálják a modern kijelzők által megjeleníthető színek teljes skáláját. A webdizájnerek általában olyan színpalettát készítenek, amely egyéni színeket használ, a piros, zöld és kék komponensekhez meghatározott értékek rendelésével.

Minden színkomponens egy nyolcbites bináris szám, 0 és 255 között. A színek kikeveréséhez mindhárom komponenst meg kell adni, sorrendjük mindig piros, zöld, kék. Ha például az oldal összes szövegének színét pirosra szeretnénk változtatni RGB-jelöléssel, használjuk az rgb(255,0,0) parancsot:

* {
  color: rgb(255,0,0);
}

A 0-ra beállított komponens azt jelenti, hogy az adott alapszínt nem használjuk a színkeveréshez. Számok helyett százalékos értékeket is használhatunk:

* {
  color: rgb(100%,0%,0%);
}

Ha rajzprogramot használunk a tervezés során vagy a színek kiválasztásához, ritkán találkozunk az RGB-jelöléssel. CSS-ben sokkal gyakrabban találkozunk inkább a hexadecimális színértékekkel. A színkomponensek hexadecimálisan szintén 0-tól 255-ig terjednek, de tömörebben: egy kettőskereszt jellel # kezdődnek és minden komponenshez fix kétjegyű hosszúságot használnak. A minimális 0 érték a 00, a maximális 255 pedig az FF, tehát a piros szín #FF0000.

Tip	Ha a hexadecimális szín egyes összetevőinek számjegyei ismétlődnek, a második számjegy elhagyható. A `piros` színt például le lehet úgy írni, hogy minden egyes komponensnek csak egy számjegye van: `#F00`.

Az alábbi lista néhány alapszín RGB és hexadecimális jelölését mutatja:

Szín kulcsszó RGB-jelölés Hexadecimális érték

black

rgb(0,0,0)

#000000

white

rgb(255,255,255)

#FFFFFF

red

rgb(255,0,0)

#FF0000

purple

rgb(128,0,128)

#800080

green

rgb(0,128,0)

#008000

yellow

rgb(255,255,0

#FFFF00

blue

rgb(0,0,255)

#0000FF

A szín kulcsszavak és a hexadecimális értékek betűi nem kis- és nagybetű érzékenyek.

Átlátszóság

Az átlátszatlan színek mellett van lehetőségünk az oldalelemek félig átlátszó színekkel való kitöltésére is. Egy szín átlátszóságát a színérték negyedik komponensével lehet beállítani. A többi színkomponenssel ellentétben, ahol az értékek 0 és 255 közötti egész számok, az átlátszóság egy tizedestört, amely 0-tól 1-ig terjed.

A legalacsonyabb érték a 0, ami teljesen átlátszó színt eredményez, amely megkülönböztethetetlen bármely más teljesen átlátszó színtől. A legmagasabb érték az 1, ami teljesen átlátszatlan színt eredményez, amely megegyezik az átlátszóság nélküli, eredeti színnel.

Az RGB-jelölés esetén használjuk az rgba prefixet az rgb helyett. A piros szín félig átlátszóvá tételéhez használjuk ezt: rgba(255,0,0,0.5). Az a karakter az alfa csatornát jelenti, amelyet a digitális grafikai zsargonban az átlátszósági komponens megadására használják.

Az átlátszóságot hexadecimális jelöléssel is be lehet állítani. Itt, a többi színösszetevőhöz hasonlóan az átlátszóság 00 és FF között adható meg. Ezért a piros szín félig átlátszóvá tételéhez ezt kell használnunk: #FF000080.

Háttér

Az egyes elemek vagy az egész oldal háttérszínét a background-color tulajdonsággal adhatjuk meg. Ugyanazokat az értékeket használhatjuk, mint a color tulajdonság esetén, akár a kulcsszavakat, akár az RGB vagy heaxdecimális jelölést.

A HTML-elemek háttere azonban nem csak szín lehet. A background-image tulajdonsággal egy képet is használhatunk háttérként. Az elfogadott képformátumok a böngésző által elfogadott hagyományos képformátumok, mint a JPEG és a PNG.

A kép elérési útvonalát az url() jelölővel kell megadni. Ha a kép ugyanabban a mappában van, mint a HTML, akkor elég csak a fájlnevet használnunk:

body {
  background-image: url("background.jpg");
}

Ebben a példában a background.jpg kép lesz a törzs háttérképe. Alapértelmezés szerint a háttérkép ismétlődik, ha a mérete nem fedi le az egész oldalt, a szelektor szabályának megfelelő terület bal felső sarkától kezdve. Ez a viselkedés a background-repeat tulajdonsággal módosítható. Ha azt szeretnénk, hogy a háttérkép ismétlődés nélkül kerüljön az elem területére, használjuk a no-repeat értéket:

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

Elérhetjük azt is, hogy a kép csak vízszintes irányban (background-repeat: repeat-x), vagy csak függőleges irányban (background-repeat: repeat-y) ismétőldjön.

Figure 1. A háttérkép elhelyezése a background-repeat tulajdonság segítségével.

Tip	Két vagy több CSS-tulajdonság kombinálható egy tulajdonságban, amit a háttér shorthand tulajdonságának nevezünk. A `background-image` és a `background-repeat` tulajdonságok például így kombinálhatók egy tulajdonságban: `background: no-repeat url("background.jpg")`.

A háttérképet az elem területén egy adott pozícióba is elhelyezhetjük a background-position tulajdonsággal. Az öt alapvető pozíció a top, bottom, left, right és a center, de a kép top-left pozíciója százalékokkal is beállítható:

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: 30% 10%;
}

Az egyes pozíciók százalékos értéke az elem megfelelő méretéhez viszonyítva értendő. A példában a háttérkép bal oldala a body szélességének 30%-án lesz (általában a body a teljes látható dokumentumot jelenti), a kép felső oldala pedig a body magasságának 10%-án.

Szegélyek

Egy elem szegélyének megváltoztatása szintén gyakori CSS-művelet. A szegély az elem körül téglalapot alkotó vonalra utal és három alapvető tulajdonsága van: color (szín), style (stílus) és width (szélesség).

A border-color segítségével definiált szegély színe ugyanazt a formátumot követi, mint amit a többi színtulajdonságnál láttunk.

A szegély nem csak egyszerű egyenes vonal lehet, hanem például szaggatott is a border-style: dashed tulajdonság használatával. A többi lehetséges értékek az alábbiak:

dotted: Pontok
double: Dupla vonal
groove: Vésettnek ható vonal
ridge: Dombornyomottnak ható vonal
inset: Benyomott gombnak ható vonal
outset: Dombornyomott gombnak ható vonal

A border-width tulajdonság a szegély vastagságát állítja be. Értéke lehet egy kulcsszó (thin, medium vagy thick) vagy egy konkrét számérték. Ha numerikus értéket használnánk, akkor a megfelelő mértékegységet is meg kell adni. Erről a továbbiakban lesz szó.

Mértékegységek

A méreteket és távolságokat a CSS-ben különböző módokon határozhatjuk meg. Az abszolút egységek a képernyő képpontjainak rögzített számán alapulnak, így nem sokban különböznek a nyomtatott sajtóban használt rögzített méretektől és dimenzióktól. Léteznek relatív egységek is, amelyeket dinamikusan számolnak ki valamilyen, az oldal megjelenítésének médiuma által megadott mérőszámból, például a rendelkezésre álló helyből vagy egy másik, abszolút egységben írt méretből.

Abszolút mértékegységek

Az abszolút mértékegységek a fizikai megfelelőiknek felelnek meg, mint például a centiméter vagy a hüvelyk. A hagyományos számítógépek képernyőjén egy hüvelyk 96 pixel széles. A következő abszolút mértékegységeket szokás használni:

in (inch): 1 in az 2.54 cm vagy 96 px.
cm (centiméter): 1 cm az 96 px / 2.54.
mm (milliméter): 1 mm az 1 cm / 10.
px (pixel): 1 px az az inch 1 / 96 része.
pt (point): 1pt az az inch 1 / 72 része.

Figyeljünk oda rá, hogy a pixelek és a hüvelykek aránya változhat. A nagyfelbontású képernyőkön, ahol a pixelek sűrűbben helyezkednek el, egy hüvelyk több, mint 96 pixelnek felel meg.

Relatív mértékegységek

A relatív mértékegységek más mérések vagy a nézetablak (viewport) méretei szerint változnak. A viewport a dokumentumnak az ablakban aktuálisan látható területe. Teljes képernyős módban a viewport voltaképp a készülék képernyője. Általában a következő relatív mértékegységeket használják:

%: Százalék — a szülő elemhez képest relatív.
em: Az elemben használt betűtípus mérete.
rem: A gyökérelemben használt betűtípus mérete.
vw: A viewport szélességének 1%-a.
vh: A viewport magasságának 1%-a.

A relatív mértékegységek használatának előnye, hogy olyan elrendezéseket hozhatunk létre, amelyek csak néhány kulcsméret megváltoztatásával állíthatók. Használhatjuk például a pt egységet a body elem betűméretének beállításához és a rem egységet a többi elem betűméreténél. Ha egyszer megváltoztatjuk a body betűméretét, az összes többi is megváltozik ennek megfelelően. Továbbá, ha a vw és vh egységeket használjuk az oldalrészek méreteinek beállításához, akkor azok igazíthatók lesznek különböző méretű képernyőkhöz.

Betűtípusok és szövegtulajdonságok

A tipográfia, vagyis a betűtípusok tanulmányozása nagyon széleskörű téma, és a CSS tipográfia sem marad el mögötte. Van azonban néhány alapvető betűtípus-tulajdonság, amely a legtöbb CSS-t tanuló felhasználó igényeit kielégíti.

A font-family tulajdonsággal a használandó betűtípus nevét állíthatjuk be. Nincs garancia arra, hogy a kiválasztott betűtípus elérhető lesz azon a rendszeren, ahol az oldalt megtekinti a felhasználó, ezért ennek a tulajdonságnak nem biztos, hogy hatása lesz a dokumentumban. Bár lehetőség van arra, hogy a böngésző letöltse és használja a megadott betűtípusfájlt, a legtöbb webdizájner általános betűtípuscsalád használatával is megelégszik.

A három leggyakoribb általános betűtípuscsalád a serif, a sans-serif és a monospace. A legtöbb böngészőben a serif az alapértelmezett betűtípuscsalád. Ha a sans-serif-et használnánk az egész oldalon, az alábbi szabályt kell használnunk:

* {
  font-family: sans-serif;
}

Opcionálisan arra is van lehetőség, hogy először egy konkrét betűtípuscsalád nevét adjuk meg, majd az általános család nevét:

* {
  font-family: "DejaVu Sans", sans-serif;
}

Ha az oldalt megjelenítő eszköz rendelkezik az adott betűtípuscsaláddal, a böngésző használni fogja. Ha nem, akkor az általános családnévnek megfelelő alapértelmezett betűtípust fogja használni A böngészők a tulajdonságban megadott sorrendben keresik a betűtípusokat.

Bárki, aki használt már szövegszerkesztő alkalmazást, az ismeri a betűtípusok három másik beállítását is: méret, vastagság és stílus. Ennek a három beállításnak vannak megfelelői a CSS-ben: font-size, font-weight, és font-style.

A font-size tulajdonság olyan kulcsszavakat fogad el, mint: xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large. Ezek a kulcsszavak a böngésző által használt alapértelmezett betűmérethez viszonyítanak. A larger és smaller kulcsszavak a szülőelem betűméretéhez képest változtatják meg a betűméretet. A betűméretet numerikus értékekkel is kifejezhetjük, az érték után egységgel vagy százalékkal.

Ha nem a betűméretet, hanem a sorok közötti távolságot szeretnénk megváltoztatni, a line-height tulajdonságot kell használnunk. Ha a line-height értéke 1, akkor a sorok magassága megegyezik az elem betűtípusának méretével, ami miatt a sorok túl közel kerülhetnek egymáshoz. Ezért szövegek esetében az 1-nél nagyobb érték a legmegfelelőbb. A font-size tulajdonsághoz hasonlóan a numerikus értékek mellett más egységek is használhatók.

A font-weight a betűtípus vastagságát állítja be a már ismert normal vagy bold kulcsszóval. A lighter és a bolder kulcsszavak az elem betűvastagságát a szülőelem betűvastagságához képest változtatják meg.

A font-style tulajdonság italic értékre állítható az aktuális betűtípuscsalád dőlt betűs változatának kiválasztásához. Az oblique érték a betűtípus ferde változatát jelenti. Ez a kettő majdnem ugyanolyan, de a betűtípus dőlt betűs változata általában egy kicsit keskenyebb, mint a ferde. Ha a betűtípusnak sem dőlt, sem ferde változata nem létezik, akkor a betűtípust a böngésző mesterségesen megdönti. Vannak más tulajdonságok is, amelyekkel megváltoztatható a szöveg megjelenítése a dokumentumban. Adhatunk meg például aláhúzást a szöveg azon részeihez, amit ki szeretnénk emelni. Először használjunk egy <span> taget a szöveg körülhatárolásához:

<p>A CSS a <span class="under">megfelelő mechanizmus</span> a HTML-dokumentumok formázásához.</p>

Ezután az .under szelektorral megváltoztathatjuk a text-decoration tulajdonságot:

.under {
  text-decoration: underline;
}

Alapértelmezés szerint minden a (link) elem aláhúzott. Ha ezt el akarjuk távolítani, adjuk meg a none értéket az összes a elem text-decoration értékéhez:

a {
  text-decoration: none;
}

A tartalom felülvizsgálata során egyes szerzők szeretik áthúzni a szöveg helytelen vagy már elavult részeit, így az olvasó tudja, hogy a szöveg frissült, és azt is, hogy mit távolítottak el. Ehhez a text-decoration tulajdonság line-through értékét használhatjuk:

.disregard {
  text-decoration: line-through;
}

Ismét használhatunk egy <span> taget a formázáshoz:

<p>A Netscape Navigator <span class="disregard">ma is</span> volt az egyik legnépszerűbb böngésző.</p>

Vannak elemspecifikus formázások is. A felsorolásokban szereplő körök a list-style-type tulajdonság segítségével testreszabhatók. Ha például négyzetekre szeretnénk cserélni őket, az alábbi módon tehetjük meg: list-style-type: square. Az eltávolításukhoz pedig a list-style-type értéke legyen none.

Gyakorló feladatok

Hogy lehet fél-átlátszóságot adni a kék színhez (RGB jelöléssel rgb(0,0,255)), hogy a CSS color tulajdonságban használhassuk?
Milyen szín felel meg a #000 hexadecimális értéknek?
Mivel a Times New Roman egy serif betűtípus és nem elérhető minden eszközön, hogyan lehetne írni egy CSS-szabályt, amely a Times New Roman betűtípust kéri, de a serif általános betűtípuscsaládot állítja be tartalékként?
Hogyan lehet egy relatív méret kulcsszóval a <p class="disclaimer"> elem betűméretét a szülő eleméhez képest kisebbre állítani?

Gondolkodtató feladatok

A background tulajdonság egy rövidítés, segítségével több background-* tulajdonságot állíthatunk be egyszerre. Írjuk át a következő CSS-szabályt egyetlen background tulajdonságra!
```
body {
  background-image: url("background.jpg");
  background-repeat: repeat-x;
}
```
Írjunk egy olyan CSS-szabályt az <div id="header"></div> elemre, amely csak az alsó szegély szélességét változtatja meg 4px-re!
Írjunk egy font-size tulajdonságot, amely megduplázza az oldal gyökérelemében használt betűméretet!
A double-spacing (dupla sorköz) a szövegszerkesztőkben gyakori formázási megoldás. Hogyan lehetne hasonlót beállítani CSS segítségével?

Összefoglalás

Ebben a leckében a HTML-dokumentumok elemeinek egyszerű formázásáról volt szó. A CSS több száz tulajdonságot biztosít, és a legtöbb webdizájnernek kézikönyvekhez kell folyamodnia, hogy mindet megjegyezze. Mindazonáltal legtöbbször a tulajdonságok és értékek viszonylag kis csoportját használjuk, és fontos, hogy ezeket kívülről tudjuk. Ez a lecke a következő fogalmakat és eljárásokat veszi át:

Alapvető CSS-tulajdonságokat színekkel, hátterekkel és betűtípusokkal kapcsolatban.
Az abszolút és relatív mértékegységeket, amiket a CSS a méretek és távolságok beállítására használhat, mint például a px, em, rem, vw, vh, stb.

Válaszok a gyakorló feladatokra

Hogy lehet fél-átlátszóságot adni a kék színhez (RGB jelöléssel rgb(0,0,255)), hogy a CSS color tulajdonságban használhassuk?

Használjuk az rgba prefixet és legyen a negyedik értékként 0.5 azaz: rgba(0,0,255,0.5).
Milyen szín felel meg a #000 hexadecimális értéknek?

A black (fekete). A #000 hexadecimális érték a #000000 rövidítése.
Mivel a Times New Roman egy serif betűtípus és nem elérhető minden eszközön, hogyan lehetne írni egy CSS-szabályt, amely a Times New Roman betűtípust kér, de a serif általános betűtípuscsaládot állítja be tartalékként?
```
* {
  font-family: "Times New Roman", serif;
}
```
Hogyan lehet egy relatív méret kulcsszóval a <p class="disclaimer"> elem betűméretét a szülő eleméhez képest kisebbre állítani?

A smaller kulcsszó használatával:
```
p.disclaimer {
  font-size: smaller;
}
```

Válaszok a gondolkodtató feladatokra

A background tulajdonság egy rövidítés, segítségével több background-* tulajdonságot állíthatunk be egyszerre. Írjuk át a következő CSS-szabályt egyetlen background tulajdonságra!
```
body {
  background-image: url("background.jpg");
  background-repeat: repeat-x;
}
```
```
body {
  background: repeat-x url("background.jpg");
}
```
Írjunk egy olyan CSS-szabályt az <div id="header"></div> elemre, amely csak az alsó szegély szélességét változtatja meg 4px-re!
```
#header {
  border-bottom-width: 4px;
}
```
Írjunk egy font-size tulajdonságot, amely megduplázza az oldal gyökérelemében használt betűméretet!

A rem egység a gyökérelemben használt betűméretnek felel meg, így a tulajdonságnak font-size: 2rem-nek kell lennie.
A double-spacing (dupla sorköz) a szövegszerkesztőkben gyakori formázási megoldás. Hogyan lehetne hasonlót beállítani CSS segítségével?

Állítsuk a line-height tulajdonság értékét 2em-re, mivel az em érték megfelel az aktuális elem betűméretének.