033.1 Lecke 1
Tanúsítvány: |
Web Development Essentials |
---|---|
Verzió: |
1.0 |
Témakör: |
033 CSS - A tartalom formázása |
Fejezet: |
033.1 CSS alapok |
Lecke: |
1/1 |
Bevezetés
A HTML-oldalakat minden böngésző alapértelmezett megjelenítési szabályok szerint jeleníti meg, amelyek praktikusak és egyszerűek, de vizuálisan nem vonzóak. A HTML önmagában kevés funkciót kínál a modern felhasználói élmény koncepciókon alapuló, kidolgozott oldalak írásához. Egyszerű HTML-oldalak írása után már láthatjuk, hogy azok csúnya látványt nyújtanak az interneten található, jól megtervezett oldalakhoz képest. Ennek az az oka, hogy a modern HTML-ben a dokumentum elemeinek szerkezetére és működésére szánt jelölőkód (azaz a szemantikai tartalom) elkülönül azoktól a szabályoktól, amelyek meghatározzák, hogy az elemeknek hogyan kell kinézniük (a megjelenítés). A megjelenítésre vonatkozó szabályok egy másik nyelven, az úgynevezett _Cascading Style Sheets (CSS) nyelven íródnak. Ez lehetővé teszi a dokumentum szinte minden vizuális aspektusának megváltoztatását, például a betűtípusok, a színek és az elemek elhelyezése az oldalon.
A HTML-dokumentumok a legtöbb esetben nem arra szolgálnak, hogy a PDF-fájlokhoz hasonlóan rögzített elrendezésben jelenjenek meg. A HTML-alapú weboldalakat valószínűleg a legkülönbözőbb képernyőméreteken fogják megtekinteni, vagy akár ki is nyomtathatják őket. A CSS hangolható beállításokat biztosít annak érdekében, hogy a weblap a kívánt módon, a megnyitó eszközhöz vagy alkalmazáshoz igazítva jelenjen meg.
Stílusok hozzáadása
Különféle módokon adhatunk CSS-t a HTML dokumentumhoz: beírhatjuk közvetlenül az elem tag-jébe, az oldal forráskódjának egy külön szekciójába vagy egy külső fájlba, amelyet behivatkozik a HTML oldal.
A style
attribútum
Egy adott elem stílusát a legegyszerűbben úgy módosíthatjuk, hogy közvetlenül az elem tag-jébe írjuk be a style
attribútumot. Minden látható HTML-elem támogatja a style
attribútumot, amelynek értéke lehet egy vagy több CSS-szabály, más néven tulajdonság (property). Kezdjük egy egyszerű példával, egy bekezdés elemmel:
<p>Formázott bekezdés</p>
Egy CSS tulajdonság alap szintaxisa a következő: property: value
, ahol a property
az elemen megváltoztatni kívánt szempont, a value
pedig a böngésző által megadott alapértelmezett opció módosítását határozza meg. Egyes tulajdonságok minden elemre vonatkoznak, míg mások csak bizonyos elemekre. Ehhez hasonlóan minden egyes tulajdonsághoz megfelelő értékeket kell társítani.
Egy sima bekezdés színének megváltoztatásához például a color
tulajdonságot használjuk. A color
tulajdonság az előtér (foreground) színre utal, vagyis a bekezdésben szereplő betűk színére. Maga a szín az érték lesz és sokféle formátumban megadható, például egyszerű névként is, mint a red
, green
, blue
, yellow
, stb. Egy bekezdés betűinek lilára
színezéséhez, a color: purple
tulajdonságot kell az elem style
attribútumához adnunk:
<p style="color: purple">Az első formázott bekezdésem</p>
Egyéb testreszabott tulajdonságok is bekerülhetnek ugyanabba a style
tulajdonságba, de pontosvesszővel kell őket elválasztani. Ha nagyobb betűméretet szeretnénk, adjuk hozzá a font-size: larger
-t a style
tulajdonsághoz:
<p style="color: purple; font-size: larger">Az első formázott bekezdésem</p>
Note
|
Nem kötelező szóközöket tennünk a vesszők és a pontosvesszők után, de egyszerűbbé teszik a CSS kód olvashatóságát. |
A változtatások eredményének megtekintéséhez mentsük el a következő HTML-t egy fájlba, majd nyissuk meg egy webböngészőben (az eredmény a Figure 1 ábrán látható):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS alapok</title>
</head>
<body>
<p style="color: purple; font-size: larger">Az első formázott bekezdésem</p>
<p style="color: green; font-size: larger">A második formázott bekezdésem</p>
</body>
</html>

Az oldal minden elemét elképzelhetjük téglalapként vagy dobozként, amelynek geometriai tulajdonságait és kinézetét CSS segítségével manipulálhatjuk. A renderelési mechanizmus két alapvető szabványos koncepciót használ az elemek elhelyezésére: block (blokk) és inline (soron belül). A block elemek elfoglalják a szülőelemük teljes vízszintes terét, és sorban, felülről lefelé helyezkednek el. Magasságuk (a függőleges dimenzió nem összetévesztendő az oldalon levő top pozícióval) általában a tartalmuk mennyiségétől függ. Az inline elemek a nyugati írott nyelvekhez hasonló, balról jobbra haladó módszert követnek: az elemek vízszintesen, balról jobbra haladva kerülnek elhelyezésre, ha pedig a jobb oldalon már nincs több hely, akkor az elem egy új sorban folytatódik, közvetlenül az aktuális alatt. Az olyan elemek, mint a p
, div
, és section
alapértelmezés szerint blokkokba kerülnek, míg az olyan elemek, mint a span
, em
, a
és a betűk soron belül rendeződnek el. Ezek a alapvető elhelyezési módszerek CSS szabályok segítségével módosíthatók.
A példa HTML-dokumentum törzsében lévő p
elemhez tartozó téglalap látható lesz, ha a szabályhoz hozzáadjuk a background-color
tulajdonságot (Figure 2):
<p style="color: purple; font-size: larger; background-color: silver">Az első formázott bekezdésem</p>
<p style="color: green; font-size: larger; background-color: silver">A második formázott bekezdésem</p>

Ahogy új CSS-tulajdonságokat adunk a style
attribútumhoz, úgy lesz egyre inkább zavaros a kód. Ha túl sok CSS-szabályt (rule) adunk a style
attribútumhoz, az aláássa a struktúra (HTML) és a megjelenítés (CSS) szétválasztását. Ráadásul hamar meglátjuk majd, hogy sok formázás megosztódik a különböző elemek között és nem túl bölcs dolog minden elem esetén megismételni őket.
CSS szabályok
Ahelyett, hogy az elemeket közvetlenül a style
attribútumukban formáznánk, sokkal praktikusabb, ha a böngészőnek leírjuk azon elemek összességét, amelyekre egyéni formázás vonatkozik. Ezt úgy tehetjük meg, hogy a testreszabott tulajdonságokhoz hozzáadunk egy szelektort, amely típus, osztály, egyedi ID, relatív pozíció, stb. alapján párosítja az elemeket. A szelektor és a megfelelő testreszabott tulajdonságok kombinációját — más néven deklarációk — CSS-szabálynak nevezzük. Egy CSS-szabály alapvető szintaxisa a következő: selector { property: value }
. A style
attribútumhoz hasonlóan a pontosvesszővel elválasztott tulajdonságok csoportosíthatók, mint például p { color: purple; font-size: larger }
. Ez a szabály az oldal minden p
elemére illeszkedik és a testreszabott color
és font-size
tulajdonságokat alkalmazza.
A szülő elemre vonatkozó CSS-szabály automatikusan vonatkozik az összes gyerekelemre is. Ez azt jelenti, hogy a body
szelektor használatával az oldal összes szövegére alkalmazhatjuk a tulajdonságokat, függetlenül attól, hogy egy <p>
tagen belül vagy kívül vannak-e: body { color: purple; font-size: larger }
. Ez a stratégia megszabadít minket attól, hogy ugyanazt a szabályt újra megírjuk az összes gyerekelemre, de szükség lehet további szabályok írására az örökölt szabályok “visszavonásához” vagy módosításához.
A style
tag
A <style>
tag segítségével azon a HTML-oldalon belül írhatunk CSS-szabályokat, amit formázni szeretnénk. Lehetővé teszi, hogy a böngésző meg tudja különböztetni a CSS-kódot a HTML-kódtól. A <style>
tag a dokumentum head
szekciójába kerül:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS alapok</title>
<style type="text/css">
p { color: purple; font-size: larger }
</style>
</head>
<body>
<p>Az első formázott bekezdésem</p>
<p>A második formázott bekezdésem</p>
</body>
</html>
A type
attribútum megmondja a böngészőnek, hogy milyen típusú tartalom van a <style>
tagen belül, azaz mi annak a MIME típusa. Mivel minden CSS-t támogató böngésző feltételezi, hogy a <style>
tag típusa alapértelmezés szerint text/css
, a type
attribútum megadása opcionális. Van egy media
attribútum is, amely azt a médiumot — kijelző vagy nyomtatás például — jelöli, amelyre a <style>
tagben lévő szabályok vonatkoznak. Alapértelmezés szerint a CSS-szabályok minden olyan médiumra vonatkoznak, ahol a dokumentum megjelenítésre kerül.
A HTML-kódhoz hasonlóan a sortörés és a behúzás nem változtatja meg a CSS-szabályok böngésző általi értelmezését. Például:
<style type="text/css">
p { color: purple; font-size: larger }
</style>
pontosan ugyanaz lesz az eredmény itt is:
<style type="text/css">
p {
color: purple;
font-size: larger;
}
</style>
A szóközök és a sortörések által felhasznált byte-ok alig változtatnak a dokumentum végső méretén és nincs jelentős hatással az oldal betöltődési idejére, így az elrendezés megválasztása ízlés kérdése. Figyeljük meg, hogy a CSS-szabály utolsó deklarációja (font-size: larger;
) után is van pontosvessző. Ez a pontosvessző nem kötelező, de ha ott van, könnyebbé teszi, hogy a következő sorban újabb deklarációt adjunk hozzá anélkül, hogy aggódnunk kellene a hiányzó pontosvesszők miatt.
A deklarációk külön sorokba való helyezése akkor is hasznos lehet, ha ki kell kommenteznünk egyet. Ha például hibaelhárítási okokból ideiglenesen nem akarunk használni egy deklarációt, a sort a /*
és`*/` jelek közé kell zárnunk:
p {
color: purple;
/*
font-size: larger;
*/
}
vagy:
p {
color: purple;
/* font-size: larger; */
}
Így a font-size: larger
deklarációt a böngésző figyelmen kívül fogja hagyni. Figyeljünk arra, hogy a kommenteket megfelelően nyissuk és zárjuk, különben a böngésző nem fogja tudni értelmezni a szabályokat.
A kommentek akkor is hasznosak, ha megjegyzést akarunk írni a szabályokról:
/* A <p>-n belüli szövegek nagyobbak és lilák */
p {
color: purple;
font-size: larger;
}
Az ilyen emlékeztetők a kevés szabályt tartalmazó CSS-ek esetén fölöslegesek, de több száz (vagy több) szabály között történő tájékozódáshoz elengedhetetlenek.
Bár a style
attribútum és a <style>
tag megfelelő az egyéni formázások tesztelésére és bizonyos egyéb helyzetekben is hasznosak, nem használják őket gyakran. Ehelyett a CSS-szabályokat általában külön fájlban tárolják, amelyre a HTML-dokumentumból lehet hivatkozni.
CSS külső fájlokban
A CSS-definíciók HTML-dokumentumhoz való társításának javasolt módja a CSS külön fájlban való tárolása. Ennek a módszernek két fő előnye van az előzőekkel szemben:
-
Ugyanazok a szabályok különböző dokumentumok között is megoszthatók.
-
A CSS-fájlt a böngésző általában gyorsítótárba helyezi, ami javítja a későbbi betöltési időt.
A CSS fájlok kiterjesztése .css
és a HTML fájlokhoz hasonlóan bármilyen egyszerű szövegszerkesztővel szerkeszthetők. A HTML fájlokkal ellentétben a CSS fájlokban nincs hierarchikus címkékkel felépített felső struktúra, mint például a <head>
vagy a <body>
. Egy CSS fájl inkább csak a böngésző által egymás utáni sorrendben feldolgozott szabályok listája. Ugyanazok a szabályok, amelyeket egy <style>
tag belsejébe írhatunk, kerülhetnek egy CSS fájlba.
A HTML dokumentumban és a fájlban tárolt CSS szabályok közötti kapcsolat csak a HTML-ben van meghatározva. A CSS fájlnak nem számít, hogy léteznek-e a szabályokhoz tartozó elemek, így nincs szükség arra, hogy felsoroljuk azokat a HTML dokumentumokat, amikhez kapcsolódik. A HTML-ben pedig minden linkelt stíluslapot alkalmazni fog a dokumentumra, mintha a szabályok egy <style>
tagben lennének.
A <link>
HTML tag egy külső stíluslapot definiál, amelyet az aktuális dokumentum fog használni és ennek a HTML-fájl head
szekciójába kell kerülnie:
<head>
<meta charset="utf-8" />
<title>CSS alapok</title>
<link href="style.css" rel="stylesheet">
</head>
Most már a korábban használt szabályt, ami a p
elemre vonatkozik, elhelyezhetjük a style.css
fájlban és a weboldal látogatója ugyanazt az eredményt fogja látni. Ha a CSS fájl nem ugyanabban a könyvtárban van, mint a HTML, adjuk meg a href
attribútumban a relatív vagy teljes elérési útját. A <link>
ülönböző típusú külső erőforrásokra hivatkozhat, ezért fontos megállapítani, hogy a külső erőforrás milyen kapcsolatban áll az aktuális dokumentummal. Külső CSS-fájlok esetében a kapcsolatot a rel="stylesheet"
paraméter határozza meg.
A media
attribútum ugyanúgy használható, mint a <style>
tag esetén: azt a médiát jelöli, mint például a számítógép képernyője vagy nyomtatás, amelyre a külső fájlban levő szabályokat alkalmazni kell.
A CSS teljesen megváltoztathat egy elemet, de fontos, hogy az oldal komponenseihez a megfelelő elemet használjuk. Ellenkező esetben a segítő technológiák, például a képernyőolvasók nem biztos, hogy képesek azonosítani az oldal megfelelő részeit.
Gyakorló feladatok
-
Milyen módszerekkel lehet megváltoztatni a HTML-elemek megjelenését a CSS segítségével?
-
Miért nem ajánlott a
<p>
tagstyle
attribútumának használata, ha vannak olyan testvérbekezdések, amiknek ugyanúgy kell kinézniük? -
Mi az alapértelmezett elhelyezési szabály a
div
elem elhelyezéséhez? -
A
<link>
tag melyik attribútuma jelzi egy külső CSS fájl helyét? -
Melyik szekcióban kell elhelyeznünk a HTML-dokumentumon belül a
link
elemet?
Gondolkodtató feladatok
-
Miért nem ajánlott a
<div>
tag használata egy szó azonosítására egy átlagos mondatban? -
Mi történik, ha elkezdünk egy kommentet (
/*
) egy CSS fájl közepén, de elfelejtük lezárni a*/
-al? -
Írjunk egy CSS-szabályt, ami aláhúzza a dokumentum összes
em
elemét! -
Hogyan lehet jelezni, hogy egy
<style>
vagy<link>
tagből származó CSS-t csak beszédszintetizátorok használjanak?
Összefoglalás
Ez a lecke a CSS alapfogalmait és a HTML-be való integrálását tárgyalja. A HTML-dokumentumok megjelenésének megváltoztatására szolgáló szabványos módszer a CSS szabályok használata. A CSS lehetővé teszi, hogy a szemantikus tartalmat elkülönítsük a megjelenítési szabályoktól. Ez a lecke a következő fogalmakat és eljárásokat veszi át:
-
Hogyan változtassuk meg a CSS-tulajdonságokat a
style
attribútummal. -
A CSS-szabályok alapvető szintaxisa.
-
A
<style>
tag használata a CSS-szabályok dokumentumba való beágyazásához. -
A
<link>
tag használata a külső CSS-fájlok dokumentumba való beépítéséhez.
Válaszok a gyakorló feladatokra
-
Milyen módszerekkel lehet megváltoztatni a HTML-elemek megjelenését a CSS segítségével?
Alapvetően három módszer van: beírhatjuk közvetlenül az elem tag-jébe, az oldal forráskódjának egy külön szekciójába vagy egy külső fájlba, amelyet behivatkozik a HTML oldal.
-
Miért nem ajánlott a
<p>
tagstyle
attribútumának használata, ha vannak olyan testvérbekezdések, amiknek ugyanúgy kell kinézniük?A CSS deklarációt meg kell ismételni a többi
<p>
tagben, ami időigényes, növeli a fájl méretét és hibalehetőséget is jelent. -
Mi az alapértelmezett elhelyezési szabály a
div
elem elhelyezéséhez?Alapértelmezés szerint a
div
elemet blokkelemként kezeljük, így a szülő eleme teljes vízszintes terét elfoglalja, magassága pedig a tartalmától függ. -
A
<link>
tag melyik attribútuma jelzi egy külső CSS fájl helyét?A
href
attribútum. -
Melyik szekcióban kell elhelyeznünk a HTML-dokumentumon belül a
link
elemet?A
link
elemnek a HTML-dokumentumhead
szekciójában kell lennie.
Válaszok a gondolkodtató feladatokra
-
Miért nem ajánlott a
<div>
tag használata egy szó azonosítására egy átlagos mondatban?A
<div>
tag szemantikai elválasztást biztosít a dokumentum két különálló része között, soron belüli szövegelemekkel való haszálata megzavarja a hozzáférhetőségi eszközöket. -
Mi történik, ha elkezdünk egy kommentet (
/*
) egy CSS fájl közepén, de elfelejtük lezárni a*/
-al?A komment utáni minden szabályt figyelmen kívül fog hagyni a böngésző.
-
Írjunk egy CSS-szabályt, ami aláhúzza a dokumentum összes
em
elemét!em { text-decoration: underline }
vagy
em { text-decoration-line: underline }
-
Hogyan lehet jelezni, hogy egy
<style>
vagy<link>
tagből származó CSS-t csak beszédszintetizátorok használjanak?A
media
attribútumánakspeech
-nek kell lennie.