033.1 Lecke 1

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:

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:

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:

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ó):

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

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.

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

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:

pontosan ugyanaz lesz az eredmény itt is:

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:

vagy:

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

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.

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:

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:

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.