Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás

Az előző leckében megfejtettük, mit jelent a kaszkád szó a CSS kifejezésben. E lecke még fontosabb lesz: újra bevezetjük az osztályok fogalmát, majd előrántjuk emlékeinkből az egyedi azonosítókat és összeeresztjük őket a stíluslapokon.

Ezt követően ismét nagy fába vágjuk a fejszénket: megpróbáljuk megérteni a dobozmodellt, és amikor már majdnem sikerül, kiderül, hogy az élet mégsem habostorta.

 

Az olvasó írt - már megint! Kiváló, csak így tovább! András a következőt kérdezi az előző leckénkére vonatkozóan: „...végigküzdöttem magam a cascade magyarázatán. Nem biztos, hogy mindent értek, csak nagyjából. Mi van akkor, ha egy stíluslapon belül többször állítom ugyanannak a tagnek a stílusát, tehát ha egy CSS-en belül van átfedés?"

 

Javítandó „kacsacsőrök”!
A HTML tageket a kisebb és nagyobb jelek (ASCII 60 és 62) közt kell elhelyezni. Egy technikai malőr folytán oldalunkon azonban nem ezek, hanem Unicode-os társaik (U+2039, U+203A) jelennek meg.

Emiatt az esetlegesen a vágólapról átmásolt példákban először vissza kell javítani azokat az eredeti ASCII kódra!

Jogos a kérdés, hiszen a múltkor csak azt néztük meg, mi van akkor, ha egy külső, egy beágyazott és egy közvetlenül megadott stílusdefiníció harcol egymással ugyanazért a bekezdésszövegért. Melyikük jut érvényre? Megállapítottuk, hogy van egy fontossági sorrend, amelyet leegyszerűsítve úgy fogalmazhatunk meg, hogy az adott weboldalelemhez legközelebb álló stílusdefiníció győz. Ha a tag tartalmaz közvetlenül megadott stílust - ahogy azt a harmadik bekezdés esetén láthattuk -, ez fog érvényre jutni, mert ennél közelebb már nem is kerülhetne. Ha nincs, akkor a HTML oldal fejlécébe (‹head›) beágyazott (belső) stílusblokk rendelkezhet a bekezdések kinézetéről - emlékezzünk, ez történt az első két bekezdésünkkel. De tegyük fel, hogy ilyen sincs; akkor viszont a csatolt, külső CSS fájl definíciói érvényesülnek (ezek már tényleg jó messzire vannak a tagektől). De ha külső CSS állományunk sincs, akkor az általunk használt böngésző gyári stíluslapja uralkodik. (Szóvá is tettem, hogy az utóbbiban levő stílusszabályokat miért nem mutatja a Firebug kiegészítő: nos, a legújabb 1.20b15-ös verzió már mutatja!)

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 1

 

 

Minden kívánságunk így teljesüljön: a Firebug legújabb verziója már mutatja a böngésző saját stíluslapjának érvényben levő szabályait

 

 

Visszatérve a kérdésre, először is mindenkit arra biztatnánk, hogy bátran kísérletezzen! A probléma ugyanis konkrétan két kézmozdulattal előállítható: fogjuk a múltkori pelda.html állományunkat, duplikáljuk a fejlécben a bekezdésszövegre vonatkozó stílusdefiníciót, és átírjuk a másodikban a színt feketére. Mi történik? Az első és a második bekezdés fekete lesz (a harmadik nem változik a közvetlenül megadott zöld szín miatt). Megállapíthatjuk tehát, hogy amennyiben egy stíluslapon két szabály egyazon weboldalelem azonos tulajdonságára vonatkozik (bekezdések színe), a később definiált beállításai felülbírálják a korábbit.

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 2

Ha egy stíluslapon belül több olyan szabály is van, amely ugyanarra a weboldalelemre érvényes, a sorban később jövő uralkodik

 

 

JELÖLŐK A CSS-SZABÁLYOKBAN

Eddig csak olyan stílusdefiníciókat láttunk, amelyek egy adott tagre, konkrétan a bekezdésszövegre vonatkoztak. A CSS azonban ennél sokkal gazdagabb és összetettebb hivatkozási lehetőségekkel rendelkezik, amelyeket muszáj megtanulnunk, mert nemsokára szükségünk lesz rájuk. Nézzük meg, milyen alapvető jelölőkkel dolgozhatunk a stíluslapokon, és azok hogyan hatnak a weboldal elemeire.

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 3

Az új kiinduló helyzet: a pelda.html állományon elvégzett változtatások és annak eredménye

 

 

Ehhez előbb szerkesszük át egy kicsit a múltkori pelda.html állományunkat: dobjuk ki belőle a beágyazott és a harmadik bekezdésbe közvetlenül megadott stílusdefiníciót, természetesen hagyjuk benne a külső CSS fájlra való hivatkozást, majd bővítsük egy vidám felsorolással (rendezetlen listával), ahogy az az ábrán is látszik.

 

A weboldalelem

Vizsgáljuk meg a kiinduló állapotot a böngészőben: a bekezdések bekékültek. Az előző lecke után pontosan tudjuk, hogy azért, mert a pelda.css stíluslapunk jelenlegi egyetlen szabálya a bekezdésszövegekre vonatkozóan ezeket a tulajdonságokat határozza meg. Az olyan CSS-szabály, amelynek jelölője egyetlen tagnévből áll, a teljes weboldal összes azzal a taggel leírt oldalelemére érvényes.

 

A csoport

Jelenítsük meg a felsorolásba írt versikénket ugyanúgy (ugyanazzal a színnel, ugyanolyan betűtípussal stb.), mint a bekezdéseket. A CSS „nyelvére" lefordítva: szeretnénk, ha a bekezdések kinézetét beállító szabály a felsorolás elemeire is vonatkozna.

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 4

A stílusdefiníció jelölőjét kiegészítettük a li tagnévvel, tehát a beállított formázok most már a felsoroláselemekre is vonatkoznak

 

 

Az egyik megoldás, hogy lemásoljuk a szabályt, majd az elején a p jelölőt kicseréljük li-re. Ez önmagában nem rossz, csak éppen rettentően kiszúrnánk magunkkal. Innentől kezdve ugyanis, bármit változtatunk a bekezdések megjelenésén, azt a műveletet rögtön el kell végezni a felsorolás elemeire vonatkozó szabályon is - már ha ragaszkodunk az eredeti elhatározásunkhoz, hogy ezek azonos módon jelennek meg -, tehát kétszer annyit kell dolgoznunk. Jobb megoldás, ha nem másoljuk le a szabályt, hanem kibővítjük a jelölőt: a p-hez vesszővel elválasztva írjuk hozzá a li-t is. Így két tagnévből álló jelölőcsoportot hoztunk létre, a szabály hatása pedig az oldalon belül valamennyi bekezdésszövegre és immáron valamennyi felsoroláselemre is érvényes lesz, az előzőhöz hasonlóan.

 

Az osztály

Nehezítésképp tegyük fel, hogy szeretnénk a vers legfontosabb sorait - a másodikat, a negyediket és a hetediket - piros színnel kiemelni, de a többi maradjon kék. Készítsünk egy új szabályt a felsoroláselemekre vonatkozóan, majd állítsuk be a piros betűszínt. Ezzel az a baj, hogy az összes listaelemre érvényes, így az egész vers piros lesz. Kétségtelen előnye viszont, hogy megfigyelhetjük, hogyan sakkozza ki egymás között a két egymásnak részben ellentmondó szabály a felsoroláselemek megjelenését. Az első beállítja a betűtípust, a betűméretet, a sortávolságot és a kék színt, majd a második - amelyről épp most tanultuk meg, hogy felsőbbrendű, mert ő jön később a CSS állományban -, felülbírálja az előzőt és beállítja a piros színt. Mivel azonban a betűtípusról és a méretről nincs „mondanivalója", ezek a beállítások érvényben maradnak az első szabályból.

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 5

Az új szabály a felsoroláselemek színbeállítását felülbírálja, a betűkre vonatkozó egyéb formázásra nincs hatással

 

 

Emlékezzünk vissza, hogy két leckével korábban pedzegettük már az osztály (class) fogalmát. Arra használtuk, hogy valamilyen közös névvel lássuk el az XHTML kódon belül azokat az oldalelemeket, amelyek többször is előfordulnak az oldalon belül, és szándékaink szerint azonos módon néznek majd ki. Kínaiul hangzott már akkor is, de mindjárt értelmet nyer a dolog, ha rávetítjük az aktuális problémánkra: különcködő felsoroláselemeinkről elmondható, hogy több van belőlük az oldalon, és mindegyik ugyanúgy néz ki (piros).

 

Szerkesszük át gyorsan a HTML állományt, és a kérdéses felsoroláselemeket - a másodikat, a negyediket és a hetediket - bővítsük ki a class attribútummal, amelynek értéke legyen fontos.

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 6

Kiegészítettük a HTML kódot a class attribútumokkal, a CSS-t pedig az osztályhivatkozással - így már csak a kívánt sorok tündökölnek pirosban

 

 

Azt már tudjuk, hogy a stíluslapon a weboldal összes listaelemére a tag nevével hivatkozunk. Az osztályt pedig egy ponttal és az utána írt osztálynévvel jelöljük. Egészítsük ki ezzel az elrontott szabályunk jelölőjét - li.fontos - vigyázzunk, hogy a pont egyik oldalán se legyen szóköz! Nézzük meg az eredményt.

 

Gondoljuk át még egyszer, hogy mit csináltunk: volt egy CSS-szabályunk, amely a weboldal összes felsoroláselemének színét pirosra állította. Ennek a szabálynak korlátoztuk az érvényességi körét egy osztálynév megadásával, így most már nem az összes listaelemre, hanem csak azokra érvényes, amelyek a fontos nevű osztály tagjai.

 

 

Kiegészítő: osztály megkeverve

Ha nagyjából világos az osztály működése, akkor kavarjuk meg egy kicsit: a pelda.css állományban vegyük ki a második szabály jelölőjéből a listaelemekre való hivatkozást, azaz a li-t, csak az osztályhivatkozás maradjon. Nézzük meg a böngészőben, mi történt. (Hogy-hogy semmi?) Amíg ezen töprengünk, szerkesszük át a HTML oldalt is: a második bekezdésszöveget „írassuk be" a fontos osztályba. Nocsak, ettől „elpirult". Ha most visszaírjuk a li-t a CSS-szabályba, vajon mi fog történni?

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 7

A bekezdésszöveget is beraktuk a fontos osztályba, majd a CSS-ben kitöröltük a li tagnevet a jelölőből, így az minden fontos osztályú elemre érvényessé vált (a bekezdésre is)

 

 

A li.fontos jelölővel szabályunk a fontos osztályba tartozó felsoroláselemekre van hatással. Ha eltávolítjuk belőle a li-t, az új szabály - a megmaradt .fontos jelölővel - a fontos osztályba tartozó valamennyi weboldalelemre vonatkozik. Elég nagy különbség! Persze, amíg csak felsoroláselemek vannak az osztályban, nem látszódik változás az oldalon, ám amikor beraktuk az osztályba a második bekezdésszövegünket is, a szabály arra is érvényessé vált, ezért az is piros lett. Ezután visszaraktuk a jelölőbe a li-t, azaz az érvényességét ismét a felsoroláselemekre korlátoztuk - így viszont a második bekezdésszöveg hiába van bent a fontos osztályban, rá ez a szabály így már nem érvényes.

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 8

A li.fontos színbeállítása csak a fontos felsoroláselemekre, a .fontos vastag szabálya az összes fontos weboldalelemre érvényes

 

 

Hozzunk létre egy harmadik szabályt, amely a fontos osztály elemeit vastag betűsre állítja:

 

.fontos { font-weight: bold; }

 

Ugye könnyen kitalálható, hogy mi lesz az eredménye? Most már két szabályunk van, amely ilyen vagy olyan módon befolyásolja a fontos osztályú weboldalelemek megjelenését. A frissen létrehozott a teljes osztályra vonatkozik, függetlenül attól, hogy milyen oldalelemek vannak benne, így tehát a felsoroláselemek és a bekezdésszöveg is vastag betűvel fog megjelenni. A korábbi szabály, amely kizárólag a fontos osztályú felsoroláselemekre vonatkozik, pirosra állítja a betűszínt, tehát a felsoroláselemek pirosra változnak, a bekezdésszöveg viszont nem. Mivel ez a szabály nem rendelkezik a betűvastagságról, így nem is bántja azt, érvényben hagyja a vastag betűs stílust.

 

Egyedi azonosító

Tegyük fel, hogy legfőbb vágyunk a vers első sorát vastag betűvel megjeleníteni. Ugyan létrehozhatunk erre a célra egy újabb osztályt - elvileg semmi nem tiltja, hogy abban csak egyetlen oldalelem szerepeljen -, van azonban egy sokkal jobb eszközünk, az egyedi azonosító.

 

Az egyedi azonosítóval (azaz az id attribútummal) már az első leckében is összefutottunk, amikor kedvenc oldalunk, a CSS Zen Garden  XHTML forrását kezdtük elemezni. Megtanultuk róla, hogy általában a weboldal olyan fontos strukturális elemeit (alapköveit) jelöli, amelyekből az egész oldalon csak egy található (például fejléc, lábléc, oszlopok, menü stb.). A példa és a tanulás kedvéért tekintsünk most a versünk első sorára, mint egyedülálló és fontos strukturális elemre. A HTML állományban lássuk el az első listaelemünket egy malac értékű id attribútummal.

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 9

Kiemelten fontos felsoroláselemünket elláttuk egyedi azonosítóval, majd a CSS-ben készítettünk hozzá egy egyedi szabályt, hogy legyen vastag betűvel írva

 

 

A CSS-ben az egyedi azonosítókra a kettős kereszt (#) karakterrel és az azonosító nevével (esetünkben: malac) hivatkozunk. Hozzunk tehát létre egy új szabály, amely a malacazonosítóval ellátott weboldalelemet vastag betűssé teszi.

 

#malac { font-weight: bold; }

 

Az osztályok esetében láttuk, hogy fontos különbség volt aközött, hogy az osztályazonosító elé odaírtuk-e a hivatkozott weboldalelem nevét vagy sem: a .fontos adott esetben teljesen mást jelentett, mint a li.fontos. Az egyedi azonosítóknál ez nem igazán gond, mivel garantált, hogy csak egy ilyen weboldalelem van az egész HTML állományban, tehát akár azt írjuk, hogy li#malac, akár azt, hogy #malac, ugyanarra az egyik felsoroláselemre fogunk hivatkozni. Probléma akkor adódhat, ha beírjuk a tag nevét, aztán átrendezzük a HTML-struktúrát, és az id-t egy másik weboldalelemnek „utaljuk ki" - felsorolás esetén például az ‹ul›-nak. Ekkor a li#malac kifejezés a stíluslapon értelmetlenné válik, és természetesen az ‹ul›-ra ettől még nem lesz érvényes.

 

Azonosított osztályharc

Mi történik akkor, ha az osztály és az egyedi azonosító találkozik? Gyorsan szerkesszük át még egyszer a HTML oldalt: az első listaelemből vigyük le az id attribútumot az utolsóba. Egy tagnek nyugodtan lehet egyszerre id és class attribútuma, ezt semmi nem tiltja, így természetesen két szabály lesz rá érvényes a stíluslapon. Nincs is baj, amíg a szabályok kiegészítik egymást, mint most is: az osztályra vonatkozó a betűszínt állítja pirosra, az azonosítóra vonatkozó pedig a betűvastagságot. Végeredményül egy vastag piros betűs utolsó verssort kapunk.

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 10

Ha egy tagen belüli van class és id attribútum, és az ehhez tartozó CSS-szabályok ütköznek, az id érvényesül, mert az határozza meg konkrétabban a weboldalelemet

 

 

Egészítsük ki az egyedi azonosítóra vonatkozó utolsó szabályt egy zöld betűszínt alkalmazó új stílussal. Látni fogjuk, hogy a verssor bezöldül. Az ilyen összecsapáskor az a szabály érvényesül, amelyik konkrétabban határozza meg a weboldalelemet. Az osztályra vonatkozó stílusdefiníció három oldalelemre is érvényes, míg az egyedi azonosítóval pontosan megmondjuk, hogy miről beszélünk - utóbbi a konkrétabb, tehát ő érvényesül.

 

 

Kiegészítő: Class és id koprodukciós iroda

A közös id és class attribútum remekül használható például olyan speciális dizájnelemek (például „szövegdobozok") megjelenítéséhez, amelyekből több is van az oldalon, alapvetően mind ugyanúgy néznek ki, de attól függően, hogy mi lesz a tartalmuk, különböző a címsor, a keret vagy akár a szöveg színe is. A dobozok legfontosabb közös tulajdonságait (szélesség, magasság, betűméret stb.) az osztályazonosítót „célzó" CSS-szabály írja le. Az egyedi tulajdonságokat (eltérő keretszín, más-más grafika a fejlécben stb.) az egyedi azonosítóra vonatkozó másik CSS-szabály alakítja ki. Kettőjük közös munkájaként jönnek létre az egyforma, ám mégis különböző dobozok.

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 11

Egy online játékbolt „kirakata" nagyon hasonló, részleteiben mégis eltérő dizájnelemekkel

 

 

 

A DOBOZMODELL

Ahhoz, hogy mélyebbre merüljünk a CSS világában, és megismerkedjünk a HTML elemek megjelenését befolyásoló tulajdonságokkal, még egy fontos koncepción kell átrágnunk magunkat, ez pedig az úgynevezett dobozmodell (box model).

 

Egy pillanatra próbáljuk meg elfelejteni, hogy a weboldalakon mindenféle rendkívül látványos dolgot lehet csinálni, és lelki szemeinkkel képzeljünk magunk elé egy bekezdésszöveget. Akkor képzeljük el jól, ha egy téglalap alakú „dobozt" látunk magunk előtt, amelynek van valamilyen háttérszíne, ebben a tartalom valamilyen más színű betűk formájában jelenik meg, körülötte pedig olyan vizuális elemek láthatók, mint a helykitöltés, a keret és a (külső) margó.

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 12

Kiváló ál-3D-s, réteges dobozmodell bemutató a redmelon.net/tstme/box_model/ című weboldalon

 

 

Tanulást segítő eszközként használhatjuk a redmelon.net/tstme/box_model/ című weboldalon található ál-háromdimenziós ábrát. Kívülről befelé haladva a képen világos türkizzel jelölt rész a (külső) margó (margin), az ezt követő fekete csík a keret (border), ezután jön a helykitöltés (padding), és ezen belül található a HTML elem tényleges tartalmi területe, ahol a tartalma megjelenik. Az, hogy a háttérben valamilyen szín vagy kép van-e, csak annyiból lényeges, hogy a háttérkép a háttérszín előtt jelenik meg. Ha tehát beállítunk egy kék háttérszínt és berakunk egy háttérképet is - ezt a CSS background tulajdonság egyszerre is lehetővé teszi -, amely alapvetően zöld színű, de helyenként áttetsző, akkor az áttetsző helyeken a kék háttérszínt fogjuk látni.

 

A margó, a keret és a helykitöltés négy irányból veszi körbe a tartalmi részt, ezek mérete oldalanként (felül, jobbra, alul, balra) külön-külön állítható. Használatuk azonban nem kötelező: akár mindhárom méretét is nullázhatjuk, és akkor egyszerűen csak a tartalmi területet fogjuk látni. A margó funkciója, hogy távolságot tartson a vizsgált HTML elemünket befoglaló külső HTML elem tartalmi területének szélétől. Mindig átlátszó (a képen csak az illusztráció miatt van türkiz színe); másképp fogalmazva, a HTML elem nincs hatással a margója területén látható színre vagy képre, ott az őt befoglaló HTML elem háttérszíne vagy háttérképe jelenik meg. (Ilyen befoglaló elem lehet természetesen maga a ‹body› tag is.)

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 13

Ha a bekezdésünket bekeretezzük, okvetlenül használjunk kitöltést, nehogy a szöveg „hozzáérjen" a kerethez, mert az nagyon ronda

 

 

A keret megjelenését három tulajdonság írja le: a vastagsága (border-width), a stílusa (border-style) - egybefüggő, szaggatott vagy pöttyözött vonal stb. - és a színe (border-color). Akit érdekelnek a részletek, tanulmányozza a www.w3schools.com/css/css_border.asp című weboldalon a lehetőségeket. Nincs annál rondább, amikor egy keretezett bekezdésben a szöveg rálóg, „hozzáér" a kerethez - a padding gondoskodik arról, hogy ez ne fordulhasson elő. Szó szerinti fordításban helykitöltést jelent, gyakorlatilag a keret és a tartalmi terület közötti távolság. Szokták szövegeltartásnak vagy belső margónak is nevezni, egyik rosszabb ferdítés, mint a másik. Amúgy is hasznos, ha a stílustulajdonságoknak nem a magyar megfelelőit, hanem a konkrét nevét tanulja meg az ember, ha egyszer azt kell használnia a stíluslapokon. Érdemes tudni, hogy a HTML elemen beállított háttérszín vagy háttérkép-beállítások nemcsak a tartalmi területre, hanem a padding területére is vonatkoznak, tehát a háttér egészen a keretig terjed.

 

 

Kiegészítő: CSS-matematika

Amikor a stíluslapon megadjuk egy HTML elem méretét - a szélességét (width) és magasságát (height) -, valójában a tartalmi területének méretét adjuk meg! Tessék ezt egy kicsit emészteni. Tehát van egy HTML elemünk - a téglalap alakú „doboz" -, amely margó, keret, kitöltés és tartalmi területi részekből épül fel, és mi ezek közül az utóbbinak, a legbelsőnek a méretét adjuk meg a stílusdefinícióban. Ebből az következik, hogy amennyiben a margó, a keret és a kitöltés nincs nullázva, az elem tényleges méretét - amekkora területet a képernyőnkön majd elfoglal - alkotórészei méretének összege adja ki.

 

 

Weboldalkészítő suli #8 - Elemek, osztályok, azonosítók, dobozolás 14

 

 

Na, nézzünk erre egy példát! Vegyünk egy 600 képpont széles és 300 képpont magas bekezdésszöveget, amelyet 50 képpontos margó, 5 képpontos keret és 20 képpontos kitöltés határol minden oldalról. A bekezdés tényleges szélessége tehát: bal margó + bal keret + bal kitöltés + tartalmi terület szélessége + jobb kitöltés + jobb keret + jobb margó = 750 képpont. Ennek megfelelően a magassága 450 képpont lesz.

 

Kezdők és az Internet Explorer 6 gyakran elkövetik azt a hibát, hogy a beállított szélesség- és magasságértékeket veszik a HTML teljes méretének, és abból számolják vissza a margó, a keret és a kitöltés méretét - ez teljesen rossz. Szerencsére az Internet Explorer 6 csak akkor teszi ezt, ha nem szabványos XHTML oldalt próbálunk megjeleníteni benne, de akkor következetesen, úgyhogy erre nagyon figyeljünk oda. Vagy a legjobb, ha egyáltalán nem használunk Internet Explorer 6-ot, és erre figyelmeztetjük utastársainkat is!

 

 

KIVÉVE A GYEVI BÍRÓT!

A dobozmodell a CSS mozgatórugóinak legfontosabbika, ha ennek működését megértjük, szinte nyert ügyünk van. Ez volt a jó hír. A rossz hír az, hogy a dobozmodell nem minden tag esetében érvényes... De azért annyira nem szörnyű a helyzet!

 

Azt már eddig is láttuk, hogy vannak olyan weboldalelemek (HTML tagek), amelyekkel az oldal meghatározó, a többitől jól elkülöníthető részeit írjuk le, gondoljunk például a struktúraépítésre használt ‹div›-ekre vagy a bekezdésszövegekre (‹p›), amelyek, bár állhatnak többen is egy kupacban, mindegyik egy-egy különálló szövegtömb. Ugyanez mondható el a fejlécekről (‹h1›, ‹h2› stb.), a felsorolásokról (‹ol›, ‹ul›, ‹li›) is vagy akár a táblázatokról (‹table›). A szaknyelvben ezeket blokkszintű elemeknek hívjuk, mivel jól elkülönülő tartalmi blokkok hozhatók velük létre. Vegyük észre, hogy ezek az elemek maguk a „dobozok", amelyekről korábban szó volt, így esetükben tökéletesen működik a dobozmodell.

 

A másik csoport, az úgynevezett inline elemek (magyarul talán folytonos elemek), amelyek nem törik meg az oldal folyását, nem alkotnak az előzőekhez hasonló, elkülönülő tartalmi részeket, hanem éppen az adott tartalmi blokkon belül, folytonosan fejtik ki hatásukat. Ilyen például az ‹a›, amely egy bekezdésen belül néhány egymás után következő szót alakíthat át kattintható hivatkozássá, vagy a ‹strong› és az ‹em›, amelyek szintén nagyobb szövegrészekben tehetnek hangsúlyosabbá, kiemeltté szavakat, kifejezéseket. Ugyanebbe a csoportba tartoznak a különböző űrlapmezők, valamint meglepő módon a kép (‹img›) is. Esetükben a dobozmodell nem vagy nem úgy működik, ahogy várnánk, ami - ha belegondolunk - teljesen logikus, hiszen ezek az elemek nem is „dobozok"!

 

Az inline elemeknek nincs klasszikus értelemben vett szélességük és magasságuk. A CSS 2.0 szabvány úgy rendelkezik, hogy a width és height beállítás egyszerűen nincs hatással rájuk - ne is próbálkozzunk vele. A kitöltéssel és a margóval már valamivel jobb a helyzet, ugyanis ezek alkalmazhatók inline elemek esetében is, azonban csak vízszintesen van hatásuk, függőlegesen nincs.

 

A CSS azonban biztosít „átjárást" a két elemcsoport között, mégpedig a display tulajdonsággal, amelynek rengeteg lehetséges értéke van (www.w3schools.com/css/pr_class_display.asp), és ezek közül kettő a block és az inline. Ha egy blokkszintű elem stílusdefiníciójába beírjuk a display: inline szabályt, varázsütésre megváltozik az elem viselkedése, és fordítva természetesen ugyanígy. Nem árulunk el nagy titkot azzal, hogy a későbbiekben mindkettőt használni is fogjuk, mégpedig rendkívül izgalmasak dolgokra.

 

 

 

 

 

 

Hogyan érd el a PC-d tartalmát bárhonnan?

Számos módszer létezik a fájlok eléréséhez másik eszközről.

A tévézés új korszaka

Kötöttségek nélküli műsorválasztás, bárhonnan és bármilyen eszközön elérhető tartalmak, hatalmas választék jellemzi az online videostreaming-szolgáltatásokat.

comments powered by Disqus

Kiadó: Project029 Media and Communications Kft. - Impresszum - Hirdetési ajánlatunk - Adatvédelmi elveink - E3

Ügynökségi értékesítési képviselet: Adaptive Media