CSS3 alapismeretek Bevezetés a CSS-be Mi is az a CSS? A CSS az angol Cascading Style Sheets kifejezés rövidítése, ami magyarul talán egymásba ágyazott stíluslapoknak lehetne fordítani. Hasonlóan a HTML-hez, ez sem programozási, hanem leíró nyelv, amellyel a HTML elemeink megjelenését tudjuk meghatározni, olyan dolgokkal, mint például betűméret, szín, margók, elhelyezkedések, stb. Az egymásba ágyazhatóság pedig azt takarja, hogy több stílust is definiálhatunk, illetve egy stílust több HTML elemre is alkalmazhatunk, amit akár egy újabb stílussal felül is írhatunk. Továbbá a stílusok öröklődnek is a HTML struktúra szerint. Például a tagre beállított betűszínt megörökli minden további elem a dokumentumunkban. Alkalmazási formái, szintaxisa CSS stílusok alkalmazására háromféle módunk van: Közvetlenül a HTML tageken Tudjuk alkalmazni közvetlen a HTML elemeken a style= attribútum megadásával. Például ha egy szöveg színét szeretnénk pirosra állítani, és a méretét 20 pixelre venni: <p style= color:red; font-size:20px; >Ez egy piris szöveg</p> Mint a példában látható, a style attribútumnak egyszerűen csak felsoroljuk, hogy milyen stílusokkal szeretnénk azt ellátni. Egyszerű módszer, de az alkalmazása kerülendő, mert egyrészt nehezen átlátható HTML kódot eredményez egy nagyobb dokumentumnál, másrészt nem tudjuk ezt a stílust több elemre alkalmazni, hanem mindegyikhez meg kell adni ezt az attribútum értéket külön: <p style= color:red; font-size:20px; >Piros szöveg első bekezdés</p> <p style= color:red; font-size:20px; >Piros szöveg második bekezdés</p> <p style= color:red; font-size:20px; >Piros szöveg harmadik bekezdés</p> HTML dokumentum fejlécében Sokkal elegánsabb és jobban is alkalmazható módszer, ha a stílus definíciókat külön írjuk a HTML elemektől. Ehhez az egyik módszer, ha a HTML dokumentumunk fejlécébe tesszük azokat:
<head> <style> p { color:red; font-size:20px; } </style> </head> <p>piros szöveg első bekezdés</p> <p>piros szöveg második bekezdés</p> <p>piros szöveg harmadik bekezdés</p> A fenti példában is ugyanazt érjük el, mint az elsőben láthatót, azaz pirosra állítjuk a paragrafus tagek színét és 20 pixel betűméretet adunk nekik. Viszont ahelyett, hogy külön megadnánk ezt minden tagnek, egyszerűen hivatkozunk mindegyikre, ezáltal mindegyiknek megadva ugyanazt a stílust. Ebben az esetben a stílus definíciókat a <style> és </style> tagek között kell elhelyezni, amiket pedig a HTML dokumentumunk fejlécébe, azaz a <head> </head> között kell elhelyezni. Mivel stílus definícióban csak egy p szelektort (ezekről részletesebben is szót ejtünk még) adtunk meg, ez azt fogja jelenteni, hogy érvényes lesz a HTML dokumentumunk minden p tagjére. Fontos, hogy a szelektor után, magukat a stílus paramétereket { } jelek között kell megadnunk és ; -vel kell őket lezárni. Külső fájlként. A második megoldás már sokkal esztétikusabb, és mint látható, jobban is alkalmazható volt az elsőnél, azonban egy összetettebb weboldalnál ez sem a legpraktikusabb. Hiszen ha több HTML fájlból áll az oldalunk, akkor mindegyik fejlécébe el kell helyeznünk ezeket a stílusokat. Ez nagyon nehézé teszi a későbbi szerkesztést, hiszen ha valamin változtatni szeretnénk, akkor minden fájlban át kell írnunk, amit szeretnénk. Szerencsére lehetőségünk van külön CSS fájlok alkalmazására, amire aztán minden HTML fájlból hivatkozhatunk. Hogy is valósítható ez meg? Nagyon egyszerűen: <head> </head> <link rel="stylesheet" href="style.css" /> A példában látható <link> taggel tudunk külső fájlra hivatkozni, ami a mi esetünkben egy stylesheet, azaz stíluslap. A href= paraméternek pedig a CSS fájlunk nevét és elérési útját kell megadnunk. Mivel ebben a példában a style.css fájlunk azonos mappában foglal helyet pl. a
tárhelyünkön, mint a html fájlunk, amiből hivatkozunk rá, így elérési útvonalat itt most nem adunk meg, ez egyértelműen azt jelenti, hogy az adott css fájl azonos mappában található a hivatkozó html fájllal. Magába a style.css-be pusztán a CSS kódot kell elhelyeznünk. Tehát ha a fenti példákat szeretnénk így megvalósítani, akkor a fájlba csupán ennyi kerül: p { color:red; font-size:20px; } Ez a legjobban alkalmazható megoldás a CSS használatára. Könnyen szerkeszthető, hiszen minden definíciót egy fájlban látunk, és ezt alkalmazhatjuk akár több száz HTML dokumentumra is, ami módosításnál nagyon megkönnyíti a dolgunkat. A tananyag további részében mi a harmadik, azaz a külső fájlos megoldást használjuk. Azonban az első két példának is van létjogosultsága, csak többnyire speciális esetben láthatunk példát az alkalmazására. Szelektorok A szelektorok segítségével tudunk hivatkozni a HTML elemekre, melyeknek a stílusát szeretnénk definiálni. A HTML elemeket négyféle szelektorral tudunk kiválasztani: Minden tag kiválasztása Lehetőségünk van a HTML dokumentum összes elemének kiválasztására a * karakter használatával. Például: * { color:red; } Hatására minden HTML tagben elhelyezett szöveg piros lesz. Ezt azonban nagyon ritkán alkalmazzuk. Tag neve alapján Az előző részben ezzel már kicsit megismerkedtünk. Tudunk taget kiválasztani, pusztán a neve megadásával: p { color:red; } h1 { color:blue } Ez a HTML dokumentum összes p és h1 elemére hivatkozunk.
Leszármaztatás alapján Ha bizonyos HTML tageken belüli tagekre szeretnénk hivatkozni, azt is egyszerűen kivitelezhetjük: p span { color:red } table h2 { color:blue } Ez esetben az első definíció minden span tagre vonatkozik, ami egy p tagben van, még a második minden olyan h2 tagre, ami egy táblázatban foglal helyet. Ezt tetszőlegesen bármilyen mélységig tudjuk alkalmazni, ha szeretnénk szűkíteni a stílus alkalmazásának körét. Például: table form p span { color:red; } Class vagy id attribútumok alapján A HTML tageket lehetőségünk van ellátni osztályokkal és egyedi azonosítókkal, amikre aztán a CSS-ünkben hivatkozni tudunk. A tagekhez osztályt a class= attribútummal tudunk rendelni, még azonosítót az id= attribútummal. Osztály és azonosító között egy fontos különbség van, hogy még egy tag rendelkezhet több osztállyal, vagy több tag egyazon osztállyal, addig azonosítóból csak egy lehet egy tagnek, illetve egy azonosító csak egyszer szerepelhet a HTML fájlunkban. Egy egyszerű példák a szelektorok használatára A HTML rész, amely a HTML dokumentumunkban foglal helyet: <h1 id= nagy-zold >Egy nagy, zöld színű cím</h1> <p class= piros >Piros betűs szöveg</p> <p class= piros nagybetus >Nagy, piros betűs szöveg</p> A CSS rész, amely egy külső CSS fájlba, vagy a HTML fájlunk fejlécébe kerül: #nagy-zold { font-size:40px; color:green;}.piros { color:red; }.nagybetus { font-size:20px; } Mint a példában látható <h1> tagnek azonosítót adtunk. Ez csak az övé, máshol nem használhatjuk a dokumentumban. CSS-ben a # jelel tudunk hivatkozni a nevére, ez jelöli, hogy ő egy azonosító szelektor. A p tageket osztályokkal láttunk el. Ezeket akár több elemre is lehet használni és szóközzel elválasztva bármennyit megadhatunk. A példában minden piros osztályú <p> taget piros szövegszínre állítottunk, még az utolsó <p> taget nagybetűsre is vettünk. További használati példák: <h1 class= piros >Piros betűs cím</h1>
<p class= piros >Piros betűs szöveg</p> <p class= kek >Ez pedig egy <span class= vastag >kék betűs szöveg</span></p> h1.piros { color:red } Csak azokat a <h1> tageket választja ki, amelyek rendelkeznek.piros osztállyal. Tehát megadjuk a tag nevét, és hozzáírva az osztályát..piros,.kek { font-size:20px; } Vesszővel való felsorolással több szelektornak is megadhatjuk ugyanazt a stílust. Például minden.piros és.kek szelektorú elem legyen 20 pixel méretű. Ugyanezt alkalmazhatjuk tag felsorolással is: h1, p { } h1, p span.vastag { font-weight:bold; } Minden <H1> tag és olyan span elem amely rendelkezik a.vastag osztállyal és egy <p> tagben van. h1 { color:green; }.piros { color:red } Első definícióval beállítunk minden <h1> tagnek zöld szint. Másodikban pedig minden.piros osztálynak egy piros szint. Mivel a <h1> tag is rendelkezik a.piros osztállyal, így ez a zöld beállítást felül fogja bírálni. Viszont azok a <h1> elemek, amelyek nem rendelkeznek.piros osztállyal, maradnak zöldek. Pszeudo osztályok A pszeudo osztályokkal olyan elemeket, vagy állapotokat tudunk kiválasztani, amiket azonosítóval, vagy osztállyal nem. Ilyen például egy link rámutatáskor, vagy egy lista első, vagy legutolsó eleme. Például: a { color:red; } a:hover { color:blue; } Ezzel megadtuk, hogy minden link a HTML dokumentumunkban piros színű legyen, viszont ha rámutatunk, akkor kékre változzon. A pszeudo osztályokat mindig : -al kezdjük, ez utal arra, hogy ő nem egy sima, hanem pszeudo szelektor. Ugyanúgy összefűzhetjük egy láncba, mint sima szelektorokat: p.nagybetus a:hover { color: blue; } Tehát: Minden link legyen rámutatásra kék, amely egy olyan <p> elemben van, amelynek az
osztálya nagybetűs. Leggyakrabban használt pszeudo osztályok: :hover - Rámutatás esemény. Bármilyen elemre használható, nem csak linkekhez. :first-child - Valaminek az első eleme :last-child - Valaminek az utolsó eleme :nth-child(n) - Valaminek az n-edik eleme Tegyük fel, hogy van egy 5 elemből álló listánk: <ul class= lista > <li>lista első eleme</li> <li>lista második eleme</li> <li>lista harmadik eleme</li> <li>lista negyedik eleme</li> <li>lista ötödik eleme</li> </ul> Ha csak a lista első elemét szeretnénk színezni, akkor a :first-child szelektorral tudjuk azt elérni:.lista li:first-child { color: red; } Ha az utolsó elemet szeretnénk színezni:.lista li:last-child { color: red; } Ha pedig mindkettőnek egy stílust szeretnénk adni:.lista li:first-child,.lista:last-child { color: red; } Továbbá az :nth-cild segítségével lehetőségünk van bármelyik, vagy egy minta szerint, több elem kiválasztására: li:nth-child(3) { } - a lista elemekből a harmadikat fogja kiválasztani li:nth-child(2n) { } - a lista elemekből minden másodikat fogja kiválasztani li:nth-child(2n+3) { } - a lista elemekből minden másodikat választja ki, a harmadik elemtől kezdve li:nth-child(odd) { } - n paraméterként használhatjuk az odd (páratlan) és even (páros) szavakat A fentieket alkalmazhatjuk táblázat soraira, celláira, listákra, és tulajdonképpen minden olyan tagre, amiből több van, mint egy.