<html>
<head>
<title>
Ez az első HTML-em!
</title>
</head>
<body>
Ez a doksi teste.
<p style="color: red;">
Ez az első paragrafus.
Hiába van ez előtt soremelés, ez nem látszik.
</p>
<p>
Ez a második bekezdés, hejj, de jó!
</p>
<script>
alert("itt vagyok");
</script>
</body>
</html>
Az egyik paragrafus betűszíne piros, a stílusát "inline", vagyis helyben állítottuk be. De lehet ezt másképp is, előre is megadhatjuk, hogy a html-ben definiált elemek hogyan nézzenek ki (a kinézet szempontjából hogyan viselkedjenek).
Azt, hogy melyik elemre vonatkozik a stílus, azt "inline" módon megadva egyértelműen látszik. De ha előre akarjuk megadni, akkor a html elemet (elemeket) meg kell határozni, azonosítani kell, vagyis ki kell választani azokat az elemeket, amikre vonatkozik a stílusdefiníció. Ezt CSS kiválasztónak nevezzük (selector).
Legyen most ez a html fájlunkban:
<html>
<head>
<title>
Ez az első HTML-em!
</title>
<style>
p {color:green;background:yellow}
</style>
</head>
<body>
Ez a doksi teste.
<p style="color: red;">
Ez az első paragrafus.
Hiába van ez előtt soremelés, ez nem látszik.
</p>
<p>
Ez a második bekezdés, hejj, de jó!
</p>
<p>
Ez a harmadik.
</p>
<script>
alert("itt vagyok");
</script>
</body>
</html>
Amint láthatod, a <head> részbe tettem egy <style> blokkot. Ebben CSS kiválasztókkal lehet megadni, hogy mire vonatkozzon a stílus. Simán a "p" azt jelenti, hogy az "összes <p> elem a html dokumentumban". Megadtuk, hogy legyen mindnek a szövege zöld, a háttere sárga. A böngészőben megnézve ezt kapjuk azonban:
A paragrafusok háttere mindnek sárga lett, de a szövegszíne az elsőnek piros. Miért? Mert az inline megadott stílus "erősebb" definíció. Általában az az elv, hogy minél tágabb a kiválasztó hatásköre, annál gyöngébb a hierarchiában.
Sokféle css kiválasztó van, tanulmányozhatod őket a neten, keress rá a css selector kifejezésre. A stílusmegadással nagyon klassz dolgokat lehet csinálni, nemcsak statikus dolgokat, hanem felhasználói interakciókat is lehet kezelni (tipikus a hover esemény, amikor megváltozik a stílus ha egy elem fölé viszik az egérkurzort), vagy akár animációt is lehet csinálni. CSS stílusok megadásával torzítani is lehet az elemek megjelenítését (nagyítani, kicsinyíteni, elforgatni -- akár 3D-ben), stb, stb. Ha van kedved, nézz utána.
Egy web designer-nek a css selector-okat és a stílusmegadások lehetőségeit jól kell ismernie, de most nem ez a célunk.
Egy szelektort azonban mindenképp megnézünk még, próbáld ki ezt:
<html>
<head>
<title>
Ez az első HTML-em!
</title>
<style>
p {color:green;background:yellow}
#harmadik_p {color:white;background:black;font-weight:bold}
</style>
</head>
<body>
Ez a doksi teste.
<p style="color: red;">
Ez az első paragrafus.
Hiába van ez előtt soremelés, ez nem látszik.
</p>
<p>
Ez a második bekezdés, hejj, de jó!
</p>
<p id="harmadik_p">
Ez a harmadik.
</p>
<script>
alert("itt vagyok");
</script>
</body>
</html>
A harmadik <p> blokk megváltozott, gondolom ki tudod találni, hogy mit jelent a # kiválasztó.
Az előző fejezetben láthattad, hogy a html blokkok stílusa javascriptből is lekérhető, megváltoztatható.
A firebugban ha ezt beírod:
document.body.firstChild.nextSibling.style.color
akkor azt kapod, hogy "red".
Ezen a módon elérhető (kiválasztható) javascriptben egy bizonyos elem, de azért érzed, hogy ez így nem tökéletes. Ha bonyolultabb a dokumentum, nehézkes elérni a documentum objektumból kiindulva firstchild-ok és nextsiblingek sorával elérni a célunkat, ezért találták ki az "id" tulajdonságot, ami egyértelműen azonosít egy elemet.
A harmadik paragrafusnak adtam a harmadik_p azonosítót. Ez majdnem tetszőleges név lehet, azonban egy szabályt mindenképp be kell tartani: az egész dokumentumban az id azonosítónak egyedinek kell lennie.
A CSS-ben a # kiválasztóval lehet id szerint megcímezni a html elemet, a javascriptben a documentum objektum getElementById függvényével lehet ezt megtenni.
(Közbevetőleg jegyzem meg, hogy teljesen logikátlannak tartom, hogy a CSS szelektorok még csak meg sem próbálnak hasonlóak lenni a javascript-es kiválasztási módszerekhez, de ez van. Másrészt az is idegesítő, hogy a javascriptben a függvény és változónevek kisbetű-nagybetű érzékenyek, míg a html-ben ez nem számít. Szóval a getelementbyid nem fog működni, de a <p sTyle="COLOR:Red"> haha </P> teljesen tökéletes.)
Írd be ezt a firebug konzolba:
document.getElementById("harmadik_p")
Láthatod, hogy szépen megtalálja a kért <p> elemet, kiválasztásra kerül a DOM-ból.
Azonban ez furcsa:
document.getElementById("harmadik_p").style.color
...ugyanis ez egy üres sztringet ad vissza.
Miért ad vissza üres sztringet, a <style> részben egyértelműen megadtuk, hogy a harmadik_p azonosítójú elem color-ja legyen white ?!?
Valóban, azonban a getElementById DOM-ban keres, nem a stílust adja vissza, hanem az elem definíciójának kívánt elemét. Az első paragrafusban a html elem része a style.color, a harmadikban azonban ez a definíció a <head> rész <style> szekciójának egyik sorában van, tehát ha javascriptből a DOM struktúrában ott kell kotorászni, hogy elérjük (ezt most nem mutatom meg, de lehetséges, a <stlye> elem is a DOM része, és ha benne megváltoztatsz egy CSS kiválasztót, az az egész doksira ugyanúgy érvényes lesz -- ezzel is el lehet játszani, ha érdekel, segítek)
Ettől még ez működni fog:
document.getElementById("harmadik_p").style.color="grey"
Ennek a hatására a html elembe íródik bele a stílusdefiníció (mint az inline stílusban megadott esetben), így utólag innen kiolvasható.
Feladat: játssz el a firebugban a stílusokkal, próbáld ki például az opacity-t!
Nincsenek megjegyzések:
Megjegyzés küldése