;

tag segítségével a szöveget bekezdésekre oszthatjuk. Az adott bekezdés tartalmát a

és

Ez alapértelmezett (balra igazított) bekezdés.

Ez pedig egy újabb bekezdés

;

1-es

2-es

3-as

4-es

5-ös

6-os

címsor címsor címsor címsor címsor címsor

• 
  
  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)
  ;
  Egyszerű felsorolás esetén az
  és
  tagek közé kell elhelyeznünk a listaelemeket, amelyeket az
• (list item) címkék vezetnek. Példa:
  • kenyér
  • kávé
  • tej
  • vaj
  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)
  ;
  6
  
  Sorszámozott lista esetén az
  és
  tagek közé kell elhelyeznünk a listaelemeket. Példa:
  1. Elsı
  2. Második
  3. Harmadik
  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 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 Kisbetűs római számok (i, ii, iii.) o Nagybetűs római számok (I, II, III.) o Tradicionális grúz számozás (an, ban, gan.) o Tradicionális örmény számozás (mek, yerku, yerek.) o o o
  
  •
  
  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. Példa:
  1. kenyér
     1. fehér kenyér
     2. barna kenyér
  7
  
  
  2. tej
     1. zsíros tej
     2. zsírszegény tej
  3. vaj
     1. sózott vaj
     2. nem sózott vaj
     3. margarin
  
  
  c) Meghatározás (vagy definíciós) lista (definition list)

  
  
  Meghatározás lista esetén az

  és

  tagek közé kell elhelyeznünk a listaelemeket, amelyek a fogalom megadásából (

  tag vezeti be) és a magyarázatából (

  tag vezeti be) állnak.
  
  Egy egyszerű definíciós lista a kifejezésekkel és a definíciókkal így néz ki:

  Kifejezés

  A kifejezés definíciója

  Kifejezés

  A kifejezés definíciója

  Kifejezés

  A kifejezés definíciója

  
  
  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 ; 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 tag segítségével lehet létrehozni. A vízszintes sorokat egyenként a ; páros címke (table row), a cellákban lévő adatokat egyenként a (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. Példa:

  ;

  1. sor, 1.	1. sor, 2.
  2. sor, 1.	2. sor, 2.

  
  
  cella cella
  
  cella cella
  
  Eredmény:
  
  Fontosabb más tábla elemek: o - ez az elem jelöli a táblázat oszlopainak a fejlécét o - ezzel az elemmel adhatsz egy címet a táblázat adatainak
  
  Példa: 9
  
  

  Ez egy táblázat

  1.Fejléc	2.Fejléc
  1.	1.
  2.	2.

  
  
  sor, 1. cella sor, 2. cella
  
  sor, 1. cella sor, 2. cella
  
  Eredmény:
  
  Cellák egyesítése a colspan és rowspan attribútumok segítségével:

  Név	Telefon
  Bill Gates	555 77 854	555 77 855

  Eredmény:
  
  10
  
  

  Név	Bill Gates
  Telefon	555 77 854
  	555 77 855

  
  
  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 Példa: 11
  
  

  Month	Savings
  Sum	$180
  January	$100
  February	$80

  6. Hivatkozások (Linkek) ;
  
  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 (anchor = horgony) címke paraméterei: o href – webcím (URL), itt kell megadnunk a hivatkozás webcímét. o Szintaxis: Szöveg, kép 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: Szöveg o Hivatkozás szintaxisa egy könyvjelzőre: Szöveg
  
  a) Egy másik webhelyre hivatkozás esetén a kódolás: szöveg és/vagy kép Példa: A Sapientia
  
  honlapja
  
  b) Azonos webhelyen belüli másik weblapra hivatkozás esetén: szöveg és/vagy kép 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: Szöveg Ugrás az oldal elejére
  
  7. Képek beillesztése a weboldalra
  
  12
  
  Állóképet az 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 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:

  Ez a kép a Sapientia logoja.

  Ez a kép a Sapientia logoja.

  Ez a kép a Sapientia logoja.

  
  
  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: ;

  A világ egyik legismertebb idézete a Hamlet-ból a Lenni, vagy nem lenni, ez itt a kérdés.

  b) Hosszabb idézet:

  ;

  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.

  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

  c) Dőltbetűs megjelenítés: ; 13
  
  

  Ez egy dılt betős szöveg

  d) Címhivatkozás: ; Nem szerzőre, hanem műre - könyvre, újságra, versre, dalra, színdarabra, másik forrásra lehet így hivatkozni.

  A világ egyik legismertebb idézete a Hamlet-ból a Lenni, vagy nem lenni, ez itt a kérdés.

  
  
  e) Kulcsszó kiemelés: ; A böngészők alapértelmezetten félkövér betűt használnak ebben az esetben.

  A digitális videokamerák egyre növekvı hányadban a Full HD felbontást alkalmazzák.

  
  
  f) Tartalmi kiemelés, kihangsúlyozás: <strong>; ( strong= erős kiemelés ) és <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.

  A medencébe ugrálni veszélyes és <strong>szigorúan tilos!

  g) Előre formázott szöveg: <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. Í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 Példa: A bekezdést

  és

  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. Példa: 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 (...) beírjuk a következő sort:
  
  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. Példa: h1{ color: red; } b{ color: #f8f8f8; }

  Ez egy piros színő cím

  Ez egy világos szürke színő, félkövér szöveg
  
  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 Példa: 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:

  Piros színő címsor

  Kék színő címsor

  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:

  ……………………………..

  ……………………………..

  ……………………………..

  ……………………………..

  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. Példa: 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; }

  Szürke színő címsor

  Szürke színő kiemelt szöveg

  Szürke színő bekezdés

  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 background-color
  
  Leírás Egy elem háttérszínét adja meg
  
  background-image
  
  Háttérképet állít be.
  
  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. Beállítja, hogy a háttérkép fixen maradjon-e az oldal görgetésekor, vagy sem. Rövidítő tulajdonság az összes eddigi tulajdonság egyidejű megadásához.
  
  background-attachment
  
  background
  
  Példa: body { background-color: #4AF24F; } h1 { background-color: #F55C54; } h2 { background-color: maroon; 22
  
  Lehetséges értékek color-rgb color-hex color-name transparent url(URL) none repeat repeat-x repeat-y no-repeat scroll fixed background-color background-image background-repeat background-attachment background-position
  
  }
  
  5. Szöveg formázása
  
  Tulajdonság color
  
  text-align
  
  text-decoration
  
  text-indent line-height
  
  font-family
  
  font-style
  
  font-size
  
  Leírás Szöveg színének megadása.
  
  Lehetséges értékek color-rgb color-hex color-name left Szövegigazítás: bal, jobb, right közép, sorkizárt. center justify none Aláhúzást, felülhúzást, áthúzást, vagy villogást állít be underline overline a szövegre. line-through blink Bekezdés első sorának beljebb length % kezdése. normal Sorközök megadására szolgál. number length % A használandó betűcsaládról ad Betűcsalád neve, pl: Arial, prioritásos listát: Ha az első "Times New Roman", megadott font nem található, Verdana; Vagy: általános típus: serif akkor próbálkozik a sans-serif másodikkal és így tovább. cursive fantasy monospace normal Dőlt betűs szöveg italic megjelenítését teszi lehetővé. oblique Szöveg méretét lehet megadni. xx-small x-small small medium large x-large xx-large pt px smaller 23
  
  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.Példa: body { font-size: 200%; } p.xxsmall { font-size: xx-small; }

  Normál méret (örökli a body elem méretét)

  XX-small betőméret(abszolut méret, nincs öröklés)

  
  
  2.Példa: .smaller { font-size: smaller; } .larger { font-size: larger; } .em { font-size: 2em; }

  Alapértelmezett nagyságú h1-es címsor

  Alapértelmezett nagyságú betőméret.

  smaller h1

  24
  
  

  larger h1

  smaller 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. Példa: span.voros { color: red; }

  A szín egy érzet, amely az <span class="voros">agy reakciója a fényre

  
  
  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. Példa: 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 list-style-type
  
  Leírás A listaelemek előtti kis jel megadására szolgál.
  
  list-style-image
  
  Kép beállítása a listaelemek jelzésére. A listaelmek előtti kis jel vagy kép helyzetének megadására szolgál.
  
  list-style-position
  
  Példa: ul.square { list-style-type: square; }

  • HTML 3.2
  • HTML 4
  • XHTML

  
  
  8. Táblázatok formázása stíluslappal 26
  
  Lehetséges értékek disc circle square none decimal lower-alpha upper-alpha lower-roman upper-roman none url outside inside
  
  

  Név	Cím	Szak
  Kiss Peter	Csíkszereda	Közgazdaságtan
  Rongy Elek	Sepsiszentgyörgy	Román-Angol
  Nagy Manyi	Sepsiszentgyörgy	KGI
  Rongy Elek	Sepsiszentgyörgy	Román-Angol
  Kiss Peter	Csíkszereda	Közgazdaságtan

  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

  ....

  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
  
  Példa:

  Ez egy div elem.

  #large{ color: #00FF00; font-family: arial; font-size: 4pt; } b) A <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. Példa: A span nem <span id="largefont">blokszíntű 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: Tulajdonság Leírás border-width Keret vastagságának border-top-width megadása. border-rightwidth border-bottomwidth border-left-width
  
  Lehetséges értékek
  
  Tulajdonság border-style border-top-style border-rightstyle border-bottomstyle border-left-style
  
  Leírás Keret stílusának megadása. Ha nem állítjuk be, nem fog látszani a keret!
  
  Lehetséges értékek none hidden dotted dashed solid double groove ridge inset outset
  
  Tulajdonság border-color border-top-color border-rightcolor
  
  Leírás Keret színének megadása.
  
  Lehetséges értékek
  
  thin medium thick length
  
  Stílus:
  
  Szín:
  
  31
  
  color-rgb color-hex color-name
  
  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. Példa: 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 margin-top marginright marginbottom margin-left margin
  
  Leírás Felső margó Jobb margó
  
  Lehetséges értékek auto (a böngészı beállítása) length %
  
  Alsó margó Bal margó Ö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; }
  
  Példa: 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 width
  
  Leírás Egy elem szélességét adja meg.
  
  height
  
  Egy elem magasságát adja meg.
  
  max-width
  
  Egy elem maximális szélességét adja meg.
  
  min-width
  
  Egy elem minimális szélességét adja meg.
  
  max-height
  
  Egy elem maximális 33
  
  Lehetséges értékek auto % px, em auto % px, em auto % px, em auto % px, em auto
  
  magasságát adja meg. min-height
  
  • • •
  
  Egy elem minimális magasságát adja meg.
  
  % px, em auto % 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élda:

  This paragraph is 400pixels wide and 100 pixels high

  .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{ position:relative; left:50px; background-color: #3399FF; } #b2{ position:absolute; top:50px; background-color: #66CC66; } #b3{ background-color: #FFFF33; } #b4{ position: fixed; background-color: #FF99FF; top: 200px; left: 500px; }

  
  id="b1">Elso blokk

  id="b2">Második blokk