Válas Péter honlapja

CSS a közismereti érettségin

• Utolsó módosítás:

Bevezetés

A CSS ismerete 2017-ben került bele az emelt szintű közismereti (azaz nem szakmai) informatikaérettségi gyakorlati részének a követelményébe. A jogszabály összesen ennyit mond:

  • Ismerje a weblapok jellemző elemeit.
  • Tudjon egyszerű weblapot készíteni a HTML és CSS segítségével.
  • Ismerje a HTML és a CSS alapelemeit.
  • A címsor, háttérszín, háttérkép, különböző színű, méretű, igazítású szöveg, listák, táblázatok, képek, animációk, hivatkozások elhelyezése egy grafikus weblapszerkesztővel.
  • Tudjon egyszerű weblapszerkesztési feladatot elvégezni.

Ebből nagyon nehéz kitalálni, mit is kell tudni. Majd a gyakorlat dönti el. Nincs sehol egy tételes lista, hogy milyen tulajdonságokat kell ismerni, ahogy a többi témakörből sincs. Azért teszek egy kísérletet, hogy behatároljam az „egyszerű” és az „alapelemek” szó jelentését. Kicsit túl is megyek rajta a biztonság és a jobb megértés kedvéért, de semmiképp nem akar több lenni ez a cikk, mint amit a címe ígér. Felelősséget természetesen nem vállalhatok érte, hogy jól találom el, mire gondolt a költő, de én legalább (az emelt szintű érettségiztetésben szerzett tapasztalatomra támaszkodva) megpróbálom. A szakaszok és a cikk végén találsz linkeket a továbblépéshez. Ahol ez a W3Schools oldalára mutat, ott kísérletezni is tudsz. Ennek a cikknek a megértéséhez szükséged van a HTML alapjainak ismeretére. Nem célom, hogy komplett tananyagot állítsak össze – ez csak egy segédlet, ami legalább annyira szól a tanároknak, mint az emelt érettségire készülő diákoknak. Azt viszont fontosnak tartom, hogy aki nem csak az érettségit akarja lezavarni, az kapjon egy átfogó képet és némi indíttatást az önálló tanuláshoz. Az utolsó szakaszban térek ki az eddigi érettségik tanulságaira.

Az érettségi követelményhez hozzátartozik ezeknek az alapelemeknek a rendeltetésszerű használata. Előfordulhat, hogy csinálsz valamit, ami működni látszik, de éppen úgy nem fogadják el a javításkor, mint a szövegszerkesztésben a szóközzel való középre igazítást. Különösen az emelt érettségin elvárás, hogy a vizsgázó értse is, amit csinál, ne csak barkácsoljon. A cikk végén mutatok példát erre is.

Nem követelmény a CSS-forrás dokumentáció nélküli szerkesztése, elegendő tudni valamilyen vizuális szerkesztőprogrammal kiegészíteni, szerkeszteni. Ennek ellenére én sokszor beszélek a forrásról, mert ha már nekifog tanulni valamit az ember, akkor tanulja meg rendesen. Az érettségin persze mindenkit szorít az idő, ott mások a követelmények. Célszerű a felkészülés során azt is gyakorolni, hogy egy félkészen kapott stíluslapot hogy tudsz „behúzni” a szerkesztőbe, hozzárendelni a weblapodhoz. Vissza a tartalomjegyzékhez


Mi a CSS, és mire jó?

Bemelegítésül görgess itt lefelé a CSS Demo - One HTML Page - Multiple Styles! szakaszcímig, és kattintgass a Stylesheet 1, Stylesheet 2... feliratokra. A demó másféle megjelenítést kapcsol ugyanahhoz a tartalomhoz. A cikk végén a linkgyűjteményben megtalálod a Zen Gardent, ahol még látványosabb példákat nézegethetsz ugyanahhoz a weboldalhoz tartozó stíluslapokra. Szinte rá sem lehet ismerni, hogy ugyanazt a tartalmat látjuk. Így érthetőbb lesz a folytatás.

A CSS a Cascading Style Sheets (magyarul többféleképpen fordítható: lépcsőzetes/összekapcsolt/sorba kapcsolt/rangsorolt stíluslapok) rövidítése. Ez a három betű egy olyan leírónyelvet jelöl, amely a weboldalak és más XML-alapú dokumentumok formázására való. Leggyakrabban a HTML-lel együtt használjuk. Maga a HTML szintén tartalmaz bizonyos – a verziók fejlődésével egyre kevesebb – formázási lehetőséget, de egészségesebb nem keverni a kettőt.

Hol volt, hol nem volt, Tim Berners-Lee feltalálta a HTML-t és a webet, hogy a korábbinál informatívabb módon tudjon tartalmat megosztani a kollégáival. Telt-múlt az idő, és az emberek egyre jobban szerették volna szépen megformázni a weblapjaikat, és a HTML implementációi (azaz a böngészők) eleinte egyre több lehetőséget kínáltak hozzá. Szándék szerint azonban a HTML-t sohasem tervezték erre. Időközben kifejlesztették a CSS-t is, de a HTML-t még mindig sokan használták a tartalom megjelenítése mellett formázásra is. A böngészőháborúk során a böngészők gyártói különböző irányban tértek el a szabványoktól (pontosabban ajánlásoktól), és egyre több energiát kellett fektetni abba, hogy egy weboldal különböző böngészőkben egyformán jelenjék meg. Az iparág végül belátta, hogy ez így nem mehet tovább, és erőfeszítéseket tettek az ismételt szabványosítás érdekében. Egy ideig úgy tűnt, hogy a HTML szigorúbb verziója, az XHTML lesz a kiút (ennek a kornak a maradványai az olyan önzáró elemek, mint például a <br />). Végül a HTML5 került ki győztesen, amihez jelenleg a CSS3 verzió társul. A kidolgozás alatt álló CSS4 nem egységes szabvány, hanem modulokra (témakörökre) oszlik, amelyek különböző időpontokban válnak használatra alkalmassá.

A CSS előnyei:

  • Elválik a tartalom és a megjelenés.
  • Megfelelő használat esetén tisztább, olvashatóbb lesz a weblapunk kódja.
  • Programmal előállított weblap esetén tisztább lesz a programunk kódja is.
  • Egységessé tehetjük egy teljes webhely formázását, és a változtatáshoz csak egy helyen kell belenyúlni a kódba.
  • Ugyanahhoz az oldalhoz többféle megjelenés tartozhat (akár felhasználói beállítással is).
  • Ugyanahhoz az oldalhoz eszközönként eltérő megjelenés tartozhat (képernyő, mobil, nyomtató).
  • Külön ember dolgozhat a szerkezeten, a tartalmon és a megjelenésen, és mindenki azt csinálhatja, amihez ért.
  • A formázókódok nélkül hagyott HTML-t könnyebb jelentéstükrözővé, azaz szemantikussá tenni, és könnyebb lesz más programokkal elemezni és újrahasznosítani (többször csinálunk ilyet, mint gondolnád!).
  • Könnyebb reszponzívvá tenni a megjelenést (ld. lent). A CSS használatával kiválthatók menük, táblázatok, amelyek szemantikusan (szándékukat tekintve) nem táblázatok, csak az elrendezés kialakítására valók, és más olyan elemek, melyek az elrendezést rögzítik a fejlesztő képernyőjéhez. Ez már túlmegy a vizsga szintjén.
  • Sok pontot lehet szerezni vele az érettségin, ha épp ilyen feladatot kapsz.

Bizonyos formázásokat ma már csak CSS-sel tudunk megoldani. Például a HTML font eleme, amellyel régen betűszínt és -méretet állíthattunk, rég elavult, és a mai böngészők nem kötelesek értelmezni. Lehet, hogy te azon a gépen, ahol a weblapot készíted, működni látod, máshol (esetleg későbbi verzióban) pedig nem fog működni. Kimondhatjuk tehát, hogy a CSS alapjainak ismerete nélkül ma már lényegében nem lehet weblapot készíteni. Viszont ha nem webfejlesztő akarsz lenni, nem is kell túl mélyen belemenni.

A CSS-t nem arra találták ki, hogy minden esetben egyszerűbb legyen a használata, mint a régi formázókódoké. Az alapvető formázásokat esetleg hosszabb kóddal tudjuk megoldani, cserébe egy egységes és átlátható rendszert kapunk.

Többször visszatérek a szemantikus HTML koncepciójára, amely a HTML5 egyik alapelve, de a köztudatban még nem terjedt el eléggé. Ez érinti a CSS használatát is, ezért idetartozik. A jelentéstükröző, szemantikus megközelítés azt jelenti, hogy a weboldalunk szerkezeti elemeit a rendeltetésük szerint használjuk. Például itt fent a cikk megjelenésének a dátuma nem közönséges dőlt betűs szöveg, hanem egy time elem. Ez önmagában semmit nem csinál, de a keresőprogramok könnyen megtalálják vele a dátumot, a stíluslapon pedig hozzá tudtam rendelni egy jobb megjelenést biztosító egyedi margót. Az egész szöveget, bár enélkül is meg tudna jelenni, beburkoltam egy article elembe, ami az erre felkészített programok számára egyértelművé teszi, hogy egy cikk van a dobozban. A HTML5 több olyan taget használ, amelyek jellemzően dőlt betűkkel jelennek meg a weblapokon, de más-más funkcionális elemet írnak le, tehát nem csak a megjelenés számít. A szemantikus weblap fontos jellemzője, hogy a táblázatot is rendeltetésszerűen használjuk, azaz csak a táblázatos adatok elrendezésére, nem pedig a weblap megjelenésének a kialakítására. Mindez nem érettségi követelmény, hanem informatikai gondolkodásmód. A weboldal jelentéstükrőző kialakításával segíted a vakok és gyengénlátók tájékozódását is.

Ne tántorítson el, hogy a saját honlapomon nem minden esetben használom az itt leírt megoldásokat, azaz olykor bort prédikálok és vizet iszom. Ez egy nagyon régi honlap, amit ezer éve készített egy barátom, a maga idejében színvonalasan. Szabadidőmben, önkéntes munkaként dolgozom rajta, és engem egyszerűen jobban érdekel a tartalomfejlesztés, mint hogy nulláról újraírjam az egészet a mai követelmények szerint. Erre még keresem az időt, bocs. Amúgy sem akartam soha trendi lenni. Viszont ha most kezdeném építeni ezt a honlapot, én sem így csinálnám. Döntsd el, hogy elfogadod-e így a segítségemet az érettségihez.

Ha önállóan keresgélsz az interneten, gyakran fogsz belebotlani a W3C rövidítésbe. Ez a World Wide Web Konzorcium, amely a webbel kapcsolatos szabványokat, ajánlásokat, így a HTML-t és a CSS-t is gondozza. A W3C magyar irodájának honlapján magyarul is elérhetők a dokumentumaik. A „W3C compliant” kifejezés így tartalmilag szabványosnak (illetve az ajánlásoknak megfelelőnek) fordítható.

Mielőtt a konkrétumokba belemennénk, öt általános koncepciót fogunk megismerni. Ezek a stílusok és stíluslapok elhelyezése; a formázható elemek köre; a CSS dobozmodellje; a színkódolás; végül a méretek megadása.

Két további fontos koncepcióról csak érintőlegesen beszélünk. Az egyik a kaszkádolás, amiről a CSS a nevét kapta. Ez azt jelenti, hogy ugyanarra a HTML-elemre egyszerre több stílus is érvényes lehet, és a CSS ezek hierarchiájának alkalmazásával határozza meg a végső formázást. A másik a reszponzivitás, hogy a stílusokkal formázott lapok kis és nagy felbontású monitoron, asztali számítógépen, laptopon, tableten, tévén, mobiltelefonon, okosórán, okosgombostűn vagy bármilyen más megjelenítőeszközön automatikusan olvashatóan jelenjenek meg anélkül, hogy a fejlesztőnek egyenként kellene meghatároznia ezekre az eszközökre a megjelenést. Ezek az ismeretek meghaladják a közismereti érettségi követelményét. Vissza a tartalomjegyzékhez


Hogy néz ki egy stílus?

A következő példában, melynek minden elemét részletesen elmagyarázom a későbbiekben, a h2 szintű címsorokat 16 képpontos kék betűkkel fogjuk írni, hogy lássuk többféle tulajdonság együttes alkalmazását.

h2 {color: blue; font-size: 16px;}

A stílus két részből áll: egy kijelölőből (angolul selector), ami itt a h2 (ez a HTML címsoreleme), és egy meghatározásblokkból. A kapcsos zárójelek közé írt meghatározásblokk egy vagy több meghatározást tartalmaz, esetünkben kettőt. A meghatározások tulajdonság: érték (property: value) párokból állnak. Az első meghatározásban a color (szín) a tulajdonság és a blue (kék) az érték, a másodikban a font-size (betűméret) a tulajdonság és a 16px (16 képpont) az érték.

Ha elég soká olvasol, majd kiderül az is, hogy lehet egy tulajdonságnak látszólag egyszerre több értéke is, de ezt a poént most még nem lövöm le.

  • A meghatározásokat pontosvessző zárja le és választja el egymástól. Az utolsó után a gyakorlatban el is hagyhatnánk a pontosvesszőt, de jobb megszokni, hogy mindig kitesszük, így akkor sem rontjuk el, ha újabb meghatározással egészítünk ki egy blokkot (amúgy is ez a szabványos).
  • A kijelölő és a meghatározásblokk közé, a meghatározások közé és a kettőspontok után az olvashatóság érdekében szóközt tettem. Ezt nem mindenki csinálja így. A böngésző enélkül is érteni fogja, de az embereknek is érteniük kell, és így könnyebb áttekinteni.
  • Vannak, akik a kapcsos zárójel belső oldalára is szóközt tesznek. Általában sem az élő nyelvekben, sem a programozásban nem teszünk szóközt semmilyen zárójel belső oldalára, kivéve a PHP-programozók egy részét, akik közül sokan követik ezt a szerintem nagyon rossz szokást. Talán ők tesznek ilyet a CSS-sel is, de ezt nem ajánlom követésre. Nem véletlenül nem csinálja a többség.

A fenti egysoros írásmódot csak a bemutatás kedvéért szoktuk használni. A stíluslapokon általában a programkódokhoz hasonlóan tördeljük és behúzásokkal tagoljuk a stílusokat, és ahol kell, a programokhoz hasonlóan megjegyzést is írhatunk:

/* E jelek között a CSS-be is írhatunk megjegyzést. */
h2 {
	color: blue;
	font-size: 16px;
}

Ezek a formázási szabályok megfelelnek a Google ajánlásának is (ld. lent).

A stílusok és a stílusokon belüli meghatározások sorrendje alapvetően kötetlen, de ha ugyanarra az elemre egymással ütköző tulajdonságokat adsz meg, akkor a későbbi fog érvényesülni. Ahogy a katonaságnál mondták: mindig az utolsó parancs érvényes. Erre a háttérnél mutatok példát. A linkeknél látunk majd kivételt, ahol kötött a sorrend.

Továbblépés:

Vissza a tartalomjegyzékhez

Szóhasználat

Az egyértelműség kedvéért a HTML-elemek (tagek) tulajdonságait (angolul attribute) ebben a cikkben attribútumnak fogom nevezni, hogy ne keveredjenek a CSS tulajdonságaival (angolul property). Tehát a hamarosan következő példában a style a h2 elem attribútuma, a color és a font-size a stílus tulajdonságai. Más szövegkörnyezetben nyugodtan fordíthatjuk tulajdonságnak az attribútumot is. Vissza a tartalomjegyzékhez


Kis- és nagybetűk

Maga a CSS nem érzékeny a különbségekre. Az a szokás alakult ki, hogy a stíluslapok írásakor általában kisbetűket használunk, de ez nem kötelező. Vannak azonban kivételek, amelyek nem a CSS hatókörébe tartoznak. Mindenekelőtt a HTML-dokumentumban meghatározott osztály- és azonosítónevek tartoznak ide, ezeknél tehát figyelnünk kell a különbségre. Vissza a tartalomjegyzékhez


Hova írjuk a stílusunkat?

Három lehetőségünk van, és el is fogom mondani a magánvéleményemet mind a háromról. Az érettségin, ha a feladat másképp nem rendeli, bármelyik elfogadható, de ha szép munkát akarsz végezni és jó szokásokat felvenni, már nem mindegy, melyiket választod.

Szövegközi stílus (angolul inline style): közvetlenül az adott elem style attribútumának értékeként adjuk meg a meghatározásblokkot. Ez lehet a HTML funkcionális eleme, vagy pedig a formázandó részt határoló div vagy span elem. Ilyenkor kijelölőre nincs szükség, és a meghatározásblokkot határoló kapcsos zárójel is elmarad, helyette idézőjelet használunk. Az előző példával így néz ki egy címsor:

<h2 style="color: blue; font-size: 16px;">Másodszintű címsor</h2>

A példa rögtön mutatja is a problémát: valószínű, hogy egy oldalon több címsor is lesz, amiket egyformán formázunk, akkor pedig ehhez a megoldáshoz ismételgetni kell a kódot, és ha bármit módosítani szeretnénk rajta, mindenhol egyesével javítani. Nem beszélve arról, hogy már megint összekeveredett a tartalom a formázással, pedig épp most örültünk a szétválasztásuknak. Ezt a módszert nagyon ritkán indokolt használni. Néha hasznosnak tűnhet:

  1. Ha egy weboldal keretrendszerét nem tartjuk az ellenőrzésünk alatt (azaz a stíluslapot nem szerkeszthetjük), de tartalmat írhatunk bele. Az ilyen oldalak ritkán engedélyezik a stílusok szabad használatát. Pozitív példa a Wikipédiát is működtető MediaWiki, ahol a szócikkekben tudunk ilyen formázást alkalmazni. (Ámbár ha ismétlődően szükség van rá, az erre felhatalmazott szerkesztők itt is létre tudnak hozni egy újrahasznosítható osztályt.)
  2. Ha egy általános stílust valamiért egy helyütt akarunk alkalmilag felülírni. Az ütköző definíciók esetén a szövegközi stílusnak nagyobb a prioritása, érvényesülni fog a stíluslapon beállított formázással szemben.
  3. Ha egy formázásra tényleg, de tényleg, de tutira csak egyszer van szükségünk, és nem akarunk stíluslapot buherálni érte, osztályt bevezetni hozzá, csak gyorsan odapöttyinteni, ahol használni akarjuk. Az ilyenekről az idő előrehaladtával gyakran ki szokott derülni, hogy mégis csak szükség van rájuk máshol is, és jobb lett volna helyből osztályt definiálni hozzájuk.

Lejjebb a dobozmodellnél a képaláírást úgy lehetett a képhez képest középre igazítani, hogy a képet körülvevő elem szélességét szövegközi stílussal a kép méretével egyezőre állítottam. Ez egy képenként változó szám, fölösleges lenne minden képnek saját osztályt definiálni. A felhasznált kód:

<figure style="width: 541px;">

Több esetben ilyen szövegközi stílust használtam a leírt formázások bemutatására, például a szegélyeknél.

Beágyazott stíluslap (angolul embedded vagy internal style sheet): Egy vagy több stílust tartalmazó stíluslapunkat elhelyezhetjük a weboldal fejrészében. Így már elkülönítettük a formázást a tartalomtól, és egy helyen állíthatjuk be az összes azonos típusú elem stílusát. Egy baj van vele: hogy csak azon az egy weboldalon fog érvényesülni. Márpedig magányos weblap a gyakorlatban egyedül az érettségin fordul elő, ott se mindig. Hasznos lehet, ha felül akarjuk írni az egész webhelyre érvényes külső stíluslap formázásait, mert ennek, ha a külső stíluslap meghívása után írjuk, magasabb a prioritása (de alacsonyabb a szövegközi stílusnál).

A kék címsorunkon kívül vegyünk fel egy olyan beállítást, hogy a szabályos p elemmel kezdődő bekezdések sorkizártan jelenjenek meg, így már lesz két stílusunk is. A fejrészbe ágyazott stíluslap így nézhet ki:

<head>
	<title>Ez az én oldalam</title>
	<style>
		h2 {
			color: blue;
			font-size: 16px;
		}

		p {
			text-align: justify;
		}
	</style>
</head>

Talán észrevetted, hogy a style kulcsszót már másodszor használtuk, és nem ugyanarra. Ez nem okoz zavart a böngészőnek, mert más helyen és formában van, nem keverhető össze.

A beágyazott stíluslap nagyon hasznos, ha nem weblapkészítésre használod a CSS-t (például egy SVG-képnél kifejezetten előny, hogy egy kép egy állomány marad), de ez túlmutat az érettségi szintjén.

Külső stíluslap (angolul external style sheet): Az esetek túlnyomó részében ez a legtisztább és a leglogikusabb megoldás. A stílusainkat egy .css kiterjesztésű állományba mentjük, legyen most a neve style.css. A tartalma ugyanaz lesz, mint az előbb a style tagek közötti rész. A weblap fejrészében így hivatkozhatunk rá:

<head>
	<title>Ez az én oldalam</title>
	<link rel="stylesheet" href="style.css">
</head>

Ugyanazt a stíluslapot a webhelyünk összes lapjához hozzárendelhetjük. Sok helyen egy bővített alakot láthatunk:

<link rel="stylesheet" type="text/css" href="style.css">

Ez azokból az időkből maradt fenn, amikor még arra gondoltak, hogy többféle stílusnyelv is lesz. Az evolúció a CSS vetélytárs nélküli győzelménél tart, ezért a type="text/css" rész fölösleges. Pontosabban: a HTML4 elvárta, a HTML5-ben elhagyható, a Google pedig kifejezetten ajánlja az elhagyását. Ugyanígy elhagyható a beágyazott stíluslapok style tagjéből is.

A külső stíluslapot a böngészőnk gyorsítótárazza, ezért ha több oldalból álló webhelyet egységesen formázol vele, a megtekintéskor kevesebb adatot kell letölteni, és gyorsabb lesz a megjelenítés.

Az érettségin a stíluslapod ugyanabban a könyvtárban legyen, mint a weblap! Ha félkész stíluslapot kapsz a források között, amit fel akarsz használni, másold be ugyanúgy a munkakönyvtárba, mint a képeket!

Hibrid megoldás: például a Sharepoint Designer által előállított kódban találkozhatunk ilyenekkel:

<h2 class="style1">Másodszintű címsor</h2>

A stíluslapon pedig a style1 osztály meghatározásblokkjába kerül a formázás. Általában ez lesz a jó megoldás (eltekintve a semmitmondó névtől), ha valamilyen elem különböző előfordulásait eltérően kell formázni – leggyakrabban és legtipikusabban a div és a span elemnél indokolt, de könnyen előfordulhat a p elemnél is. Összefüggő weblapokon jellemzően egyféleképp formázzuk meg az összes h2 címsort, ezért sokkal jobb magának a h2 elemnek a tulajdonságait leírni; ebben a példában így felesleges egy osztályt definiálni, csak bonyolítja a kódot és az életünket.

Egy stílust több darabban is megadhatunk. Nem kell, hogy egy szövegrész formázása egy helyen legyen összegyűjtve, sőt gyakran nem is célszerű. A több helyről összeszedett formázásnak két olyan esete van, amivel találkozhatsz egy érettségin:

  1. Öröklődés. Ha a body elem alatti p elemen belül egy span elem található, akkor az ebben található szövegre mind a háromnak a formázása érvényesülni fog, ahol nem ütköznek egymással. Például a body tartalmazza az előtérszínt (azaz a betűk színét). Ha a p és a span nem tartalmaz a színre vonatkozó beállítást, akkor a bodyban meghatározott színt látjuk. Ez az öröklődés nem érvényes minden tulajdonságra, a szín csak egy példa. (A háttérszín elvileg nem öröklődik, de mivel alapértelmezés szerint átlátszó, a gyakorlatban mégis a bodyban megadott háttérszín érvényesül az egész dokumentumban, amíg felül nem írjuk.)
  2. Ismételt definíció. Mi indíthat egy embert arra, hogy többször is felírja egy elem nevét? Például először felírjuk a h1 és h2 címsorstílusokat, hogy meghatározzuk a közös tulajdonságaikat, amiket nem akarunk kétszer is leírni, aztán külön valamelyiket még egyszer egy csak rá vonatkozó tulajdonság miatt. Kicsit lejjebb látni fogjuk a példát. Ilyenkor az adott elem tulajdonságait több helyről gyűjti össze a böngésző.

Amiről nem beszéltünk:

  1. Ütköző definíciók. Előfordul, hogy ugyanannak az elemnek ugyanarra a tulajdonságára egymással ellentétes meghatározásokat adunk. Ilyenkor a böngésző összetett szabályok alapján tesz igazságot közöttük, amiről elég most néhány alapelvet tudnunk: 1. A szűkebb definíció üti a tágabbat (az első példában a span a p-t és a p a bodyt). 2. A beágyazott stíluslap üti a külsőt és a szövegközi stílus a beágyazottat. (A szokásos sorrend esetén, ha előbb írjuk be a külsőt.) 3. Azonos súlyú definíciók közül a későbbi üti a korábbit.
  2. Egy weboldal fejrészébe több stíluslap is becsatolható.
  3. A stíluslapokba más stíluslapok importálhatóak is.

Ezek a haladó szintű alkalmazások nem követelmények az érettségin.

Mindazt, amiről idáig szó esett, szerzői stílusnak hívják, mert a weboldal szerzője határozza meg. A böngészőknek van saját alapértelmezett stíluslapjuk (hiszen valahogy megjelenítik a tartalmat CSS híján is), és megengedik, hogy saját olvasói stílust is definiáljunk. A szerzői stílusnak alapételmezés szerint magasabb a prioritása, mint az olvasóinak.

Erőszakkal felboríthatjuk a precedenciát, ha a meghatározásaink után az !important szöveget írjuk. Példa kényszerítetten zöld címsorra:

h2 {
	color: green !important;
}

Az !important csak arra az egy tulajdonságra vonatkozik, ami után írtuk. Azért itt említem, mert az igazi felhasználási területe pont az olvasói stíluslapok (olyan stíluslapot akarunk felülbírálni, amihez nincs közvetlen hozzáférésünk). Íme két olyan cikk, ahol amellett érvelnek, hogy másra ne használd őket: 1, 2 Különösen ne használd egy olyan hiba elnyomására, amit nem értesz vagy nem találsz, mert azzal elindultál egy csúszós lejtőn a teljes káosz felé! Az érettségin biztos nem lesz okod használni.

Összefoglalva: használj külső stíluslapot, ha nincs különös okod, hogy másképp tegyél. Használj szövegközi stílust, ha valóban alkalmi, nem ismétlődő formázás kell. Definiálj kifejező nevű osztályokat az olyan formázásoknak, amelyek nem köthetőek valamilyen HTML-elemhez, vagy hogyha egy elemnek nem minden előfordulása egyforma. De ha a feladatban minden másodszintű címsort vagy minden linket vagy minden bekezdést egyformán kell formázni, akkor ne – inkább kösd magához az elemhez a stílusodat.

Továbblépés:

Vissza a tartalomjegyzékhez

Mit formázhatunk? (A kijelölők fajtái)

Mielőtt a kijelölőkben elmélyednénk, egy kis ismétlés a HTML-elemek típusairól.

  • Blokkszintű (más leírásokban tömbszerű, angolul block-level) elemek: ezek új sorban kezdődnek, és egyéb formázás híján kitöltik a rendelkezésükre álló szélességet, mint a gázok. A nyitó- és a zárótag között (amelyiknél van ilyen) további blokkszintű vagy szövegközi elemeket tartalmazhatnak. Ilyen például a body, a p, a div, a h1–h6 címsorok, a pre, a hr, a table és a listázóelemek (ul, ol, li).
  • Szövegközi elemek (inline elements): ezek nem kezdenek új sort, és nem tartalmazhatnak blokkszintű elemeket, csak más szövegközieket. Ilyen például az a, a b, az i, a strong, az em, a span, a sup és a sub, a br és az img.
  • Táblázatelemek: szigorúan véve nem tartoznak egyikbe sem, de ugyanúgy tartalmazhatnak blokkszintű és szövegközi elemeket is (td, th).
  • Üres elemek (empty elements): a fentiek közül az img, a br és a hr nem tartalmazhat semmilyen további elemet, nincs is lezáró tagjük.

A blokkszintű és szövegközi elemek bővebb listáját itt találod. A display egy érettségi követelményt meghaladó, de nagyon fontos tulajdonság, amivel bizonyos átjárás biztosítható a két csoport között (nem lesz a farkasból bárány vagy a bárányból farkas, de úgy tud megjelenni, mintha...).

A span és a div. Ez a két elem a CSS használatakor nyeri el igazi értelmét, tiszta HTML-ben nem sok hasznukat látjuk. Csoportosító (grouping) elemeknek is hívják őket, mert a dokumentum egy részét vesszük körbe velük. Az attribútumaik közé felvehetünk osztályokat és azonosítókat, amelyekhez stílusokat rendelünk. A fontos különbség tehát a fentiek szerint, hogy a div blokkszintű, a span pedig szövegközi elem. A kód olvashatóságát, megértését segíti, ha ezeket csak szükség esetén alkalmazzuk, vagyis amikor a formázás nem köthető egy meglévő elemhez. Tehát ha van egy osztályunk a hivatalos dokumentumokra mutató hivatkozásokhoz, ami a több linktől eltérően jeleníti meg őket, akkor ehelyett:

<span class="hivataloslink">
<a href="https://net.jogtar.hu/jogszabaly?docid=99700100.kor">
Érettségi vizsgaszabályzat
</a>
</span>

jobb ezt írni:

<a href="https://net.jogtar.hu/jogszabaly?docid=99700100.kor" class="hivataloslink">
Érettségi vizsgaszabályzat
</a>

Viszont ha a neveket színes kiskapitális betűkkel akarjuk kiemelni, akkor megfelel ez a kód:

<span class="nev">Nem Töhötöm</span>

Osztályok és azonosítók. Ez is két olyan dolog, amit nem kell összekeverni. Mind a kettő arra jó, hogy hozzákapcsoljuk a stílusokat a dokumentumunk részeihez. Gyakran a div és span elemekhez szoktuk társítani őket, de lehet bármi máshoz is. Egy osztálynak (class) sok eleme lehet, amiket egyformán tudunk megformázni, és egy elem beletartozhat több osztályba is (az érettségin csak az előbbit kell tudni). Egy azonosító (identifier, id) viszont csak egyetlen elemet azonosíthat (azt csinálja, amit a neve sugall). Az azonosító egyúttal horgonyt is létrehoz, azaz az URL-ben a # jellel tudunk rá hivatkozni. Például ebben a cikkben, amit egy pszeudokóddal írt szövegből egy PHP-program generál, ezzel a technikával jön létre a tartalomjegyzék: az első címre a #toc1 linkre kattintva ugorhatsz. De mi történik, ha mégis többször használsz egy azonosítót osztály helyett?

  • A HTML nem fog sírni, a böngésző gond nélkül megjeleníti a tartalmat.
  • A CSS sem fog panaszkodni, hanem minden előfordulást megformáz. Eddig nem veszel észre semmit.
  • A horgonyok jó eséllyel nem működnek, csak az első előfordulásnál, de ha nincs ilyen feladat, ezt se veszed észre.
  • A JavaScript getElementById függvénye nem tudja azonosítani az elemet. Na ez az igazi gond, amiért ezt nem illik csinálni. Általában, mert az érettségin nincs JavaScript.
  • A javítás során az útmutató alapján nem lehet elfogadni a hibás megoldást. Ez csak az érettségin probléma, viszont csak akkor veszed észre, amikor késő.

Tipp: ha bizonytalan vagy, hogy melyiket kell használnod, akkor valószínűleg az osztályt. Azonosító helyett osztályt használni nem igazi hiba, amíg nem akarsz JavaScriptet használni vagy linkelni az adott elemre, és nem írja elő a feladat.

Ha egy azonosítóból csak egy lehet egy weboldalon, miért írunk hozzá formázást a stíluslapon, és miért nem használunk inkább szövegközi stílust? Egyrészt egy webhely sok összefüggő, együtt létrehozott weblapból áll, amelyekben lehetnek ismétlődő részek, így ugyanaz az azonosító minden oldalon előfordulhat egyszer. Másrészt ezekkel gyakran a weboldal funkcionális elemeit (menü, tartalomjegyzék, lábléc stb.) jelöljük. Ilyen esetben meglehetősen bonyolult formázás tartozhat hozzájuk, amit áttekinthetőbben tudunk a stíluslapon kifejteni és könnyebben módosítani. Végül pedig ezzel érjük el a tartalom és a forma szétválasztását.

Ez a cikk és alatta a hozzászólások amellett érvelnek, hogy az azonosítókat egyáltalán ne használjuk formázásra, csak az osztályokat, az azonosítókat pedig hagyjuk meg arra, ha horgonynak vagy más különleges célra kellenek.

Az osztályok és azonosítók elnevezésére a programozásból ismert névadási szokások vonatkoznak. Még egyszer emlékeztetőül: a kis- és nagybetűk itt különböznek, a class="Nev" nem ugyanaz, mint a class="nev". A kód olvashatóságát, megértését segíti, ha ezeket csak szükség esetén alkalmazzuk, vagyis amikor a formázás nem köthető egy elem (pl. címsortípus) összes előfordulásához.

Mit formázhatunk tehát? Az érettségin az egyszerű kijelölők négy alapvető fajtáját kell ismerned:

  1. Elemkijelölő (element selector). Néha típuskijelölőnek (type selector) is hívják. A HTML-elem (tag) nevét minden jelzés nélkül írjuk fel a sor elejére.
  2. Osztálykijelölő (class selector). Az osztály neve elé pontot írunk.
  3. Azonosítókijelölő (id selector). Az azonosító neve elé kettős keresztet (#) írunk.
  4. Csoportosító kijelölő (grouping selector). Több kijelölőt vesszővel elválasztva sorolunk fel; ezekre ugyanaz a meghatározásblokk lesz érvényes. Nagyon figyelj oda a vesszőre! Ha szóköz vagy más jel van közöttük, az egészen mást jelent (a lenti linkeken megtalálod, de nem érettségi anyag).

A következő példa a 2019. májusi emelt szintű érettségi Passzívházak feladatának letölthető mintamegoldásából származik. Először egy csoportosító kijelölőt látunk: a h1 és h2 elemek felsorolásával meghatározzuk a címsorok közös színét. Utána egy önálló elemkijelölő következik, amely csak a h2 címsorokhoz ad további jellemzőt (betűméretet). Ezután a tartalom nevű azonosítóhoz tartozó stílust látjuk a feladatban meghatározott jellemzőkkel (850 képpont szélesség, vízszintes középre igazítás auto margóértékkel, 10 pontos belső margó, balra igazított szöveg és fehér háttér). Végül a kep nevű osztály meghatározásblokkja áll (jobbra igazított doboz 1 pontos szegéllyel és 5 pontos bal oldali margóval – nem csak képhez használhatnánk!).

h1, h2 {
	color: #347235;
}

h2 {
	font-size: 17px;
}

#tartalom {
	width: 850px;
	margin: 0 auto 0 auto;
	padding: 0px 10px;
	text-align: left;
	background-color: #ffffff;
}

.kep {
	float: right;
	border: 1px solid;
	margin-left: 5px;
}

Még nem beszéltünk az azonosítóra való hivatkozásról, ami az id attribútummal történik. Például a tartalom azonosítót használó blokk a

<div id="tartalom">...</div>

kódba írható.

Az elem.osztály kijelölő (element.class selector). E cikk első verziójából kimaradt ez a kombináció, mert nem gondoltam volna a követelménybe tartozónak, de meglepetésemre a 2020. májusi érettségi Dobókocka feladatához segítségül kiadott félkész CSS-állományba és a mintamegoldásba is bekerült. Ezen a példán keresztül mutatom be a használatát. A kiadott „mankóban” ez állt (egységesítve a formázást):

p {

}

p.bev {

}

Ez azt jelenti, hogy az első zárójelbe írhatjuk a bekezdésekre vonatkozó formázásokat, a másodikba a bev osztályba tartozó bekezdések kiegészítő tulajdonságait. Ha jól használjuk, ennek két értelme van: egyrészt tisztább lesz a kódunk, átláthatóbbak a szándékaink, könnyebb a módosítás; másrészt szemantikailag kiemeljük, hogy a bev nem külön állatfaj, hanem a bekezdéseknek egy alfaja, de lényegét tekintve maga is bekezdés. Viszont a p elemen kívül hiába használjuk a bev osztályt, a formázások nem fognak érvényesülni, tehát ez szigorúan egy szűkítés. Nézzük a mintamegoldást a formázás javításával:

p {
	text-align:justify;
	padding: 5px;
}

p.bev {
	text-align: justify;
	font-style: italic;
	font-size:small;
	padding: 5px;
}

Ez a megoldás rendelkezik a második előnnyel (szemantikai funkció), de nem használja ki az elsőt (átláthatóság), hiszen megismétli a p formázásait. Figyeljük meg, hogy a text-align általában véve öröklődő tulajdonság, a padding pedig nem, de itt mind a kettő érvényes a p.bev kijelölésre. Az öröklődés ugyanis arra vonatkozik, amikor a dobozrendszerben egy tágabb (befoglaló) elemről kerülnek át tulajdonságok az alacsonyabb szintű dobozra, de itt nem erről van szó, hanem hogy a p elemre egy szűkítést alkalmaztunk. Átláthatóbb és könnyebben módosítható, ugyanakkor az eredetivel ekvivalens lenne tehát ez a megoldás:

p {
	text-align:justify;
	padding: 5px;
}

p.bev {
	font-style: italic;
	font-size:small;
}

Az ily módon definiált stílust a <p class="bev"> utáni szövegben használhatjuk. Figyeld meg a W3Schools próbaoldalán, hogy egy körülvevő div elemben hiába használnád az osztályt!

Tehát nem várták el, hogy fejből tudjál írni egy ilyen kijelölőt, de fel kellett ismerni és tudni, mire való. Ha nem használta valaki ezt a sémát, hanem másképp oldotta meg, az is elfogadható volt, de minden ilyen eset figyelmeztet, hogy erre is lehet számítani a továbbiakban, sőt akár más, most még nem említett kombinált kijelölők is bekerülhetnek. Mint mondtam, a követelmény sajnos nem igazít el, csak a már feladott példák.

Álosztályok (angolul pseudo-classes) és álelemek (pseudo-elements): ezekből csak négy tartozik az egyszerű weblapok követelményébe. Ezt a négyet majd a linkek formázásánál mutatom be.

Továbblépés: az eddig említetteken kívül az érettségi követelményt meghaladó kijelölők csodálatos gazdagsága vár rád.

Vissza a tartalomjegyzékhez

A CSS dobozmodellje

A dobozmodell a CSS alfája és ómegája. Ahhoz, hogy értsük, mi történik az elemeinkkel, és hogyan méretezi őket a CSS, tudnunk kell, hogy a CSS számára minden egyes elem egy külön kis doboz, a bodytól az egy betűt tartalmazó spanig. A doboz felépítését a kódban használandó angol megnevezésekkel az alábbi ábra mutatja. A képről kiderül, hogy a doboznak egyáltalán nem kell szimmetrikus felépítésűnek lennie.

A CSS dobozmodellje
Forrás: Wikimedia Commons, licenc: CC0

A doboz részei belülről kifelé haladva:

  • A legbelső, felirat nélküli téglalap a tartalom (content). Ide kerül a szövegünk, képünk, linkünk, vagy akár a komplett dokumentumunk. Szélességét és magasságát állíthatjuk.
  • A tartalmat körülvevő, világosabb színnel jelölt terület a belső margó (padding). A szegélyvonal és a tartalom távolságát szabályozza. A belső margónak egyetlen tulajdonságát tudjuk állítani, a méretét (de akár oldalanként eltérően is). Ha van szegélyvonal, és a doboz szöveget tartalmaz, akkor az olvashatóság érdekében célszerű beállítani.
  • Ezt követi a szegélyvonal (border). Színe, vastagsága és vonalstílusa van, a szövegszerkesztésből ismert módon.
  • Az ábra legkülső része a (külső) margó (margin). Szintén csak mérete van. Ha valahol jelző nélküli margót írnak, akkor az a külső margót jelenti.
  • Az ábrán nem látható a külső körvonal (outline). A külső körvonal ugyanúgy a szegélyvonalon kívül van, mint a margó, de teljesen más a szerepe. Van mérete, színe, stílusa, de nem tartozik hozzá távolság, azaz gond nélkül átfedésbe kerül a szomszéd elemekkel. Kizárólag díszítő funkciója van (kiszínezheted a szegélyvonal körüli részt); az érettségin valószínűtlen a felbukkanása. Mivel a margó távolságot határoz meg szín nélkül, a külső körvonal pedig színt és mintát távolságtartás nélkül, nem okoz gondot, hogy részben ugyanazt a képernyőterületet használhatják, de nem szabad összekeverni őket.

A fentiek demonstrálása, avagy doboz a dobozban. Ha rátolod az egeret a képre, vagy mobilon rátapizol, brutális változásokon megy át, amiért biztosan nem kapnám meg az év designere díjat, de segít megérteni a doboz részeinek szerepét. Az eredeti képet, mint a lenti kód mutatja, minden környezet nélkül illesztettem be, csak a tartalomterületre koncentrálva. Az én img elememnek tehát a tartalma a dobozmodell képe margóstul, feliratostul, mindenestül. Ezt egy figure elembe ágyaztam (ezt az érettségin nem kell tudni), hogy hozzá tudjam kapcsolni a képaláíráshoz, amit így lehet középre igazítani. A sortörések csak azért kellenek, hogy a cikkben kiférjen a szöveg. A figure elemhez hozzárendeltem egy changeonmouse osztályt. Ettől még nem történne semmi, de a CSS-ben ehhez az osztályhoz egy olyan stílust hoztam létre, ami akkor aktivizálja magát, ha a képre tolod az egeret. Ezt a varázslatot a :hover álosztály csinálja, amiről a linkeknél lesz szó. A technika nem része az érettségi követelménynek, csak a doboz bemutatásához használtam. Az egeret a képre tolva a következőket látod:

  • A doboz kapott egy fehér hátteret. Figyeld meg, hogy a háttér az egész dobozhoz van rendelve, nem valamelyik részéhez. Kiterjed a tartalomterületre, a belső margóra és a szegélyre is.
  • Lesz egy pontozott fekete szegélyvonala. Azért ilyen nagy pontokkal, hogy jól lássad közöttük a fehér hátteret, amit csak egy egyszeres folytonos szegélyvonal takarna el.
  • A körben 20 képpontos belső margó miatt az eredeti kép eltávolodik a szegélyvonaltól. Ha megjeleníted külön a képet, láthatod, milyen közel van a nyilak vége a képernyő széléhez eredetileg. De a doboz képe továbbra is jól elfér a dobozban, mert a megadott méret a tartalomterülethez tartozik. Tehát a belső margót nem a tartalom, hanem a külvilág rovására alakítottuk ki (a doboz meghízott).
  • Felül 100, alul 30 képpontos aszimmetrikus margót állítottam be. Ettől a kép láthatóan elmozdul, és lejjebb tolja a szöveget.
  • Nagyon széles, 70 képpontos türkizkék külső körvonalat kap a doboz. Felül ez nem tölti ki a 100 pontos margót, alul viszont nagyobb a 30 pontosnál, ezért azon túlnyúlva eltakarja a szöveg egy részét, és balra is teljes terjedelmében kilóg az egész cikk számára kijelölt dobozból. Így látható, hogyan küzd meg a margó és a körvonal a doboz körüli területért.

Ez pedig a kód, amivel csináltam. (A képméret megadása azért jó, mert így rögtön kialakítja a böngésző a helyét, és nem fog elugrani a szöveg, amikor a betöltés befejeződik. A linket nem forrásként látod, így kifér, most nem ez a lényeg.)

HTML:

<figure class="changeonmouse" style="width: 541px;">
<img src="images/boxmodell-detail.svg"
	width="541" height="439"
	alt="A CSS dobozmodellje"
	title="Dobozmodell. Forrás: Wikimedia Commons">
<figcaption>
	Forrás: Wikimedia Commons, licenc: CC0
</figcaption>
</figure>

CSS:

figcaption {
	text-align: center;
	font-size: 10px;
	font-style: italic;
}

/* Demó a CSS-cikk dobozmagyarázatához */
.changeonmouse:hover {
	background-color: white;
	border: 5px dotted black;
	padding: 20px;
	margin-top: 100px;
	margin-bottom: 30px;
	outline: cyan solid 70px;
}

A doboz méretének kiszámítása. Az ábra mutatja, hogy a megadott szélesség és magasság a tartalomra vonatkozik. Az Internet Explorer régebbi verziói másképp értelmezték, de ezzel ma már nem kell törődnünk. A doboz teljes méretét tehát vízszintesen és függőlegesen is a tartalomhoz megadott méret, a két belső margó, a két szegélyvastagság és a két margó összege adja. A külső körvonal nem számít bele. A szövegközi elemeknél a CSS a sor magasságánál alapértelmezés szerint csak a tartalmat veszi figyelembe, tehát a belső margó és a háttérszín (vagy -kép) együttes megadásával egymásra lógó, olvashatatlan sorokat érhetünk el.

Azonban ha a rendelkezésre álló hely korlátozott, és nem adjuk meg a tartalommező szélességét és hosszúságát (hamarosan szó lesz róla, hogy tehetjük ezt meg), akkor a böngésző a margó, a szegélyvonal és a belső margó számára szükséges helyet levonva határozza meg a tartalom számára megmaradó helyet.

Ha minden méretet megadunk, és ezeknek a mondott képlettel számított összege nagyobb a rendelkezésre álló helynél, akkor a dobozunk nem fog kiférni. Ezzel a módszerrel szintén olvashatatlan dokumentumokat lehet előállítani. Ez általában nem cél.

Az érettségin asztali géppel dolgozol, és megmondják a méreteket, amivel a monitorra ki fog férni a dokumentum. Én is arra számítok, hogy a vizsgára készülve monitoron olvasod a cikket, ahol kísérletezni is tudsz, mert ez a honlap akkor készült, amikor még nem volt divat mobilon netezni. Bocs. Ha vizsgán kívül készítesz weblapot, és nálam rendesebb akarsz lenni, gondolj a méretezéssel a mobilosokra is.

Továbblépés:

Vissza a tartalomjegyzékhez

A CSS színkódolása

A dobozmodell alapján nincs többé külön betűszín, ilyen szín, olyan szín. A doboz részei közül négyet színezhetünk: a tartalmat (sokszor előtér néven említik), a hátteret, a szegélyt és – bár ezt ritkán tesszük – a külső körvonalat. Tehát a betűszínnek nincs külön előtagja (pl. font-), hanem egyszerűen csak color.

A színekkel sokféleképp dolgozhatunk. A két legfontosabbat részletezem, a többi nem tartozik az érettségi követelménybe. Mielőtt továbbolvasnál, frissítsd fel az informatikaórán tanultakat az RGB-színkódolásról és a tizenhatos számrendszerről!

Név szerint: A CSS 140 színnevet definiál, amelyek között megtalálod az angolórán tanult egyszerű színeket is és egy csomó fantázianevet. A színek listáját itt találod. A felsorolt színekre bátran hivatkozhatsz név szerint is, nem kell az RGB-kódjukat megjegyezned.

RGB-kód: Az RGB-kód megadásakor négyféle szintaxis közül választhatunk.

  • Az rgb() függvénnyel decimálisan adhatjuk meg a komponenseket, például egy lila színt az rgb(255, 0, 255) kóddal. A CSS dokumentációjában ezt hívják RGB-kódnak.
  • Ugyanez a függvény százalékosan is érti a komponenseket. Egy világosszürke színt megadhatunk így is: rgb(80%, 80%, 80%). (A százalékjel tapad az előtte álló számhoz, ahogy a magyar helyesírás szerint is.)
  • A hexadecimálisan megadott kódot a HTML-ben megismert módon a # jellel vezetjük be. Az iménti lila #ff00ff alakot ölt. Habár mi tudjuk, hogy ez is RGB-kód, és az érettségi vizsgán így is kell hívni, de a CSS irodalmában ezt HEX-értéknek nevezik.
  • Elég gyakran használunk olyan színeket, amelyekben a komponenseket két egyforma számjegy jelöli. Ilyenkor „megfelezhetjük” őket, vagyis ezt a lilát írhatjuk így is: #f0f. Tehát az #f0f és az #ff00ff ugyanaz. Amelyik színkód nem ilyen „dupla” számjegyekből áll, azt nem tudjuk így rövidíteni.

További lehetőségek: A CSS ismeri a HSL-színkódolást is. Az RGB és a HSL is kiegészíthető egy negyedik komponenssel, amely az alfa csatorna nevet viseli, és hétköznapi nyelvre fordítva az átlátszóságot (opacitást) szabályozza. Az ily módon kiegészített kódolások neve RGBA, illetve HSLA, ezekhez is tartozik függvény. Szerintem ez a tudás nem része az érettségi követelményben említett egyszerű weblapoknak. A lenti linkeken tudsz utánaolvasni.

Web-safe colors. Ezzel a kifejezéssel (a weben biztonságosan használható színek, erőltetett fordítással webtűrő színek) gyakran találkozhatsz az interneten. A régi időkből maradt itt ez a 216 színből álló gyűjtemény, amikor még gyengébb testalkatú monitorokat használtunk. Ezekhez „felezhető”, három számjeggyel rövidíthető RGB-kód tartozik. Ma már nincs jelentőségük, az RGB-kódokkal kifejezhető mind a 16 millió (256³) színt bátran használhatod. Ha nem is mindegyik jelenik meg pont egyformán minden kijelzőn, de nagyon hasonlóan. Bővebben erről:

Az érettségin valószínűleg kész RGB-kódot fogsz kapni, csak alkalmazni kell.

További információk a színmegadási módokról:

Vissza a tartalomjegyzékhez

Méretezés

Méretezhetjük a betűket, a vonalakat, a margókat, a dobozok szélességét és magasságát, és még egy sor tulajdonságot. Figyelj nagyon, hogy a következőkben a mértékegységek a magyar helyesírástól eltérően mindig szóköz nélkül tapadnak a mérőszámhoz, a tizedes törteket pedig ponttal írjuk! A másik, amire érdemes figyelni, a feladat szövegezése, hogy a megfelelő mértékegységet használd.

Néhány fontosabb méretezési mód, mértékegység:

  • Képpont, pixel (px). Ha képernyőre dolgozunk, ez a két legfontosabb mértékegység egyike. Példa 5 képpont széles belső margóra: padding: 5px;
  • Hüvelyk (in), centiméter (cm), milliméter (mm). Ezek papíron megállják a helyüket, de a képernyőre való leképezésük bizonytalan, ezért jobb elkerülni őket, hacsak a feladat nem kéri kifejezetten (nyomtatóhoz való stíluslapot biztosan nem fognak kérni). Példa 1 hüvelykes bal margóra: margin-left: 1in;
  • Nyomdai pont (pt). Jól ismered a szövegszerkesztésből, ott ebben adják meg a betűméretet. Definíció szerint a hüvelyk 1/72 része, tehát értelemszerűen ugyanaz vonatkozik rá, mint az előzőekre.
  • Százalék (%). Az adott helyen érvényes öröklött beállításhoz képest méretezhetünk vele. Példa 20%-kal nagyobb betűkre: font-size: 120%;
  • Em-magasság (em). Ez a másik alapvető mértékegység, amivel más környezetben valószínűleg még nem találkoztál. A nagy M betű magasságát jelenti. Ebből következik, hogy nem abszolút, hanem a betűtípustól függ. A font-size: 12px; azt jelenti, hogy az M betű legyen 12 képpont magas. A font-size: 1.2em; nyilván nem értelmezhető úgy, hogy az M betű 20%-kal magasabb legyen önmagánál, ezért ez relatív érték, ekvivalens az előbb látott font-size: 120%; meghatározással. A betűméret öröklődik, ezért ha a body elem leírásánál megadtad a méretet, és azóta nem, akkor itt annak a 120%-a lesz. Ha sormagasságot állítasz vele, akkor viszont már a betűtípushoz képest adhatod meg. (Vigyázz, mert ha valaki azt mondja, hogy ez így igazából nem is mértékegység, akkor igaza lesz!)
  • Egyes tulajdonságok saját méretértékeket is elfogadnak, amelyek nem illeszkednek ebbe a rendszerbe. A betűméretnél, a szegélyvastagságnál és a margónál is fogok példát mutatni.

Bizonyos esetekben, pl. a margónál negatív értékeket is megadhatunk, de ezekkel érdemes óvatosan bánni. Bármelyik mértékegység elhagyható, ha a mérőszám nulla (0px helyett nyugodtan írd, hogy 0). A 0 méret helyett olykor kifejezőbb a none használata, például a border: none; azt fejezi ki, hogy nincs szegély, ne foglalkozzunk semmilyen jellemzőjével.

Példa:

/* Határozzuk meg a <p> elemhez tartozó betűtípust és sormagasságot! */
p {
	/* A betűtípus Times New Roman, de ha nincs a gépen,
	   akkor valamilyen talpas. */
	font-family: "Times New Roman", serif;
	font-size: 14px;
	/* A sorok magassága legyen másfélszerese a Times New Roman
	   betűkészlet 14 pixeles M betűjének a magasságának.
	   A többlet feleződik a sor alja és teteje között. */
	line-height: 1.5em;
}

A „10 pont” mennyiség a webszerkesztésben nem egyértelmű. Ha ilyet látsz, próbáld a szövegkörnyezet alapján kitalálni, hogy képpontra vagy nyomdai pontra gondolt a költő, de még jobb, ha visszakérdezel.

Továbblépés:

Vissza a tartalomjegyzékhez

Részletes tudnivalók

Az eddigiekben megismerkedtünk a CSS általános jellemzőivel, most végre elmerülhetünk a részletekben. Ha kell, lapozz vissza a Hogy néz ki egy stílus? szakaszhoz, és ismételd át, mit jelent a meghatározás, tulajdonság, érték.

Jelölés: a függőleges vonallal elválasztott értékek azt jelentik, hogy ezek közül választhatunk. Természetesen nem sorolom fel az összeset, csak amit az érettségi követelménybe tartozónak gondolok. A <csúcsos zárójelek> közé zárt mennyiségek helyett valamilyen konkrét értéket (pl. színt, hosszúságot) írhatunk, a jelölés nélkülieket betű szerint bemásolva használjuk. Így fog kinézni:

tulajdonság: <egyik mennyiség> | <másik mennyiség> | harmadik_lehetőség

A legtöbb tulajdonságnak van egy alapértéke is, amit akkor vesz fel, ha nem adunk meg semmit kifejezetten. Ezeket nem kell bemagolni, általában elég intuitívak. Ahol az érettségi feladat nem fogalmaz meg elvárást, ott nem kell semmit megadni, az alapérték éppen megteszi.

A vizsgán valamilyen szerkesztőprogrammal (pl. KompoZer) alakíthatod a stílust, ezért nem kell tudni fejből beírni a tulajdonságok nevét, csak érteni kell a működésüket, és szükség esetén belejavítani. Vissza a tartalomjegyzékhez


A tartalomterület méretezése

Először tekintsük át a doboz részeinek formázását, kezdve a tartalomterülettel. Ahogy láttuk, alapértelmezés szerint a megadott szélesség és magasság ezt a belső részt méretezi (lehet másképp is, de azt nem kell tudni). A legjobb azonban, ha egyáltalán nem adunk meg méretet, hanem a böngészőre bízzuk, így lesz a legrugalmasabb a weblapunk. Sokkal inkább akarjuk méretezni a szegélyt és a belső margót, de még a margót is gyakrabban, mint a tartalmat. Persze van, amikor szükséges, és lehet, hogy az érettségin ezt kéri majd a feladat. Ha mégis méretezni akarunk, sokszor csak a szélességet adjuk meg, és a magasságot majd kialakítja a böngésző a tartalom alapján. Nem kötelező együtt megadni őket. Gyakorlati példát a képekről szóló szakaszban mutatok, hogy mikor hasznos.

Szélesség:

width: <hosszérték> | <százalékos érték> | auto;

Magasság:

height: <hosszérték> | <százalékos érték> | auto;

Például:

width: 30%;
height: 200px;

(A százalékos érték az irodalomban gyakran „százalékérték” néven fordul elő. Persze ha te is jártál általános iskolába, akkor tudod, hogy ez valójában százalékláb; az értéket nem is tudjuk előre, a böngésző a megjelenítéskor számolja ki. De valamiért ez az elnevezés terjedt el, kifejezve, hogy ennek a CSS-tulajdonságnak ez az értéke. Én nem akarok közreműködni a fogalomzavar terjesztésében, ezért adtam neki egy hasonló nevet.)

Az alapérték az auto, amit éppen ezért nem is szoktunk kiírni. Azt jelenti, hogy a méretet a böngésző számolja ki a legjobb tudása szerint. A magasságot úgy határozza meg, hogy az elem teljes tartalma látható legyen. (Lejjebb a képekről szóló szakaszban látsz egy dobozos szöveget, aminek csak a szélességét adtam meg, a magasságot a böngésző kalkulálja, de sokkal egyszerűbb példa a szövegünk bármelyik bekezdése.)

Szélességet és magasságot a blokkszintű elemeken kívül a képekhez is megadhatunk. A tananyagba tartozó többi szövegközi elemnél fölösleges, mert a böngésző figyelmen kívül hagyja.

Továbblépés:

Vissza a tartalomjegyzékhez

A háttér és az egyszerűsített írásmód

Minden dokumentumban érdemes legalább egyszer foglalkozni a háttérrel, különben a böngésző fogja eldönteni helyettünk, milyen színű legyen a weboldalunk. Ezt jellemzően a body elemhez kötjük, de a dobozmodell szerint az oldalunk bármelyik részéhez rendelhetünk saját hátteret; a span elem segítségével akár egy szót is kiemelhetünk saját háttérszínnel. Ahogy fent már láttuk, alapértelmezés szerint a háttér a tartalomtól a belső margón át a szegélyvonal külső széléig érvényesül.

A háttér nem egy tulajdonság a CSS-ben, hanem több. Külön állíthatjuk a színt és a képet. A képnek járulékos tulajdonságait is beállíthatjuk, amelyek közül az ismétlődést vizsgáljuk meg. Végül megismerkedünk a CSS egyszerűsített írásmódjával, amivel sokszor fogsz még találkozni.

A háttérszín alapértelmezése az átlátszó. Ez azt jelenti, hogy ha a body háttérszínét vagy -képét beállítod, és a dokumentum szerkezetében alatta levő elemek (bekezdések, linkek, táblázatok stb.) hátterével nem foglalkozol, akkor a body háttere fog látszani. Habár a dokumentációban azt találod, hogy ez a tulajdonság nem öröklődik, mint a betűtípus és az előtérszín, a hatás mégis ugyanaz.

A háttérkép eltakarja a háttérszínt, ha elég nagy hozzá, vagy ha kicsi, de ismétlődik, és persze ha sikerül betölteni. De ha a kép nem tölti be a képernyőt, akkor a háttérszínnel együtt fog érvényesülni.

Ne felejtsd el, hogy ha a háttér egy kép, arra az érettségin ugyanaz a szabály vonatkozik, mint a többi képre! Másold a beadandó munkakönyvtáradba vagy annak egy alkönyvtárába, és hivatkozz rá relatívan, különben nem fogják elfogadni.

A színek megadási módjait fent részleteztük. Ezek közül bármelyiket használhatod. A transparent az átlátszó hátteret jelenti.

background-color: <szín> | transparent;

A háttérképhez az url függvényt használhatjuk a fájlnévvel, például:

background-image: url('háttér.jpg');

A kép, ha kicsi, ismétlődhet mind a két dimenzióban, csak az x vagy az y tengely mentén vagy egyáltalán nem. Az alapérték a kétirányú ismétlődés:

background-repeat: repeat | repeat-x | repeat-y | no-repeat;

Na most jön az a rész, amikor lusták vagyunk kiírni mind a hármat, vagy éppen egy rövidebb, átláthatóbb kódot szeretnénk. Ilyenkor egyszerűsített írásmódot alkalmazhatunk, amit gyorsírásnak is neveznek. (Angol neve shorthand property, azaz gyorsírásos tulajdonság.) Figyeld meg, hogy az egyszerűsített írásmódnál az értékeket mindig szóköz választja el, nincs közöttük vessző:

background: <háttérszín> <háttérkép> <ismétlődés>;

Például:

background: #eee url('háttér.jpg') no-repeat;

Ilyenkor tűnhet úgy, hogy egy tulajdonságnak több értéke is van. De nem ez a helyzet, mert background nem egy közvetlenül állítható tulajdonság, hanem egy rövidítés. Az ilyen egyszerűsített írásmódot nagyon gyakran alkalmazzuk (naná, az informatikában a lustaság és az átlátható kód is erény, miért ne tennénk?). Nem muszáj mindegyik jellemzőt felsorolni, csak amelyiknél el akarunk térni az alapértelmezéstől. Ugyanígy helyesek ezek is:

background: #eee url('háttér.jpg');
background: #eee;
background: url('háttér.jpg');

Van egy buktató, ami az összes többi hasonló egyszerűsítésnél is ugyanígy érvényes lesz, ezért elég, ha egyszer mutatom be itt az első alkalommal. Tegyük fel, hogy szeretnél egy világosszürke háttérszínt, ami előtt a kisebb háttérkép csak függőlegesen ismétlődik. Azt hiszed, hogy a kép által nem takart részek szürkék lesznek:

body {
	background-color: #eee;
	background: url('háttér.jpg') repeat-y;
}

Amikor kipróbálod, meglepetten látod, hogy a kilógó részek fehérek. Mi történt? Először szürkére állítottad a háttérszínt. Aztán az egyszerűsített háttérmegadásnál kihagytad, tehát megkapta az alapértelmezést, ami az átlátszó. Ez a meghatározás nem tudja figyelembe venni, hogy a szín korábban meg volt adva, csak a saját hatókörében tudja értelmezni az értékeket. A „mindig az utolsó parancs érvényes” elv alapján (lásd fent) az átlátszó győz. Mivel most az egész dokumentumban nincs megadva háttérszín, a böngésző saját stílusa érvényesül, ami a mai böngészőknél általában fehér (amikor az első weblapomat csináltam az előző évezredben, akkor még a szürke volt szokásban). Hogy tudod mégis elérni, amit szeretnél, és kijavítani a kódot? Háromféleképp:

  1. Ne használj vegyes módszert! Vedd bele a háttérszínt is a background rövidítésbe!
  2. Ne használj vegyes módszert! Írd ki mind a három tulajdonságot külön!
  3. A vegyes módszer is működik, ha felcseréled a két sort.

Általában az első a legegyszerűbb, de nem mindig használható. Például nem jó, ha a doboz egyik oldalán más szegélyszínt, margót, belső margót akarsz megadni, mint a többin. Szerencsére ilyenkor is marad két nagyszerű módszered a megoldásra.

Soha ne adj meg egy egyszerűsített írásmódú, rövidítő tulajdonságot egy résztulajdonság után!

Ez tehát a korábban említett kivételek egyike, amikor a meghatározások sorrendje a blokkon belül nem közömbös.

Továbblépés:

Vissza a tartalomjegyzékhez

Margók

A margóknak csak szélességük van, más tulajdonsággal nem rendelkeznek. A szélesség alapértéke 0. A külső margókkal a következő műveleteket végezhetjük:

  • Egyszerűen megadhatjuk a négy egyforma margót a margin kulcsszóval.
  • Megadhatjuk külön-külön a négy oldali margót.
  • Megadhatjuk külön-külön, de egy sorban a margókat rövidített írásmóddal.
  • A bal és jobb oldali margó auto értékre állításával középre igazíthatjuk a dobozunkat.

Mielőtt továbbolvasnál, lapozz vissza a doboz képéhez, és keresd meg rajta a négy oldali margó angol nevét!

A szomszédos (egymás alatti) blokkszintű elemek esetén az alsó és felső margók alapértelmezés szerint összevonódnak a nagyobbik értékre. Tehát ha a h1 alsó margója 30px, a h2 felső margója 20px, és ebben a sorrendben egymás után használjuk őket, akkor nem 50, hanem 30 pixel köztes margójuk lesz.

Az auto azt jelenti, hogy a böngészőre bízzuk a margó kiszámítását. Ha a bal és a jobb oldali margót is auto értékre állítottuk, akkor a dobozunk vízszintesen a rendelkezésére álló hely közepére kerül. Nem a doboz tartalmát (pl. szöveget), hanem magának a doboznak az elhelyezését igazítottuk középre! Függőleges igazítást ily módon nem tudunk elérni.

A százalékos érték a szülőelem (közvetlen környezet) dobozához képest relatív méretezést jelent. A hosszúságot a fent részletezett módokon adhatjuk meg. A negatív margókkal nem foglalkozunk, az érettségin nem kell számítani rájuk.

Egyszerű margó, mind a négy oldalon egyforma értékkel:

margin: <hosszérték> | <százalékos érték> | auto;

Például:

margin: 20px;
margin: 5%;

Bal margó:

margin-left: <hosszérték> | <százalékos érték> | auto;

Vagyis ugyanaz a szintaxisa, mint az egyszerűsített margónak. Például:

margin-left: 5px;

A többi oldalt (margin-right, margin-top, margin-bottom) ugyanígy adhatjuk meg egyenként.

Az egyszerűsített írásnál 1, 2, 3 vagy 4 értéket adhatunk meg a margin gyűjtőtulajdonsághoz. Ezeket elég nehéznek tűnik fejben tartani, de az érettségin elég, ha a szerkesztőprogram tudja, neked csak érteni kell.

4 értékkel, felülről az óramutató járása szerint:

margin: <felső> <jobb> <alsó> <bal>;

Példák:

margin: 10px auto 5 px auto; /* Fent 10, alul 5 pixel, vízsz. középre igazítva */
margin: 20px 20px 20px 5px; /* Balra 5 pixel, a többi 20 */

Ez utóbbit így is írhattuk volna a fenti sorok kombinálásával (ebben a sorrendben!):

margin: 20px;
margin-left: 5px;

Bár mind a kettő működik, az első az ajánlott megoldás, mert tiszta és egyértelmű kóddal fejezi ki a szándékainkat. A másodikat nehezebb olvasni, értelmezni kell, hogy mi lesz a végeredmény, és törni a fejünket, hogy vajon mit is akart elérni a szerző, amiért ilyen megoldást alkalmazott.

3 értékkel: ilyenkor a bal és a jobb margó egyenlő lesz.

margin: <felső> <jobb és bal> <alsó>;

Példa:

margin: 30px 50px 20px; /* Felül 30, alul 20, kétoldalt 50 képpont */

2 értékkel:

margin: <felső és alsó> <jobb és bal>;

Példa:

margin: 30px 50px; /* Felül és alul 30, kétoldalt 50 képpont */

1 értékkel: mind a négy margó egyenlő. Ezzel kezdtük.

Továbblépés:

Vissza a tartalomjegyzékhez

Belső margó

A dobozmodell ábrája mutatja az elnevezéseket. A padding, padding-top, padding-right, padding-bottom, padding-left kulcsszavakkal ugyanúgy adhatjuk meg részletesen kiírva vagy rövidítve a méreteket, mint a margónál, két különbséggel:

  • Nem írhatunk negatív hosszértéket vagy százalékot.
  • Nem használhatjuk az auto kulcsszót, nincs automatikus igazítás.

A belső margó alapértéke minden oldalon 0.

Továbblépés:

Vissza a tartalomjegyzékhez

Szegélyek

A szegélyvonalakhoz a szövegszerkesztőkből ismert módon vonalvastagságot, stílust és színt rendelhetünk, mégpedig akár oldalanként különbözőt is, ezért összesen 12 tulajdonság határozza meg egy doboz szegélyét. Hogy ne legyen egyszerű az életünk (vagy hogy egyszerű legyen – ki hogy érzi), ezeket két dimenzióban is tudjuk rövidíteni. Lehet három rövidített meghatározásunk a stílusra, színre, vastagságra (utolsó oszlop). Másrészt írhatunk négy rövidített tulajdonságot a négy oldalra (alsó sor). Végül pedig egyszerre mindkét irányban rövidítve felírhatjuk az egész szegélyt a border egyszerűsített tulajdonsághoz. A résztulajdonságok és rövidítések nevét a táblázat mutatja. Ez is olyasmi, amit az érettségin elég a használt szerkesztőprogramnak fejben tartania, de a működését érteni kell.

TulajdonságFelsőJobbAlsóBalRövidítés
Vonalvastagságborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-width
Vonalstílusborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-style
Vonalszínborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder-color
Rövidítésborder-topborder-rightborder-bottomborder-leftborder

A három fő tulajdonságot abban a sorrendben mutatom be, ahogy az egyszerűsített alakban egymás után következnek.

A vonalvastagság. Megadhatjuk a fentebb leírt méretezési módokon, de a gyakorlatban csak a px mértékegységet használjuk. Általában megteszi az 1-2 pixel, ha nem akarjuk agyonnyomni az oldalunkat a szegélyekkel. Van viszont három előre definiált egyedi érték, amit hosszérték helyett használhatunk: a thin (vékony), medium (közepes) és a thick (vastag). Ezeknek a pontos jelentését a böngésző határozza meg. A vastagság alapértéke a medium.

border-top-width: <hosszérték> | thin | medium | thick
border-width: <hosszérték> | thin | medium | thick

A vonalstílus a legfontosabb, az egyetlen kötelező tulajdonság. Az alapértéke none, azaz nincs. Ez azt jelenti, hogy ha a stílust nem adjuk meg, akkor a vastagság meg a szín a feje tetejére is állhat, akkor se lesz szegély. Ha viszont megadtunk egy none-tól különböző stílust, és a vastagság nincs kifejezetten 0-ra állítva, akkor lesz szegély, még ha a másik kettő a kisujját se mozdítja. (Pontosabban van egy none-hoz hasonló érték, a hidden, ami szintén megakadályozza a megjelenést, de az érettségin biztosan nem lesz dolgod vele.)

A stílusnak sokféle értéke lehet. Kiválasztottam néhányat, ami szerintem elegendő az egyszerű weblapokhoz: a solid (folytonos), double (dupla), dotted (pontozott), dashed (szaggatott).

border-top-style: none | solid | double | dotted | dashed
border-style: none | solid | double | dotted | dashed

A vonalszínnek furcsa alapértéke van: az adott dobozban érvényes előtérszín (color). Az viszont egy öröklődő tulajdonság, amit ha nem adtál meg, akkor jön a körülvevő elemből (egyéb megadás híján a bodyból); de ha ott sincs, akkor a böngésző kitalál valamit neked, valószínűleg feketét. Tehát a következő megoldás:

.zkeretes {
	color: green;
	border: 1px dotted;
}

a <div class="zkeretes">Lorem ipsum</div> zöld betűs szöveg körül zöld pontozott szegélyvonalat fog eredményezni. A színeket a korábban leírt módon adhatjuk meg.

Példák:

border: 1px solid black; /* A legkommerszebb, 1 pixeles fekete körbe. */
border: 2px orange; /* Nincs szegély, mert nem adtunk meg stílust. */
border-left-style: solid; /* Baloldalt közepesen vastag az előtér színével. */
border-style: double none; /* Alul-felül közepes dupla az előtér színével. */
border-style: double none; border: 2px; /* Nincs szegély, megfejtés a háttérnél. */
border-bottom: thick dashed red; /* Alul vastag szaggatott piros vonal. */

Az utolsó példa azt mutatja, hogy a táblázat alsó sorában látható rövidítésekhez ugyanúgy adhatjuk meg a három tulajdonság értékeit, mint a legrövidebb border alakhoz.

border-top: <vonalvastagság> <vonalstílus> <vonalszín>
border: <vonalvastagság> <vonalstílus> <vonalszín>

Itt is csak az alapértelmezéstől eltérő értéket kell kiírni.

Az utolsó oszlopban egy-egy tulajdonsághoz tartozó rövidítések vannak. Ezekhez 1, 2, 3 vagy 4 értéket adhatunk meg pontosan azon a módon, ahogy a margónál részleteztem. Például a

border-style: dotted double;
border-color: red #040 blue;

kód eredménye alul és felül pontozott, jobbra-balra dupla, felül piros, jobbra-balra sötétzöld, alul kék, mindenhol medium vastagságú szegélyvonal.

Ha a szegélyezett részben szöveg van, célszerű az olvashatóság érdekében belső margót is állítani. Nézzük meg, mennyivel olvashatóbb az előző példa így:

border: 1px solid black; padding: 5px;

Továbblépés:

Ezzel végeztünk is a doboz részeinek formázásával, lássuk a tartalmát! Vissza a tartalomjegyzékhez


Karakterformázás

Mielőtt továbbmennél, ismételd át a szövegszerkesztésből tanultakat a betűtípusokról és a karakterformázásról! Az emelt érettségin a webszerkesztés az összevont dokumentumkészítés (szövegszerkesztés, prezentáció, grafika, weblapkészítés) témakörébe tartozik. Felbukkanására számítani kell egy szövegszerkesztési feladat kiegészítőjeként vagy helyette, önállóan is. Ezért csont nélkül előfordulhat, hogy a betűkkel kapcsolatos ismereteket ebben a feladatban kérik számon, és olyan kifejezések fognak röpködni a feladatsorban, mint talpas/talp nélküli betűk, állandó szélességű betűk, kiskapitális. Még ha azt mondják, hogy választhatsz a HTML és a CSS között a formázásnál, akkor is ezen a területen lesz a legkevesebb választási lehetőséged.

Mit ne csinálj?

  • Határozottan ne használd a HTML font elemét a betűtípus, betűméret, betűszín beállítására! Sem a böngésző, sem a javítási útmutató nem köteles elfogadni 2020-ban vagy később. Ezeket a formázásokat stílussal oldhatod meg.
  • Ha a feladat dőlt betűt kér, ne használd az em taget, és ha félkövéret kér, ne használd a strongot. Ezeknek a szokásos megjelenése dőlt és félkövér, de a definíciója nem. Nem biztos, hogy a javítás során elfogadható. Az irodalom ezeket ajánlja kiemelésre (már beszéltünk a szemantikus HTML-ről, ahol az elemek a szándékot fejezik ki), de ha a feladat nem kiemelést kér, hanem kifejezetten dőlt vagy félkövér betűt, akkor vagy a kevésbé ajánlott i és b tagekkel, vagy CSS-sel valósíthatod ezt meg. Ha azt akarják, hogy az em taggel emelj ki valamit, akkor úgy lesz megfogalmazva a feladat (pl. el tudok képzelni olyan fogalmazást, hogy a szokásosan dőlt megjelenést biztosító elem).

Az itt leírt tulajdonságok többsége öröklődik. Ez azt jelenti, hogy a body elemhez beállított betűtípus, -méret, -szín stb. az egész dokumentumodban érvényesülni fog, amíg egy elemben kifejezetten felül nem írod.

Betűtípus. A font-family tulajdonsággal adhatjuk meg. Nagy az internet, és nem tudjuk, kinek milyen betűkészlet van a gépén, ezért megadhatunk többet is felsorolva, és ha az elsőt nem találja a böngésző, akkor veszi a másodikat, és így tovább. Az utolsó egy általános fontcsalád. Az érettségin előfordul, hogy egyetlen konkrét betűtípust írnak elő, olyankor csak azt írd be. Amelyiknek szóköz van a nevében, azt idézőjelbe tesszük.

Példa talp nélküli betűkre:

font-family: Arial, Helvetica, sans-serif;

Példa talpas betűkre:

font-family: "Times New Roman", Times, serif;

Példa állandó szélességű betűkre:

font-family: "Courier New", Courier, monospace;

További szokásos kombinációkat itt találsz.

Betűméret. A font-size tulajdonsággal kétféleképp adhatjuk meg.

font-size: <méret>;

A méretezési lehetőségeket korábban megnéztük.

font-size: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger;

Ez a kulcsszavas méretezés a nagyon picitől a nagyon nagyig halad, a két utolsó pedig a „kisebb” és a „nagyobb”.

Betűszín. A betűszín az előtér (tartalom) színe.

color: <színmegadás>;

A színmegadási módokat részletesen körüljártuk.

Félkövér, dőlt és kiskapitális betűk. Mindegyiknél a normal az alapérték.

font-weight: normal | bold; /* bold = félkövér */
font-style: normal | italic; /* italic = dőlt */
font-variant: normal | small-caps; /* small-caps = kiskapitális */

A következő lehetőségeket már valószínűtlennek tartom az érettségin, de érdemes megismerni őket:

Indexek. Alsó és felső indexeket a vertical-align tulajdonsággal érhetünk el:

vertical-align: sub | super;

Ez azonban nem a szövegszerkesztésben megszokott index (pl. hatványkitevő), mert külön kell beállítani a kisebb betűméretet. Szerintem egyszerűbb HTML-ben indexeket írni, ha van választási lehetőség. A vertical-align tulajdonsággal még fogunk találkozni a táblázatokról szóló szakaszban a függőleges igazítás kapcsán.

Aláhúzás, áthúzás

text-decoration: none | underline | line-through | overline;

Ebben a sorrendben: nincs (alapérték), aláhúzott, áthúzott, föléhúzott. A none értéket más tulajdonságoknál ritkán szoktuk használni, de itt különös jelentősége van a linkeknél, amelyek általában aláhúzottan jelennek meg. A text-decoration: none; meghatározás eltünteti az aláhúzásukat. Az aláhúzás mint kiemelési eszköz az írógépes korszak maradványa, ma már kerülendőnek számít, és ez különösen igaz a weben, ahol megtévesztő benyomás tehet az olvasóra, mivel hagyományosan a linkeket jelölik aláhúzással. (Erről további tudnivalókat találsz a linkekről szóló szakaszban.)

Kis- és nagybetűs átalakítás. Érdekes módon ez teljesen elkülönül a kiskapitálistól, másik tulajdonság valósítja meg. Ahogy a szövegszerkesztőben is, csak a betűk megjelenése változik! Pl. az ily módon csupa nagybetűvel megjelenő szöveg másolás és beillesztés után egy másik ablakban az eredeti formájában látszik, ahogy begépeltük.

text-transform: none | lowercase | uppercase | capitalize;

Ebben a sorrendben: nincs változás (alapérték), csupa kisbetű, csupa nagybetű (főcímeknél gyakori), minden szó első betűje nagy (angol címszerű írás). Az utóbbit ne keverd össze a kiskapitálissal!

Ritkítás és sűrítés. A letter-spacing tulajdonság a betűk, a word-spacing a szavak közötti távolságot állítja. A betűk ritkítását elsősorban címsorokhoz ajánlják. Pl. letter-spacing: 2px;. A negatív távolság sűrítést jelent.

Rövidített írás. A szegélyhez és a margóhoz hasonlóan a betűformázást is leírhatod egy összevont font tulajdonsággal. Ennek a szintaxisát itt találod.

Továbblépés:

Vissza a tartalomjegyzékhez

Bekezdésformázás

Bekezdésformázásról a weblapkészítésben nem szoktak beszélni, hiszen itt a doboz és a szöveg az alapfogalom. Azért adtam ezt a címet a szakasznak, hogy kapcsolni tudjad a szövegszerkesztésből tanultakhoz. Tehát azokat a formázásokat fogjuk áttekinteni, amelyek a szövegszerkesztőben a bekezdésformázáshoz tartoznak.

Vízszintes igazítás. A text-align tulajdonsággal adhatjuk meg. A balra/középre/jobbra igazítás és sorkizárás rendre:

text-align: left | center | right | justify;

(A függőleges igazítás a szövegszerkesztésben sem tartozna ide. A képek és a táblázatok kapcsán lesz szó róla.)

Sorköz. Sorközt abban az értelemben, ahogy a szövegszerkesztőkben, nem tudunk beállítani. Helyette sormagasság van, amiből a betűmagasságot levonva megkapjuk a sorközt (a különbség feleződik a sor alatti és feletti hely között). A line-height tulajdonság értékét emben célszerű megadni; erre a méretezésről szóló szakaszban láthattál példát.

Térköz. A bekezdések közötti térköznek, ahogy a szövegszerkesztésben megismerted, itt a szöveget tartalmazó dobozok: a p (bekezdés) elem, a címsorok, felsorolások stb. alsó és felső margója felel meg.

Háttér, szegély: már kitárgyaltuk külön. Ennél több nem tartozik a követelménybe.

Továbblépés:

Vissza a tartalomjegyzékhez

A linkek formázása és az álosztályok

A linkeket a HTML a eleme hozza létre. Ha eddig úgy élt a fejedben, hogy a href, akkor tisztázzuk: maga az elem az a. Ennek a href attribútuma linket hoz létre, és nyugodtan elbír más attribútumot is, például egy classt, amivel stílusosztályt rendelhetünk hozzá. (De a következőben az összes linket egyformán formázzuk, ehhez nem kell stílusosztály, magához az elemhez rendeljük a stílust.) Ezek az álosztályok

  • a :link (megtekintetlen link, a böngészők alapstílusa szerint hagyományosan kék és aláhúzott)
  • a :visited (megtekintett link, a böngészők alapstílusa szerint hagyományosan lila és aláhúzott)
  • a :hover (ami felett épp tartod az egeret)
  • és az :active (ami felett épp lenyomva tartod az egeret – ha végül nem kattintasz, csak elhúzod az egeret, és úgy engeded fel, akkor lehet, hogy egy másik pontra kell kattintani az aktív állapot megszüntetéséhez).

Az álosztály nevét szóköz nélkül kapcsoljuk annak az elemnek, osztálynak vagy azonosítónak a nevéhez, amelyre alkalmazni akarjuk. Ez az egyetlen összetett kijelölő, amire szükséged lesz. Az érettségin elég annyit tudni, hogy a linkekre hogy alkalmazhatod. Így:

a:link | a:visited | a:hover | a:active

Az a:visited a valóságban nem azt csinálja, amit a leírásokban olvashatunk. A leírások, tananyagok szemérmesen hallgatnak róla, hogy a böngészők nem valósítják meg a szabványt. Nekem húsz percembe került, amíg rájöttem, hogy nem bennem van a hiba, amiért nem tudtam beállítani hozzá a kívánt stílust, és megtaláltam az okot. Neked ezt megspórolom. A CSS leírása szerinti megvalósítás ugyanis biztonsági rést tartalmaz: a támadók rosszindulatú weboldalak készítésével megtudhatnák, hogy milyen oldalakat látogattál már meg, és neked sejtelmed sem lenne róla. (Részletek angolul.) Ezért a böngészőgyártók eltérő mértékben lebutítják ezt az álosztályt. Az eredmény: az a:visited kijelölőhöz csak a betűszínt érdemes társítani. Az összes többi vagy megjelenik, vagy nem.

A következő, kissé egzaltált példában a link négyféle állapotához négyféle színt rendelünk az álosztályok segítségével.

a:link {
	color: blue;
}

a:visited {
	color: green;
}

a:hover {
	color: orange;
}

a:active {
	color: red;
}

Szokás az aláhúzást és a háttérszínt is változtatni, de tegyük hozzá, hogy a mai divat szerint inkább elkerülik az aláhúzott linkeket, és a színnel emelik ki őket. Minr minden divat, ez is lehet káros. Szántai Károly Csak az aláhúzott link akadálymentes? című cikkében amellett érvel, hogy ne használjuk kizárólag a színt a linkek megkülönböztetésére, mert így megnehezítjük a honlap olvasását a színtévesztőknek. A cikkből megismerheted a diszlexiások számára hasznos text-decoration-skip-ink tulajdonságot is. (A diszlexiával kapcsolatban is számos előítélet él. Egy szuperokos tanítványomról például, aki 147 pontos előrehozott érettségit tett informatikából, és középiskolásként elnyert egy olyan ösztöndíjat külföldi évfolyamra, amiből hatot adtak ki az egész országban, évekkel az érettségi után tudtam meg, hogy diszlexiás.)

A bemutatott álosztályok közül az első kettő kifejezetten a linkekhez tartozik, de a :hovert és az :active-ot máshoz is használhatod, ha van kedved. Emlékszel a dobozmodell ábrájára, ahogy megváltozott az egér alatt, és a .changeonmouse:hover kijelölőre?

Ahogy már említettem, ebben a témakörben van egy szokatlan sorrendi megkötés. Az a:hover kijelölőnek a leírás szerint az a:link és az a:visited után kell jönnie, az a:active-nak pedig az a:hover után. (A gyakorlatban nem szokott problémát okozni a sorrend.)

Tekintsük most a 2019. májusi érettségi idevágó feladatát: Az oldalon a linkek színe minden állapotban kékeszöld (#008080 kódú szín) legyen!

Ezt megoldhatjuk csoportosító kijelölővel, a szabvány szerinti sorrendet betartva:

a:link, a:visited, a:hover, a:active {
	color: #008080;
}

De mivel mind a négy egyforma, akár le is egyszerűsíthetjük így:

a {
	color: #008080;
}

És ez ugyanannyi pontot ér. Csak akkor érdemes külön felírni az állapotokat, ha eltérő színt kér a feladat. (Persze nem biztos, hogy a szerkesztőprogramunk felajánl ilyen opciót, hogy egyben állítsuk be az összeset, és generál hozzá egy egyszerű kódot. A programot erre megtanítani a programozónak volna bonyolultabb.)

Továbblépés:

Vissza a tartalomjegyzékhez

A képek formázása és az úsztatás

Képeink a CSS-ben szintén dobozok. Méretezhetjük, keretezhetjük őket, kijelölhetjük a helyüket. Lényegében ez utóbbi lesz az egyetlen újdonság.

Kezdjük a méretezéssel! A böngésző alapvetően nélkülünk is érzékeli a kép méretét. Mikor és miért adjuk meg kifejezetten?

  • Biztos volt már részed abban az élményben, amikor egy lassabban betöltődő weblapot elkezdesz olvasni, majd a bekezdés, ahol tartasz, hirtelen kiugrik a képernyőről és eltűnik, mert megérkezett a kép, és lejjebb tolta a szöveget. Márpedig lassan betöltődő lapok mindig lesznek, amíg gyenge internetkapcsolat lesz a világon. Megkímélheted az olvasóidat ettől a kellemetlenségtől, ha megadod a kép valódi méretét, mert ekkor a böngésző eleve kihagyja neki a helyet, és nem utólag fog ugrálni.
  • Vannak, akik arra használják a méret megadását, hogy lekicsinyítsék a képet, azaz mondjuk egy 2000 pixel széles képet 200 pixelen jelenítsenek meg bélyegkép gyanánt. Ezt büntetni kellene. Az érettségire készülve nyilván tudod, hogy a kép fizikai mérete ettől nem csökken, és kevés rémesebb látvány van, mint amikor egy bélyegkép soronként rajzolódik ki, ahogy a megabyte-ok letöltődnek. Ha az olvasódnak nem korlátlan netcsomagja van, akkor nem fogja neked megköszönni. Tehát erre ne használjuk a méretezést, hanem fizikailag méretezd át a képet (ez amúgy is gyakran visszatérő feladat az érettségin). Nagyítani sem érdemes ily módon, mert nem hasznos a nagyítás, romlik a minőség.
  • Mindjárt látni fogunk még egy esetet, amikor az úsztatáshoz szükséges lesz a méret.

A méretet megadhatjuk HTML-ben és CSS-ben is, mégpedig a tartalomterületnél megismert módon (hiszen a kép az img elemhez tartozó doboz tartalma). Vannak olyan attribútumok, amelyeket kifejezetten HTML-ben adunk meg (az alt és a title), így itt elég nehéz elkerülni a vegyes használatot.

Szegélyvonalak, külső és belső margók. Ebben semmi új nincs, pontosan ugyanúgy használjuk őket, mint a többi doboznál. Olvasd el pontosan a feladatot, hogy ne keverd össze a kétféle margót!

Szín. Az előtérszínnel nem érdemes foglalkozni, mert az a szövegre vonatkozik, és nincs szöveg. Hacsak... Ha megadtad a kép alt attribútumát, és a kép valamiért nem tud betöltődni, akkor az alternatív szöveg lesz látható helyette, amire már érvényes a color tulajdonság. Illetve akkor is működésbe lép, ha a szegély színét nem adtad meg, csak a stílusát. Én még mindig ott tartok, hogy ezekért nem érdemes.

ABC80 Nézzük a vízszintes igazítást! Ez érdekes dolog, amit két részre kell bontanunk. Jobbra vagy balra a float tulajdonsággal igazíthatjuk, ami szó szerint lebegést jelent, de itt inkább úsztatásnak fordítják. A float szintaxisa:

float: left | right;

azaz balra vagy jobbra. A képen az ABC80 iskolaszámítógép látható, amelyen a programozást kezdtem tanulni valamelyik évezredben. Itt olvashatsz róla részletesebben, és ezzel már elég hosszú lett a szövegem, hogy lássad az eredményt. A float hatására három dolog történt vele:

  1. Az eredetileg szövegközi elemnek számító img félig-meddig blokkszintűvé lépett elő. Azért csak félig, mert nem tölti ki a teljes szélességet, viszont önálló helyet foglal el.
  2. Láthatóan jobbra igazítódott.
  3. A szöveg körülfolyja a képet (oly módon, mint a szövegszerkesztőben a szoros igazításnál).

A kód, amivel beillesztettem (mégpedig a mellette levő Nézzük a... kezdetű bekezdés elé):

<img src="images/ABC80.jpg"
	style="height: 188px; width: 250px; float: right; margin-left: 20px;"
	alt="ABC80" title="ABC80 iskolaszámítógép">

Az úsztatást legtöbbször a képek igazítására hasz­nál­juk, de más elemekre is al­kal­maz­ható. Pél­dául a div hasz­nálatával keretes cikkeket hoz­hatsz létre vele. Ilyenkor mindig add meg a szé­les­ségét is!
Figyeld meg, hogy a jobbra úsztatással együtt bal margót is adtam a képnek, különben a szöveg egészen a kép széléig tartana, ami ronda és nehezen olvasható. Ez értelemszerűen külső margó, hiszen a képnek a többi dokumentumelemtől való távolságát szabályozza. Mivel nincs megadva szegélyvonal, látszólag ugyanezt a hatást érhetném el belső margóval is, csakhogy az logikai hiba volna. Ez a távolság szemantikailag külső margó, és a célunk, hogy a kód tükrözze a szándékainkat. A keretes cikken már jól látod a margó és a padding közötti különbséget. Az is fontos, hogy a margó csak bal oldali. Ha kétoldalt lenne, azzal eltávolítanám a képet a körülvevő doboz jobb szélétől, azaz pontosan azt a jobbra igazítást szüntetném meg, amiért csináltam az egészet (borítékolható pontlevonás az érettségin), ha pedig körben, akkor még lefelé is eltolnám a mellette levő szöveg felső szélétől, ami szintén nagyon csúnya. Az úsztatott dobozokhoz mindig adjál meg szélességet, különben a böngésző megpróbálja minél kisebbre összenyomni őket! (A képekre ez pont nem igaz, de ott meg azért jó megadni, amit írtam.) A szürke doboz kódja:
.keretes {
	width: 240px;
	float: right;
	background-color: rgb(90%, 90%, 90%);
	color: brown;
	border: 1px dashed black;
	padding: 5px;
	margin-left: 20px;
}

A 2019. májusi érettségin így nézett ki a feladat: Szúrja be a szerkezet.png képet a minta szerinti helyre! A képnek 1 képpontos szegélye és balról legalább 5 pontos margója legyen! Azaz a minta alapján fel kellett ismerni, hogy a képet jobbra kell igazítani, de nem kellett maguktól tudniuk a vizsgázóknak, hogy ilyenkor jár neki a bal margó, mert azt odaírták. Hogy jobbról ne legyen margó, az „a minta szerinti helyre” szövegből következik.

Bonyolult, de logikus szabályok vonatkoznak két float találkozására. Szerintem ezeket nem kell egészében tudni, de lejjebb látni fogsz egy példát, ahol alapszinten ismerni kell. A gyakorlatban együtt szokás használni a clear tulajdonsággal; a két első linken is együtt szerepelnek.

Középre igazítani nem tudod úsztatással, és igazság szerint nem is számítok ilyen feladatra az érettségin. De azért elmondok néhány lehetőséget:

  1. Eszedbe juthat, hogy használd a margin: auto; beállítást, amiről már tisztáztuk, hogy pont ezt a hatást váltja ki. Csakhogy az img szövegközi elem, nem blokkszintű, ezért nem fog működni. Úgy lehet kicselezni ezt az akadályt, ha a korábban már pedzegetett display: block; definíciót is beleírod a stílusba, ami arra utasítja a böngészőt, hogy jelenítse meg úgy a képet, mintha blokkszintű elem lenne. Ez tökéletes megoldás, csak nem érettségi követelmény.
  2. Blokkosíthatod a képet úgy is, hogy bedobozolod egy div elembe. Mivel ő a div doboz tartalma, trükkös módon a text-align: center; fog hatni a lelkivilágára.
  3. Vagy pedig ha már van egy dived, akkor használhatod a margin: auto; módszert, csakhogy meglepetésedre ettől baloldalt marad a kép. Miért? Mert maga a kép a dobozban nincs igazítva, a doboz viszont a blokkszintű elemek definíciója szerint kitölti a rendelkezésére álló szélességet. Ezt a viselkedést azzal szüntetheted meg, ha megadod a doboz szélességét is, mégpedig a kép szélességével azonosan. Ezt a módszert mutatom be:

ABC80
A kód, amivel beillesztettem a képet (az igazítás most a div stílusában van, nem a képnél):
<div style="margin: auto; width: 250px;">
<img src="images/ABC80.jpg"
	style="height: 188px; width: 250px;"
	alt="ABC80" title="ABC80 iskolaszámítógép">
</div>

Amit semmiképpen ne tegyél: ne készíts üres táblázatot szegély nélkül, hogy elrendezd az oldal elemeit. Régen ez normálisnak számított, amikor nem volt szempont sem a reszponzivitás, sem a szemantikus (jelentéstükröző) HTML. Ma már nem az. Hamarosan szó lesz róla, hogy ha nem csak egy elemet akarsz igazítani, hanem több tartalmat elrendezni, azt hogyan teheted meg a float segítségével.

Függőleges igazítás. Függőlegesen egyszerűen középre igazítani valamit csak táblázatcellában lehet. Egyébként trükközgetni kell, például ha egymás melletti, de különböző magasságú képeket akarnál úgy igazítani, hogy a középvonaluk legyen egymás mellett. Meggyőződésem, hogy ilyesmit nem kérhetnek az érettségin.

Továbblépés:

Vissza a tartalomjegyzékhez

Táblázatok

Hála a CSS-nek, ma már csak azt kell táblázatosan megformáznunk, ami tartalma, szándéka szerint is táblázat, mint fent a szegélyvonalak áttekintése. Nem tartom valószínűnek, hogy az érettségin nagyon erőltetnék, mert sok időt vihet el, és kevés olyan ismeretet lehet mérni vele, amit másképp nem. Ha széles, sok oszlopból álló táblázatot illesztesz a weblapodra, akkor azt is eldöntöd, hogy ezt bizony mobilról nem lehet majd kényelmesen olvasni. (Ez nem feltétlenül baj; egyáltalán nem gondolom, hogy a mobiltelefonokat mindenben az asztali számítógép helyett kellene használni.)

Táblázatainkat elsősorban a table, th, td elemeken keresztül formázhatjuk. Nem nagyon tudok elképzelni olyan feladatot az érettségin, amihez a tr formázásán keresztül vezetne az út.

Ami könnyen elképzelhető feladatként, az a szegélyek, belső margók, hátterek, igazítások, szövegszín beállítása. Ezekben sok újdonság nincs, össze tudod rakni az eddigiekből. Amire érdemes figyelni:

  • Az érettségi követelményeken belül nem nagyon tudod normálisan szegélyezni a táblázatot, ezért sem számítok rá különösebben. A table szegélye csak külső szegély, a td szegélye viszont a cellák találkozásánál duplázódik (hiszen minden cella egy önálló doboz). A ronda duplázódás kiiktatása pedig nem érettségi követelmény (de az elképzelhető, hogy a feladatban megadják a kódot, amivel megoldhatod, és azt kell alkalmazni).
  • Az egyik leggyakoribb formázás a táblázatokban a cellák tartalmának középre igazítása. Sokan meg szoktak lepődni, hogy ezt nem tudják egy lépésben beállítani a table elemnél, hiszen az igazítás nem öröklődik. Tehát a th és a td elemet kell formázni. Íme, egy olyan pont, ahol CSS-ben sokkal könnyebb megoldani valamit, mint HTML-ben, mert ott minden egyes cellához külön meg kellene adni az igazítást.

Újdonság a függőleges igazítás, amit a táblázatcellákon belül tudunk legkönnyebben megoldani. Az alsó és felső indexek kapcsán már megismert vertical-align tulajdonsághoz rendre ezekkel az értékekkel lehet alulra, középre, felülre igazítást elérni:

vertical-align: bottom | middle | top;

Példa a fejléccellákban alulra, a tartalmi cellákban középre igazításra:

th {
	vertical-align: bottom;
}

td {
	vertical-align: middle;
}

A vízszintes igazítás a már megismert módon történik a text-align tulajdonsággal.

Továbblépés:

Vissza a tartalomjegyzékhez

Táblázatszerű elrendezés úsztatással

Az előző szakaszban azt írtam: nem tartom valószínűnek a táblázatot az érettségin. Részben tévedtem: egy évvel a cikk írása után feladtak egy háromoszlopos elrendezést (Dobókocka feladat, 2020. május). Ebben nem a táblázat, hanem az elrendezés volt a lényeg. Megoldásként elfogadták az elavult táblázatos szerkezetet is és a félig elkészített stílus kiegészítését és alkalmazását is. Ehhez szintén a float tulajdonságot kellett használni, de szükség volt a clear ismeretére is. A feladat az volt, hogy a körülvevő téglalapot osszuk három egyenlő széles oszlopra (szerencsére a szélesség hárommal osztható szám volt), és ezekbe minta után rendezzük el a tartalmat. A segítségül megadott kódrészlet mutatja a feladat jellegét: nem kell fejből tudni a megoldás módját, de fel kell ismerni, és tudni kell alkalmazni.

A 2020. májusi Dobókocka feladat említett része

A forrásként megadott és szabadon alakítható stíluslapban ezt látjuk (a kihagyott sorok is súgnak):

#tartalom {

	margin: 0 auto 0 auto;
	text-align: left;

}

#oszlop1, #oszlop2, #oszlop3 {
	float: left;
	padding: 0px;

}

#lablec {
	clear: both;

}

A hivatalos mintamegoldás pedig emígy néz ki. Vegyük észre, hogy a padding mindenhol nullára van állítva (ebben az esetben a px felesleges, sőt maga az egész sor is). Mivel a belső margó a szöveges tartalmakra vonatkozik, a megoldásban a p és a h1, h2 elemekre adták meg külön.

CSS:

#tartalom {
	width: 930px;
	margin: 0 auto 0 auto;
	padding: 0px;
	text-align: left;
	background-color: #f0f8ff;
}

#oszlop1, #oszlop2, #oszlop3 {
	width: 310px;
	float: left;
	padding: 0px;
	background-color: #f0f8ff;
}

#lablec {
	clear: both;
	background-color: #f0f8ff;
	margin: 10px;
}

HTML:

<div id="tartalom">
	(A bevezető tartalma)
	<div id="oszlop1">
		(Az 1. oszlop tartalma)
	</div>
	<div id="oszlop2">
		(A 2. oszlop tartalma)
	</div>
	<div id="oszlop3">
		(A 3. oszlop tartalma)
	</div>
	<div id="lablec">
		(A lábléc tartalma)
	</div>
</div>

Figyeljük meg, milyen egyszerű lett a HTML-forrás szerkezete!

Mit kell tudni az úsztatásról ehhez a megoldáshoz, amiről a képeknél nem beszéltünk? Két dolgot:

  1. A float: left hatására az úsztatott elem balra kerül, minden más tőle jobbra, beleértve a következő úsztatott elemet is. Tehát a három egyformán úsztatott oszlop egymás után foglalja el a még elérhető legbaloldalibb helyet, azaz „besorolnak” egymás mellé. Mivel fix szélességet adtunk meg mind a háromnak és a teljes téglalapnak is, ezzel ki is töltik a rendelkezésükre álló helyet.
  2. A clear tulajdonság megszünteti az úsztatást. Mivel itt csak balra úsztattunk, egy clear: left is megtette volna, de a kétoldali (both) törlés ennél erősebb.

A megoldásban az egyes részekre (habár a három oszlop szerepe mindenben azonos, csak a sorrendjük számít) osztály helyett azonosítót alkalmaztak. Ennek akkor lenne haszna, ha például JavaScripttel akarnánk feldolgozni vagy módosítani őket.

Továbblépés: lásd feljebb a képek formázásánál. Vissza a tartalomjegyzékhez


Még egyszer az igazításokról

Az igazítások annyiféle helyzetben kerültek elő, hogy érdemes összefoglalnunk őket.

  • Blokkszintű dobozt a jobb és bal oldali margó auto értékre állításával igazíthatunk vízszintesen középre az őt körülvevő dobozhoz képest. Ez magának a doboznak, és nem a benne levő tartalomnak az igazítását jelenti. Részletek a margókról szóló szakaszban. Ahhoz, hogy értelmes eredményt kapjunk, meg kell adni a doboz szélességét is.
  • Középre igazíthatjuk úgy is, hogy a doboz szélességét (a szegélyvonal külsejéig) levonjuk a szülődoboz szélességéből, és a különbség felét állítjuk be margónak. Ez kerülendő megoldás. Jobb, ha a méretezést a böngészőre bízzuk, amikor csak lehet, mert reszponzívabb.
  • Blokkszintű dobozt a float kulcsszóval (úsztatással) igazíthatunk vízszintesen balra vagy jobbra az őt körülvevő dobozhoz képest. Részletek a képekről szóló szakaszban. Ahhoz, hogy értelmes eredményt kapjunk, meg kell adni a doboz szélességét is.
  • A szövegközi dobozt a float kulcsszó ebből a szempontból blokkszintűvé teszi (ezért tudjuk képekre egyszerűen használni), de más esetben előbb nekünk kell blokkosítanunk. Ezt megtehetjük a display: block; trükkel, vagy pedig bedobozolhatjuk egy div elembe. Részletek a képekről szóló szakaszban.
  • A doboz tartalmát (elsősorban szöveget) vízszintesen a text-align: left | center | right | justify; meghatározással igazíthatjuk balra, középre vagy jobbra vagy tehetjük sorkizárttá. Részletek a karakterek formázásáról szóló szakaszban.
  • A doboz tartalmát (elsősorban szöveget) függőlegesen a vertical-align: bottom | middle | top; meghatározással igazíthatjuk a táblázatcellában alulra, középre vagy felülre. Részletek a táblázatokról szóló szakaszban.
  • Komplett dobozt vagy a táblázatcellán kívüli tartalmat függőlegesen igazítani nem mindig egyszerű dolog, ebben nem mélyedtünk el, de a linkeken utána lehet nézni.

Továbblépés: a linkek az átfedések miatt a képekről szóló szakasz végén vannak. Vissza a tartalomjegyzékhez


Vízszintes vonalak

Az érettségin elő szokott fordulni a vízszintes vonal, ami kicsit bonyolultabb feladat, mint első ránézésre gondolnánk. A vonalat megvalósító hr elem ugyanis a HTML 4-ben még azt csinálta, amit a neve mutat: hr = horizontal rule, és voltak olyan attribútumai is, mint pl. a szélesség és az igazítás.

A HTML5 megváltoztatta a hr tag jelentését. Az új értelmezése szerint szemantikus határt jelöl a szöveg részei (fejezetek, témák stb.) között, vagyis logikai részekre bontja a szöveget. Maga a HTML5 nem szabályozza a megjelenését, és elavulttá tette a korábbi attribútumait. Tehát a

<hr width="60%" align="center">

nem érvényes HTML-kód többé, mert a hr tagnek nincs width és align attribútuma. A W3Schools tömören csak ennyit ír: használj helyettük CSS-t.

Most vagyunk az egyik olyan pontnál, amiről a bevezetőben írtam: a CSS-t nem azért találták fel, hogy mindig minden egyszerűbb legyen benne, mint HTML-ben. Hogy hogyan lehet CSS-ben előállítani a megszokott vonalat, azt megtalálod a lenti linken. Ez a cikk is így valósítja meg, ahogy onnan átmásoltam, csak éppen a négysoros margin összevonásával egy sorba.

Hogy jól értsük: a böngészők megtehetik, hogy szerzői CSS nélkül továbbra is a régi módon, ezekkel a formázási megoldásokkal jelenítsék meg a hr-t, de nem kötelesek. Éppenséggel egy díszes pöttyöt vagy bármilyen szimbólumot is tehetnének oda. Többnyire megteszik kompatibilitási okból, mert a böngészők gyártói sem akarnak kitolni az emberekkel, de ez nem ígéret, és nem tudjuk, meddig lesz így. Tehát jelenleg ezek a lehetőségeink vannak vízszintes vonalra:

  1. Használjuk a régi, elavult módon a fenti kódot, és bízunk benne, hogy jól jelenik meg.
  2. Használjuk a hr taget, és CSS-ben adjuk meg a tulajdonságait (pl. hr {width: 60%; margin: auto;}. Ez egy fokkal jobb, mint az előző, mert nem használja az elavult HTML-attribútumokat, de önmagában az, hogy CSS-ben állítjuk be a szélességet és a középre igazítást, még nem jó megoldás, hiszen nem garantáltuk, hogy aminek a szélességét és igazítását beállítjuk, az egy vízszintes vonal. Lehetne kisnyúl is.
  3. Használjuk a linken olvasható CSS-formázásokat a hr taghez. Ez biztosan működik, és biztosan nem fér bele az érettségi követelménybe (láthatóan olyan megoldásokat tartalmaz, amikről nem is esik szó ebben a cikkben).
  4. Kitalálunk valami más saját megoldást, pl. egy divet, amit középre igazítunk, margót és szegélyt állítunk be neki, és üresen hagyjuk a tartalmát.

Véleményem szerint a vízszintes vonal ilyen körülmények között nem tartozik többé az egyszerű weblapok érettségi követelményébe, de a 2019. májusi feladatsorban mégis előfordult (a korábbiakat nem néztem végig). Az elvárás az 1. vagy a 2. megoldás volt. Remélem, megfontolják az érveimet, és nem adják fel többé, de ha mégis, akkor azt tudom tanácsolni, hogy használd ezeket. Élesben, az internetre szánt weblapon viszont ne.

Továbblépés:

Vissza a tartalomjegyzékhez

Listák

A számozott és számozatlan felsorolások terén nem látok olyan feladatlehetőséget a CSS-ben, ami beleférne a követelménybe. HTML-ben természetesen tudni kell.

Továbblépés:

Vissza a tartalomjegyzékhez

Függvények

A CSS néhány függvényt is tartalmaz, amelyekkel bonyolultabb feladatokat oldhatunk meg. Ezek közül kettővel találkoztál ebben a leírásban: az url() függvénnyel a háttérkép elérési útját adtuk meg, az rgb()-vel pedig a decimális RGB-színkódot. Itt találsz továbbiakat. Vissza a tartalomjegyzékhez


Kiegészítés: akadálymentes weboldalak

Az interneten a vakok és gyengénlátók is szeretnének tájékozódni, és elég sokan szeretnének megélni az informatikából. Például ha egy információt csak képi formában közlünk, azzal nem sokat tudnak kezdeni a felolvasóprogramjaik. Segíthetünk nekik, ha a szövegben is megtalálják az információt, és ha mindig használjuk a képekhez az alt attribútumot. A gyengénlátók számára probléma lehet, ha egymáshoz közeli színárnyalatokat használunk. Sajnos sok olyan példát látunk, különösen a háttérszín és a betűszín viszonyát tekintve, ahol a szerző önkifejezése volt az egyetlen szempont, de az olvashatóság még a jól látók számára is minimális. Ilyenkor mindig azt kérdezem magamban: vajon ez az illető az olvasóknak készítette a weblapot vagy saját magának? A másik gyakori hiba a túl apró betűk használata (ha még jó a szemed, majd megérted ezt negyvenéves korod felett).

A felolvasóprogramok nemcsak egyszerűen (és lineárisan) felolvasnak mindent, ami a képernyőn megjelenik, hanem elemzik az oldal szerkezetét, és intelligensen segítik a használót a tájékozódásban. Éppen ezért a szemantikus felépítéssel, az elemek rendeltetésszerű használatával sokat tehetsz érte, hogy mindenki számára olvashatóbb legyen a weblapod. Ezt jobban meg lehet érteni például ezekből a cikkekből: Címsorszint helyes használata, A fieldset és a legend igazi szerepe.

Sok más helyzetű ember is lehet akadályozott. Ilyenek a mozgássérültek, a színtévesztők és színvakok (tudtad, hogy a színtévesztés gyakori probléma?), a diszlexiások. Sőt, bármelyikünk válhat átmenetileg akadályozottá, például ha eltöri az ügyesebbik kezét vagy kificamítja a csuklóját. Valamilyen értelemben akadályozottak lehetnek az idős emberek, például a te nagyszüleid is. Ülj le velük, és kérdezd meg, milyen információt találnak nehezen megszerezhetőnek az interneten! Akadályozott lehet az a teljesen ép felhasználó is, aki valamilyen okból egy kisebb tudású eszközön nézi az oldaladat, kevesebb a gépében a szabad memória vagy lassú az internetkapcsolata, és nehezen vagy nem tudja betölteni a képeket. Korlátozott tudású eszköz egy monokróm e-könyv-olvasó is. Az akadálymentesítés tehát nem valami marginális kisebbségnek szóló nagylelkű szívesség, hanem olyan gondolkodásmód, amely mindenkinek segít elérhetővé tenni az információt, neked pedig elérni azokat a céljaidat, amikért a weblapodat létrehoztad. Ha például el akarsz adni egy terméket vagy szolgálatatást, egy rosszul felépített weblappal fizetőképes olvasókat veszíthetsz el. Meglepő módon az akadálymentesen felépített weblap a semmiben nem akadályozott olvasók tájékozódását is megkönnyíti. Része például a többször emlegetett szemantikus elemek használata is. E gondolkodásmódhoz tartozik, hogy nem akadálymentesítésről, hanem inkább akadálymentességről beszélek. Vagyis egy oldal tervezésekor legyen ez kiindulási szempont.

Elterjedt szokás a figyelmetlenül szerkesztett weblapokhoz külön „akadálymentes” vagy „vakbarát” verziókat készíteni. Ezt a szakértők nagyon rossz gyakorlatnak tekintik, és határozottan ellenzik. Két cikk, amiből megtudod, miért:

Az akadálymentesség az érettségin nem követelmény, de ha tényleg weboldalt készítesz, előzékeny dolog odafigyelni rá. Az alábbi linkeken többféle akadályozottságról olvashatsz.

Vissza a tartalomjegyzékhez

Összefoglalás: a doboz formázása

A CSS világában a dokumentum egymásba ágyazott, téglalap alakú dobozokból épül fel. A weblapok gyökéreleme a html, amelyből az összes többi származik, de a gyakorlatban a body a legmagasabb szintű elem, amelyhez formázásokat rendelünk. A formázások kisebb része (pl. a szín és a betűtípus) öröklődik a befoglaló (szülő-)dobozból a befoglalt (gyermek-)dobozokba, a többség nem. A háttérszín és -kép formálisan nem öröklődik, de az átlátszó alapérték miatt mégis érvényesül. (Képzeld el, ha öröklődne, és minden dobozban újrakezdődne a háttérkép!)

A dobozok a HTML elemeihez (tagjeihez) kötődnek. Helyzetük szerint blokkszintűek vagy szövegköziek lehetnek. Funkcionális különbségek is vannak, például a képek és linkek esetén. Ettől eltekintve ugyanazok az alapműveletek végezhetőek el velük. Ha egy szövegrészt vagy más dokumentumrészletet külön formázással akarunk ellátni, akkor a div vagy a span segítségével körbevesszük egy saját dobozzal, és ehhez egyedi esetben szövegközi stílust vagy azonosítót, ismétlődő formázás esetén osztályt rendelünk.

A cikkben először áttekintettük a CSS általános jellemzőit, aztán az egyes formázási funkciók részletes beállításait (picivel nagyobb mélységig, mint ameddig érettségi követelménynek gondolom). Most már csak össze kell rakni ezeket. Meglehetősen nagy a szabadsági fokod abban, hogy az itt bemutatott formázásokat hogyan alkalmazod az egyes dobozokra. Tekintsd őket egy doboz legónak. Méretezni általában a margót, a szegélyvonalat és a belső margót célszerű; a tartalom méretezése elsősorban a képeknél, a középre igazítandó és az úsztatott elemeknél merül fel. Szegélyeket, háttereket, színeket tetszés szerint alkalmazhatunk.

Végezetül ne feledd, hogy a tevékenységünk célja funkcionális, emberek számára jól olvasható, vak és gyengénlátó embertársaink számára felolvasóprogramokkal is érthető, a HTML elemeit célszerűen használó (lehetőleg számítógépes programmal elemezhető), a tájékozódást segítő, a lényeget kiemelő weboldalak készítése. Nem muszáj tehát minden technikai lehetőséget kihasználni csak azért, mert van.

Ha végére értél ennek az összefoglalónak, megértetted és elsajátítottad (és megismerted a választott szerkesztőprogram működését, beállításait), akkor készen állsz az érettségire. Arra nem állsz készen, hogy színvonalas weboldalakat készíts, amelyek megállják a helyüket a mai világban, mert az érettségi elvárás ettől nagyon messze van, de már érted a CSS logikáját, és könnyen hozzáteheted a hiányzó ismereteket a továbblépést segítő linkeket követve. Vissza a tartalomjegyzékhez


Tiszta kód

Az érettségin a gányolt kódot is el kell fogadni, ha szintaktikailag helyes, és az előírt viselkedést valósítja meg. De ha már megtanulsz valamit, miért ne tanulnád meg rendesen?

  • Lehetőleg ne keverd a HTML és a CSS lehetőségeit nyomós ok nélkül! Egy elemen belül érdemes egy helyen tartani a formázásokat.
    A 2019-es érettségi egyik feladata ez volt: Formázza meg a szöveg elején található »dr. Wolfgang Feist« nevet 16 képpontos betűméretűre és dőlt betűstílusúvá, vagy ehhez használhatja a nev jelölőt a stíluslapból! Az egyik vizsgázó így oldotta meg: <em><span class="style2">dr. Wolfgang Feist</span></em>, és a style2-ben volt a betűméret.
    Én sem hiszem, hogy CSS-sel tennék felső indexbe egy hatványkitevőt, de az ilyen megoldásokat roppant szerencsétlennek tartom. (Arról nem is beszélve, hogy az <em> tag nem is garantáltan eredményez dőlt betűt.)
  • Ne ismételgesd a kódokat! Ha egy formázás ismétlődik, biztosan nem a szövegközi stílus ismétlése lesz a jó megoldás. Ha bármit változtatni szeretnél rajta, egyenként fogod megváltoztatni az összes előfordulást?
  • Használj kifejező neveket! A style1, style2 stb. nem mond semmit, nem utal a felhasználásra.
  • Ha van rá lehetőség, építs hierarchiát! Így kihasználhatod a CSS öröklődési képességeit. Például egy kiemelt bekezdésstílust megvalósíthatunk egy olyan osztállyal, amely a <p> elem tulajdonságait örökli, és csak az eltérések vannak külön leírva.
  • Előbb a HTML-elemek formázását írd át, és csak akkor vezess be osztályokat, ha ez nem megy! Ha az összes azonos szintű címsort egyformára akarod színezni, és máshol nem használod ezt a színt, akkor fölösleges és ezért káros is egy osztály definiálása.
  • Ne keverd az osztályokat és azonosítókat! Fent leírtam, melyik mire való.
  • Írj olvashatóan! Magát a CSS-kódot formázd meg olyan igényesen, ahogy egy programkóddal is tennéd (szóközök, tördelés, megjegyzések stb.).
  • Legyen rendezési koncepciód! A stíluslapodban valamilyen áttekinthető elv szerint rendezd sorba a stílusokat, hogy könnyű legyen megtalálni őket. Ha érkezési sorrendben mindig a végére írod a következőt, nehéz lesz módosítani vagy bővíteni.
    A fent említett dolgozatban a stílusok sorrendje ez volt: body, a, a:visited, a:active, a:hover, .style1, h1, h2, img:hover, .style2, .style3, img, majd pedig a body elemben még egy további szövegközi style attribútum. Szerinted rend van itt?

Nem minden program és nem minden beállítás támogatja a tiszta kódot. Erről a kedvenc szerkesztőprogramod által előállított kódot tanulmányozva szerezhetsz tapasztalatot, de egyúttal nézd meg a beállítási lehetőségeket is. Magát a CSS-t bármilyen editorral megírhatod. (Elrettentő példa: egy emelt szintű érettségiben volt volt style1, style2, style9..., és a 7 darab h2 szintű alcímben hétszer egymás után <h2 class="style9">. Amikor ezen elszörnyedtem, kollégám azt felelte: Sharepoint Designer – alapbeállításnál ilyeneket csinál.)

Nem vagyok biztos benne, hogy a felsorolt és hasonló csúnya megoldások elkövetői tisztában voltak vele, mi van a kódjukban. Lehet, hogy csak a WYSIWYG felületen kattintgatták ki és ellenőrizték az eredményt. Vissza a tartalomjegyzékhez


CSS a közismereti érettségin

A vizsgaleírás szerint „a feladatsor legalább 50%-a egyértelmű utalásokat tartalmaz a feladat minden részletének megoldására, így csak a feladatban szereplő fogalmak és a feladatot megoldó eszköz ismeretét, valamint az eszköz kezelésében való jártasságot méri.” A gyakorlatban ez 50%-nál több szokott lenni, de mindig marad egy kis tér a gondolkodást igénylő feladatoknak is. Ebbe akár az is belefér, hogy megadják egy olyan HTML-elem, CSS-tulajdonság vagy függvény leírását, amely egyébként nem tananyag, és ezt a leírás alapján alkalmazni kell. Azt is el tudom képzelni, hogy megadnak egy stílust CSS-ben, és azt a leírás alapján ki kell egészíteni valamilyen tulajdonsággal, hogy a megadott hatást elérjük, vagy pszeudokód (a meghatározások szöveges magyar nyelvű leírása) alapján kell stílust létrehozni. Efféle feladatok más témakörben is elő szoktak fordulni.

E cikk írásáig (2019. november–december) a CSS-t egyszer kérték számon, a 2019. májusi Passzívházak feladatban. Ebben a feladatban könnyítés volt, hogy lehetett választani a CSS és a tiszta HTML között, és csak egyoldalas weblapot kellett készíteni. A tételkészítő bizottság gyakorlatát ismerve ez egy figyelmeztetés, hogy mostantól számítani kell ilyen feladatra is. Várható, hogy egy átmeneti időszakban még lesz választási lehetőség, de a követelménybe belefér az is, hogy valamit (akár csak egy részfeladatot) kifejezetten CSS-ben kelljen megoldani, és előbb-utóbb erre is sor kerülhet. Ehhez a feladathoz egy előkészített CSS-állományt is mellékeltek, amit elég volt módosítani és kiegészíteni a sikerhez, de tudni kellett hozzákapcsolni a weblaphoz. Nem biztos, hogy ez máskor is így lesz. Ha egy vizsgán tiszta CSS-t kérnek, akkor a WYSIWYG felület rendkívül félrevezetővé válhat, mert csak az eredményt mutatja, de a megoldási módot, a kódot fogják értékelni. Ezért a vizsgára készülőknek érteniük kell, hogy mi történik a kódban. Nem elvárás, hogy közvetlenül a kódot szerkeszd, de az igen, hogy a megfelelő megoldást válaszd ki, és tudjad ellenőrizni a kódot. A kész megoldás pedig legjobban egy böngészőben ellenőrizhető. Ebben a cikkben mindenhol a kódról volt szó, mert abban van a vitamin, és arról lehet a használt segédprogramtól függetlenül beszélni.

Az iskolákban népszerű Sharepoint Designer 2007 utoljára 2020 őszén lesz használható az emelt érettségin – hogy mi lesz helyette a KompoZer mellett, azt e cikk írásakor még nem tudjuk. A Sharepoint Designerből a Microsoft a 2013-as verzióval távolította el a Design View (azaz WYSIWYG) nézetet (indoklás).

A feladathoz két mintamegoldás tölthető le az OH oldaláról. Az első külső stíluslapot, a második vegyesen beágyazott stíluslapot és szövegközi stílusokat használ. A felkészülés során mindenképpen az elsőt javaslom tanulmányozásra.

A dolgozatok javítása során ezek a típushibák buktak felszínre. Érdemes tanulni mások kárán.

  • A feladathoz mellékelve volt egy félkész stíluslap, ahova bele is voltak írva a megfelelő tagek. Ezt csak ki kellett volna egészíteni. Nagyon kevesen tudták kihasználni, pedig nagy segítség.
  • Volt, aki használta a stíluslapot, de nem tudta hozzákapcsolni a weblapjához, így sok pontot veszített, mert nem valósultak meg a formázásai. Egy böngészőben egyszerűen ellenőrizheted, hogy működik-e, amit csináltál.
  • Nagyon sok kevert formázás volt ugyanarra az elemre (félig HTML, félig stílus). Ezért most nem járt levonás, de ha tiszta CSS-t kérnek, akkor fog. Az ilyen megoldások valószínűleg a szerkesztőprogram nem egészen tudatos használatával állnak elő. Ismerd meg a programod beállításait, mielőtt elindulsz érettségizni!
  • Ahol a feladat képpontban adta meg a betűméretet, többen a pt mértékegységet vetették be a px helyett. A javítási útmutatók és a javító tanárok nem díjazzák, ha figyelmetlen olvasás miatt nem azt csinálod, amit a feladat kér.
  • Ahol be kellett gépelni valamilyen rövidebb szöveget a feladatlapról, ott a betűtévesztés mindig hibának számít. Nem hasonló szöveget kérnek, hanem azt, ami ott van.
  • Volt ilyen részfeladat: Minden szöveges tartalom a téglalap bal és a jobb szélétől 10 képponttal beljebb jelenjen meg! Ilyenkor kell érteni, hogy ez bizony belső margó, akár CSS-t, akár HTML-t választasz. Itt volt olyan, aki padding helyett margót használt. Mivel a téglalapnak a feladat szerint nincs szegélye, a képernyőn nem látszott a különbség, de a pont nem járt. Na erre mondtam, hogy nem elég nagyjából úgy kinéznie az eredménynek a képernyőn, ahogy a mintán, hanem a kódnak is tükröznie kell a feladat megértését.
  • A Sharepoint Designer microsoftos szokás szerint teleszórta a kódot felesleges elemekkel, például <span>ekkel. Ez megnehezíti a javító tanár dolgát is és a tiédet is, ha ellenőrizni akarod, amit csináltál, de önmagában sajnos nem jár érte pontlevonás. Viszont akinél egyetlen apró felső index Calibri betűtípussal került bele ebbe az ömlesztvénybe, és ezt nem vette észre, az elbukta az egész dokumentumban alkalmazott Verdana betűtípusért járó pontot. A program beállításainak megismerésével és tudatos munkával lehet az ilyen hibákat elkerülni.

2020 májusában ismét volt webszerkesztési feladat stíluslappal, a Dobókocka. Ennek az újdonságait a Táblázatszerű elrendezés úsztatással szakaszban dolgoztam fel. A háromoszlopos elrendezés példa a második 50%-ba tartozó feladatra, amikor nem csak mechanikusan alkalmazni kell a tanultakat.

A másik meglepő újdonság a kombinált elem.osztály kijelölő használata volt, amire már tényleg nem számítottam. Ezt részletesen kifejtettem A kijelölők fajtái szakaszban. Az eset felhívja a figyelmünket, hogy más kombinált kijelölők felbukkanása is elképzelhető. Sajnos egyszerűen nincs semmi támaszunk, hogy mit kell megtanítani a kijelölők gazdag kínálatából. Vissza a tartalomjegyzékhez


Kiegészítés: a fejlesztőeszközök használata

Mások weblapjainak tanulmányozása hasznos és mókás dolog, főleg, ha bele is tudunk piszkálni. Na persze nem az eredetibe, az szép kis bűntény lenne. A legegyszerűbb megnézni egy oldal forrását, abban megkeresni a stíluslapokat, azokat is egyenként megnyitogatni... De a böngészők ennél többet is tudnak. Vissza a tartalomjegyzékhez


Google Chrome

Válaszd a jobb felső sarok menüjéből a további eszközök alatt a fejlesztőeszközöket, jobb gombbal a vizsgálatot vagy a Ctrl Shift I-t. Jobboldalt megnyílik egy fejlesztői ablak, amit a legfelső menüsorban a három pontra kattintva áthelyezhetsz a képernyő másik részére is. A felső részben tudsz navigálni az oldalon. Ha előzőleg kijelöltél egy részt, akkor jobb gombnál a vizsgálatot választva rögtön oda is ugrik. A középső ablakrész Styles menüpontjában (a fejlesztőeszközök már angolul jelennek meg) látod a stílusokat. Az áthúzottak nem érvényesülnek (pl. felül vannak írva vagy hibásak). A halvány betűsök szintén nem érvényesülnek: ezek öröklött, de nem örökíthető tulajdonságok. Az egyes elemekhez a Chrome megadja, hogy melyik stíluslapból származnak, illetve hogy öröklődnek-e egy másik stílusból. Például a „user agent stylesheet” jelenti a böngésződ már említett saját stíluslapját. Jobboldalt a doboz részei felett húzva az egeret kiszínezi a megadott színnel a képernyő megfelelő részét. Akár át is írhatod a stílusokat, és rögtön látod a változást, ami kiváló tanulási módszer. Természetesen csak a saját gépeden. Ha a fejlesztőablak bezárása után a weblap úgy maradt, töltsd újra a megszokott megjelenéshez!

Továbblépés:

Vissza a tartalomjegyzékhez

Mozilla Firefox

A funkciók nagyon hasonlóak a Chrome-nál leírtakhoz. A főmenüből a webfejlesztő almenüben érhetőek el, kísérletezz!

Továbblépés:

Vissza a tartalomjegyzékhez

Továbblépés

Köszönetnyilvánítás

Köszönöm Fodor Zsolt, Grusz Gergely, Nits László és Siegler Gábor kollégáim segítségét és értékes észrevételeit, amelyeket figyelembe vettem a cikk végső változatának kialakításánál. Vissza a tartalomjegyzékhez


Verziótörténet

Ebben a szakaszban 2020 júniusától listázom a fontosabb változtatásokat.

2020 június 17.: A 2020-as érettségi tapasztalatai és az akadálymentesség

2020. június 7.: A 2020-as érettségi tapasztalatai és a fejlesztőeszközök