XHTML és CSS Holló Csaba 11. A HTML dokumentum

Átírás

1 XHTML és CSS Holló Csaba 2 A. Alapfogalmak B. Szövegek C. Hivatkozások D. Képek és multimédia E. Listák és számlálók XHTML és CSS Holló Csaba 3 1. Mi a HTML, XHTML és CSS? 2. Objektumok definíciója 3. XHTML és CSS nyelvtan 4. Fontosabb objektumok 5. Karakterek 6. CSS rangsor XHTML és CSS Holló Csaba 4 Hyper Text Markup Language Eredeti cél: az információk minél szélesebb körben elérhetővé tétele az Internet segítségével Ma már további elvárások is vannak, pl.: design: versengés a látogatókért interaktivitás XHTML és CSS Holló Csaba 5 Hyper Text Markup Language Leíró nyelv: definiálja a tartalom struktúráját (címsor, felsorolás, beágyazott képek stb.), melyet a különböző böngészők, beállításoktól függően is különbözőképpen jeleníthetnek meg. XHTML és CSS Holló Csaba 6 Hyper Text Markup Language Hyper Text: kapcsolat a dokumentum különböző részei különböző (helyi vagy távoli) dokumentumok között. XHTML és CSS Holló Csaba 7 Hyper Text Markup Language Lehetőség van internetes szolgáltatások (FTP, levelező program) és más alkalmazások indítására szolgáló hivatkozásokat is elhelyezni. XHTML és CSS Holló Csaba 8 A HTML dokumentum Lényegében strukturáló és formázó parancsokból és a megjelenítendő szövegből álló ASCII szöveges dokumentum Bármilyen szövegszerkesztővel írható XHTML és CSS Holló Csaba 9 A HTML dokumentum Léteznek HTML szerkesztő programok, melyek segítik a weblapok vizuális készítését, legenerálják a szükséges HTML kódot stb. TextPad MS Front Page, Macromedia Dreamweaver

2 XHTML és CSS Holló Csaba 10 A HTML dokumentum Más programok (pl. Word, Excel, Power Point stb.) is tudnak böngészők által értelmezhető kódot készíteni HTML fájlok standard kiterjesztései: htm, html. XHTML és CSS Holló Csaba 11 A HTML dokumentum A böngésző a HTML dokumentum parancsait beállításai szerint értelmezi és megjeleníti A böngészők különbözhetnek bizonyos parancsok és karakterkódolások felismerésében és értelmezésében XHTML és CSS Holló Csaba 12 A dinamikus HTML Ha azt akarjuk, hogy a böngésző ne csak megjelenítse az információkat, hanem kommunikáljon is a felhasználóval, akkor a HTML kódhoz programot társíthatunk. XHTML és CSS Holló Csaba 13 Ennek egy lehetséges megvalósítása, hogy a HTML kódba a böngésző vagy a szerver által értelmezhető programnyelvű utasításokat ágyazunk be, ezek lesznek a szkriptek, pl. JavaScript, VBScript, PHP, Java Servlet XHTML és CSS Holló Csaba 14 Néhány év után az egyéni elemek kódolására a HTML kezdett túlméretezetté válni (mobiltelefonok, PDA-k, stb.). Továbbá, pusztán a leírókódot használni a megjelenítés szabályozására nem elég hatékony. XHTML és CSS Holló Csaba 15 A megoldás: XHTML + CSS XHTML: extensible HTML újabb generációs HTML szabvány gyakorlatilag a HTML újraírása XML alapokon XHTML és CSS Holló Csaba 16 CSS: Cascading Style Sheets: rangsorolt stíluslapok az egyes stílusok határozzák meg a megjelenítést (nem csak vizuálisan, hanem akár auditíven is) XHTML és CSS Holló Csaba 17 CSS: Cascading Style Sheets: rangsorolt stíluslapok lehet csatolni, beágyazni a(z X)HTML dokumentumba minden böngészőben van alapértelmezett stíluslap, valamint lehet felhasználói stíluslap is XHTML és CSS Holló Csaba 18 CSS: Cascading Style Sheets: rangsorolt stíluslapok az alapértelmezett és felhasználói stíluslapok együtt határozzák meg a megjelenítést

3 XHTML és CSS Holló Csaba 19 Tehát egy weboldalnak alapvetően két része van: (X)HTML: meghatározza a tartalmat: mi jelenjen meg CSS: meghatározza a megjelenítést: hogyan jelenjen meg XHTML és CSS Holló Csaba 20 A HTML dokumentum Egy weblap HTML objektumokból áll Objektumok pl. bekezdés, ábra, táblázat, cella Az objektumok tartalmazhatják egymást, pl. a táblázatban levő egyik cellában kép van XHTML és CSS Holló Csaba Mi a HTML, XHTML és CSS? 2. Objektumok definíciója 3. XHTML és CSS nyelvtan 4. Fontosabb objektumok 5. Karakterek 6. CSS rangsor XHTML és CSS Holló Csaba 22 Objektumok definíciója <1. objektum nyitó tag> <2. objektum nyitó tag> <2. objektum záró tag> <3. objektum nyitó tag> <3. objektum záró tag> <1. objektum záró tag> XHTML és CSS Holló Csaba 23 Objektumok definíciója Nyitó tag: osztály neve objektum tulajdonságai (jellemzői) Záró tag: / osztály neve Tag: angolul címke, jelző, de magyarul jó a tag is XHTML és CSS Holló Csaba 24 Objektumok definíciója Egymásba ágyazás esetén nem lehet átlapolás. Pl. helyes: <p><em>kiemelt</em> szöveg</p> hibás: <em><p>kiemelt</em> szöveg</p> XHTML és CSS Holló Csaba 25 A HTML-ben vannak előre definiált objektumok (címsor, bekezdés, táblázat, felsorolás stb.), ugyanakkor lehetőségünk van saját strukturális egységek létrehozására is, melyeket formázhatunk, pozícionálhatunk stb. XHTML és CSS Holló Csaba 26 A tartalom különböző részeit div és span elemekkel tagolhatjuk. A div blokkszintű elem, azaz tartalmát külön sorokban helyezi el. A span-t akkor használjuk, ha a formázni kívánt elem a szöveg belsejében van. XHTML és CSS Holló Csaba 27 Objektumok definíciója Üres objektum: nem tartalmaz más objektumot vagy szöveget csak nyitó tagja van, de XHTMLben ezt is le kell zárni

4 XHTML és CSS Holló Csaba 28 Objektumok definíciója Üres objektum: szintaxisa <nyitó tag /> Pl. első sor<br /> második sor <img src= kep.jpg alt= nap /> XHTML és CSS Holló Csaba 29 Objektumok azonosítása Szintaxis: id= azonosító Azonosítók: angol ábécé betűi, számok és _ betűvel kezdődnek a HTML nem tesz különbséget kis és nagy betűk között, de az XHTML igen XHTML és CSS Holló Csaba Mi a HTML, XHTML és CSS? 2. Objektumok definíciója 3. XHTML és CSS nyelvtan 4. Fontosabb objektumok 5. Karakterek 6. CSS rangsor XHTML és CSS Holló Csaba 31 XHTML nyelvtan kötelező megadni a dokumentumtípust (DOCTYPE sor) minden elemet, jellemzőt és értéket kisbetűvel kell írni minden értéket idézőjelben kell megadni XHTML és CSS Holló Csaba 32 XHTML nyelvtan minden jellemzőnek egyértelműen meg kell adni az értékét XHTML és CSS Holló Csaba 33 CSS nyelvtan megjelenítési tulajdonságokkal látja el a leírókódon belüli elemeket: szín, betűtípus háttér, szegély, margó elemek helye XHTML és CSS Holló Csaba 34 CSS nyelvtan lehet beágyazva az XHTML dokumentumba, vagy gyakoribb, hogy csatolják hozzá gyorsul a fejlesztés elkülönül a tartalom a megjelenítéstől, gyorsul a letöltés XHTML és CSS Holló Csaba 35 CSS nyelvtan Kijelölő (selector) megmondja, hogy a stílus az XHTML lap mely elemeire vonatkozik Minden kijelölőhöz tartozik meghatározás (declaration), ami a megjelenítés módját mondja meg XHTML és CSS Holló Csaba 36 CSS nyelvtan Elemkijelölő az XHTML tagjaira vonatkozik pl. p { font-family: Arial, sans-serif; font-size: small; color: blue; } tulajdonság (property): érték (value)

5 XHTML és CSS Holló Csaba 37 CSS nyelvtan néha szükség van kevésbé általános, azaz pontos (specific) kijelölésre a) azonosítókijelölők (id selectors) b) osztálykijelölők (class selectors) c) összetett kijelölők XHTML és CSS Holló Csaba 38 CSS nyelvtan a) azonosítókijelölők (id selectors) Az XHTML dokumentumban a szöveg tetszőleges részeit elláthatjuk egyedi azonosítóval. Pl. <p id = bek1 > Bekezdés </p> <div id = lablec > Szöveg </div> XHTML és CSS Holló Csaba 39 CSS nyelvtan a) azonosítókijelölők (id selectors) Egy azonosítót egy XHTML lapon belül csak egyszer lehet használni. CSS-ben a hozzá tartozó stílust a következőképpen adjuk meg: Pl. #lablec { font-size: x-small; } XHTML és CSS Holló Csaba 40 CSS nyelvtan a) azonosítókijelölő (id selectors) egy altípusa a környezetfüggő (származtatott) kijelölő, mely csak az azonosított szöveg bizonyos elemeire vonatkozik #lablec p { font-size: x-small; } XHTML és CSS Holló Csaba 41 CSS nyelvtan b) osztálykijelölők (class selectors) XHTML-ben osztályokat is képezhetünk: class osztalynev ne a hatás, hanem a funkció alapján nevezzük el az osztályokat, pl. kek helyett kiemeles XHTML és CSS Holló Csaba 42 CSS nyelvtan b) osztálykijelölők (class selectors) Pl. XHTML-ben: <div class = kiemeles >... </div> CSS-ben pedig:.kiemeles { background-color: blue; } XHTML és CSS Holló Csaba 43 CSS nyelvtan c) összetett kijelölők #lablec p.kifejezes { background-color: blue; } a lablec azonosítójú szakasz kifejezes osztályú bekezdéseire érvényes XHTML és CSS Holló Csaba 44 CSS nyelvtan Kijelölők csoportosítása néha szükség lehet ugyanazon formázás többféle elemre való alkalmazására p, li, blockquote { font-size: medium; } XHTML és CSS Holló Csaba 45 CSS nyelvtan vessző nélkül más hatása van: p blockquote { } font-size: medium; csak a bekezdésben szereplő idézetekre hat

6 XHTML és CSS Holló Csaba 46 XHTML nyelvtan XHTML-ben a címkék összes jellemzőjének értékét idézőjelbe kell tenni <option selected= selected >első, kijelölt lehetőség</option> XHTML és CSS Holló Csaba 47 CSS nyelvtan CSS-ben csak akkor szabad idézőjeleket használni, ha a betűtípus neve több szóból áll és szóközt is tartalmaz: p { font-family: Times New Roman, Times, serif; } XHTML és CSS Holló Csaba Mi a HTML, XHTML és CSS? 2. Objektumok definíciója 3. XHTML és CSS nyelvtan 4. Fontosabb objektumok 5. Karakterek 6. CSS rangsor XHTML és CSS Holló Csaba 49 Alapobjektumok Ablak: id = window méret, hely, állapotsor szövege átméretezés, mozgatás, bezárás Dokumentum: id = document háttér, betűk színe, címsor felirata szöveg kiírása A Weblap megnyitásakor a böngésző automatikusan létrehozza őket XHTML és CSS Holló Csaba 50 A HTML objektum <html> </html> Mivel nem szoktunk rá hivatkozni, ezért ritkán kap azonosítót XHTML és CSS Holló Csaba 51 Fej- és törzsobjektumok <html> <head> </head> <body> </body> </html> XHTML és CSS Holló Csaba 52 Fej- és törzsobjektumok <head> Weblappal kapcsolatos információk (karakterkészlet, szerző, cím stb.) </head> <body> Képernyőn megjelenítendő Weblap </body> XHTML és CSS Holló Csaba 53 A címobjektum A weblap ablakának címét adja meg: <head> <title> Az ablak címsora </title> </head> XHTML és CSS Holló Csaba 54 A címobjektum Általában nem kap azonosítót A HTML-, fej és címobjektumokat a böngésző akkor is létrehozza, ha nem szerepelnek a kódban

7 XHTML és CSS Holló Csaba 55 Törzsobjektum <body> Megjelenítendő elemek (szöveg, kép stb.) Tagoló és vezérlő elemek (tag-ok) milyen részekből áll a Weboldal hogyan jelenítse meg azokat (bár jobb, ha ez a CSS-ben van!) </body> XHTML és CSS Holló Csaba Mi a HTML, XHTML és CSS? 2. Objektumok definíciója 3. XHTML és CSS nyelvtan 4. Fontosabb objektumok 5. Karakterek 6. CSS rangsor XHTML és CSS Holló Csaba 57 A karakterek meghatározásánál meg kell adnunk: a használt karakterkódolást a betűtípust (font-ot): a karakterek megjelenítését határozza meg a megjelenítendő karakter nevét vagy kódját. XHTML és CSS Holló Csaba 58 A karakterkódolást a fejrészben adjuk meg, később látni fogjuk, hogy hogyan. A betűtípus stílustulajdonság, mely a font-family kijelölő segítségével adható meg. XHTML és CSS Holló Csaba 59 Példék a font-family lehetséges értékeire: Verdana, Arial, serif, Georgia, Courier, Courier New, Times, Times New Roman. Nem bízhatunk abban, hogy a felhasználó gépén az általunk használni kívánt betűcsalád telepítve van. XHTML és CSS Holló Csaba 60 Ajánlatos többféle betűcsalád felsorolása arra az esetre gondolva, ha a felhasználó számítógépén nem lenne meg az, amit elsőnek előírtunk (nem fogja automatikusan letölteni!) XHTML és CSS Holló Csaba 61 A betűk mérete is a font-size kijelölővel adható meg. A méretet megadhatjuk pontban, pixelben, százalékértékben, em-egységben vagy az alábbi értékek valamelyikével: xx-small, x-small, small, medium, large, x-lerge, xx-large, smaller, larger. XHTML és CSS Holló Csaba 62 Képernyőn való használathoz nem ajánlott a méret pontban való megadása, mert nem egyértelmű, hogy egy pontnak hány pixelt fog megfeleltetni. Az előre definiált méretnevek értelmezése is böngészőfüggő lehet. XHTML és CSS Holló Csaba 63 A pixelben való méret megadás azért nem ajánlott, mert elvileg nem teszi lehetővé gyengénlátók számára a betűk méretének növelését. A böngészők ugyan ebben az esetben is biztosíthatják a betűméret növelésének lehetőségét, de ebben nem bízhatunk.

8 XHTML és CSS Holló Csaba 64 Az em-egység az adott betűtípusban az M betű magasságához viszonyított érték. Segítségével más objektumok is méretezhetők a felhasználó által beállított betűmérethez viszonyítva. XHTML és CSS Holló Csaba 65 A százalékérték számítása a szöveget beágyazó szülőelem betűmérete alapján történik. A fentiek miatt a betűméret beállításánál ajánlott az em-egység vagy százalékérték használata. XHTML és CSS Holló Csaba 66 A betűk stílusa pedig a font-style kijelölővel adható meg. Lehetséges értékei: italic, oblique, normal, melyek dőlt ferde, vagy normál megjelenítést írnak elő. Kiskapitális betűket a font-variant (betűváltozat) kijelölő small-caps értékével kaphatunk. XHTML és CSS Holló Csaba 67 A betűvastagságot a font-weight, kijelölővel adhajuk meg. Lehetséges értékei: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Nem minden betűtípusnak van ennyiféle vastagságú karaktere. XHTML és CSS Holló Csaba 68 Számíthatunk azonban arra, hogy: a nagyobb szám mindig legalább ugyanolyan vastagságú vagy vastagabb betűket jelent, normal = 400, bold = 700. XHTML és CSS Holló Csaba 69 A fenti stílusok értékei megadhatók egymás után felsorolva a font kijelölő értékeként is az alábbi sorrendben: betűváltozat, betűstílus, betűvastagság, betűméret, betűcsalád. Elvárt legalább a betűméret és betűcsalád megadása. XHTML és CSS Holló Csaba 70 Tagoló karakterek (white space): Enter, Tab, több szóköz alapértelmezés szerint nincs hatásuk a szöveg elrendezésére a böngésző egyetlen szóközzel helyettesíti őket Karakterentitások XHTML és CSS Holló Csaba 71 Karaktereknek megfelelő HTML kódok vagy hexadecimális értékek Speciális karakterek vagy magyar ékezetes karakterek helyett használjuk Ezek segítségével tudjuk a tagoló karakterek hatását is kiváltani XHTML és CSS Holló Csaba 72 Karakterentitások Szóköz: non breaking space vagy <: less than: < vagy < >: greater than: > vagy >

9 x1.htm XHTML és CSS Holló Csaba 73 XHTML és CSS Holló Csaba 74 XHTML és CSS Holló Csaba 75 <html><body bgcolor= #ffff00 > Elso sor, de ez nem a második! 6 < 9 8 &#62 5 </body></html> Első sor, de ez nem a második! 6 < 9 8 > 5 1. Mi a HTML, XHTML és CSS? 2. Objektumok definíciója 3. XHTML és CSS nyelvtan 4. Fontosabb objektumok 5. Karakterek 6. CSS rangsor CSS rangsor 1. Böngésző 2. Felhasználói stílusok 3. Külső stílusok 4. Beágyazott stílusok 5. Szövegközi stílusok XHTML és CSS Holló Csaba Böngésző minden böngészőnek megvan a maga alapértelmezett megjelenítési módja ezek a legtöbbször megegyeznek: fehér háttér, kék, aláhúzott linkek, stb. XHTML és CSS Holló Csaba Felhasználói stílusok a böngésző alapbeállításainak megváltoztatásával jönnek létre néhány alap dolgot (pl. betűtípus, színek) a böngészőben is át lehet állítani, másokat csak kézi szerkesztéssel Eszközök / XHTML és CSS Holló Csaba 78 Internetbeállítások... / Általános / Színek, betűkészletek Kisegítő lehetőségek / Dokumentumok formázása saját stíluslappal XHTML és CSS Holló Csaba 79 XHTML és CSS Holló Csaba Külső stílusok az XHTML fejlécbe (<head>), a <title> után kell elhelyezni a stíluslapra mutató hivatkozást célszerű css kiterjesztést adni neki XHTML és CSS Holló Csaba Külső stílusok <head><title> Cím </title> <link rel= stylesheet type= text/css href= />

10 XHTML és CSS Holló Csaba Külső stílusok használata ideális, ha ugyanazon stíluslapot egyszerre sok XHTML oldalon szeretnénk alkalmazni egy fájl szerkesztésével az egész honlap kinézetét megváltoztathatjuk XHTML és CSS Holló Csaba Beágyazott stílusok az XHTML dokumentum fejlécében, a <title> és külső stíluslap hivatkozás után találhatók csak arra a dokumentumra érvényesek, amelyben elhelyeztük őket XHTML és CSS Holló Csaba Beágyazott stílusok akkor használandók, ha különálló weblapot hozunk létre a külső stíluslaphoz képest csak azon az oldalon kisebb változtatásokat szeretnénk XHTML és CSS Holló Csaba Beágyazott stílusok <style type = text/css > <!-- p { font: 0.8em Arial; color: #000 } --> </style> XHTML és CSS Holló Csaba Beágyazott stílusok a teljes stílusmeghatározás készletet megjegyzésbe tehetjük, hogy az azt nem ismerő régi böngészők ne akarják megjeleníteni /* CSS-ben viszont így írhatunk megjegyzéseket */ XHTML és CSS Holló Csaba Szövegközi stílusok néhány XHTML címkének lehet style jellemzője, amiben csak rá vonatkozó stílust adhatunk meg <p style="color: blue; margin-left: 20px"> Ez egy bekezdés </p> XHTML és CSS Holló Csaba Öröklés 8. Szűkítés használata 10. Megjelenítési jellemzők 11. Stílusok beolvasása 12. DOCTYPE XHTML és CSS Holló Csaba 89 Öröklés az XHTML dokumentum objektumait egymásba ágyazzuk, így azok faszerkezetet alkotnak html head body XHTML és CSS Holló Csaba 90 Öröklés a beágyazott elemek öröklik a szülő tulajdonságait: h1 { text-color: green } em { text-style: italic } <h1>a címsor <em>igen</em> fontos! </h1>

11 XHTML és CSS Holló Csaba 91 Öröklés a százalékban megadott értékek a korábbi beállításon alapulnak p { font-size: 10pt } p { line-height: 120% } /* relatív a 'font-size' tulajdonsághoz, tehát 12pt */ XHTML és CSS Holló Csaba 92 Öröklés az öröklést megszakíthatja olyan stílus, mely csak az adott objektumra vonatkozik vannak tulajdonságok, melyek nem öröklődnek; pl: padding, border, margin, background XHTML és CSS Holló Csaba Öröklés 8. Szűkítés használata 10. Megjelenítési jellemzők 11. Stílusok beolvasása 12. DOCTYPE XHTML és CSS Holló Csaba 94 Szűkítés a szűkebb (nagyobb súlyú, azaz pontosabb) stílusok ütközés esetén felülbírálják a kisebb súlyúakat később fogunk példákat látni erre XHTML és CSS Holló Csaba Öröklés 8. Szűkítés használata 10. Megjelenítési jellemzők 11. Stílusok beolvasása 12. DOCTYPE XHTML és CSS Holló Csaba 96 használata a <link>-hez hasonlóan külső stíluslapot kapcsol a dokumentumhoz lehet vele stíluslapot beolvastatni egy másik stíluslapba XHTML és CSS Holló Csaba 97 használata egyes régebbi böngészők (pl. Netscape 4) nem ismerik és figyelmen kívül hagyják, ezért a régebbi böngészők által nem ismert stíluselemeket tartalmazó stíluslapokat szokták ezzel beolvastatni XHTML és CSS Holló Csaba 98 használata Internet Explorer 6-ban, <link> hiányában a formázatlan tartalom bevillanása (flash of unstyled content, FOUC) hatást okozhatja: a tartalom először formázás nélkül megjelenik, majd jól újrarajzolja XHTML és CSS Holló Csaba 99 használata a fejlécben, a <style> elem belsejében a beágyazott stílusok előtt kell szerepelnie. Pl.

12 XHTML és CSS Holló Csaba 100 használata <link rel = stylesheet type = text/css href =... /> <style type = text/css > url(stilus.css); --> </style> p {font-size: small;} XHTML és CSS Holló Csaba Öröklés 8. Szűkítés használata 10. Megjelenítési jellemzők 11. Stílusok beolvasása 12. DOCTYPE XHTML és CSS Holló Csaba 102 Megjelenítési jellemzők A <link> tartalmaznak egy media jellemzőt adott eszközökhöz szánt stíluslapok létrehozására. A media jellemző lehetséges értékei: XHTML és CSS Holló Csaba 103 Megjelenítési jellemzők all (minden) aural (hangeszközök) Braille (Braille írás megjelenítésére alkalmas eszközök) embossed (domborított megjelenítés) XHTML és CSS Holló Csaba 104 Megjelenítési jellemzők handheld (kézi eszközök) print (nyomtató) projection (kivetítő) screen (képernyő) TTY (szövegkijelzős telefon) TV (televízió) XHTML és CSS Holló Csaba 105 Megjelenítési jellemzők A korszerű böngészők is jelenleg még csak néhányat ismernek ezek közül (all, screen, print, projection). XHTML és CSS Holló Csaba Öröklés 8. Szűkítés használata 10. Megjelenítési jellemzők 11. Stílusok beolvasása 12. DOCTYPE XHTML és CSS Holló Csaba 107 Stílusok beolvasása A böngésző az XHTML oldalt a stíluselemekkel együtt fentről lefelé kívülről befelé olvassa be és rangsorolja. Ha nincs felhasználói stíluslap: XHTML és CSS Holló Csaba 108 Stílusok beolvasása 1. először a laphoz kapcsolt külső fájlokban levő stílusokat, majd 2. a dokumentum fejlécébe ágyazott <style> elemben levő stílusokat, 3. végül a szövegközi <style> elemekben levő stílusokat olvassa be.

13 XHTML és CSS Holló Csaba Öröklés 8. Szűkítés használata 10. Megjelenítési jellemzők 11. Stílusok beolvasása 12. DOCTYPE XHTML és CSS Holló Csaba 110 A weblap részei 1. DOCTYPE 2. Fejrész 3. Törzsrész XHTML és CSS Holló Csaba 111 DOCTYPE Document Type Definition (DTD) dokumentumtípus meghatározás a HTML adott változatának szabályrendszere a DOCTYPE meghatározással adjuk meg, hogy melyiket választjuk XHTML és CSS Holló Csaba 112 A HTML kód érvényes, ha a kiválasztott DTD szabályrendszerének megfelelően írtuk meg. elvileg ez kellene biztosítsa, hogy minden böngészőben ugyanúgy jelenjen meg, de ez még nem teljesen működik XHTML és CSS Holló Csaba 113 A HTML kód érvényességének ellenőrzése alapból a címen lehetséges. Az érvényesség ellenőrzésére bizonyos HTML szerkesztőprogramok, illetve böngészőkiegészítők is képesek. XHTML és CSS Holló Csaba 114 Pl. egy Firefoxban telepíthető ilyen kiegészítő letölthető a címről HTML Validator néven. Az XHTML-hez három lehetséges DOCTYPE meghatározás tartozhat: 1. szigorú: XHTML és CSS Holló Csaba 115 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> csak a szerkezeti felépítésre vonatkozó elemeket és jellemzőket használhatjuk XHTML és CSS Holló Csaba átmeneti: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " DTD/xhtml1-transitional.dtd"> használhatók egyes nem szabványos XHTML megjelenítést beállító elemek és jellemzők is XHTML és CSS Holló Csaba 117 Pl. használható, de elavult elemnek számít a <p align= right > jellemző, mert manapság már CSS-el kellene szabványosan megoldani lehet, hogy az elavult elemeket egyszer majd nem lehet használni

14 XHTML és CSS Holló Csaba keretkészletes: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " kereteket tartalmazó weblapokhoz használják XHTML és CSS Holló Csaba 119 Az XHTML DOCTYPE meghatározás biztosítja, hogy a böngésző szabványkövető üzemmódban (standard mode) működjön, azaz a W3C előírásait a lehető legjobban megközelítő módon jelenítse meg a weblapot. XHTML és CSS Holló Csaba 120 Egyébként a böngésző ún. trükköző megjelenítési módot (quirks mode) használ. XHTML esetén a W3C javasolja, hogy adjuk meg az XML meghatározást és névteret. XHTML és CSS Holló Csaba 121 Az XML meghatározás: <?xml version= 1.0 encoding= utf-8?> Az XML névtér megadása: <html xmlns = " XHTML és CSS Holló Csaba 122 Az XML meghatározás megadása azonban az Internet Explorert nem szabványkövető, azaz trükköző megjelenítésre állíthatja át (pl. IE6). Az XML névteret azonban meg kell adnunk. XHTML és CSS Holló Csaba A fejrész 14. Meta objektumok 15. A címobjektum 16. Színek megadása 17. A törzs tulajdonságai 18. Címsorok XHTML és CSS Holló Csaba 124 A weblap részei 1. DOCTYPE 2. Fejrész 3. Törzs XHTML és CSS Holló Csaba 125 A fejrész <head>... </head> egyetlen kötelező eleme a cím, de ezen kívül még sok mindent tartalmazhat (dokumentummal kapcsolatos tudnivalók, stíluslapokra mutató hivatkozás, szkript kód, stb.) XHTML és CSS Holló Csaba A fejrész 14. Meta objektumok 15. A címobjektum 16. Színek megadása 17. A törzs tulajdonságai 18. Címsorok

15 XHTML és CSS Holló Csaba 127 Meta objektumok Metaadat: adatra vonatkozó adat Az egész weblapra vonatkozó információkat tartalmaznak: pl. szerző, nyelv, kulcsszavak, karakterkészlet Fontosak lehetnek a keresőprogramok számára XHTML és CSS Holló Csaba 128 Meta objektumok Üresek, csak nyitó tagjuk van Szintaxisuk eltér a többi objektum szintaxisától A fejobjektumba ágyazzuk be XHTML és CSS Holló Csaba 129 Meta objektumok <head> <meta name = tulajdonság content = a tulajdonság értéke /> </head> XHTML és CSS Holló Csaba 130 Meta objektumok <meta name= author content= Nagy Tihamér /> <meta name= keywords lang= hu content= jogszabályok, nyaralás /> XHTML és CSS Holló Csaba 131 http-equiv a name helyett használhatjuk olyan információk megadására, melyeket a szerver fejléc információként továbbíthat fontosabb értékei: XHTML és CSS Holló Csaba 132 content-type: a tartalom típusa; tipikusan a karakterkészletet szoktuk így megadni. Pl.: <meta http-equiv="content-type" content= "text/html;charset=iso " /> XHTML és CSS Holló Csaba 133 expires: a dokumentum lejárata; ezen időpont után a böngésző a dokumentumot akkor is újra letölti, ha az cache-ben megtalálható ha múltbeli időpontra állítjuk, akkor mindig le fogja tölteni Pl.: XHTML és CSS Holló Csaba 134 <meta http-equiv="expires" content= "Tue, 25 Aug :25:27 GMT" /> XHTML és CSS Holló Csaba A fejrész 14. Meta objektumok 15. A címobjektum 16. Színek megadása 17. A törzs tulajdonságai 18. Címsorok

16 XHTML és CSS Holló Csaba 136 A cím <head> <title> Ez a cím </title></head> nem használhatók címkék, dőlt vagy színes betűk sem a böngésző tetején levő címsorban lesz látható Mire jó? XHTML és CSS Holló Csaba 137 A cím 1. Ezt menti a böngésző, amikor a felhasználó felveszi a lapot a kedvencei közé. 2. A keresőprogramok használják az indexelés és katalogizálás során. Mire jó? XHTML és CSS Holló Csaba 138 A cím 3. Egy jó címből a felhasználó megtudhatja a webhely nevét és azon belül a weblap címét XHTML és CSS Holló Csaba 139 A cím: favikon A cím előtt kis képet, ún. favikont is meg lehet jeleníteni. Ehhez kell egy 16x16-os vagy 32x32-es 8 vagy 24 bites színezésű png, gif vagy ico kép. W3C szabványos beillesztése: XHTML és CSS Holló Csaba 140 A cím: favikon <head profile = " <link rel="icon" type="image/png" href="eleresiutvonal/kep.png" /> XHTML és CSS Holló Csaba 141 A cím: favikon A rel attribútumnak nincs előre meghatározott értékhalmaza, ezért adunk meg egy profile fájlt, amiben elmagyarázzuk, hogy mit jelent az "icon". XHTML és CSS Holló Csaba 142 A cím: favikon A Firefox, Opera és Netscape legújabb verziói felismerik, Internet Explorerben trükközni kell vele (esetenként a felhasználónak is). XHTML és CSS Holló Csaba A fejrész 14. Meta objektumok 15. A címobjektum 16. Színek megadása 17. A törzs tulajdonságai 18. Címsorok XHTML és CSS Holló Csaba 144 Színek megadása weblapokon Többféleképpen lehetséges: 1. hexadecimális: #r 1 r 2 g 1 g 2 b 1 b 2 r 1 r 2 : 00 - FF: red (piros) g 1 g 2 : 00 - FF: green (zöld) b 1 b 2 : 00 - FF: blue (kék) Additív színkeverés

17 XHTML és CSS Holló Csaba 145 Színek megadása weblapokon 256 * 256 * 256 = szín ha r 1 =r 2 =r, g 1 =g 2 =g, b 1 =b 2 =b, akkor rövidítve is írható: #rgb pl. #aa00cc = #a0c stílusnál: color: #a0c XHTML és CSS Holló Csaba 146 Színek #FF0000 = piros #0000FF = kék #00FF00 = zöld # = fekete #FFFFFF = fehér #FFFF00 = sárga #FF00FF = lila #00FFFF = világos kék XHTML és CSS Holló Csaba 147 Webtűrő szín a 00, 33, 66, 99, CC, FF karakter párok kombinációiból előállított bármely (összesen 216) szín, mely minden eszközön és operációs rendszeren majdnem azonos árnyalatban jelenik meg XHTML és CSS Holló Csaba az RGB értékek százalékban történő megadása a stílus megadásánál így néz ki: color: rgb(100%, 100%, 100%) 3. tízes számrendszerbeli értékekkel: color: rgb(255, 255, 255) XHTML és CSS Holló Csaba nevével adjuk meg (16 szín) black (fekete) white (fehér) gray (szürke) silver (ezüstszürke) yellow (sárga) red (piros) purple (lila) blue (kék) aqua (akvamarinkék) navy (mélykék) teal (pávakék) XHTML és CSS Holló Csaba 150 XHTML és CSS Holló Csaba 151 fuchsia (mályvaszín) maroon (gesztenyebarna) green (zöld) lime (világoszöld) olive (olajzöld) pl. color: green XHTML és CSS Holló Csaba A fejrész 14. Meta objektumok 15. A címobjektum 16. Színek megadása 17. A törzs tulajdonságai 18. Címsorok XHTML és CSS Holló Csaba 153 A weblap részei 1. DOCTYPE 2. Fejléc 3. Törzs

18 XHTML és CSS Holló Csaba 154 A törzs A törzs tartalmazza a megjelenítésre szánt HTML tartalmat. A továbbiakban megnézünk néhány formázási lehetőséget, melyek nem csak a törzs, hanem más objektumok esetén is használhatók. XHTML és CSS Holló Csaba 155 háttérszín background-color: RGB szín, színnév háttérkép background-image: url(képnév) XHTML és CSS Holló Csaba 156 háttérkép ismétlődés background-repeat: repeat (ismétlődik) no-repeat (nem ismétlődik) repeat-x (vízszintesen ismétli) repeat-y (függőlegesen ismétli) XHTML és CSS Holló Csaba 157 háttérképhelyzet background-position: top (felül), bottom(alul) center (középen) left (balra), right (jobbra) százalékérték, hossz XHTML és CSS Holló Csaba 158 háttérkapcsolás background-attachment: scroll (gördülő) fixed (rögzített) margó margin: százalékérték, hossz XHTML és CSS Holló Csaba 159 felső margó: margin-top: százalékérték, hossz jobb margó: margin-right: százalékérték, hossz alsó margó: margin-bottom: százalékérték, hossz XHTML és CSS Holló Csaba 160 bal margó: margin-left: százalékérték, hossz Pl. body { background-image: url(kep.gif); background-repeat: repeat-x; background-position: 100% 50%; margin-top: 20% } x2.html XHTML és CSS Holló Csaba 161 x2.html XHTML és CSS Holló Csaba 162 <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" " /xhtml1-strict.dtd"> <html xmlns= " <head> <link rel="stylesheet" type="text/css" href="x2a.css" /> <title> CSS alapok </title> <meta http-equiv="content-type" content="text/html;charset=iso " /> </head>

19 x2.html XHTML és CSS Holló Csaba 163 XHTML és CSS Holló Csaba 164 x2a.css XHTML és CSS Holló Csaba 165 <body> body { <p> Oldal szövege </p> margin: 100px 10px 0 0%; <p> <img src = /* Az objektum tartalma nem lehet "../../../Kepek/virag2.jpg" a margón; kivétel a body, ahol a alt= "Egy virág" /> háttér(kép) kiterjed a margóra is </p> (más objektumoknál nem). </body></html> Részletesen is megadható: x2a.css XHTML és CSS Holló Csaba 166 XHTML és CSS Holló Csaba 167 (pl. ha nem mindegyiket adjuk meg): margin-top: 100px; margin-right: 10px; margin-bottom: 0; --> 0 esetén nem kell mértékegység margin-left: 0%; */ x2a.css x2a.css XHTML és CSS Holló Csaba 168 background: #0A0 url(../../../kepek/h1.gif) 55% 55px no-repeat fixed; /* Ez ekvivalens azzal, hogy: background-color: #0A0; background-image: url(../../../kepek/h1.gif); background-position: 55% 55px; x2a.css XHTML és CSS Holló Csaba 169 XHTML és CSS Holló Csaba 170 x2a.css x2a.css XHTML és CSS Holló Csaba 171 background-repeat: no-repeat; background-attachment: fixed; --> az ablak gördítésénél mindig ugyanott látszik */ color: #FFF; }

20 Legyen x2.htm-ben: XHTML és CSS Holló Csaba 172 <link rel="stylesheet" type="text/css" href="x2b.css" /> x2b.css-ben pedig:... background: #0A0 url(../../../kepek/h1.gif) 55% 55px repeat-x fixed;... x2b.css XHTML és CSS Holló Csaba 173 XHTML és CSS Holló Csaba A fejrész 14. Meta objektumok 15. A címobjektum 16. Színek megadása 17. A törzs tulajdonságai 18. Címsorok XHTML és CSS Holló Csaba 175 Címsorok Nem keverendők a dokumentum címével A weblapok nevének azonosítására és alfejezetek címének megadására szolgálnak XHTML és CSS Holló Csaba 176 Címsorok Tagolják a weblapon megjelenő szöveget Áttekinthetővé válik a tartalom Tudatják, hogy milyen témával foglalkozik a weblap Kulcsszavakkal látják el a keresőprogramot XHTML és CSS Holló Csaba 177 Címsorok Hat szintje lehet fontossági sorrendben: h1, h2,, h6 h1: Heading 1 h2: Heading 2 h6: Heading 6 Példa: <h1>ez a főcím </h1> XHTML és CSS Holló Csaba 178 Címsorok Előírás szerint egy oldalon legfeljebb egy h1 szintű címsor lehet Ne használjuk a címsorokat szöveg nagyobbá tételére, illetve Ne helyezzünk el nagy méretű, vastagított szöveget cím helyett a keresőprogramokat félrevezetjük XHTML és CSS Holló Csaba 179 Címsorok Blokkszintű elemek: külön sorban jelennek meg, következő elem új sorba kerül Alapértelmezés szerint félkövér betűvel vannak szedve Stílus megadása: a szokásos módon XHTML és CSS Holló Csaba A dobozmodell 20. Szegélyek 21. Margók és belső margók 22. Helyzetmegadás 23. A z-index

21 XHTML és CSS Holló Csaba 181 Dobozmodell Vizuális formázási modell = W3C előírásai a dokumentumban lévő elemek megjelenésére Ezt a modellt használva a weblap minden eleme egy téglalap alakú dobozt formáz, ezt nevezik dobozmodellnek XHTML és CSS Holló Csaba 182 Külső margó Szegély Belső margó Tartalom XHTML és CSS Holló Csaba 183 XHTML és CSS Holló Csaba 184 A doboz szélességét a jobb és bal oldali margó, szegély és belső margó, valamint a tartalom szélességének összege adja A doboz magasságát a felső és alsó margó, szegély és belső margó, valamint a tartalom magasságának összege adja XHTML és CSS Holló Csaba 185 További információk a dobozmodellről (angol nyelven): Az Internet Explorer 8-nál korábbi változatai nem a W3C ismertetett előírásai szerint számolják a doboz méretét. XHTML és CSS Holló Csaba 186 A szabvány szerint a szélességhez (width) nem tartozik hozzá a padding, a border és a margin. Az IE 8-nál korábbi változatai a szélességbe beleszámolják a padding-ot és a border-t is. XHTML és CSS Holló Csaba 187 Pl. ha egy elemre: width: 300px; padding: 30px; border: 20px; Firefoxban a szélessége: 300px px px = 400px IE-ben a szélessége 300px és összenyomta a tartalmat. XHTML és CSS Holló Csaba 188 Azt a megoldást, amelynek segítségével mind a régebbi IE-ben, mind a szabványnak megfelelő böngészőkben jól megjelenő weblapot tudunk tervezni, dobozmodell-kij kijátszás (box model hack)-nek nevezik. Részletesen: XHTML és CSS Holló Csaba A dobozmodell 20. Szegélyek 21. Margók és belső margók 22. Helyzetmegadás 23. A z-index

22 XHTML és CSS Holló Csaba 190 Szegélyek értékeit az óramutató járásával egyező irányba soroljuk fel: border-top border-right border-bottom border-left vastagság: px, em, % thin (vékony), medium, XHTML és CSS Holló Csaba 191 Szegélyek thick (vastag) megadható szegély részeknek is pl.: border-top-width XHTML és CSS Holló Csaba 192 Szegélyek stílusok: border-style-top stb. none (nincs), hidden (rejtett) dotted (pontozott) dashed (szaggatott) solid (folytonos vonal) double (dupla vonal) XHTML és CSS Holló Csaba 193 Szegélyek stílusok: border-style-top stb. groove (barázda, bemélyített) ridge (perem, kidomborodó ) inset (süllyesztett) outset (kiemelkedő) inherit (öröklés) XHTML és CSS Holló Csaba 194 Szegélyek színek: pl. boder-top-color: szín megadás transparent (átlátszó) inherit (öröklés) x3.html XHTML és CSS Holló Csaba 195 <div id = "szegely"> <div class = "kozep"> groove </div> <div class = "jobb"> inset </div> <div id = "szoveg" class = "kozep"> Szegélyek </div> x3.html XHTML és CSS Holló Csaba 196 XHTML és CSS Holló Csaba 197 x3.css x3.css XHTML és CSS Holló Csaba 198 <div class = "kozep"> <span id = "szoveg2"> body { background-color: #fff; margin: 0.5em 1em 1em 1em; }.kozep{ text-align: center; }.jobb{ text-align: right; } Szegélyek2 #szegely{....bal{ text-align: left; } </span> </div> border-top: 30px groove #f00; #szoveg{ border: 10px dotted #0f0; } <div class = "bal"> outset </div> border-right: 30px inset #00f; <div class = "kozep"> ridge </div> </div> border-bottom: 30px ridge #f00; border-left: 30px outset #00f; } #szoveg2{ border: 10px dotted #f00; }

23 x3.html XHTML és CSS Holló Csaba 199 XHTML és CSS Holló Csaba A dobozmodell 20. Szegélyek 21. Margók és belső margók 22. Helyzetmegadás 23. A z-index XHTML és CSS Holló Csaba 201 Margók és belső margók margók: margin belső margók: padding értékek: px, %, em: a böngészőben beállított betűmérethez viszonyítva inherit (öröklés) XHTML és CSS Holló Csaba 202 Margók és belső margók értékeiket az óramutató járásával egyező irányba soroljuk fel: felső (top), pl. padding-top: 10px jobb (right), alsó (bottom), bal (left) x4.html XHTML és CSS Holló Csaba 203 x4.html XHTML és CSS Holló Csaba <link rel="stylesheet" type="text/css" href="x3.css" /> </head> <body> <div id = "minden"> Minden szövege <h1 id = "focim"> Fõcím: #focim > h1 </h1> <h2> h2 </h2> <div class = "fejezet"> fejezet </div> <h2 class = "fejezet"> h2.fejezet </h2> <h3 class = "fejezet"> h3 fejezet: a.fejezet > h3 </h3> <h4 class = "fejezet" id = "cimecske"> #cimecske >.fejezet > h4, </h4> x4.css XHTML és CSS Holló Csaba 205 XHTML és CSS Holló Csaba 206 body { margin: 0; background-color: #f00; } #minden { margin: 1em 1em 1em 1em; background-color: #000; color: #00f; } x4.css x4.html XHTML és CSS Holló Csaba 207 h1, h2, h3, h4 { color: #ff0; } #focim{ color: #0ff; }.fejezet { color: #f00; } h2.fejezet { color: #f90; } #cimecske{ color: #0f0; }

24 x4.html XHTML és CSS Holló Csaba 208 XHTML és CSS Holló Csaba 209 x4.html x4.css XHTML és CSS Holló Csaba 210 <div id = "tartalom"> Tartalom. <h3> tartalom h3 </h3> #tartalom { <h2> tartalom h2 </h2> <div class = "fejezet"> tartalom <.fejezet </div> <h2 class = "fejezet"> tartalom h2 fejezet </h2> <h3 class = "fejezet"> tartalom h3 fejezet </h3> </div> </div> </body></html> margin: em; background: #FFF; color: #000; } #tartalom.fejezet { color: #90f; } #tartalom h3 { color: #0f0; } #tartalom h3.fejezet { color: #bbb; } x4.html XHTML és CSS Holló Csaba 211 XHTML és CSS Holló Csaba 212 Egy objektum esetén ha többet akarunk láttatni a háttérképből, akkor megnövelhetjük az objektum méretét. Erre egy lehetőség az is, hogy nagyobb belső margót adunk az objektumnak. Pl. x5 XHTML és CSS Holló Csaba 213 h1{ color: #0ff; background-image: url(kutya1m.jpg);} h2{ color: #0ff; background-image: url(kutya1m.jpg); padding: 50px 0 130px 60px; } <h1> Fõcím: h1</h1> <h2> Cím: h2 </h2> XHTML és CSS Holló Csaba x5 214 XHTML és CSS Holló Csaba A dobozmodell 20. Szegélyek 21. Margók és belső margók 22. Helyzetmegadás 23. A z-index XHTML és CSS Holló Csaba 216 Egy egyedileg (pl. id-vel) beazonosított elem helyzetmegadása lehet: abszolút viszonyított rögzített statikus A mértékegység lehet px, em, %.

25 XHTML és CSS Holló Csaba 217 Abszolút helyzetmegadás #nev { position: absolute; top:20px; left: 30px; } az elemet kiveszi a normál szövegfolyamból és a tároló- tömbjéhez (beágyazó elemhez) képest az adott pozícióra helyezi XHTML és CSS Holló Csaba 218 Viszonyított helyzetmegadás #nev { position: relative; top:20px; left: 30px; } az elemet a normál szövegfolyami helyéhez képest elmozdítja a kért mértékben XHTML és CSS Holló Csaba 219 Rögzített helyzetmegadás #nev { position: fixed; top:20px; left: 30px; } az elem a görgetés ellenére is a helyén marad IE6-ban nem működik, IE7-ben már igen. Részletesen: XHTML és CSS Holló Csaba 220 Statikus helyzetmegadás #nev { position: static; } a normál szövegfolyamban levő helyén hagyja az elemet a pozíciók megadásának nincs hatása csak akkor használjuk, ha más helyzetmegadást örökölt és vissza akarjuk állítani x6.html... <body> XHTML és CSS Holló Csaba 221 <div id = "cim"> Címadatok: <div id = "verscim"> Mi mindíg búcsuzunk </div> <div id = "szerzo"> Reményik <br /> Sándor </div> </div> x6.html XHTML és CSS Holló Csaba 222 <div id = "szoveg"> <div id = "elso"> Mondom néktek: mi mindig búcsuzunk. <br />... A kemény rögtől, min megállt a lábunk. </div> x6.html XHTML és CSS Holló Csaba 223 <div id = "masodik"> Mert nincs napkelte kettő, ugyanaz, <br />... Valamitől mi mindíg búcsuzunk. </div> </div> x6.html <div id = "vege"> Szöveg alatti rész. </div> </body> </html> XHTML és CSS Holló Csaba 224 x6.css XHTML és CSS Holló Csaba 225 body{ font-size: 1.5em; } #cim { background-color: #eee; padding: 10px; width: 800px; position: absolute; top: 50px; left: 50px; font-size: 1.5em; font-weight: bold; }

26 x6 XHTML és CSS Holló Csaba 226 x6.css XHTML és CSS Holló Csaba 227 #verscim{ background-color: #ddf; x6 XHTML és CSS Holló Csaba 228 position: absolute; top: -20px; left: 300px; } #szerzo{ background-color: #fdd; position: fixed; top: 0px; left: 130px; } x6.css XHTML és CSS Holló Csaba 229 #szoveg{ background-color: #dfd; position: absolute; top: 100px; left: 340px; } #masodik{ background-color: #ffd; position: relative; top: 70px; left: 30px; } #vege{ color: #f00; } Úsztatás XHTML és CSS Holló Csaba 230 azt adja meg, hogy milyen irányban legyen úsztatva az elem eredetileg képekre alkalmazták, annak érdekében, hogy a szöveg körülfolyhassa a képet, de CSSben bármilyen elem úsztatható x7.html XHTML és CSS Holló Csaba 231 <body> <h1> Reményik Sándor: Mi mindíg búcsuzunk </h1> <p> Mondom néktek: mi mindíg búcsuzunk. <br />... A hangtól, mikor csendbe halkul el, <br /> x7.html XHTML és CSS Holló Csaba 232 <span id = "uszi"> Minden szótól, amit kimond a szánk, <br />... Minden képtől, mely belénk mélyedett, <br /> </span> Az álmainktól, mik nem teljesültek, <br />... x7.html XHTML és CSS Holló Csaba 233 A kemény rögtől, min megállt a lábunk. <br /> <br /> Mert nincs napkelte kettő, ugyanaz, <br /> Valamitől mi mindíg búcsuzunk. </p> </body> </html> x7.css XHTML és CSS Holló Csaba 234 #uszi{ float: left; width: 120px; margin-top: 80px; margin-right: 80px; margin-left: 50px; }

27 x7 XHTML és CSS Holló Csaba 235 x7 XHTML és CSS Holló Csaba 236 XHTML és CSS Holló Csaba 237 Összefoglalás position static (statikus) relative (viszonyított) absolute (abszolút) fixed (rögzített) inherit (öröklés) XHTML és CSS Holló Csaba 238 Összefoglalás float left (balra) right (jobbra) none (nincs) inherit (öröklés) XHTML és CSS Holló Csaba 239 Vízszintes középre igazítás #kozepre { margin-left: auto; margin-right: auto; text-align: center; } Ha azt akarjuk, hogy egy balra igazított szöveg középen legyen, akkor bele kell tennünk egy konténerbe. XHTML és CSS Holló Csaba 240 Vízszintes középre igazítás #balra { text-align: left: } <div id = kozepre > <div id = balra > szöveg </div> </div> XHTML és CSS Holló Csaba 241 Függőleges középre igazítás #fkozepre { width: magasság; height: szélesség; position: absolute; top: 50%; left: 50%; margin-top: -magasság/2; margin-left: -szélesség/2; } XHTML és CSS Holló Csaba 242 Függőleges középre igazítás Miért? a position: absolute; az objekium bal felső sarkát pozícionálja, viszont mi az objektum közepét szeretnénk középre helyezni. XHTML és CSS Holló Csaba Margók és belső margók 20. Szegélyek 21. A dobozmodell 22. Helyzetmegadás 23. A z-index

28 XHTML és CSS Holló Csaba 244 Z-index a weblap harmadik dimenziója (az x és y tengely után) az egymás fölött levő elemek közül az látható, amelyiknek nagyobb a z-indexe értékei tetszőlegesek lehetnek x8.html XHTML és CSS Holló Csaba <body> <h2 id = "cim"> Reményik Sándor: <br /> Mi mindíg búcsuzunk </h2> x8.html XHTML és CSS Holló Csaba 246 <div id = "v2"> Minden szótól, amit kimond a szánk, <br />... Minden képtől, mely belénk mélyedett, <br /> </div> x8.html XHTML és CSS Holló Csaba 247 <div id = "v3"> Az álmainktól, mik nem teljesültek, <br />... A kemény rögtől, min megállt a lábunk. <br />... </div> x8.html XHTML és CSS Holló Csaba 248 <div id = "v1"> Mondom néktek: mi mindig búcsuzunk. <br />... A hangtól, mikor csendbe halkul el, <br /> </div> </body> </html> x8.css XHTML és CSS Holló Csaba 249 #cim { z-index:0; position:absolute; left:435px; top:25px; } x8.css XHTML és CSS Holló Csaba 250 #v1 { position:absolute; left: 5px; top: 0px; width: 360px; height: 120px; border: 10px dotted #efe; padding: 10px; z-index:1; background: #efe; } x8.css XHTML és CSS Holló Csaba 251 #v2 { position: absolute; left: 185px; top: 135px; width: 340px; height: 110px; border: 10px double #dfd; padding: 10px; z-index:30; background: #dfd; } x8.css XHTML és CSS Holló Csaba 252 #v3 { position:absolute; left: 388px; top: 255px; width:380px; height:180px; border: 10px dashed #cfc; padding:10px; z-index:30; background: #bfb; }

29 x8 XHTML és CSS Holló Csaba Átlátszóság 25. A title tulajdonság 26. Vonalak XHTML és CSS Holló Csaba 254 XHTML és CSS Holló Csaba 255 Az oldalakon elhelyezett objektumokat (jellemzően képeket, háttereket) az általunk kívánt mértékben átlátszóvá tudjuk tenni. 27. Nyomtatás formázása A megoldás böngészőfüggő és szabványosan CSS-ben szabályozzuk: Szabványos (Firefox): XHTML és CSS Holló Csaba (átlátszó) és 1 (nem átlátszó) közötti értékekkel opacity: 0.1; Internet Explorer: 0 (átlátszó) és 100 (nem átlátszó) közötti értékekkel filter: alpha(opacity=10); XHTML és CSS Holló Csaba 257 Az alábbi példában a felső sorban a kép háttérképként, a többi esetben az egyszínű háttérszínnel rendelkező szöveggel azonos helyre pozícionált normál képként van elhelyezve: x9 XHTML és CSS Holló Csaba 258 Jelölések: v1,v2,..., v6: a szövegek h3, h4, h5, h6: a képek #v1 {... opacity: 1.0; filter: alpha(opacity=100); } #v2 {... opacity: 0.5; filter: alpha(opacity=50); } x9 XHTML és CSS Holló Csaba 259 x9 XHTML és CSS Holló Csaba 260 #v3 { position:absolute;... } #h3 { position:absolute; z-index:1; opacity: 1.0; filter: alpha(opacity=100); } #v4 { position:absolute;... } #h4 {... z-index:1; opacity: 0.6; filter: alpha(opacity=60); } x9 XHTML és CSS Holló Csaba 261 #v5 { position:absolute;... } #h5 {... z-index:1; opacity: 0.3; filter: alpha(opacity=30); } #v6 { position: absolute;... } #h6 {... z-index:1; opacity: 0.1; filter: alpha(opacity=10); }

30 XHTML és CSS Holló Csaba Átlátszóság 25. A title tulajdonság 26. Vonalak 27. Nyomtatás formázása XHTML és CSS Holló Csaba 263 A title tulajdonság a legtöbb DHTML-objektum rendelkezik vele szövege egy kis sárga téglalapban (tooltip) megjelenik a képernyőn, ha az egeret az objektum fölé visszük XHTML és CSS Holló Csaba 264 a behavior stíluselem használatával lehetőségünk van a HTML eszközkészlet felhasználására a title megadásánál bővebb információk a Microsoft Development Network weblapján találhatók XHTML és CSS Holló Csaba Átlátszóság 25. A title tulajdonság 26. Vonalak 27. Nyomtatás formázása XHTML és CSS Holló Csaba 266 Vizszintes vonal: <hr /> width: szélesség height: magasság color: vonalszín border: szegély position, left stb.: hol legyen az oldalon x11 XHTML és CSS Holló Csaba 267 Függőleges vonal nincs külön HTML tag megoldás: képként vagy div objektumként tesszük be.fv { height: 200px; width: 0px; border-left:2px dotted #ff0; } XHTML és CSS Holló Csaba Átlátszóság 25. A title tulajdonság 26. Vonalak 27. Nyomtatás formázása XHTML és CSS Holló Csaba 269 a media jellemző print tulajdonságának használatával nyomatási stíluslapot is készíthetünk ha ezt a mindenre érvényes (media= all ) stíluslap után illesztjük be, akkor elég ebben csak a különbségeket leírni x14.html XHTML és CSS Holló Csaba <link rel="stylesheet" type="text/css" href="x9a.css" media = "all"/> <link rel="stylesheet" type="text/css" href="x9p.css" media = "print"/> </head> <body>

31 XHTML és CSS Holló Csaba 271 ha a weboldal nyomtatásakor valamit el akarunk rejteni (pl. keresés mező), akkor annak stílusában a display jellemzőnek none értéket kell adni. Pl. #kereses { display: none;} nem hagy ki helyet, hanem kiveszi a szövegfolyamból XHTML és CSS Holló Csaba 272 Általános vélemény, hogy a képernyőn a talp nélküli betűket (pl. Verdana, Arial, Helvetica, sans-serif), míg nyomtatásban a talpas betűket (pl. Georgia, Times, serif) könnyebb olvasni. XHTML és CSS Holló Csaba 273 Nyomtatáskor más mértékegységeket használunk, mint a Weben: in (inch, hüvelyk, kb mm) pt (pont = in/72), pc (pica = 12 pt) A nyomtatási stílusban adjuk meg a margókat és a betűméreteket! XHTML és CSS Holló Csaba 274 Míg a Weben ajánlatos keskeny sorokat használni az olvashatóság érdekében, nyomtatásban jobb, ha szélesebb sorokat használunk (olvashatóság, papír takarékosság) XHTML és CSS Holló Csaba 275 A felhasználó számára a böngészőben számos nyomtatási beállítás rendelkezésére áll (pl. nyomtasson-e háttér(kép)et, oldalszámot, URL címeket stb.) XHTML és CSS Holló Csaba 276 A felhasználó többnyire nem nyomtatja ki a hátteret, ezért egyrészt ne bízzunk abban, hogy a nyomtatásban is lesz háttérkép, másrészt gondoskodjuk róla, hogy a nyomtatásban a fehér lapon is láthatók legyenek a betűk. XHTML és CSS Holló Csaba 277 Nyomtatási stílusoknál olyan színeket adjunk meg, amelyek akkor is látszani fognak, ha azokat fekete-fehér nyomtatóval nyomtatják ki. XHTML és CSS Holló Csaba 278 A. Alapfogalmak B. Szövegek C. Hivatkozások D. Képek és multimédia E. Listák és számlálók 1. Rövidítés 2. Címhivatkozás 3. Idézetblokk 4. Kihangsúlyozás 5. Kódok formázása 6. Indexek XHTML és CSS Holló Csaba 279

32 XHTML és CSS Holló Csaba 280 Rövidítés <abbr>... </abbr> többnyire a title jellemzővel adjuk meg, hogy mit rövidít, de pl. nyomtatásban nem jelenik meg, ezért a magyarázatot ajánlatos nyomtatásban megjelenő módon (is) megadni. 1. Rövidítés 2. Címhivatkozás 3. Idézetblokk 4. Kihangsúlyozás 5. Kódok formázása 6. Indexek XHTML és CSS Holló Csaba 281 <cite>... </cite> XHTML és CSS Holló Csaba 282 Címhivatkozás más információforrások (pl. könyvek) címének kiemelése többnyire idézetekkel együtt használják, annak megadására, hogy miből idézünk (pl. könyv címe) 1. Rövidítés 2. Címhivatkozás 3. Idézetblokk 4. Kihangsúlyozás 5. Kódok formázása 6. Indexek XHTML és CSS Holló Csaba 283 XHTML és CSS Holló Csaba 284 Idézetblokk <blockquote>... </blockquote > szövegblokk idézetként való kezelését jelenti ne használjuk csupán szövegbehúzás érdekében 1. Rövidítés 2. Címhivatkozás 3. Idézetblokk 4. Kihangsúlyozás 5. Kódok formázása 6. Indexek XHTML és CSS Holló Csaba 285 <em>... </em > XHTML és CSS Holló Csaba 286 Kihangsúlyozás szövegrész fontosságának hangsúlyozására semmi köze a mértékegységként használt em-hez általában dőlt betűvel jelenik meg XHTML és CSS Holló Csaba 287 Kihangsúlyozás <strong>... </strong> szövegrész fontosságának még erősebb kihangsúlyozására általában vastagított betűkkel jelenik meg XHTML és CSS Holló Csaba 288 Kihangsúlyozás ha csak formázni szeretnénk a szöveget, akkor ne használjunk hangsúlyozó elemeket, helyette lehet CSS-ben formázzuk.

33 1. Rövidítés 2. Címhivatkozás 3. Idézetblokk 4. Kihangsúlyozás 5. Kódok formázása 6. Indexek XHTML és CSS Holló Csaba 289 <code>... </code> számítógépes kódok <kbd>... </kbd> XHTML és CSS Holló Csaba 290 billentyűzetről beviendő utasítások <tt>... </tt> további célú írógépbetűk <pre>... </pre> XHTML és CSS Holló Csaba 291 megtartja az eredeti dokumentum szerinti szóközöket, sortöréseket pl. ASCII karakterekkel előállított képekhez vagy egyszerű táblázatok kialakítására használják ugyanez CSS-el szabványosan is megvalósítható 1. Rövidítés 2. Címhivatkozás 3. Idézetblokk 4. Kihangsúlyozás 5. Kódok formázása 6. Indexek XHTML és CSS Holló Csaba 292 x10 XHTML és CSS Holló Csaba 293 Felső és alsó index ^{(superscript) felső index} _{(subscript) alsó index} XHTML és CSS Holló Csaba Szövegdíszítés és átalakítás 8. Betűk eltávolítása 9. Sortörés 10. Sorok behúzása 11. Karakterek és formázásuk XHTML és CSS Holló Csaba 295 text-decoration none: nincs underline: aláhúzott overline: föléhúzott line-through: átthúzott blink: villogó inherit: öröklés text-transform XHTML és CSS Holló Csaba 296 uppercase: nagybetűs lowercase: kisbetűs capitalize: nagy kezdőbetűs (böngászőfüggő, hogy mi számít "szónak") none, inherit x13.html... <body> <p> XHTML és CSS Holló Csaba 297 <span class ="foleathuzott"> 1. Fölé és áthúzott szöveg. <br /> </span> <span class ="kisbetus"> 2. Hosszú szöveg. <br /> </span>

34 x13 XHTML és CSS Holló Csaba 298 x13.html XHTML és CSS Holló Csaba 299 <span class ="nagybetus"> 3. Hosszú szöveg. <br /> </span> <span class ="nagykezdobetus"> 4. hosszú szöveg. további HOSSZÚ szöveg. 5. hosszú szöveg. </span> </p> </body></html> x13.css XHTML és CSS Holló Csaba 300 body { background-color: #0A0; font-size: 2em; color: #fff; }.foleathuzott { text-decoration: line-through overline; } x13.css XHTML és CSS Holló Csaba 301.kisbetus { text-transform: lowercase; }.nagybetus { text-transform: uppercase; }.nagykezdobetus { text-transform: capitalize; } XHTML és CSS Holló Csaba Szövegdíszítés és átalakítás 8. Betűk eltávolítása 9. A sormagasság beállítása 10. Sortörés 11. Sorok behúzása XHTML és CSS Holló Csaba 303 a karakterek közötti távolság a letter-spacing tulajdonsággal állítható negatív érték esetén a karakterek közelebb kerülnek egymáshoz. XHTML és CSS Holló Csaba Szövegdíszítés és átalakítás 8. Betűk eltávolítása 9. A sormagasság beállítása 10. Sortörés 11. Sorok behúzása XHTML és CSS Holló Csaba 305 a sor magassága a line-height kijelölővel állítható be; ez adja meg, hogy az egyes sorok milyen távolságra legyenek egymástól; negatív érték nem szabályos, még akkor sem, ha egyes böngészőkben működik. XHTML és CSS Holló Csaba Szövegdíszítés és átalakítás 8. Betűk eltávolítása 9. A sormagasság beállítása 10. Sortörés 11. Sorok behúzása

35 x12 XHTML és CSS Holló Csaba 307 white-space: normal: a többszörös üres helyeket egyetlen szóközzé alakítja pre: megőrzi a többszörös üres helyeket nowrap: <br /> hiányában nincs sortörés még sor végén sem x12 XHTML és CSS Holló Csaba 308 white-space: pre-wrap: megőrzi a többszörös üres helyeket, de engedélyezi az automatikus sortörést pre-line: megőrzi a sortörést, egyébként normal x12 XHTML és CSS Holló Csaba 309 Ezek a formázások nem csak egy oldalra, de azon belül bármilyen blokkobjektumra is így működnek Ezeket a lehetőségeket (jellemzően az utolsó kettőt) a böngészők nem mind ismerik. XHTML és CSS Holló Csaba Szövegdíszítés és átalakítás 8. Betűk eltávolítása 9. A sormagasság beállítása 10. Sortörés 11. Sorok behúzása XHTML és CSS Holló Csaba 311 a text-indent jellemzővel megadhatjuk a tömbszerű elem (pl. bekezdés) első sorának behúzásának mértékét; negatív érték megadása kilógást eredményez. x14.html XHTML és CSS Holló Csaba <link rel="stylesheet" type="text/css" href="x9a.css" media = "all"/> <link rel="stylesheet" type="text/css" href="x9p.css" media = "print"/> </head> <body> x14.html XHTML és CSS Holló Csaba 313 <p> A <abbr title="hypertext Markup Language"> HTML </abbr> (Hypertext Markup Language) egy rövidítés.</p> x14.html XHTML és CSS Holló Csaba 314 x14.html XHTML és CSS Holló Csaba 315 <p> A <cite> Kosár Magazin</cite> legújabb számában olyasmiket olvashatunk, mint <em>dvd teszt</em>, <em>fekete teák tesztje</em> stb.</p>

36 x14.html XHTML és CSS Holló Csaba 316 x14.html XHTML és CSS Holló Csaba 317 <blockquote cite = " <p> Rosszul van a világ megalkotva. Aki szeret, azt nem szeretik. Akit szeretnek, az nem szeret. Aki szeret és viszontszerettetik, azt is előbb-utóbb elválasztják szerelmétől. (Romain Rolland) <p></blockquote> x14.html XHTML és CSS Holló Csaba 318 <p> Ha csak <em> formázni </em> szeretnénk a szöveget, akkor <strong> ne </strong> használjunk hangsúlyozó elemeket, helyette lehet pl. <i> dőltés </i> vagy <b> vastagítás</b>. x14.html XHTML és CSS Holló Csaba 319 x14.html <span id = "kodok"> XHTML és CSS Holló Csaba 320 x14.html XHTML és CSS Holló Csaba 321 Írhatók továbbá <code> számítógépes kódok</code>, <kbd> billentyűzetről beviendő utasítások</kbd>, vagy <tt> további célú írógépbetűk</tt> is. </span> x14.html XHTML és CSS Holló Csaba 322 De az eredeti formázás is megtartható: <pre> Mindig az a perc a legszebb perc <span id = "szoveg"> Mit meg nem ád az élet</span>, Az a legszebb csók, mit el nem csókolunk. (Mihály István) </pre> </p> x14.html XHTML és CSS Holló Csaba 323 x14.html XHTML és CSS Holló Csaba 324 <p id = "nyomtat"> Ez csak a nyomtatható változatban látszik. </p> </body> </html>

37 x14a.css XHTML és CSS Holló Csaba 325 body { margin-right: 14%; margin-left: 14%; background: #009; font: 1em Verdana, Arial; color: #fff; } x14a.css XHTML és CSS Holló Csaba 326 #szoveg{ font: 0.8em Verdana; color: #ff0; } cite { color:#0f0; } #nyomtat { display: none; } x14.html XHTML és CSS Holló Csaba 327 x14.html XHTML és CSS Holló Csaba 328 x14p.css XHTML és CSS Holló Csaba 329 body { margin: 0.5in; background: #fdd; font-family: Georgia, Times, serif; font-size: 14pt; color: #000; } x14p.css XHTML és CSS Holló Csaba 330 #kodok { display: none; } p { text-indent: 1.8em; } #nyomtat { display: inline; letter-spacing: 0.5em; } x14p XHTML és CSS Holló Csaba 331 XHTML és CSS Holló Csaba 332 XHTML és CSS Holló Csaba 333 A. Alapfogalmak 1. A webhely azonosítása B. Szövegek 2. A webhely megtervezése C. Hivatkozások 3. A hivatkozás szintaxisa D. Képek és multimédia E. Listák és számlálók 4. Mire hivatkozhatunk? 5. Az elérési út

38 XHTML és CSS Holló Csaba 334 URI: Uniform Resource Identifier egységes erőforrás-azonosító webes erőforrásokat azonosít kétféleképpen azonosíthat: hely szerint (URL) vagy név szerint (URN). XHTML és CSS Holló Csaba 335 URL: Uniform Resource Locator egységes erőforráscím a kiszolgálók és azon belül a fájlok helyét adja meg Pl. XHTML és CSS Holló Csaba 336 URN: Unversal Resource Name elektronikus dokumentumok hosszútávú azonosítására szolgál Pl: urn:isbn: egy könyvet azonosít az ISBN adata alapján nem mond semmit a könyv helyéről, elérhetőségéről XHTML és CSS Holló Csaba 337 URN: Unversal Resource Name egy központi adatbázisban az URL-el együtt tárolják az URL változásakor ezt frissítve, a külső linkek továbbra is jól tudnak működni XHTML és CSS Holló Csaba A webhely azonosítása 2. A webhely megtervezése 3. A hivatkozás szintaxisa 4. Mire hivatkozhatunk? 5. Az elérési út XHTML és CSS Holló Csaba 339 Mindig van egy főkönyvtár, melyben akárhány alkönyvtárunk lehet, ezekben kell mindent elhelyeznünk Ha egy könyvtárban van index.htm, index.html vagy default.htm nevű fájl, akkor a könyvtárhivatkozással automatikusan az nyitódik meg Pl.: XHTML és CSS Holló Csaba a / a könyvtárnév végén gyorsítja a letöltést a nyitódik meg XHTML és CSS Holló Csaba 341 A könyvtár nevében lehetnek betűk, számok betűvel kezdődik -, _ de a nyilvános könyvtárnevekben lehetőleg kerüljük (nehezen megjegyezhetők) Fontos a jó tervezés, mert: XHTML és CSS Holló Csaba 342 Később nehéz a fájlokat áthelyezni, mert javítani kell az összes rájuk mutató relatív hivatkozást A felhasználók könyvjelzői nem fognak működni A tartalomnak minél könnyebben átláthatónak kell lenni

39 XHTML és CSS Holló Csaba A webhely azonosítása 2. A webhely megtervezése 3. A hivatkozás szintaxisa 4. Mire hivatkozhatunk? 5. Az elérési út XHTML és CSS Holló Csaba 344 Hivatkozás (hyperlink) Egy hivatkozásnak két része van, melyeket gyűjtőnéven horgonyoknak szoktak nevezni: forrás (amire kattintani lehet) cél (ahova mutat). XHTML és CSS Holló Csaba 345 A forrás megadása XHTML-ben az <a> (anchor) taggal lehetséges: <a> XHTML objektum </a> A kattintható XHTML objektum többnyire szöveg, de más objektum (kép, gomb stb.) is lehet. XHTML és CSS Holló Csaba 346 A cél URI-jét, vagyis azt, hogy hova mutasson a link, az <a> tag href (hypertext reference) tulajdonságának értékeként adjuk meg. A forrásra kattintva a böngésző a href értékeként megadott célt jeleníti meg. XHTML és CSS Holló Csaba 347 Lehetőség van arra is, hogy célként egy weboldalon belül azonosított pontot adjunk meg. Ezt azonosíthatjuk id-vel, vagy megadhatjuk a következőképpen: <a name="celneve"> Első cél </a> XHTML és CSS Holló Csaba 348 A hivatkozott URL általános alakja <a href= Protokoll:// gép.domain[:port] / út / fájlnév[#celneve] > Ide kattints! </a> töredék (fragment) XHTML és CSS Holló Csaba 349 Azonos oldalon belüli célt például így adhatunk meg: <a href= #ide.ugrik > Ugrás! </a> Másik oldalon levő célt pedig például így: <a href= masik.htm#ide.ugrik > Ugrás! </a> XHTML és CSS Holló Csaba A webhely azonosítása 2. A webhely megtervezése 3. A hivatkozás szintaxisa 4. Mire hivatkozhatunk? 5. Az elérési út XHTML és CSS Holló Csaba 351 Gyakoribb protokoll értékek: http: helyi vagy távoli WWW szerveren levő HTML dokumentum (alapértelmezés) file: helyi állomány ftp: FTP szerveren levő állomány

40 XHTML és CSS Holló Csaba 352 Gyakoribb protokoll értékek: telnet: bejelentkezés másik gépre mailto: a saját gépen beállított levelezőrendszer elindítása, a látogató a megadott címre t küldhet Pl. XHTML és CSS Holló Csaba 353 Ez a <a href= > honlapom! </a> <br> Ez egy <a href= file://e:\chollo\p2.htm > fájl </a> a saját gépen. XHTML és CSS Holló Csaba 354 <a href= ftp://sol.cc.u-szeged.hu > FTP kapcsolat </a> <BR> Ez a honlapom! Ez egy fájl a saját gépen. FTP kapcsolat XHTML és CSS Holló Csaba 355 XHTML és CSS Holló Csaba 356 <a href= telnet://sol.cc.uszeged.hu > Telnet </a> <br> XHTML és CSS Holló Csaba 357 <a href= mailto:chollo@inf.uszeged.hu > Írj nekem! </a> XHTML és CSS Holló Csaba 358 A levél tárgysorát is automatikusan kitöltethetjük, ebben az esetben: <a href= mailto:chollo@inf.uszeged.hu?subject=targy > Írj nekem! </a> XHTML és CSS Holló Csaba A webhely azonosítása 2. A webhely megtervezése 3. A hivatkozás szintaxisa 4. Mire hivatkozhatunk? 5. Az elérési út XHTML és CSS Holló Csaba 360 Az elérési út lehet abszolút vagy relatív. <head> <base href= /> relatív linkek alapértelmezett kiinduló könyvtára </head>

41 XHTML és CSS Holló Csaba 361 <html><head> <base href= " /> </head> <body> <a href= " oktat/04_2/progi0405.htm"> Abszolút link </a> <br> <a href=../oktat/04_2/progi0405.htm"> Relatív link ugyanarra.</a> </body></html> XHTML és CSS Holló Csaba Hivatkozások egyszerű formázása 7. Az éppen látható weblapra mutató hivatkozás 8. Hivatkozások formázása háttérkép segítségével XHTML és CSS Holló Csaba 363 A hivatkozásoknak 4 fő állapota lehet: 1. a felhasználó még nem kereste fel 2. a felhasználó felkereste 3. az egér fölötte áll 4. használatban van (a hivatkozott oldal betöltése folyamatban van) XHTML és CSS Holló Csaba 364 Az állapot szerinti formázásokra a CSS álosztály-kijelölőket használ. A hivatkozások álosztályok, mert a hivatkozás állapota nem szerepel az XHTML kódban, hanem a felhasználó tevékenységétől függ. XHTML és CSS Holló Csaba 365 A fenti állapotokhoz sorrendben az alábbi kijelölőket használjuk: a:link - a felhasználó még nem kereste fel a:visited - a felhasználó már felkereste a:hover - az egér fölötte áll a:active - éppen aktív XHTML és CSS Holló Csaba 366 Használhatjuk ezeket más kijelölőkkel együtt is. Pl. #linkek a:link{ color:#0f0; } #linkek a:visited{ color:#0f0; } #linkek a:hover{ color:#fff; } #linkek a:active{ color:#f00; } Viszont fontos ez a sorrend! XHTML és CSS Holló Csaba 367 Azokat az oldalakat tekinti felkeresetteknek, amelyek szerepelnek az adott böngésző böngészési előzményei között. Az a:link teszteléséhez szükség lehet arra, hogy az oldal újból nem felkeresettnek minősüljön. XHTML és CSS Holló Csaba 368 Ha egy már meglátogatott oldalt vissza szeretnénk állítani nem meglátogatottra, akkor törölni kell azt az adott böngészőben a böngészési előzmények közül. XHTML és CSS Holló Csaba 369 A kattintható objektumot a böngészők általában aláhúzva vagy bekeretezve jelenítik meg. Ezt beállítani vagy letiltani az objektum text-decoration, illetve border tulajdonságának none értékével lehet.

42 XHTML és CSS Holló Csaba Hivatkozások egyszerű formázása 7. Az éppen látható weblapra mutató hivatkozás 8. Hivatkozások formázása háttérkép segítségével XHTML és CSS Holló Csaba 371 Ha írunk egy menüsort, mely hivatkozásokat tartalmaz, jó ha a menüsor tartalma változatlan marad, bármelyik oldalt is nézzük. Másfelől valahogyan mégis jelezni kellene, hogy éppen melyik hivatkozás által mutatott oldalt nézzük. x15m1.html XHTML és CSS Holló Csaba 372 x15m2.html XHTML és CSS Holló Csaba 373 x15m3.html XHTML és CSS Holló Csaba 374 XHTML és CSS Holló Csaba x15m*.html 375 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <link rel="stylesheet" type="text/css" href="x15.css" /> <title> Menük </title> <meta http-equiv="content-type" content="text/html;charset=iso " /> </head> <body> <div id = "menu"> x15m1.html XHTML és CSS Holló Csaba 376 <a href="x15m1.html" class = "aktualis"> Első</a> <a href="x15m2.html"> Második</a> <a href="x15m3.html"> Harmadik</a> </div> <hr /> <div id = "elso"> Ez az első oldal. </div> </body></html> x15m1.html XHTML és CSS Holló Csaba 377 x15.css XHTML és CSS Holló Csaba 378 body{ font-size: 3em; } #menu{ background-color: #eee; border: 30px groove #00f; } a.aktualis:link{ color:#f00;} a.aktualis:visited{ color:#f90; } a.aktualis:hover{ color:#f0f; } a.aktualis:active{ color:#000; }

43 x15m1.html XHTML és CSS Holló Csaba 379 x15m1.html XHTML és CSS Holló Csaba 380 x15m1.html XHTML és CSS Holló Csaba 381 x15m2.html XHTML és CSS Holló Csaba 382 <a href="x15m1.html"> Első</a> <span class = "aktualis"> <a href="x15m2.html"> Második</a> </span> <a href="x15m3.html"> Harmadik</a> </div> <div id = "masodik"> Ez a második oldal.</div> </body></html> x15.css XHTML és CSS Holló Csaba 383.aktualis a:link{ color:#000; }.aktualis a:visited{ color:#0c0; }.aktualis a:hover{color:#cc0; }.aktualis a:active{ color:#0ff; } x15m2.html XHTML és CSS Holló Csaba 384 x15m2.html XHTML és CSS Holló Csaba 385 x15m2.html XHTML és CSS Holló Csaba 386 x15m2.html XHTML és CSS Holló Csaba 387

44 x15m3.html XHTML és CSS Holló Csaba 388 <a href="x15m1.html"> Első</a> <a href="x15m2.html"> Második</a> <a href="x15m3.html" class = "aktualis"> Harmadik</a> </div> <div id = "harmadik"> Ez a harmadik oldal.</div> </body></html> x15m3.html XHTML és CSS Holló Csaba 389 x15m3.html XHTML és CSS Holló Csaba 390 x15m3.html XHTML és CSS Holló Csaba 391 x15m3.html XHTML és CSS Holló Csaba 392 x15.css XHTML és CSS Holló Csaba 393 a.aktualis:link{ color:#f00;} a.aktualis:visited{ color:#f90; } a.aktualis:hover{ color:#f0f; } a.aktualis:active{ color:#000; } XHTML és CSS Holló Csaba 394 XHTML és CSS Holló Csaba 395 XHTML és CSS Holló Csaba Hivatkozások egyszerű formázása 7. Az éppen látható weblapra mutató hivatkozás 8. Hivatkozások formázása háttérkép segítségével Amikor a hivatkozás fölé megyünk az egérrel, nem csak betűk színe változhat meg, hanem a hivatkozás háttere is. Ezeket nevezik háttérváltoztató hivatkozásoknak. Ehhez a link és hover tulajdonságoknak különböző háttérszínt vagy háttérképet kell megadnunk. Pl.:

45 x16.css XHTML és CSS Holló Csaba 397 #menu a:link, #menu a:visited { color: #FFF; background: #f00 no-repeat center center; } #menu a:hover { color: #00f; background: #ff0 no-repeat center center; } x16.css XHTML és CSS Holló Csaba 398 #menu a.aktualis:link, #menu a.aktualis:visited{ color:#ff0; background: url(bg3.jpg) no-repeat center center; } #menu a.aktualis:hover{ color:#0a0; background: url(bg2.jpg) no-repeat center center; } x16.html XHTML és CSS Holló Csaba 399 x16.html XHTML és CSS Holló Csaba 400 x16.html XHTML és CSS Holló Csaba 401 XHTML és CSS Holló Csaba 402 A. Alapfogalmak B. Szövegek C. Hivatkozások D. Képek és multimédia E. Listák és számlálók XHTML és CSS Holló Csaba Képek beszúrása 2. Képtérképek létrehozása 3. Multimédiás anyagok elhelyezése Az img elem jellemzői: XHTML és CSS Holló Csaba 404 src: a képfájl elérési útja (ez is lehet abszolút vagy relatív) width: szélesség, height: magasság alt: helyettesítő szöveg arra az esetre, ha a kép nem jelenik meg XHTML és CSS Holló Csaba 405 Az img elem jellemzői: id: a képobjektum azonosítója name: a kép neve, helyette az id-et használhatjuk longdesc: a kép leírását tartalmazó fájl elérési útja

46 XHTML és CSS Holló Csaba 406 Az img elem jellemzői: title: ezt a szöveget mutatja a böngésző, ha az egérrel a kép fölé állunk usemap, ismap: interaktív képekhez (képtérképekhez) fogjuk használni (lsd. később) Az img elem jellemzői: XHTML és CSS Holló Csaba 407 hspace, vspace: a kép melletti vízszintes térköz, függőleges térköz border: a képet körülvevő szegély ezeket nem használjuk, helyette CSS-ben fogjuk formázni XHTML és CSS Holló Csaba 408 A képek méretének csökkentése érdekében: Ajánlatos körbevágni és csak azt menteni el belőle, ami kell. Eredeti méretben való megjelenítéshez ajánlatos kb dpi felbontásban újra elmenteni. XHTML és CSS Holló Csaba 409 Kép beillesztésénél mindig adjuk meg a méretét, mert így a böngésző már startból tudja, hogy mennyi helyet hagyjon ki számára, nem kell megvárnia a letöltést. Böngészőben megnyitva a kép mérete a címsorban látszik: XHTML és CSS Holló Csaba 410 XHTML és CSS Holló Csaba x17.html 411 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <link rel="stylesheet" type="text/css" href="x17.css" /> <title> Hivatkozás </title> <meta http-equiv="content-type" content="text/html;charset=iso " /> </head> <body> x17.html XHTML és CSS Holló Csaba 412 <p><a href="x17m.html"> <img src = "../../../Kepek/kutya1mk.jpg" width = "81px" height = "114px" alt = "kutya" id = "kutya" title = "Ez egy kutya :)" longdesc = "x17k.htm" /> </a> </p> </body> </html> x17.html XHTML és CSS Holló Csaba 413 XHTML és CSS Holló Csaba 414 x17m.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <link rel="stylesheet" type="text/css" href="x17.css" /> <title> Hivatkozás </title> <meta http-equiv="content-type" content="text/html;charset=iso " /> </head> <body>

47 x17m.html <p> XHTML és CSS Holló Csaba 415 x17m.html XHTML és CSS Holló Csaba 416 x17.css a:link #kutya { XHTML és CSS Holló Csaba 417 <img src = "../../../Kepek/kutya1m.jpg" border:solid #00f 5px; width = "700px" height = "350px" } alt = "kutya" a:visited #kutya { longdesc = "x17k.htm" border:solid #0c0 5px; title = "Ez egy kutya :)" } /> </p> </body> </html> x17.html XHTML és CSS Holló Csaba 418 XHTML és CSS Holló Csaba 419 XHTML és CSS Holló Csaba Képek beszúrása a. Képtérképek definiálása 2. Képtérképek létrehozása b. Az alakzatok koordinátái 3. Multimédiás anyagok c. Példa elhelyezése XHTML és CSS Holló Csaba 421 XHTML és CSS Holló Csaba 422 XHTML és CSS Holló Csaba 423 Képtérképek <map> </map> a képtérkép definiálása name: a képtérkép neve <area> </area> objektum definiálása <area> tulajdonságai: shape: alakzat típusa: circ, poly, rect coords: koordináták megadása (megnézhetők pl. a Paint-ben) href: hivatkozás megadása a. Képtérképek definiálása b. Az alakzatok koordinátái c. Példa

48 XHTML és CSS Holló Csaba 424 Az alakzatok koordinátái A bal felső sarok koordinátája: (0,0) rect: 4 érték: a téglalap bal felső (x bf,y bf ) és jobb alsó (x ja,y ja ) koordinátái, tehát x bf, y bf, x ja, y ja XHTML és CSS Holló Csaba 425 Az alakzatok koordinátái poly: a sokszög koordinátái: x 1, y 1, x 2, y 2,, x n, y n circle: a kör középpontja és sugara, tehát: x c, y c, r XHTML és CSS Holló Csaba 426 a. Képtérképek definiálása b. Az alakzatok koordinátái c. Példa x18.html <body> XHTML és CSS Holló Csaba 427 x18.html XHTML és CSS Holló Csaba 428 <!-- kis gyerek: --> x18.html XHTML és CSS Holló Csaba 429 <!-- nagy gyerek: --> <div><img id = "szekelykep" <area alt = <area alt = src = "Kepek/szekely.jpg" "Kis gyerek" "Nagy gyerek" alt= "Székely gyerekek" shape="rect" shape="rect" height = "400" width = "238" coords= coords= usemap ="#t1" /></div> "0,61,118,392" "122,0,236,382" <div><map id="t1" name="t1"> href="x2.html" /> href="x4.html" /> x18.html XHTML és CSS Holló Csaba 430 <!-- kör --> <area alt = "Kör" 1. Képek beszúrása XHTML és CSS Holló Csaba 431 XHTML és CSS Holló Csaba 432 Multimédiás fájlokat XHTML-be beszúrni: shape="circle" coords="33,33,16" href="x5.html" /> </map></div> </body></html> 2. Képtérképek létrehozása 3. Multimédiás anyagok elhelyezése a W3C előírásai szerint object tagként kell, nem szabványosan még embedel próbálkozhatunk. A fájl típusát is meg kell adni.

49 Pl. néhány fájltípus: XHTML és CSS Holló Csaba 433 audio/mp3, audio/mpeg application/x-shockwave-flash video/quicktime, application/x-mplayer2. Bizonyos esetekben IE-ben a fájltípust a Windows-os classid értékeként kell megadni. x19.html XHTML és CSS Holló Csaba 434 <object data="ai.swf" type= "application/x-shockwave-flash" width="288" height="128"> <param name="movie" value="ai.swf" /> <p> Flash helyett... </p> </object> XHTML és CSS Holló Csaba 435 A param tulajdonsággal a fájl típusától függően számos paramétert lehet beállítani. Pl. autoplay, controller, autostart, showcontrols, showstatusbar, autorewind, src (ha az object-ben nem adtuk meg data-val). XHTML és CSS Holló Csaba 436 Háttérhangok elhelyezése <bgsound /> (wav, au, mid) src: a hangállomány neve loop: lejátszások száma infinite vagy -1: végtelen lejátszás XHTML és CSS Holló Csaba 437 DOCTYPE: XHTML 1.0 Transitional <bgsound src="ajtonyit.wav" loop = "infinite"> XHTML és CSS Holló Csaba 438 A. Alapfogalmak B. Szövegek C. Hivatkozások D. Képek és multimédia E. Listák és számlálók XHTML és CSS Holló Csaba 439 A listákat felsorolásokra használjuk és XHTML-ben 3 típusuk van: 1. Egyszerű (felsorolásjeles) listák 2. Számozott listák <li> list item: felsorolandó elem </li> 3. Meghatározáslisták XHTML és CSS Holló Csaba 440 A listák egymásba ágyazhatók, de fontos, hogy a teljes listát beágyazzuk A listák formázásához használhatjuk az eddig megismert CSS stílusokat is. A továbbiakban csak a listákra jellemző speciális tulajdonságokat ismertetjük. XHTML és CSS Holló Csaba Egyszerű listák 2. Számozott listák 3. Meghatározáslisták 4. A listák elrendezése 5. Lenyíló menü készítése 6. Számlálók

50 XHTML és CSS Holló Csaba 442 Egyszerű (felsorolásjeles) listák unordered list <ul> a teljes lista </ul> Pl. <ul> <li> liszt </li> <li> tojás </li> <li> só </li> <li> cukor </li> <li> vaj </li> </ul> XHTML és CSS Holló Csaba 443 A felsorolásjelek típusának megadására a list-style-type CSS tulajdonságot használjuk, melynek értékei: disc (teli kör) circle (üres kör) square (négyzet) XHTML és CSS Holló Csaba 444 Felsorolásjelként használhatunk képet is, ebben az esetben a list-style-image CSS tulajdonságot használjuk. Pl. list-style-image: url(kep.gif) a kép helyét a stíluslap helyéhez viszonyítva kell megadni XHTML és CSS Holló Csaba 445 A list-style-position CSS tulajdonsággal megadhatjuk azt is, hogy a felsorolásjel kilógjon-e a szöveg vonalából: outside: kilóg, alapértelmezett inside: a felsorolásjel egy vonalban lesz a listaelem tartalmával XHTML és CSS Holló Csaba 446 A lista tulajdonságainak rövidített megadásánál a list-style értékeit a következő sorrendben adjuk meg: 1. list-style-type 2. list-style-image 3. list-style-position XHTML és CSS Holló Csaba Egyszerű listák 2. Számozott listák 3. Meghatározáslisták 4. A listák elrendezése 5. Lenyíló menü készítése 6. Számlálók Számozott listák ordered list XHTML és CSS Holló Csaba 448 a lista elemei előtt arab vagy római számok, illetve betűk állhatnak <ol> a teljes lista </ol> XHTML és CSS Holló Csaba 449 A számozott listák kezdőértékét a start jellemzővel adhatjuk meg, melynek értéke arab szám akkor is, ha a számozás római szám vagy betű lesz. Pl. <ol start= 3 > <li> harmadik </li> <li> negyedik </li> </ol> XHTML és CSS Holló Csaba 450 Alapértelmezés szerint a lista címkéi arab számok és start = 1. A sorszámok típusának megadására a list-style-type CSS tulajdonságot használjuk, melynek értékei: none (nincs) decimal (arab szám)

51 XHTML és CSS Holló Csaba 451 decimal-leading-zero (arab szám kezdő nullával) upper-alpha (nagybetűk) lower-alpha (kisbetűk) upper-roman (római számok nagybetűkkel írva) lower-roman (római számok kisbetűkkel írva) XHTML és CSS Holló Csaba Egyszerű listák 2. Számozott listák 3. Meghatározáslisták 4. A listák elrendezése 5. Lenyíló menü készítése 6. Számlálók XHTML és CSS Holló Csaba 453 Meghatározáslisták <dl> definition list </dl> <dt> definition term: mit definiálunk </dt> <dd> definiton data: a meghatározás </dd> x20.html XHTML és CSS Holló Csaba 454 <dl> <dt> Hardver </dt> <dd>... amibe bele lehet rúgni </dd> <dt> Szoftver </dt> <dd>... ami miatt belerúgunk a hardverbe </dd> </dl> XHTML és CSS Holló Csaba Egyszerű listák 2. Számozott listák 3. Meghatározáslisták 4. A listák elrendezése 5. Lenyíló menü készítése 6. Számlálók XHTML és CSS Holló Csaba 456 A display tulajdonság segítségével megadható, hogy egy elem: blokkszintűként display: block vagy szövegközi elemként viselkedjen. display: inline XHTML és CSS Holló Csaba 457 A display tulajdonság segítségével megoldható, hogy a normál esetben blokkszintű elemek nem blokkszintűként, a normál esetben szövegközi elemek blokkszintűként jelenjenek meg. x21.html XHTML és CSS Holló Csaba 458 XHTML és CSS Holló Csaba x21.html 459 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <link rel="stylesheet" type="text/css" href="x21.css" /> <title> Függőleges listák </title> <meta http-equiv="content-type" content= "text/html;charset=iso " /> </head> <body> <div id = "linkek"> <ul>

52 x21.html XHTML és CSS Holló Csaba 460 <li> Egyetem <ol start = "3"> <li> <a href= "... "> ETR </a></li> <li> <a href= "... "> STUD </a></li> <li> <a href = "... "> INF </a></li> </ol> </li> x21.html <li> Hobbi XHTML és CSS Holló Csaba 461 <ol id = "link2"> <li> <a href = "... "> Tánc </a></li> <li> <a href= "..."> Olvasás </a> </li> <li> <a href= "..."> Zene </a></li> </ol> </li> </ul> </div> </body></html> x21.css XHTML és CSS Holló Csaba 462 #linkek{ background: #77f; width: 170px; padding: px ; border: 1px solid #d0b26f; } x21.html XHTML és CSS Holló Csaba 463 x21.css ul { XHTML és CSS Holló Csaba 464 x21.html XHTML és CSS Holló Csaba 465 list-style-type: circle; list-style-position: inside; padding: 5px; background: #500; color: #ff0; } x21.css ul ol{ XHTML és CSS Holló Csaba 466 x21.html XHTML és CSS Holló Csaba 467 x21.css #linkek a{ XHTML és CSS Holló Csaba 468 list-style: upper-alpha outside; width: 100px; padding: 5px; padding: 7px; } border: 1px solid #d0b26f; #link2{ color: #fff; list-style: lower-roman inside; text-decoration: none; } text-align: center; li{ margin: 3px 0 3px 0; } display: block; }

53 x21.css #linkek a:link, XHTML és CSS Holló Csaba 469 x21.html XHTML és CSS Holló Csaba 470 x21.css #linkek a:hover{ XHTML és CSS Holló Csaba 471 #linkek a:visited, background: url(kepek/bg3.jpg) #linkek a:active{ no-repeat center center; background: url(kepek/bg1.jpg) color: #0fa; no-repeat center center; } } x21.html XHTML és CSS Holló Csaba 472 x22.html XHTML és CSS Holló Csaba 473 x22.html <html><head> XHTML és CSS Holló Csaba 474 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <link rel="stylesheet" type="text/css" href="x22.css" /> </head> <body> x22.html <div id = "linkek"> <ul> <li> Egyetem </li> <li> Hobbi </li> </ul> <br /><br /> XHTML és CSS Holló Csaba 475 x22.html XHTML és CSS Holló Csaba 476 <ol start = "3"> <li> <a href= "..."> ETR </a></li> <li> <a href= "..."> STUD </a></li> <li> <a href = "..."> INF </a></li> </ol> x22.html XHTML és CSS Holló Csaba 477 <ol> <li> <a href = "..."> Tánc </a></li> <li> <a href= "..."> Olvasás </a> </li> <li> <a href= "..."> Zene </a></li> </ol> </div> </body></html>

54 x22.css XHTML és CSS Holló Csaba 478 x22.css XHTML és CSS Holló Csaba 479 x22.html XHTML és CSS Holló Csaba 480 #linkek { ul { background: #ccf; width: 720px; border: 5px solid #d0b26f; padding: 30px; } list-style: none; padding: 5px; display: inline; } x22.css ol { XHTML és CSS Holló Csaba 481 x22.html XHTML és CSS Holló Csaba 482 x22.css ul li { XHTML és CSS Holló Csaba 483 list-style: none; margin: 0 80px 0 90px; display: inline; } padding: 5px 30px 5px 30px; li { border: groove 5px #f00; } background: #500; ol li { color: #ff0; margin: 0 5px 0 5px; display: inline; } } x22.css XHTML és CSS Holló Csaba 484 #linkek a{ background: #005; width: 80px; padding: 5px; border: 4px outset #d0b26f; x22.css #linkek a:hover { background: #ff0; color: #00f; XHTML és CSS Holló Csaba 485 x22.html XHTML és CSS Holló Csaba 486 color: #fff; text-decoration: none; } text-align: center; }

55 XHTML és CSS Holló Csaba 487 x23.css XHTML és CSS Holló Csaba 488 x23.css XHTML és CSS Holló Csaba Egyszerű listák 2. Számozott listák 3. Meghatározáslisták 4. A listák elrendezése 5. Lenyíló menü készítése 6. Számlálók x23.html XHTML és CSS Holló Csaba <head> <title>css menü</title> <link rel="stylesheet" type="text/css" href="cssmenu.css" />... </head> <body> <div id="menu"> x23.html XHTML és CSS Holló Csaba 491 <ul> <li class = "fm">a menü <ul> <li><a href="">a1</a></li> <li><a href="">a2</a> <ul> <li><a href="">a21</a></li> x23.html XHTML és CSS Holló Csaba 492 x23.html XHTML és CSS Holló Csaba 493 <li><a href="">a22</a></li> x23.html XHTML és CSS Holló Csaba 494 <li class = "fm">b menü x23.html XHTML és CSS Holló Csaba 495 <li><a href="">a23</a></li> <ul> </ul> <li><a href="">b1</a></li> </li> <li><a href="">b2</a></li> <li><a href="">a3</a></li> <li><a href="">b3</a> </ul> <ul> </li> <li><a href="">b31</a></li>

56 x23.html XHTML és CSS Holló Csaba 496 <li><a href="">b32</a></li> <li><a href="">b33</a></li> <li><a href="">b34</a></li> <li><a href="">b35</a></li> </ul> </li> <li><a href="">b4</a></li> x23.html XHTML és CSS Holló Csaba 497 <li><a href="">b5</a></li> </ul> </li> </ul> </div> </body> </html> x23.css XHTML és CSS Holló Csaba 498 body { background-color: #ffddff; color: black; } #menu { position: absolute; top: 0px; left: 0px; }.fm { margin: 20px px; } x23.css XHTML és CSS Holló Csaba 499 #menu a:link, #menu a:visited, #menu a:active { text-decoration: none; font-size: 1em; height: 1.2em; vertical-align: middle; display: block; color: #ffffff; background-color: #000066; } x23.css XHTML és CSS Holló Csaba 500 #menu a:hover { background-color: white; color: black; } #menu ul { margin: 0; padding: 0; list-style-type: none; } x23.css XHTML és CSS Holló Csaba 501 #menu ul li { float: left; width: 4em; } #menu ul li ul { display: none;} #menu ul li:hover ul { display: block; } x23.css XHTML és CSS Holló Csaba 502 x23.css #menu ul li ul li { XHTML és CSS Holló Csaba 503 x23.css XHTML és CSS Holló Csaba 504 position: relative; top:0; left: 0; border: 1px solid #ff0000; } #menu ul li ul li ul { position: absolute; top:0; left: 4em; }

57 x23.css XHTML és CSS Holló Csaba 505 #menu ul li ul li ul li { display: none; } #menu ul li ul li:hover ul li { display: block; } x23.css XHTML és CSS Holló Csaba 506 XHTML és CSS Holló Csaba Egyszerű listák 2. Számozott listák 3. Meghatározáslisták 4. A listák elrendezése 5. Lenyíló menü készítése 6. Számlálók XHTML és CSS Holló Csaba 508 CSS-ben definiálhatunk számlálókat, melyek segítségével automatikusan számozhatjuk a fejezeteket, alfejezeteket, a felsorolások elemeit stb. A számláló neve tetszőleges azonosító név lehet. x24.css XHTML és CSS Holló Csaba 509 Használat előtt ajánlott a számlálót inicializálni. Pl. body { counter-reset: cim; } h2 { counter-reset: alcim; } De hogyan fogjuk kiíratni? XHTML és CSS Holló Csaba 510 Lehetőség van arra, hogy :before, illetve :after használatával előírjuk adott elemek előtt vagy után tetszőleges tartalom automatikus megjelenítését. Továbbá egy számláló értékét a counter(szamlalo) adja meg. x24.css XHTML és CSS Holló Csaba 511 Így tehát ha a h2-es cím előtt meg szeretnénk jeleníteni a fejezet számát, akkor: h2:before { content: counter(cim) ". fejezet:"; } Csakhogy így a következő h2-es fejezetnek is ugyanolyan száma lenne! XHTML és CSS Holló Csaba 512 Tehát a fejezet számának kiírásakor növelnünk kell a fejezetszámlálót (cim). Továbbá, ha azt szeretnénk, hogy az elfejezetek számozása az új fejezetben újrakezdődjön, akkor az alfejezet számlálót (alcim) újra inicializálnunk kell. x24.css XHTML és CSS Holló Csaba 513 h2 { counter-increment: cim; counter-reset: alcim; } h2:before { content: counter(cim) ". fejezet:"; } h3 { counter-increment: alcim; } h3:before { content: counter(cim) "." counter(alcim) " "; }

58 XHTML és CSS Holló Csaba 514 Az <ol> start jellemzőjének használata is kiváltható számláló használatával. Ehhez a beazonosított <ol>-ben tetszőleges értékkel inicializáljuk a számlálót, melyet minden <li> előtt megjelenítünk és növelünk: x24.css XHTML és CSS Holló Csaba 515 ol#elso_resz { counter-reset: szamlalo 5; } ol#elso_resz li:before { content: counter(szamlalo) ". "; counter-increment: szamlalo; } x24.css XHTML és CSS Holló Csaba 516 Ahhoz, hogy a <li> elemek automatikus számozása ne jelenjen meg, el azt kell tüntetnünk például oly módon, hogy block vagy inline értéket adunk a display tulajdonságának: li { display: block; } XHTML és CSS Holló Csaba 517 F. Táblázatok G. Űrlapok H. Billentyűzettel történő vezérlés megvalósítása I. Keretek XHTML és CSS Holló Csaba 518 Nem ajánlott táblázatot használni az oldal elemeinek elrendezésére, csak akkor, ha tényleg adatok táblázatos megjelenítését akarjuk, és akkor is csak a legegyszerűbb formában, mert megnehezítjük a felolvasó szoftverek dolgát. XHTML és CSS Holló Csaba A táblázatok összetevői 2. A table jellemzői 3. A td, th jellemzői 4. A caption jellemzői 5. Példa XHTML és CSS Holló Csaba 520 <table> a táblázat </table> <caption> a táblázat címe </caption> <tr> egy sor </tr> <td> egy cella </td> <th> fejléc cella </th> <thead>, <tbody>, <tfoot> fejrész, törzs, lábléc elkülönítése XHTML és CSS Holló Csaba 521 thead: fejlécsorok csoportját határozza meg a táblázatban, több oldalas táblázatoknál nyomtatáskor szabvány szerint minden oldalon megjelenik a table elem egy thead -et tartalmazhat. XHTML és CSS Holló Csaba 522 tfoot: láblécsorok csoportját határozza meg a táblázatban, több oldalas táblázatoknál nyomtatáskor szabvány szerint minden oldalon megjelenik tábázat egy tfoot elemet tartalmazhat, amelynek a thead után, de a tbody előtt kell lennie

59 XHTML és CSS Holló Csaba 523 tbody: adatsorok csoportját definiálja a táblázatban a table elemnek tartalmaznia kell egy, vagy több tbody elemet, akkor opcionális, ha a táblázat csak egy tbody -t tartalmaz és és nem tartalmaz thead-et, vagy tfoot-ot. XHTML és CSS Holló Csaba 524 Az üres cellákba a helyes formázás érdekébe ajánlott egy -t beírni. Az XHTML Transitional változatában lehetőség van a fenti tag-ek tulajdonságaként formázási jellemezőket is megadni XHTML és CSS Holló Csaba 525 Manapság már ajánlott inkább a CSS-es formázást használni, de mivel még találkozhatunk régi formázásokat használó táblázatokkal is, ezért mindkét lehetőséget bemutatjuk. Ahol a CSS-es tulajdonság neve különbözik a HTMLestől, ott azt dőlt betűkkel írjuk. XHTML és CSS Holló Csaba A táblázatok összetevői 2. A table jellemzői 3. A td, th jellemzői 4. A caption jellemzői 5. Példa XHTML és CSS Holló Csaba 527 <table> jellemzői width: a táblázat szélessége %-al az őt tartalmazó tárolóelemhez viszonyítja és a mérete az ablak átméretezésekor változik border (border-width): a táblázat szegélye XHTML és CSS Holló Csaba 528 <table> jellemzői frame: hol legyen szegély a táblázat körül (balról, jobbról stb.) rules: hol legyen szegély a táblázat cellái körül (vízszintesen, függőlegesen) ezek CSS-ben másképp vannak XHTML és CSS Holló Csaba 529 <table> jellemzői border-collapse: cellák szegélyének összevonása cellspacing (border-spacing): a cellák közötti távolság (csak ha border-collapse: separate) XHTML és CSS Holló Csaba 530 <table> jellemzői summary: a képernyő felolvasó szoftverek számára írt tájékoztató szöveg a táblázatról (nem jelenik meg) XHTML és CSS Holló Csaba 531 A táblázat és celláinak formázására használhatók az eddig megismert CSS tulajdonságok is (pl. border többi lehetőségei, background stb.) CSS-ben a cellák szegélyét nem a táblázat, hanem a cellák border tulajdonságaként adjuk meg

60 XHTML és CSS Holló Csaba A táblázatok összetevői 2. A table jellemzői 3. A td, th jellemzői 4. A caption jellemzői 5. Példa XHTML és CSS Holló Csaba 533 <td, th> jellemzői align (text-align): a szöveg vízszintes igazítása a cellában valign (vertical-align): a szöveg függőleges igazítása a cellában baseline a sorvezetőhöz, bottom a teljes szöveg aljához igazít XHTML és CSS Holló Csaba 534 <td, th> jellemzői rowspan, colspan: a cella hány sor illetve oszlop szélességű, illetve magasságú headers: a cella fejrészekhez való társítása width: a cella szélessége cellpadding: a cella belső margója XHTML és CSS Holló Csaba 535 <td, th> jellemzői axis: a cellákat a fejlécektől eltérő kategóriákba is sorolhatjuk, amelyek alapján más programok (pl. felolvasó szoftverek) jobban tudják értelmezni és feldolgozni őket. Pl. axis = "Italok". XHTML és CSS Holló Csaba 536 <th> jellemzzői scope: a fejléc celláról megmondja hogy az sor vagy oszlop fejléc cellája annak érdekében, hogy a td elemeket jobban tudja a fejlécekhez társítani értékei: col, row XHTML és CSS Holló Csaba 537 <th> jellemzzői scope: csak akkor használjuk, ha nincsenek colspan, rowspan tulajdonságok Pl. <th scope = col > Oszlop fejéce </th> XHTML és CSS Holló Csaba A táblázatok összetevői 2. A table jellemzői 3. A td, th jellemzői 4. A caption jellemzői 5. Példa XHTML és CSS Holló Csaba 539 <caption> jellemzői közvetlenül a <table> után kell állnia align (caption-side): hol legyen elhelyezve (a táblázat fölött, alatt) XHTML és CSS Holló Csaba A táblázatok összetevői 2. A table jellemzői 3. A td, th jellemzői 4. A caption jellemzői 5. Példa

61 x25.html XHTML és CSS Holló Csaba 541 <html><head> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <link rel="stylesheet" type="text/css" href="x25.css" /> </head> <body> <table> <caption> Táblázat tulajdonságai </caption> x25.html XHTML és CSS Holló Csaba 542 x25.html XHTML és CSS Holló Csaba 543 x25.html XHTML és CSS Holló Csaba 544 <thead> <tr> <th id = "cimke" rowspan = "2"> Címke</th> <th id = "xhtml" colspan="2"> XHTML</th> <th id = "css" colspan="2"> CSS</th> </tr> x25.html XHTML és CSS Holló Csaba 545 x25.html XHTML és CSS Holló Csaba 546 <tr> <th id = "tulajdonsagxhtml"> Tulajdonság</th> <th id = "ertekxhtml" class="ertek">érték</th> <th id = "tulandsagcss"> Tulajdonság</th> <th id = "ertekcss" class="ertek"> Érték</th> </tr> </thead> x25.html XHTML és CSS Holló Csaba 547 <tfoot> <tr> <td colspan = "5"> Lábléc cellák (pl. oszlopok összegei) </td> </tr> </tfoot> x25.html XHTML és CSS Holló Csaba 548 x25.html <tbody> <tr> XHTML és CSS Holló Csaba 549 <th id = "table" rowspan="7"> table</th> <td headers = "table xhtml tulajdonsagxhtml">width</td> <td headers = "table xhtml ertekxhtml">%, px</td>