Web programozás jegyzet 0.1 verzió Pál László Sapientia EMTE, Csíkszereda 1
HTML alapok 1. A HTML nyelvtana A HTML jelölőnyelvben a megjelenítendő tartalomba címkéket (angolul tag=címke) helyezünk el, melyek megszabják, hogy a böngészők hogyan értelmezzék a megjelölt tartalmi részeket. A címkéket a < és > jelek közé kell zárnunk. Egy-egy utasítás hatását (néhány kivételtől eltekintve) a záró utasításpárja szünteti meg (</ >). A HTML utasítás a szabvány szerint lehet kisbetűs és nagybetűs is, de csupa kisbetűt célszerű használni. A címkének lehetnek jellemzői ( attribute=jellegzetes tulajdonság ) és a jellemzőknek értékei ( value=érték ): <címke jellemzı= érték > tartalom </címke> 2. A HTML oldal szerkezete Minden HTML oldal 3 fő részből áll: a) dokumentumtípus meghatározás b) fej c) törzs a) A dokumentumtípus meghatározás: A HTML kódot az alkalmazandó dokumentumtípus (DOCTYPE, vagy DTD) megadásával kezdjük. Ezzel informáljuk a böngészőprogramot, hogy milyen szabvány szerint készítettük a dokumentumot, hogy az megfelelő módon tudja megjeleníteni. Ha elhagyjuk a dokumentumtípus megadást azzal azt kockáztatjuk, hogy az oldal nem jelenik meg megfelelően a böngészőben. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>cím</title> </head> <body> Törzs 2
</body> </html> Ugyanez HTML 5-ben: <!doctype html> <html> <head> <title>cím</title> </head> <body> Törzs </body> </html> b) A fej (head=fej) az adott HTML-fájlra vonatkozó meta-adatokat tartalmazza. A metaadatok a fájlal kapcsolatos különféle jellemzők és utasítások tárolására szolgálnak. Néhány metaadatnak saját címkéje van ( pl. title=cím, link=kapocs, style=stílus ) a többiek a meta címke jellemzőjeként adhatók meg A fej HTML kódolása: <head> karakterkészlet megadása weblap címe külsı stíluslap csatolása beágyazott stílus </head> Karakterkészlet megadása (charset): Ahhoz, hogy a weblapunk a böngészőkben karakterhelyesen jelenjenek meg, meg kell adnunk, hogy annak szerkesztésekor milyen karakterkódolást használtunk. Az ISO 8859-2 a közép-kelet európai, így a magyar karakterkészletet is definiálja. Unicode a különböző írásrendszerek egységes kódolását és használatát leíró nemzetközi szabvány. <meta http-equiv= Content-type Content= text/html; charset=iso- 8859-2 > <meta http-equiv= Content-type Content= text/html; charset=utf-8 > A weblap címének megadása: A cím tartalmazhat magyar ékezetes szavakat. A tartalmat jól kifejező cím segíti a keresők 3
helyes találatát. A cím a böngésző címsorában, ill. a keresők találatainak felsorolásában jelenik meg. Külső stíluslap csatolása: <link rel= stylesheet href= fajlnev.css > <!doctype html> <html> <head> <title>az elsı weblapom</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="fajlnev.css"/> </head> <body> Szép napot! </body> </html> 3. Alap HTML címkék A HTML elemeket általánosan két nagy kategóriára bonthatjuk, amelyek megfelelnek az elem által megjelenített tartalom és struktúra típusainak ezek a blokk szintű és az inline elemek. A blokk szintű (block level) elem egy felsőbb szintű elemet jelent, amely általában a dokumentum struktúráját jelzi. Ezek olyan elemek, amelyek egy új sort kezdenek, vagy elválasztanak valamit a korábbi tartalomtól. A leggyakoribb blokk szintű elemek a bekezdések (paragrafusok), listaelemek és táblázatok. Az inline (azaz soron belüli) elemek ezzel szemben azok az elemek, amelyeket a blokk szintű elemek tartalmaznak, és csak a dokumentum kis részeit fogják közre, nem teljes bekezdéseket vagy csoportokat. Egy inline elem nem fog új sort generálni a dokumentumban. Ezek azok az elemek, amelyek egy bekezdés szövegén belül találhatóak. A leggyakoribb inline elemek a hiperhivatkozások, a kiemelt szavak vagy mondatok és a rövid idézetek. a) Bekezdés (paragraph) <p> </p> A <p> tag segítségével a szöveget bekezdésekre oszthatjuk. Az adott bekezdés tartalmát a <p> és </p> elemek közé kell tenni. <p>ez alapértelmezett (balra igazított) bekezdés.</p> <p>ez pedig egy újabb bekezdés </p> 4
A böngészők a bekezdéseket is blokkszintű elemként kezelik, azaz külön sorban kezdődnek és az utánuk következő elem automatikusan új sorba kerül. Szövegbehúzás nincsen, két bekezdés között egy üres sort hagy a böngésző. b) Sortörés <br> vagy <br/> Amennyiben a szövegen belül egy sortörést szeretnénk elhelyezni, a <br> elemet kell használnunk. Ez is egy olyan tag, amelynek nincs záró párja. Ez az elsı sor<br>ez pedig a második c) Címsor (heading) <h1> </h1>, stb. A címsorok (heading) az oldalak logikai felosztását teszik lehetővé. Például h1 az oldal címe, h2 egy alcím, h3 egy mélyebb szintű alcím és így tovább. A HTML oldalak esetén 6 címsort használhatunk. <h1>1-es címsor </h1> <h2>2-es címsor </h2> <h3>3-as címsor </h3> <h4>4-es címsor </h4> <h5>5-ös címsor </h5> <h6>6-os címsor </h6> Egy címsor a HTML szerint blokkszintű elem, azaz külön sorban kezdődik és az utána következő elem automatikusan új sorba kerül. A böngészők alapértelmezett beállítása szerint félkövér betűvel van szedve, a betűméret a h1-nél a legnagyobb, majd a szám növekedésével ( h2, h3, ) egyre kisebb. Az ettől eltérő megjelenítést CSS-el kell létrehozni. d) Vízszintes vonal (horizontal line) <hr> A dokumentum további tagolását teszi lehetővé. Ez az elsı sor<hr>ez pedig a második 5
e) Megjegyzések a kódban A megjegyzés címke <!--.--> által befoglalt rész a forráskódban benne marad, de a böngésző nem jeleníti meg, nem veszi figyelembe. <!-- Ez itt egy szöveg, amely nem jelenik meg a böngészıben--> Másik alkalmazása a megjegyzésnek, ha ideiglenesen ki akarunk hagyni részeket a kódolásból. A megjegyzés címkében foglalt rész így olyan, mintha ott sem lenne, de nem kell törölni, és bármikor ismét felhasználható vagy ismét figyelmen kívül hagyható, ha a megjegyzést kivesszük a kódolásból vagy újból beírjuk. 4. Listák használata <ol><ul><li> A HTML nyelv lehetőséget ad arra, hogy különböző listákat (felsorolás, sorszámozott, meghatározás) hozzunk létre. a) Egyszerű felsoroláslista (unordered list) <ul> </ul> Egyszerű felsorolás esetén az <ul> és </ul> tagek közé kell elhelyeznünk a listaelemeket, amelyeket az <li> (list item) címkék vezetnek. <ul> <li>kenyér</li> <li>kávé</li> <li>tej</li> <li>vaj</li> </ul> Eredmény: kenyér kávé tej vaj Megjegyzés: a CSS-ben lecserélhetjük a pontokat néhány más beépített típusra. b) Sorszámozott lista (ordered list) <ol> </ol> 6
Sorszámozott lista esetén az <ol> és </ol> tagek közé kell elhelyeznünk a listaelemeket. <ol> <li>elsı</li> <li>második </li> <li>harmadik </li> </ol> Eredmény: 1. Első 2. Második 3. Harmadik A rendezett listákat többféle számozással és alfabetikus rendszerrel is jelölhetjük. Az alapértelmezett jelölés a böngészőkben a decimális számozás, de további lehetőségek is vannak: Betűk o o o ASCII kisbetűk (a, b, c ) ASCII nagybetűk (A, B, C ). Klasszikus kis görög betűk: (?, ß,? ) Számok o Decimális számok (1, 2, 3 ) o Decimális számok nullával kiegészítve (01, 02, 03 ) o o o o Kisbetűs római számok (i, ii, iii ) Nagybetűs római számok (I, II, III ) Tradicionális grúz számozás (an, ban, gan ) Tradicionális örmény számozás (mek, yerku, yerek ) A lista stílusát ebben az esetben is CSS-sel változtathatod meg, ha szükséges. Listák egymásba is ágyazhatók, pl. az egyes listaelemekbe újabb al-listákat helyezhetünk. Számozott és számozatlan listák is egymásba foglalhatók. <ol> <li>kenyér <ol> <li>fehér kenyér</li> <li>barna kenyér</li> </ol> </li> 7
<li>tej <ol> <li>zsíros tej</li> <li>zsírszegény tej</li> </ol> </li> <li>vaj <ol> <li> sózott vaj</li> <li> nem sózott vaj</li> <li> margarin</li> </ol> </li> </ol> c) Meghatározás (vagy definíciós) lista (definition list) <dl><dt><dd> Meghatározás lista esetén az <dl> és </dl> tagek közé kell elhelyeznünk a listaelemeket, amelyek a fogalom megadásából (<dt> tag vezeti be) és a magyarázatából (<dd> tag vezeti be) állnak. Egy egyszerű definíciós lista a kifejezésekkel és a definíciókkal így néz ki: <dl> <dt>kifejezés</dt> <dd>a kifejezés definíciója</dd> <dt>kifejezés</dt> <dd>a kifejezés definíciója</dd> <dt>kifejezés</dt> <dd>a kifejezés definíciója</dd> </dl> Ez a következőképpen jelenik meg: Kifejezés A kifejezés definíciója Kifejezés A kifejezés definíciója Kifejezés A kifejezés definíciója 8
5. Táblázatok használata <table> </table> Hosszú időn keresztül a táblázatok a weboldalak formázásának egyik fő eszközei voltak, de ennek az időnek a CSS elterjedése véget vetett. Táblázatokat a <table> tag segítségével lehet létrehozni. A vízszintes sorokat egyenként a <tr> </tr> páros címke (table row), a cellákban lévő adatokat egyenként a <td> </td> (table data), páros címke definiálja. A tábla cellái szöveget, képet, bekezdést, listát, űrlapokat, újabb táblázatokat is tartalmazhatnak. <table border="1"> <tr> <td>1. sor, 1. cella</td> <td>1. sor, 2. cella </td> </tr> <tr> <td>2. sor, 1. cella </td> <td>2. sor, 2. cella </td> </tr> </table> Eredmény: Fontosabb más tábla elemek: o <th> - ez az elem jelöli a táblázat oszlopainak a fejlécét o <caption> - ezzel az elemmel adhatsz egy címet a táblázat adatainak <table border="1"> <caption>ez egy táblázat</caption> <tr> <th>1.fejléc</th> <th>2.fejléc </th> </tr> <tr> 9
<td>1. sor, 1. cella</td> <td>1. sor, 2. cella </td> </tr> <tr> <td>2. sor, 1. cella </td> <td>2. sor, 2. cella </td> </tr> </table> Eredmény: Cellák egyesítése a colspan és rowspan attribútumok segítségével: <table border="1"> <tr> <th>név</th> <th colspan="2">telefon</th> </tr> <tr> <td>bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> Eredmény: <table border="1"> <tr> <th>név</th> <td>bill Gates</td> </tr> <tr> <th rowspan="2">telefon</th> 10
<td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> Eredmény: Nagyméretű táblázatoknál az áttekinthetőséget segítik a thead, tbody, tfoot címkék. Ebben az esetben a táblázat formázása is könnyebb CSS-ben. Thead táblázatfej Tbody táblázattörzs Tfoot táblázat lábléce <table border="1"> <thead> <tr> <th>month</th> <th>savings</th> </tr> </thead> <tfoot> <tr> <td>sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>january</td> <td>$100</td> </tr> <tr> <td>february</td> <td>$80</td> </tr> 11
</tbody> </table> 6. Hivatkozások (Linkek) <a> </a> A hiperhivatkozásokkal (röviden link) hozhatunk létre kapcsolatot a különböző oldalak (objektumok) között. A böngészők a linkeket általában aláhúzással, illetve eltérő színnel jelölik. Oldalon belüli hivatkozásokat is létrehozhatunk, az ott elhelyezett "könyvjelzőre". Az <a> (anchor = horgony) címke paraméterei: o href webcím (URL), itt kell megadnunk a hivatkozás webcímét. o Szintaxis: <a href="url">szöveg, kép</a> o target A célkeret neve, ahova az oldalt be akarjuk tölteni. o Értékei: _blank, _self, _top, _parent o name nevet adhatunk a hivatkozásnak, így egy "könyvjelzőt" hozhatunk létre. o Szintaxis: <a name="cimke">szöveg</a> o Hivatkozás szintaxisa egy könyvjelzőre: <a href="#cimke">szöveg</a> a) Egy másik webhelyre hivatkozás esetén a kódolás: <a href= URI >szöveg és/vagy kép</a> <a href="http://www.sapientia.ro/">a Sapientia honlapja</a> b) Azonos webhelyen belüli másik weblapra hivatkozás esetén: <a href= fajlnev.html >szöveg és/vagy kép</a> Alapértelmezetten a hivatkozott weboldal tetejére történik az ugrás. c) Ha az oldalon belülre, egy kiválasztott részhez kívánunk ugrani, akkor a kiválasztott részhez egy névvel ellátott horgonyt ( name jellemzővel ellátott a címkét ) kell kódolni: <a name="elol">szöveg</a> <a href="#elol"> Ugrás az oldal elejére</a> 7. Képek beillesztése a weboldalra 12
Állóképet az <img> tag segítségével helyezhetünk el az oldalon. Használható képformátumok: GIF, JPG, PNG. A kép inline elem (elhelyezkedése folyamatosan, az előtte lévő elemet követően történik, ill. a következő elem folytatólagosan követi), alapértelmezetten nincsen kerete. Ha HTML-ben önállóan kívánjuk pozícionálni, akkor vagy új paragrafus elembe, vagy egyéb tároló elembe kell helyezni. Az <img> tag fontosabb paraméterei: o src - itt adhatjuk meg a kép webcímét (kötelező jellemző) o alt - képet helyettesítő szöveges információ. Csak akkor látszódik, ha a kép nem jelenik meg ( nem töltődik le, nem érhető el, stb. ), o width - a kép szélessége képpontokban o height - a kép magassága képpontokban. Példák: <p>ez a kép <img src="logo.jpg"/> a Sapientia logoja.</p> <p>ez a kép <img src="logo2.jpg" alt= Sapientia logo /> a Sapientia logoja.</p> <p>ez a kép <img src="logo.jpg" height="50px"/> a Sapientia logoja.</p> 8. Logikai (Tartalmi) formázás A HTML címkék egy csoportja, melyeknek korábban a formázásban volt szerepe, a CSS alkalmazása óta olyan módon használatos, hogy bár a megjelenítésre is hatnak, tartalmi okok miatt használják őket, és a végső formázást továbbra is CSS-el lehet előállítani. a) Rövid idézet: <q> </q> <p>a világ egyik legismertebb idézete a Hamlet-ból a <q>lenni, vagy nem lenni, ez itt a kérdés.</q></p> b) Hosszabb idézet: <blockquote> </blockquote> A böngészők idézőjel nélkül, mindkét oldali behúzással, előtte és utána térközzel, blokkszintű elemként jelenítik meg a idézetblokkot. <blockquote> Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet </blockquote> c) Dőltbetűs megjelenítés: <i> </i> 13
<p><i>ez egy dılt betős szöveg</i></p> d) Címhivatkozás: <cite> </cite> Nem szerzőre, hanem műre - könyvre, újságra, versre, dalra, színdarabra, másik forrásra - lehet így hivatkozni. <p>a világ egyik legismertebb idézete a <cite>hamlet</cite>-ból a <q>lenni, vagy nem lenni, ez itt a kérdés.</q></p> e) Kulcsszó kiemelés: <b> </b> A böngészők alapértelmezetten félkövér betűt használnak ebben az esetben. <p>a digitális <b>videokamerák</b> egyre növekvı hányadban a Full HD felbontást alkalmazzák.</p> f) Tartalmi kiemelés, kihangsúlyozás: <strong> </strong> ( strong= erős kiemelés ) és <em> </em> ( emphasis=hangsúly) A böngészők a strong esetében félkövér betűkkel, az em esetén dőltbetűvel jelenítik meg a jelölt szavakat. <p>a medencébe ugrálni veszélyes és <strong>szigorúan tilos!</strong></p> g) Előre formázott szöveg: <pre> </pre> A közéjük zárt szöveg pontosan annyi szóközzel, pontosan annyi sorban és olyan állapotban fog a dokumentumban megjelenni, mint ahogy azt a HTML fájl tartalmazza. <pre> Este van, este van ki-ki nyúgalomba! Feketén bólintgat az eperfa lombja, zúg az éji bogár, nekimegy a falnak, nagyot koppan akkor, azután elhallgat. </pre> Írta: Arany János 9. Különleges karakterek (karakter entitások) 14
A HTML dokumentum tartalmának kialakítása során a foglalt karakterek ill. a billentyűzetről nem, vagy nehezen elérhető különleges karakterek esetében un. karakter entitásokat (character entity) kell alkalmazni, ami az adott karakter/szimbólum/jel kódolt megadását jelenti. Ilyen foglalt karakterek például azok amellyel tagolunk egy weboldalt. Ilyen a kisebb mint jel: <. Nagyobb mint jel: >, idézőjel, & és de előfordulhatnak más karakterek is amit valamiért szeretnénk különleges karakterként megadni. Billentyűzetről nem (vagy nehezen) bevihető különleges karakterek: görög betűk, pénznemek (euro, yen, font, cent) matematikai szimbólumok (mínusz, végtelen, gyök, hatványkitevő, összesen, közel egyenlő, azonos), stb. A különleges karaktereket a & karakter vezeti be, és ; karakter zárja. A különleges karaktereknek van egy kódjuk, ami egy szám. A legtöbbnek azonban neve is van. A & és a ; karakterek közzé ezt a kódot vagy nevet kell írnunk. karakter entitás szám entitás név angol megnevezés < < < ( less-than ) > > > ( greater-than ) " " ( quotation mark ) & ' & ( ampersand ) ( copyright ) ( registered trademark ) ( trademark ) ( degree ) ( euro ) ( cent ) ( non-breaking space ) Megjegyzés: a nem törhető szóköznek (non-breaking space) nincsen megjelenési formája - az a funkciója, hogy több szóból álló kifejezés/információ esetén a szavak közé helyezve megakadályozza azt, hogy a sor végén a böngésző a kifejezés/információ közben törhesse meg a sort, hanem egy sorban, sortörés nélkül tartja egyben azt A bekezdést <p> és </p> tagek közé kell írni. 15
Stíluslapok használata (CSS- Cascading Style Sheets) 1. Bevezető A CSS az angol Cascading Style Sheets kifejezés rövidítése, jelentése rangsorolt stíluslapok. A stíluslapot egy szöveges fájlban kell megírni, amit.css kiterjesztéssel kell elmenteni. A stíluslap nem más, mint kijelölők (selector) és meghatározásblokkok (declaration) felsorolása. A meghatározás két részből áll: tulajdonságból (property) és értékből (value). kijelölı { tulajdonság1: érték1; tulajdonság2: érték2; tulajdonság3: érték3;... A kijelölő egy címkét jelöl ki a HTML dokumentumban, és erre a kijelölt címkére vonatkozik a formázás. h1 { color: red; a) Mértékegységek Méretek megadásakor számos mértékegység áll rendelkezésünkre, beszélhetünk abszolút és relatív értékekről. A mértékegységet mindig közvetlenül a szám után kell írnunk, minden elválasztó nélkül. Ha nem egész számot szeretnénk használni, akkor tizedespontot kell használnunk. a.1. Relatív mértékegységek: px, em, ex és a százalék px: A pixelben, azaz képpontban megadott értékek a megjelenítő egységtől függenek, általában egy konkrét képpont méretét jelölik em: Ez a mértékegység az adott elemnél (vagy szülő eleménél) felhasznált betűtípus betűméretéhez viszonyított értéket jelenti. Amennyiben a dokumentumhierarchia legfelső elemének betűmérete is ebben a mértékegységben van megadva, úgy a legfelső elem betűmérete az alapértelmezett font-size kiindulási értéke. Alapértelmezett esetben, ha a dokumentum gyökerében 16
használjuk ezt a méretet, 16 pixelt szokott jelenteni (böngésző beállításoktól függően). Egy lehetséges érték például az 1.2em. ex: Az ex szintén egy relatív értéket jelöl, és hasonlít az em-hez, azzal a kivétellel, hogy ez nem az adott betűkészlet magasságához viszonyított méretet, hanem a betűkészlet kis x betű magasságát jelöli (bár azoknál a betűkészleteknél is definiálva van, ahol nem létezik x betű). Általában a böngészők az értékét egyszerűen az em felének veszik, így alapesetben általában 8 pixelnyi méretet jelöl. Százalék: Mindig relatív értéket képeznek valamely más értékhez viszonyítva, a kérdés csak az, hogy éppen milyen értéket vesznek alapul. Ez általában a leglogikusabb érték, de hogy egyértelmű legyen, minden tulajdonságnál, ahol használhatunk százalékos megadást, definiálva van, hogy mihez képest értendő. Egy lehetséges értéke az 50%. a.2. Abszolút mértékegységek Az abszolút mértékegységek neve onnan ered, hogy elvileg minden esetben a szemlélő számára ugyanakkora méretet jelentenek. Az mm a milliméter rövidítése, egy példa a használatára: 10mm. Az in az inch (=col, =hüvelyk) méretet jelöli, azaz 25.4 millimétert. Egy lehetséges megadása: 2in. A cm a centimétert takarja, mely mint köztudott, 10 mm-ert takar. A megadása nem tér el a korábbiaktól: 1cm. Most jönnek az érdekesebb mértékegységek, ezek közül az egyik a pt, mely a "pont" rövidítése. A pont tipográfiai mértékegység, egy pont 1/72 hüvelyket jelöl. Gyakran keverik össze a pixellel, pedig nem sok közük van egymáshoz. Egy példa a használatára: 16pt. b) Színek használata Több helyen is megadhatunk színeket tulajdonságként (háttérszín, szöveg színe, stb.). Alapvetően kétféleképpen: vagy a szín nevével, vagy pedig a 3 komponensével RGB (vörös, zöld, kék) formában. A használható 16 kulcsszó (a Windows VGA 16 színei közül): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, és yellow. Az RGB megadás négyféleképpen is történhet, ebből az első két lehetőség hexadecimális, míg a továbbiak decimális és százalékos módok. 17
Az #rrggbb megadásnál az rr, gg és bb értékek hexadecimálisan, 00 és FF között adják meg az adott szín erősségét. A 00 a legsötétebb, a FF pedig a legvilágosabb. A hexadecimális számoknál a 9 feletti értékeket jelképező betűket mind kisbetűvel, mind nagybetűvel megadhatjuk. Pár példa: fekete: #000000 piros: #FF0000 zöld: #00FF00 kék: #0000FF fehér: #FFFFFF Az #rgb megadásnál az előzőhöz hasonlóan, de csak egy számjegyes hexadecimális számokkal adhatjuk meg a színt. Az #123 megfelel az #112233 színnek. Az előző példák ezzel a megadási móddal: fekete: #000 piros: #F00 zöld: #0F0 kék: #00F fehér: #FFF Az első megadáshoz hasonlóan, de decimális számokkal is meghatározhatjuk a komponensek értékeit, szintén 0 és 255 közötti értékekkel. Ekkor az rgb(r,g,b) formátumot használhatjuk. Maradva a példáknál: fekete: rgb(0,0,0) piros: rgb(255,0,0) zöld: rgb(0,255,0) kék: rgb(0,0,255) fehér: rgb(255,255,255) Amennyiben százalékosan ismerjük a szín komponenseit, erre is lehetőségünk van. Ekkor a 0% éppen nullát, a 100% pedig 255-öt jelent. A százalék jelet közvetlenül a szám után kell írni. A használandó formátum az előzőhöz hasonló: rgb(r%,g%,b%). Maradva a példáknál: fekete: rgb(0%,0%,0%) piros: rgb(100%,0%,0%) zöld: rgb(0%,100%,0%) kék: rgb(0%,0%,100%) fehér: rgb(100%,100%,100%) 2. Stíluslap beágyazása HTML dokumentumba 18
Ahhoz hogy egy stíluslap hatással legyen egy HTML dokumentumra, össze kell kötni őket. Ezt úgy tehetjük meg, hogy a fejrészbe (<head>...</head>) beírjuk a következő sort: <head> <link href="stiluslapneve.css" rel="stylesheet" type="text/css"> </head> 3. Kijelölők (szelektorok) használata a) Elem kijelölők (Type selector) A összes HTML elemet ki lehet választani szelektorokkal. A weblap összes azonos elemére vonatkoznak. Ebben az esetben csak annyi a dolgunk, hogy a kiválasztani kívánt elem nevét használjuk szelektornak. h1{ color: red; b{ color: #f8f8f8; <h1>ez egy piros színő cím</h1> <b>ez egy világos szürke színő, félkövér szöveg </b> b) Csoport kijelölés (Group of selectors) Több elemhez ugyanazt a stílust rendeli. A kijelölt elemek vesszővel és üres betűközzel elválasztva sorolandók fel h1, h2 { meghatározás(ok) kódolás a legnagyobb és második legnagyobb címhez rendel azonos megjelenítést. c) Azonosító kijelölők (ID selector) 19
Az id attribútum arra való, hogy egyértelműen azonosítson egy címkét, ezért két id ugyanolyan értékkel nem fordulhat elő egy oldalon belül. Ilyenkor egyedi, "személyreszabott" tulajdonságokkal láthatjuk el az elemeket. HTML attribútuma az id, CSS szelektora pedig a # (kettőskereszt) jel. Így kell megadni a HTML kódban: <h1 id="piros">piros színő címsor</h1> <h1 id="kek">kék színő címsor</h1> A stíluslapban pedig így tudunk bizonyos nevű id-ra stílust alkalmazni: #piros { color: red; #kek { color: blue; d) Származtatott kijelölők (descendant selector) Néha környezetfüggő kijelölőknek is fordítják őket egy id jellemzővel definiált szakaszon belüli elem-kijelölést végeznek. Ha a HTML oldal például két szakaszból áll, és az egyes szakaszokban lévő bekezdésekhez szakaszonként eltérő megjelenítést tervezünk, akkor a HTML oldal kódolása: <div id= szak1 > <p>..</p> <p>..</p> </div> <div id= szak2 > <p>..</p> <p>..</p> </div> CSS-ben az egyes szakaszok bekezdéseihez a megjelenítések kódolása: #szak1 p { meghatározás(ok) #szak2 p { más meghatározás(ok) Az azonosító kijelölőt tehát egy elemkijelölő követ, köztük egy üres betűköz van e) Osztály kijelölők (Class selector) 20
Lehetőségünk van több elemnek egyszerre megadni tulajdonságokat ezzel a módszerrel. Itt meg kell adni a HTML-ben minden egyes általunk egyformán formázni kívánt elemnek a class attribútumot. h1.szin{ color: red; Nem csak azonos, hanem különböző címkékhez ( pl. h1, p, blockquote, stb. ) is rendelhetők közös osztályok:.szin{ color: #f8f8f8; <h1 class="szin">szürke színő címsor</h1> <b class="szin">szürke színő kiemelt szöveg</b> <p class="szin">szürke színő bekezdés</p> A weboldal egy része stílusának kijelöléséhez a kijelölők, azonosítók és osztályok kombinációja is használható. Pl.: az alábbi CSS kódolás #header p.stilus1 { meghatározás(ok) csak a weblap fejléc szakaszában lévő bekezdések közül a stilus1 osztályba tartozókhoz rendeli a meghatározás(ok)ban definiált megjelenítést. f) Ál-osztály ( látszólagos osztály, pseudo-osztály ) kijelölők ( pseudo-class/element ) A hivatkozásokra és az első sorra/első betűre vonatkoznak. Az állapotok kijelölései ( a sorrend kötött, az alábbiak szerinti ): a:link { meghatározás(ok) ( link=kapocs, hivatkozás - itt: még nem látogatott ) a:visited { meghatározás(ok) ( visited=felkeresve, látogatva ) a:hover { meghatározás(ok) ( hover=lebeg itt: a kurzor felette van ) Természetesen származtatott kijelöléssel az ál-osztály kijelölése pontosítható/szűkíthető, pl.: #nav a:link, #nav a:visited, stb. A hivatkozások azért ál-osztályok, mert állapotuk nem a HTML kódtól, hanem a weboldal látogatójának tevékenységétől függ, és egyidejűleg két állapotban is lehetnek ( pl. már egyszer rákattintottak, majd később újból felé állnak a kurzorral ). 21
Blokkszintű elemek első soraira és/vagy első betűire definiálható külön stílus. Pl. ha minden bekezdés első sorát jelöljük ki: p:first-letter { meghatározás(ok) Minden bekezdés első betűje esetén ( iniciálé kialakítása! ): p:first-line { meghatározás(ok) 4. Weboldal hátterének beállítása Tulajdonság Leírás Lehetséges értékek background-color Egy elem háttérszínét adja meg color-rgb color-hex color-name transparent background-image Háttérképet állít be. url(url) background-repeat Beállítja, hogy a háttérkép vízszintesen, függőlegesen, mindkét módon, vagy sehogy se ismétlődjön. background-attachment Beállítja, hogy a háttérkép fixen maradjon-e az oldal görgetésekor, vagy sem. background Rövidítő tulajdonság az összes eddigi tulajdonság egyidejű megadásához. body { background-color: #4AF24F; h1 { background-color: #F55C54; none repeat repeat-x repeat-y no-repeat scroll fixed background-color background-image background-repeat background-attachment background-position h2 { background-color: maroon; 22
5. Szöveg formázása Tulajdonság Leírás Lehetséges értékek color Szöveg színének megadása. color-rgb color-hex color-name text-align text-decoration Szövegigazítás: bal, jobb, közép, sorkizárt. Aláhúzást, felülhúzást, áthúzást, vagy villogást állít be a szövegre. 23 left right center justify none underline overline line-through blink text-indent Bekezdés első sorának beljebb kezdése. length % line-height Sorközök megadására szolgál. normal number length % font-family font-style A használandó betűcsaládról ad prioritásos listát: Ha az első megadott font nem található, akkor próbálkozik a másodikkal és így tovább. Dőlt betűs szöveg megjelenítését teszi lehetővé. Betűcsalád neve, pl: Arial, "Times New Roman", Verdana; Vagy: általános típus: serif sans-serif cursive fantasy monospace normal italic oblique font-size Szöveg méretét lehet megadni. xx-small x-small small medium large x-large xx-large pt px smaller
font-style Dőlt betűs szöveg megjelenítését teszi lehetővé. larger % em normal italic oblique Megjegyzés: A font-size tulajdonság értékéhez csak ezeket az értékeket ajánlott megadni: %, em, smaller, larger. Ugyanis ezek az értékek a szülő elem betűméretéhez képest relatívan adják meg a betűméretet. Példák: 1. body { font-size: 200%; p.xxsmall { font-size: xx-small; <p>normál méret (örökli a body elem méretét)</p> <p class="xxsmall">xx-small betőméret(abszolut méret, nincs öröklés) </p> 2..smaller { font-size: smaller;.larger { font-size: larger;.em { font-size: 2em; <h1>alapértelmezett nagyságú h1-es címsor</h1> <p>alapértelmezett nagyságú betőméret.</p> <h1 class="smaller">smaller h1</h1> 24
<h1 class="larger">larger h1</h1> <p class="smaller">smaller p</p> Gyakran van szükségünk arra, hogy csak bizonyos szavak, szövegrészeket emeljünk ki, színezzünk át stb. Az ilyen formázandó szövegrészek kijelölésére kell használni a span tagot. Ehhez a címkéhez mindig adjuk meg a class értéket, hiszen így fogjuk tudni később elérni a stíluslapból. span.voros { color: red; <p>a szín egy érzet, amely az <span class="voros">agy reakciója</span> a fényre</p> 6. Linkek díszítése stíluslappal A linkek esetén, a különböző állapotokra különböző stílusokat alkalmazhatunk. A link négy állapota: o :link - A még meg nem látogatott linkek o :visited - A már meglátogatott link o :hover - Azt a linket választja ki, amelyik felett éppen áll az egér o :active - Azt linket választja ki, amelyiken állva az egérrel a felhasználó lenyomta az egérgombot, de még nem engedte fel. Nem kötelező mind a négy állapotra külön stílust megadni. Azonban ha megadjuk őket, akkor pontosan a fenti példában látható sorrendben alkalmazzuk őket. a:link { text-decoration: none; a:visited { text-decoration: line-through; a:hover { 25
color: orange; a:active { color: lime; 7. Listák formázása stíluslappal Tulajdonság Leírás Lehetséges értékek list-style-type A listaelemek előtti kis jel megadására szolgál. disc circle square none decimal lower-alpha upper-alpha lower-roman upper-roman list-style-image Kép beállítása a listaelemek none list-style-position jelzésére. A listaelmek előtti kis jel vagy kép helyzetének megadására szolgál. url outside inside ul.square { list-style-type: square; <ul class="square"> <li>html 3.2</li> <li>html 4</li> <li>xhtml</li> </ul> 8. Táblázatok formázása stíluslappal 26
<table class="st1"> <tr class="fejlec"> <th><a href="">név</a></th> <th><a href="alma.html">cím</a></th> <th>szak</th> </tr> <tr> <td>kiss Peter</td> <td>csíkszereda</td> <td>közgazdaságtan</td> </tr> <tr> <td>rongy Elek</td> <td>sepsiszentgyörgy</td> <td>román-angol</td> </tr> <tr> <td>nagy Manyi</td> <td>sepsiszentgyörgy</td> <td>kgi</td> <tr> <td>rongy Elek</td> <td>sepsiszentgyörgy</td> <td>román-angol</td> </tr> <tr> <td>kiss Peter</td> <td>csíkszereda</td> <td>közgazdaságtan</td> </tr> </table> a) Rácsvonalak hozzáadása a táblázathoz td, th { border: 1px solid black; b) Kettős szegély megszüntetése table { border-collapse: collapse; c) Belső margó megadása a cellákhoz 27
table { border-collapse: collapse; d) Táblázat középre igazítása és szélességének megadása table { border-collapse: collapse; margin-left: auto; margin-right: auto; width: 70%; e) Cellákban lévő szövegek igazítása tr.fejlec { text-align: left; vertical-align: top; height: 45px; f) Fejléc háttérszínének a megadása tr.fejlec th{ background-color: #FC3; 9. A div és span elemek a) A <div>.</div> címkék (division=szakasz) egy általános tárolóelemet alkotnak ( általában a weblap egy logikai összetartozó részét jelölik ki ), a közöttük elhelyezkedő tetszőleges tartalomra (szöveg, lista, táblázat, kép, hivatkozások, stb.) hivatkozni lehet, ill. formázást lehet hozzárendelni. Az egyes tárolóelemek az id jellemzőjük (identifier=azonosító) tulajdonságával (célszerűen a szakaszra jellemző névvel) azonosíthatók. Az id-k értékeinek egyedieknek kell lenniük, azaz mindegyik csak egyszer szerepelhet egy weblapon, különben nem lesz egyértelmű az azonosításuk. A HTML kódba a szakaszkijelöléseket beírva a HTML tartalom és alapértelmezett megjelenítése önmagában nem változik meg, a CSS-ben hozzájuk rendelt formázási tulajdonságokkal együtt azonban nagyon fontos szerepük van a weblap megjelenítésének kialakításában. 28
<div id="large"> Ez egy <b>div</b> elem. </div> #large{ color: #00FF00; font-family: arial; font-size: 4pt; b) A <span>..</span> címkével soron belül jelölhető ki olyan tartalom, ami külön formázható. A span címkét a div-hez hasonlóan egyedi azonosítóval kell ellátni. A span nem <span id="largefont">blokszíntű</span> elem. #largefont{ color: #00FF00; font-family: arial; font-size: 4pt; 10. A dobozmodell A CSS stíluslapnyelv egy HTML dokumentum megjelenítésekor az egyes elemekhez láthatatlan dobozokat rendel, melyek magukban foglalhatnak karaktereket, szavakat, sorokat, bekezdéseket, listákat, táblázatokat, képeket, stb. Minden doboznak lehetnek külön formázási tulajdonságai, mint pl. méret, előtérszín, betűtípus, szegély, háttér, stb. A dobozok hierarchikusan egymásba is ágyazódhatnak, pl. egy szó doboza egy lista egy sorának vagy egy táblázat egy cellájának a dobozába, az a lista vagy táblázat dobozába, majd az a weboldal egy szakaszának a dobozába, stb. A dobozok lehetnek blokkszintű ( block-level box ) dobozok ( pl. bekezdés, lista, táblázat, blokkidézet, div szakaszok, stb. ), sor-( inline box ) dobozok ( pl. egy szöveg egy sora ), és soron belüli ( inline-level box ) dobozok ( pl. karakterek, szavak, képek egy soron belül ). Minden doboznak van egy 'magja', az őt körülvevő 'kitöltéssel' (padding), szegéllyel (border) és margóval (margin). A margó, a szegély és a kitöltés mérete egyenként meghatározható a margin, a border és a padding tulajdonságok értékeinek beállításával. A kitöltőterület háttérszíne megegyezik az elemével, amelyet a background tulajdonság határoz meg. A szegély színe és stílusa szintén 29
a border tulajdonság beállításával határozható meg, míg a margó mindig átlátszó, így a szülő elem állandóan látható marad. A doboz szélessége az elem, a kitöltés, a szegély és a margó területének összege. 11. Kitöltés, szegély és a margó beállítása a) Kitöltés (belső margó) beállítása A belső margó (padding) a tartalom és a szegély közti üres részt határozza meg. Megadásának módja a padding-top, ( felső belső margó ), padding-right ( jobboldali belső margó ), padding-bottom (alsó belső margó), padding-left (baloldali belső margó) tulajdonságokkal történik. Alapértelmezett értékük 0 (mind abszolút, mind relatív értékben) és egyiknek sem lehet negatív az értéke. A fenti értékek összevontan is megadhatók a padding tulajdonsággal, a felsorolt értékek kötelező sorrendje az óramutató járásával megegyezik és felülről indul. Ha a bal értéket kihagyjuk, az megegyezik a jobbal, ha az alsó értéket hagyjuk ki, az megegyezik a felsővel. Ha mindegyik érték megegyezik, egyetlen rövid alakú padding tulajdonság használható. Az alábbi két megadási mód ekvivalens: h1 { padding: 0.5em; h1 { padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em; 30
Összevont megadási mód: h1{ padding: 10px 11px 12px 13px;// felsı, jobb, alsó, bal b) Szegély megadása A szegélyek (border) a margón belül helyezkednek el. Számos látszólagos tulajdonságuk van: szélesség, stílus, szín. Szélesség: Stílus: Tulajdonság Leírás Lehetséges értékek border-width Keret vastagságának border-top-width megadása. thin border-rightwidth medium thick border-bottomwidth length border-left-width Tulajdonság Leírás Lehetséges értékek border-style Keret stílusának megadása. none border-top-style Ha nem állítjuk be, nem fog hidden border-rightstyle border-bottomstyle border-left-style látszani a keret! dotted dashed solid double groove ridge inset outset Szín: Tulajdonság Leírás Lehetséges értékek border-color Keret színének megadása. color-rgb border-top-color color-hex border-rightcolor color-name 31
border-bottomcolor border-left-color A szegélytulajdonságoknál lehetőségünk van a fent említett három tulajdonság összevonására. h1 { border-top-style: solid; border-right-style: double; border-bottom-style: dotted; border-left-style: dashed; A szegély stílus, szín és vastagság a border tulajdonsággal még tovább összevonható, azonban ez az összevonás (shorthand) csak akkor használható, ha a négy szegély stílus-, szín-, és vastagság értékei egyenlők. h1 { border: solid green 15px; c) Margó beállítása Befolyásolják az adott elem távolságát annak szomszédos elemeitől. A margóknak nincs semmilyen látszólagos tulajdonságuk, értékük. Csak méretüket határozhatjuk meg. Tulajdonság Leírás Lehetséges értékek margin-top Felső margó marginright Jobb margó auto (a böngészı marginbottom Alsó margó beállítása) length % margin-left Bal margó margin Összefoglaló, rövid tulajdonság. Nem kell külön-külön megadnunk a margó részeit, hanem egyszerre maghatározhatjuk értékeiket egy és négy között. Az első a felső margót-, a második a jobb margót-, a harmadik az alsót, a negyedik értéke pedig a 32
bal margót szabályozza. Alapértelmezett értékük szintén 0 (mind abszolút, mind relatív értékben). Egy lényeges különbség a belső margóhoz képest, hogy a külső margónak negatív értéke is lehet - ekkor a szomszédos befoglaló blokk-elemek átfedhetik egymást. Az egyes böngészők alapértelmezetten más-más kezdő margókat használhatnak, ezért a saját elképzelésünk böngészőtől független kialakításához célszerű balra felülre igazítani az elemek elhelyezésének referencia-pontját: body, p, table, img, h1, h2, h3, h4, ol, ul { margin: 0; padding: 0; h1{ margin: 10px 11px 12px 13px; A h1 elem felső margója 10px, jobb margója 11px, alsó 12px, és a feslő margója 13px. 12. Méretezés, pozicionálás a) Méretek beállítása Az alábbi tulajdonságok segítségével a különböző elemek méretét állíthatjuk be. Tulajdonság Leírás Lehetséges értékek width Egy elem szélességét auto adja meg. % height max-width min-width Egy elem magasságát adja meg. Egy elem maximális szélességét adja meg. Egy elem minimális szélességét adja meg. 33 px, em auto % px, em auto % px, em auto % px, em max-height Egy elem maximális auto
min-height magasságát adja meg. % px, em Egy elem minimális auto magasságát adja meg. % px, em auto: ez az alapértelmezett érték - a böngésző maga határozza meg egyéb tulajdonságok értékei alapján a szélességet illetve a magasságot abszolút értékben megadás: a tartalom-doboz szélességét illetve magasságát definiálja relatív értékben (a befoglaló blokk szélességének illetve magasságának százalékában) megadás <p class= meret > This paragraph is 400pixels wide and 100 pixels high </p>.meret{ width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; b) Pozicionálás A böngészők balról jobbra és fentről lefelé olvassák a dokumentumokat (ez a normál szövegfolyam). Ebből a normál folyamból a position (helyzet) és float (úsztatás) tulajdonságokkal lehet kiemelni egy adott elemet. A position tulajdonság lehetséges értékei: static (statikus) ez az alapértelmezett érték, az elem a normál folyamban marad absolute (abszolút vagy független): az adott elem tárolótömbjéhez képest van a helyzete meghatározva, ami lehet egy másik elem, vagy a kezdeti tárolótömb (általában maga a html elem). fixed (rögzített): a helyére rögzítve marad az elem akkor is, ha a weblapot görgetjük (a felhasználó által látható részhez/böngészőablakhoz rögzített, hasonlóan a fixed background image-hez). Az abszolút pozíció speciális esete - az elem itt is kikerül a pozícionálási sémából, de nem a befoglaló blokk, hanem a képernyő (viewport) a viszonyítási pont. A rögzített pozíciójú elem nyomtatáskor minden oldalon megjelennek. 34
relative (relatív vagy viszonyított): az elem a normál szövegfolyamban helyezkedik el, és ettől a normál helyzetétől toljuk el valamilyen értékkel (px, em, %) az alapértelmezett static helyzetből vízszintes és függőleges irányba a left, right, top, bottom tulajdonságokkal. Az eltolt elem eredeti helye üresen marad, más elem nem csúszik oda be (az eltolás a környezetére nincsen hatással) Példák: #b1{ #b2{ #b3{ #b4{ position:relative; left:50px; background-color: #3399FF; position:absolute; top:50px; background-color: #66CC66; background-color: #FFFF33; position: fixed; background-color: #FF99FF; top: 200px; left: 500px; <div id="b1">elso blokk</div> <div id="b2">második blokk</div> <div id="b3">harmadik blokk</div> <div id="b4">negyedik blokk</div> A körülfolyás (float) A float tulajdonság segítségével különböző elemeket az oldal bal vagy jobb szélére úsztathatunk. Ha egy elem úsztatva van, a tartalom többi része ( szöveg ) körbe veszi. A float és a körbefutó tartalom közötti hely kihagyást a float margin tulajdonságával lehet változtatni. Tipikus példa, amikor egy képet körülfolyatunk szöveggel, de használjuk egy weboldal szerkezeti kialakításánál is. 35
A float értékei: left: az elem balra tolódik, a szöveg az elem jobb oldalán folyik (fentről lefelé) right: jobbra tolódik, a szöveg bal oldalt folyik le none: nem történik körülfolyás Ha a float tulajdonság hatását meg akarjuk szüntetni akkor használjuk a clear: beállítást. Értékei: left: a float left hatását megszünteti right: a float right hatását megszüntetni both: minden float tulajdonság hatását érvényteleníti none: alapbeállítás, az adott elemre kihatással lesz a float <img src="sunset.gif" class="floatleft"> <p>the images are contained with...</p> <img src="sunset.gif" class="floatright"> <p>this second paragraph has an...</p> img.floatleft { float: left; margin: 4px; img.floatright { float: right; margin: 4px; 13. Láthatóság (Visibility) A visibility (láthatóság) tulajdonság egy adott elem két lehetséges állapotát jelöli nevezetesen hogy látható vagy láthatatlan legyen. Alapértelmezett értéke visible (látható), a másik érték hidden (rejtett). A láthatatlan (rejtett) elem a weblap elrendezésében megtartja a helyét, csak átlátszóvá válik. 14. Láthatósági sorrend beállítása ( Z-index ) Az egymást takaró elemek láthatóságát alapértelmezetten a HTML-ben elfoglalt sorrend határozza meg ( a későbbi elem takarja a korábbit ). Ezt a takarási sorrendet lehet a z-index tulajdonsággal manipulálni. 36
A z-index (tetszőleges előjelű egész számok) növekvő sorrendjébe rendeződik a láthatóság a legkisebb index-számú kerül legalulra (a nézőtől a legtávolabbra), a legnagyobb indexszámú a legfelülre (a nézőhöz a legközelebb). Html kód: <span id="egy"></span> <span id="ketto"></span> CSS kód: #egy { position: absolute; width: 5em; height: 5em; border: solid blue; margin: 2em; background-color:#99ff66; z-index: 1; #ketto { position: absolute; width: 5em; height: 5em; border: solid blue; margin: 2em; background-color: #660099; z-index: 0; 15. HTML elemek megjelenítése (display) Léteznek blokk-szintű elemek (pld. H1, p, div), és sorbeli elemek (pld. img, a, span). A blokkszintű elemek egy teljes sort kitöltenek, és nem lehet mellettük alapesetben másik elem, az elem elé és mögé egy sortörés kerül. A sorbeli elemek mellett viszont lehet, de csak egy másik sorbeli elem. A sorbeli elemek mindaddig egy sorban jelennek meg egymás mellett, amíg az adott sorban van hely. Ha már nincs hely az adott sorban, akkor új sorban kezdi el kirakni a böngésző az ilyen elemeket. A display tulajdonsággal többek között a blokk-szintű és a sorbeli megjelenést is szabályozni tudjuk. A display két legfontosabb értéke: 37
o inline: az elemek sorban jelennek meg egymás után. Egyszerűen követik a szövegfolyamot. o block: az elem megjelenítése blokkszintű lesz. Az elem előtt és után is megtörik a szövegfolyam o none: az elemhez nem rendel dobozt, azaz az elemnek nincsen hatása a weboldal elrendezésére A display tulajdonságnak számos más értéke is van, amelyeket nem minden böngésző támogat. 1. p { display: inline; <p>1.bekezdes </p> <p>2.bekezdes </p> <p>3.bekezdes </p> <p>4.bekezdes </p> Eredmény: 1.Bekezdes 2.Bekezdes 3.Bekezdes 4.Bekezdes 2. Lista vízszintes kialakítása a display tulajdonság inline értékével (ami leggyakrabban egy vízszintes menü-sor kialakításánál használatos): HTML-kód: <ul> <li>kenyér</li> <li>tej</li> <li>vaj</li> </ul> A CSS kódolása: li { display: inline; list-style: none; margin-right: 50px; background-color: #FF99CC; padding: 0.5em 1em; 38
ul { text-align: center; 16. Gördítősáv hozzáadása egy elemhez (overflow) Az adott doboz tartalmának kilógását, túlcsordulását az overflow tulajdonsággal szabhatjuk meg. Lehetséges értékei: o visible: Ez az alapértelmezett viselkedés. Ha a tartalom nem fér ki a tárolóelemben, akkor ki fog lógni. o hidden: A tartalom nem fog kilógni a tárolóelemből, de nem is fog gördítősáv megjelenni, ezért a kilógó szöveget nem tudjuk elolvasni! o scroll: A tartalom nem fog kilógni, és gördítősávok jelennek meg a tartalom eléréséhez. o auto: Az előzőhöz képest az a különbség, hogy most csak akkor fog gördítősáv megjelenni, ha szükséges. A scroll tulajdonság használatakor viszont minden esetben megjelenik a gördítősáv div { border: 1px solid red; background-color: #ccc; width: 170px; height: 200px; overflow: auto; 39
17. CSS hétterek A weblap valamennyi elemének van háttérrétege, mely vagy (alapértelmezetten) teljesen átlátszó, vagy a háttérszín (background-color) tulajdonság értékének megfelelően kitöltött szín, vagy háttérkép (background-image) alkotják. A background-color segítségével beállíthatjuk a háttér színét. Ez főleg akkor hasznos, ha nem valamilyen képet akarunk beállítani háttérként. h4 { background-color: white; p { background-color: #1078E1; ul { background-color: rgb( 149, 206, 145); Háttérkép a background-image tulajdonsággal adható meg, az alábbiak szerint: background-image: url(fájlnév.kiterjesztés); p { background-image: url(smallpic.jpg); h4{ background-image: url(http://www.tizag.com/pics/csst/smallpic.jpg); A böngészők alapértelmezetten a teljes kitöltendő hátteret a kép méretének változatlanul tartásával, annak vízszintes és függőleges irányú ismétlésével összefüggően kitapétázzák. A background-repeat (háttérkép ismétlése) tulajdonsággal definiálható a háttérképek ismétlődése, lehetséges értékei: 40
repeat ( alapértelmezett ): a teljes kitöltendő hátteret a kép méretének változatlanul tartásával, annak vízszintes és függőleges irányú ismétlésével összefüggően kitapétázzák repeat-x: a háttérkép csak vízszintes irányú ( x-tengelyű ) ismétlését definiálja repeat-y: a háttérkép csak függőleges irányú ( y-tengelyű ) ismétlését definiálja no-repeat: a háttérkép csak egyszeri, ismétlés nélküli megjelenítését definiálja. p { h4 { ol { ul { background-image: url(smallpic.jpg); background-repeat: repeat; background-image: url(smallpic.jpg); background-repeat: repeat-y; background-image: url(smallpic.jpg); background-repeat: repeat-x; background-image: url(smallpic.jpg); background-repeat: no-repeat; A background-position (héttérkép helyzete) tulajdonság megadható névvel (keyword), százalékosan vagy pixel-ekkel. Névvel a left (balra), right (jobbra), top (felülre), bottom (alulra), és center (középre) pozíciók definiálhatók először a vízszintes (left, center, right), majd a függőleges (top, center, bottom) helyzetet kell megadni. p { h4 { ol { background-image: url(smallpic.jpg); background-position: 20px 10px; background-image: url(smallpic.jpg); background-position: 30% 30%; background-image: url(smallpic.jpg); background-position: top center; A background-attachment tulajdonságnak két beállítási lehetősége van: a scroll és a fixed. Ha a scroll van beállítva ez az alapértelmezett -, akkor az elem görgetésével annak háttere is vele együtt mozog. A fixed beállítás esetén viszont a háttér helyben marad, és görgetéskor 41
csak a tartalom mozog. A fixed beállítás ízléses alkalmazása sokszor feldobja az oldal összhatását. A következő példa rögzíti az oldal hátterét: body { background-attachment: fixed; Ha szeretünk rövidíteni, használjuk a background tulajdonságot, amely lehetőséget ad a fentiek egyszerre való beállítására. A sorrend ilyenkor a következő kell legyen: backgroundcolor, background-image, background-repeat, background-attachment, background position. Például: body { background: black url(background.jpg) no-repeat fixed left 10px; 42