WEB TECHNOLÓGIÁK 3.ELŐADÁS

Átírás

1 Dr. Pál László, Sapientia EMTE, Csíkszereda WEB TECHNOLÓGIÁK 3.ELŐADÁS tavasz Stíluslapok (CSS) használata

2 Mi a CSS? 2 A CSS jelentése Cascading Style Sheets, azaz egymásba ágyazott stíluslapok A HTML oldalaink megjelenését befolyásoló egyszerű leíró nyelv, mely segítségével meghatározhatjuk, hogy hogyan (és hol) jelenjenek meg az egyes HTML elemek (paragrafusok, címsorok, stb.), többek között befolyásolhatjuk a színüket, méretüket, elhelyezkedésüket, margóikat, stb a CSS szabványt a W3C teszi közzé megjelenik a CSS 2 szabvány A CSS 3 szabvány kidolgozása folyamatban van A legtöbb mai böngésző támogatja a CSS-t

3 Miért CSS? 3 Egységes stílust biztosít a HTML dokumentumoknak (pl. ugyanazon honlapon, web-alkalmazáson belül) Rövidebbé, átláthatóbbá teszi a HTML oldalakat Megjelenítési stílus és tartalom szétválasztása Rugalmasság (elég a stílusállományt módosítani) Szerkeszthetőségen és karbantarthatóságon kívül az így elkészített dokumentum sokkal kisebb méretű is lesz, gyorsabban letöltődik, kisebb adatforgalmat generál Új formázási lehetőségek, amelyek nem találhatóak meg a HTML-ben

4 Stíluslapok megadása 4 Inline (soron belüli) mód A stílus a HTML tagon belül van megadva <html_tag style="tulajdonság">...</htm_tag> Példa: <p style="font-align:center">középre igazított szöveg</p>

5 Stíluslapok megadása 5 Belső stíluslap A stílust a dokumentum head elemében adjuk meg Akkor célszerű használni, ha egy dokumentumnak egyedi a stílusa Példa: <style type="text/css"> hr {color: red} p {margin-left: 20px} body {background-image: url("star.gif")} </style>

6 Stíluslapok megadása 6 Külső stíluslap A stíluslapunkat elhelyezhetjük egy külső állományban (.css kiterjesztés) is, így lehetővé téve, hogy az több HTML állományra is érvényes legyen. A külső stíluslapokra az oldal fejlécében tudunk hivatkozni, egy link elem segítségével: <link href="stilusfilenev.css" rel="stylesheet" type="text/css"> A stíluslapot tartalmazó állományban csak a stíluslapjaink definícióját kell elhelyeznünk Példa: h1{ font-size: 20px; color: #a00000; } p{ font-size: 12px; color: #00a000; }

7 Stílusok öröklődése 7 Az öröklődés az egyik fontos tulajdonsága a stíluslapoknak HTML elemtől függően egyes tulajdonságok öröklődnek, míg más tulajdonságok nem Például a törzsben megadott fontcsalád öröklődik valamennyi gyerek elem esetén, viszont nem öröklődnek például a szegélyek Ha azonban egy értéket mindenképpen a szülő elemtől szeretnénk megörökölni, akkor használhatjuk az inherit értéket.

8 8 Stílusok prioritása - Egymásba ágyazás (Cascading) A CSS az egymásba ágyazott (rangsorolt) stíluslapokat jelenti magyarul. Az elnevezés abból származik, hogy egyetlen HTML oldalhoz egyszerre több külső és belső stíluslapot is hozzárendelhetünk, és közben még szövegközi stílusokat is alkalmazhatunk. Melyik stílus fog érvényesülni, ha több stílust is definiálunk ugyanahhoz a HTML elemhez?

9 9 Stílusok prioritása - Egymásba ágyazás (Cascading) A következő négy beállítás érvényesül egyre nagyobb prioritással a böngésző alapbeállítása külső stíluslap head elemben definiált stílus soron belüli stílus (legnagyobb prioritású) Az!important kúlcsszó: Segítségével CSS deklarációt fontossá tehetünk, azaz felülbírálhatjuk vele a többi stílusutasítást az érték és a deklarációt záró pontosvessző közzé kell elhelyezni Példa: p.right { align: right!important; }

10 Specifikusság 10 A böngészőnek minden elemre ki kell számítania egy bizonyos specifikussági értéket is Szabályok: Elem kiválasztó: 1 pont Osztály kiválasztó: 10 pont ID kiválasztó: 100 pont Inline stílus: 1000 pont Stílusok kiértékelése: első a prioritás, majd a specifikusság Ha két stílusdefiníció helye azonos és specifikusságuk is egyenlő, akkor az az erősebb, amelyik később fordul elő

11 11 Specifikusság - Példa

12 Stílusok formátuma 12 A css utasítás két fő részből áll: selector (kijelölő) és declaration (meghatározás) selector - megadja, hogy a formázási utasítás a html mely elemére vonatkozzon declaration - megadja, hogy hogyan nézzen ki az elem a weboldalon; két része van: property (tulajdonság) és value (érték) property - a elem azon jellemzője, amire a stílusutasítás vonatkozik. value - az adott jellemző értéke Deklaráció blokk (Declaration block) kiválasztó { tulajdonság-1: érték-1; tulajdonság-2: érték-2; } Példa: p { color:red; }

13 Stílusok formátuma 13 Szelektorok csoportosítása (Grouping selectors) Egyszerre több elemnek adhatjuk ugyanazt a formázási utasítást. Vesszővel kell elválasztani a szelektorokat Példa: h1, h2, h3, h4, h5, h6 { color: green; } Összevont megadási mód (Shorthand properties) Egyes tulajdonságoknál (font, background, margin, stb.) összevontan is megadhatók az értékek, ilyenkor csak a gyűjtőtulajdonságot adjuk meg, és hozzá soroljuk fel az értékeket. Az alábbi két megadás egyenértékű p { border-width: 1px; border-style: solid; border-color: red; } p { border: 1px solid red;}

14 Méretek, mértékegységek 14 A CSS nyelv használata során több tulajdonságnál is megadhatunk számszerű értékeket 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ég megadása elhagyható, ha 0 értéket adunk meg, különben mindig meg kell adni Az adott tulajdonságtól függően megadhatunk negatív és pozitív értékeket is 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.

15 15 Méretek, mértékegységek - Relatív megadási mód Egy másik mérethez viszonyítva határozzuk meg a méretet Lehetséges mértékegységek: px (pixel): a pixelben, azaz képpontban megadott értékek a megjelenítő egységtől függenek em: az 1em az adott környezet betűméretét jelöli ex: 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. Á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 veszünk alapul

16 16 Méretek, mértékegységek - Abszolút megadási mód Az abszolút mértékegységek neve onnan ered, hogy elvileg minden esetben a szemlélő számára ugyanakkora méretet jelentenek. Például 1cm az mind a kijelzőn, mind nyomtatásban egy centiméter Lehetséges mértékegységek: mm: miliméter. Példa: 10mm cm: centiméter in: inch (col, hüvelyk) méretet jelöli, azaz 25.4 millimétert. Egy lehetséges megadása: 2in pt: pont. A pont tipográfiai mértékegység, egy pont 1/72 hüvelyket jelöl pc: pica és 12 pont méretű.

17 Kiválasztók (szelektorok) 17 Típuskiválasztók (Type selector) A legegyszerűbb kiválasztó, amely a HTML fa minden olyan elemére vonatkozik, amely egyezik a kiválasztóval Példa: h1, h2 { } background: blue;

18 Kiválasztók (szelektorok) 18 Típuskiválasztó hatása a HTML fában

19 Kiválasztók (szelektorok) 19 HTML fa Ős (szülő) - leszármazott

20 Kiválasztók (szelektorok) 20 HTML fa - Szülő-gyermek

21 Osztálykijelölők (Class selector) 21 A HTML elemeket lehetőségünk van osztályokba sorolni. Ekkor az adott osztályba sorolni kívánt elemhez egy class tulajdonságot rendelünk hozzá, amelynek az értéke az osztálynevünk lesz. A stíluslapban ehhez az osztályhoz határozhatunk meg megjelenést. Megadásakor az osztály neve elé pont kerül. Példa: Az osztálykijelölő:.big { font-size: 110%; font-weight: bold; }

22 22 Osztály- és a típuskijelelők kombinálása Ha még sajátosabb dolgot szeretnénk akkor kombinálható az előző két kijelölő Az előző példában azt szeretnénk, hogy az első bekezdés és az első lista elem betűmérete nagyobb legyen. Másfelől azt is szeretnénk, hogy csak a bekezdés legyen félkövér. A megoldás:.big { font-size: 110%;} /*p-t és li-t befolyásolja*/ p.big { font-weight: bold;}/*csak p-t befolyásolja*/

23 Több osztálykijelelő egyszerre 23 Lehetőség van egy elemnek több osztályban való besorolására Példa:

24 Azonosító kijelölő (ID selector) 24 Az azonosító alapú kiválasztás nagyon hasonló az osztály alapúhoz, egy lényeges különbség van: csak és kizárólag egy elemet tudunk egy bizonyos azonosítóval megjelölni egy HTML dokumentumon belül A stíluslapban a kettőskeresztet (#) használjuk az azonosításhoz, a HTML forrásban pedig az id tulajdonságot Gyakran használjuk weboldal tervezésnél (pld. fejléc, lábléc, menüsor stb.) Példa: A HTML kód: A stíluslap: <h1 id="piros">piros színu címsor</h1> #piros { color: red;} <h1 id="kek">kék színu címsor</h1> #kek { color: blue;}

25 Gyermek kiválasztó 25 Lényege, hogy az elemeknek a fában betöltött helye szerinti közvetlen szülő-gyermek kapcsolata esetén tudjuk megadni a stílusmeghatározását Az egyes elemeket a nagyobb jellel (>) válasszuk el Példa: h3 > strong { color: blue; } csak a h3 elemen belül közvetlenül elhelyezkedő strong tagra lesz érvényes

26 26 Helyzetérzékeny kiválasztás (Descendent selector) A stíluslapban lehetőségünk van a HTML fában betöltött helye alapján meghatározni egy elemről, hogy hogyan nézzen ki. A helyzetérzékeny kiválasztásnál a fában egy adott elem alatt levő elemhez rendelhetünk stílust 1.Példa: p em {color: blue; } 2.Példa: ul em {color: blue; }

27 Tulajdonság alapú- és univerzális 27 kiválasztás Tulajdonság alapú kiválasztás (Attribute selectors) Előfordulhat, hogy egy adott attribútum megléte, vagy annak az értéke szerint szeretnénk egy HTML elemhez kiválasztást rendelni. Példa: img[title] { border: 1px solid #000;} img[src="small.gif"] { border: 1px solid #000;} input[type="password"] { color: #0000a0;} Univerzális kiválasztás (Universal selectors) Az összes elem kiválasztására használjuk Példa: *{margin: 0; padding: 0 }

28 Látszólagos-kiválasztók 28 (Pseudoselectors) A látszólagos kijelölők a html leírásban nem szerepelnek, a dokumentumfából közvetlenül nem olvashatóak ki, ugyanakkor szelektorhoz tudjuk őket rendelni Hivatkozásnál a szelektor végén áll, és kettőspont van előtte. Önmagában sohasem fordul elő, mindig valamely elemhez kapcsolódik Általános formájuk:...:pseudoselector {property: value;}

29 29 Látszólagos-kiválasztók (Pseudoselectors) A horgony pszeudo osztályai (Anchor pseudoclasses) a:link - Alapállapotú linkre vonatkozó kijelölés a:visited - A már látogatott linkre vonatkozó kijelölés a:hover - Az egér a link felett van állapot esetén érvényes kijelölés a:active - A link aktív státuszban van állapot estén érvényes kijelölés Példa: a:link, a:visited { text-decoration: none; color: #00CCFF; } a:hover {background-color: #00CCFF; color: white;}

30 Látszólagos-kiválasztók 30 (Pseudoselectors) Pszeudo elemek (Pseudo elements): az elemek részelemeinek megcímzésére használjuk őket :first-line: A blokk-szintű szöveg első sorának formázására használhatjuk Példa: p:first-line { } font-weight: bold;

31 Látszólagos-kiválasztók 31 (Pseudoselectors) :first-letter: A szöveg első betűje, az iniciálé. Csak blokk-szintű elemnél használhatjuk, amennyiben a float értéke 'none', az első sorhoz illeszkedik, ellenkező esetben lebegő elemként viselkedik Példa: p:first-letter { } font-weight: bold; font-size: 200%;

32 Formázások - Betűk 32 Betű-család (font-family) Általában egy alapként szolgáló betű-típusból és annak pár változatából (félkövér, dőlt, és még lehet többfajta is ) áll A betű-családnevek két fő típusa van: általános családnevek (pl. serif (talpas), sans-serif (talp nélküli)) és specifikus családnevek (pl. Arial, Helvetica, stb.)

33 Formázások - Betűk 33 Betű-család (font-family) Megadási mód: prioritási sorrendben felsorolva, vesszővel elválasztva, utolsóként egy általános családnévvel lezárva a sort. A böngésző addig halad a specifikus családnevek listájában, amíg nem talál egy számára rendelkezésre álló betű-típust, a gyűjtő családnév pedig általános tartalékként szolgál Példa: body {font-family: Arial, Helvetica, sans-serif;} body {font-family: 'Times New Roman', Times, serif;}

34 Formázások - Betűk 34 Betű-vastagság (font-weight) A betű-típusban a karakterjel súlyát, feketeségi fokát vagy a vonalvastagságot specifikálja. Az értéke 100 és 900 közötti számmal vagy névvel adható meg Számokkal történő megadás: hajszálvékony (thin), extra vékony (extra light), Bold félkövér, stb. Névvel történő megadás: normal: megfelel a 400-nak bold: megfelel a 700-nak bolder: az öröklött értéknél kövérebb lighter: az öröklött értéknél vékonyabb

35 Formázások - Betűk 35 A betű-kiterjedés (font-stretch) tulajdonság normal (normál), condensed (összenyomott) és expanded (megnyújtott) betű-képet választ egy betű-családból. Stílus (font-style): egy font dőltségét befolyásolhatjuk. Értéke lehet normal (normál), italic (dőlt) vagy oblique (ferde). Az italic általában cursive, míg az oblique tipikusan a normál betűképnek egy megdöntött verziója. Ha 'italic' nem érhető el, a böngésző oblique-ot választ

36 Formázások - Betűk 36 Betű-méret (font-size): Megadható absolute-size (abszolút méretben) vagy relative-size (relatív méretben) Az abszolút méret a következőképpen adható meg megnevezéssel: xx-small, x-small, small, medium, large, x- large, xx-large. Az abszolút méret ugyancsak megadható egy abszolút számmal vagy százalékosan

37 Formázások - Betűk 37 Betű-méret (font-size): A relative-size (relatív méret) az öröklött betű-mérethez képest növeli vagy csökkenti a méretet, lehetséges értékei larger (nagyobb) és smaller (kisebb). Pl. ha az öröklött betűméret medium, akkor a larger érték hatására az elem betűmérete large lesz Megjegyzés: a font tulajdonsággal összevontan (shorthand) is megadhatók az egyes tulajdonságok, a felsorolás sorrendje kötött: font-style, font-variant, fontweight, font-size, font-family.

38 Szövegformázások 38 Szöveg behúzás (text-indent): egy szövegblokk első sorának behúzását definiálja. Értéke megadható fix számmal vagy a befoglaló doboz szélességéhez viszonyítva százalékosan p { text-indent: 40px; } Szöveg igazítás (text-align): egy szövegblokk tartalmának helyzetét adja meg, lehetséges értékei: left (bal), right (jobb), center (közép), justify (sorkizárt) h1 { text-align: center; }

39 Szövegformázások 39 Szöveg díszítés (text-decoration): tulajdonság vonalakkal vagy villogással díszíti a szöveget. A lehetséges értékei: none (nincs díszítés), underline (aláhúzás), overline (felső vonal), line-through (áthúzás), blink (villogás) a { text-decoration: none; }

40 Szövegformázások 40 Betű-köz (letter-spacing): a szöveg karakterei közötti térközt adja meg. Lehetséges értékei: normal (alapértelmezett): az adott betű-típushoz tartozó normál betű-köz - ez az érték lehetővé teszi a böngészők számára a karakterek közti térköz változtatását sorkizárt elrendezés kialakításakor length (távolság értéke): az alapértelmezett betű-közhöz képesti változást, tehát nem a betűköz abszolút értékét adja meg. Mindkét - tehát pozitív és negatív - irányban is értelmezhető Példa: blockquote { letter-spacing: 0.1em; }

41 Szövegformázások 41 Szóköz (word-spacing): a szavak közötti elválasztó karakter-közt (szóközt) specifikálja, lehetséges értékei megegyeznek a betűköz tulajdonságéval Kisbetű/nagybetű átalakítás (text-transform) tulajdonság lehetséges értékei: none (alapértelmezett): nincsen nagybetű hatás capitalize: minden szó első karakterét nagybetűre változtatja, a többi karaktert nem érinti uppercase: minden szó minden karakterét nagybetűsre változtatja. Pld. h1 { text-transform: uppercase; } lowercase: minden szó minden karakterét kisbetűsre változtatja

42 Szövegformázások 42 Sormagasság (line-height): a szöveg sormagasságát határozza meg. Lehetséges értékei: normál (alapértelmezett), szám (megszorozza az aktuális betűmérettel), fix sormagasság (px, pt, cm), százalék (az aktuális betűmérethez viszonyítja) Példa: p { line-height: 1.5em; }

43 Héttérszín, háttér 43 Háttérszín (background-color): egy elem háttérszínét állítja be p { background-color: #00ff00 } Háttérkép (background-image) az alábbiak szerint adható meg: background-image:url(fájlnév.kiterjesztés); Példa: body { background-image: url("logo.jpg") }

44 Héttérszín, háttér 44 A böngészők alapértelmezetten a teljes kitöltendő hátteret a kép méretének változatlanul tartásával, annak vízszintes és függőleges irányú ismétlésével összefüggően kitöltik Háttérkép és háttérszín együttes előfordulása esetén mindig a kép van felül és a háttérszín alul

45 Héttérszín, háttér 45 A háttérkép ismétlése a background-repeat tulajdonsággal definiálható. Lehetséges értékei: repeat (alapértelmezett): a teljes kitöltendő hátteret a kép méretének változatlanul tartásával, annak vízszintes és függőleges irányú ismétlésével összefüggően kitapétázzák repeat-x: a háttérkép csak vízszintes irányú (x-tengelyű) ismétlését definiálja repeat-y: a háttérkép csak függőleges irányú (y-tengelyű) ismétlését definiálja no-repeat: a háttérkép csak egyszeri, ismétlés nélküli megjelenítését definiálja

46 Héttérszín, háttér 46 Héttérkép helyzete (background-position) tulajdonság megadható névvel (keyword), százalékosan vagy pixel-ekkel. Névvel a left (balra), right (jobbra), top (felülre), bottom (alulra), és center (középre) pozíciók definiálhatók. Először a vízszintes (left, center, right), majd a függőleges (top, center, bottom) helyzetet kell megadni. Példa: body { background-image: url(logo.jpg); background-position: center top; background-repeat: no-repeat;}

47 Héttérszín, háttér 47 A héttérkép rögzítése (background-attachment) tulajdonságnak két beállítási lehetősége van: a scroll és a fixed. Ha a scroll van beállítva (ez az alapértelmezett), akkor az elem görgetésével annak háttere is vele együtt mozog. A fixed beállítás esetén viszont a háttér helyben marad, és görgetéskor csak a tartalom mozog. Példa: body { } background-attachment: fixed;

48 A dobozmodell 48 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, szín, betűtípus, szegély, háttér, 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).

49 A dobozmodell 49 Blokkszintű (block box) és soron belüli dobozok (inline box): Sor-dobozok (line box):

50 A dobozmodell 50 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. 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ó hosszának összege

51 51 A dobozmodell

52 52 A dobozmodell - Példa

53 A margók (margin) megadása 53 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 Lehetséges tulajdonságok: margin-top, margin-right, marginbottom, margin-left, margin Példák: body {margin: 10px;} - mind a négy margó 10 pixel body {margin: 10px 15px;} - top,bottom=10px,left,right=15px body { margin: 10px 20px 30px 40px; } - a négy margó értékei, kezdve a felsővel és folytatva az óra járásával megegyező irányban

54 A margók megadása - Példa 54 p{ } margin-bottom: 40px;

55 A margók összevonása (collapse) 55 Függőleges elrendezésnél két elem közötti távolság nem a két margó összegével egyezik meg, hanem a nagyobb margó szélességével

56 Szegélyek (border) beállítása 56 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: border-width, border-top-width, border-rightwidth, border-bottom-width, border-left-width Stílus: border-style, border-top-style, border-right-style, border-bottom-style, border-left-style Szín: border-color, border-top-color, border-right-color, border-bottom-color, border-left-color Példa: body {border: 1px dotted #000000;} body {border-top: 1px dotted #000000;}

57 A kitöltés (padding) beállítása 57 A padding tulajdonság a tartalom és a szegély közti üres részt határozza meg Lehetséges tulajdonságai: padding, padding-top, paddingright, padding-bottom, padding-left Példa: body { padding: 10px 11px 12px 13px; }

58 Elemek méretezése 58 Egy HTML elem méretének a beállítására az alábbi tulajdonságokat használhatjuk width, height: elem szélessége és magassága max-width, max-height: elem maximális szélessége és magassága min-width, min-height: elem maximális szélessége és magassága Példa: body { width: 760px; } Lehetséges megadási módok: 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

59 Elemek méretezése 59 A kitöltés, szegély, margó nem befolyásolja az elem méretét Példa (5px kitöltés, 10px margó és 100px doboz méret mellett mennyi kell legyen a tartalom?):

60 Elemek pozicionálása 60 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: statikus (static): az elemek a normál helyzetükben jelennek meg (alapértelmezett) abszolút (absolute): a szülő elemhez képest van a helyzete meghatározva rögzített (fixed): elhelyezés a böngésző ablakhoz képest (a görgetés sem befolyásolja az elhelyezést) relatív (relative): az elem a normál szövegfolyamban helyezkedik el, és ettől a normál helyzetétől toljuk el valamilyen értékkel Az abszolút és a fixed esetben az elem kikerül a normál szövegfolyamból

61 Elemek pozicionálása 61 pozíció megadása: top, right, bottom, left tulajdonságok segítségével Példák: p{ h1{ position:relative; left:50px; background-color: #3399FF;} position: fixed; background-color: #FF99FF; top: 200px; left: 500px;}

62 62 Lebegés (float) és törlés (clear) tulajdonságok A float elem segítségével jobbra vagy balra tolhatunk egy elemet. Az utána következő elemek körülötte fognak elhelyezkedni Tipikus használata: szöveg illetve képek egymás mellé rendezése, weboldal struktúrájának kialakítása Lehetséges értékei: left, right, none

63 63 Lebegés (float) és törlés (clear) tulajdonságok Ha a float tulajdonság hatását meg akarjuk szüntetni akkor használjuk a clear tulajdonságot Értékei: left, right, both, none Példa: #p2 { clear: left}

64 Megjelenítés 64 Két típusú megjelenítése létezik az elemeknek: blokk-típusú elem: kihasználja a teljes rendelkezésre álló szélességet. Előtte és utána sortörés Példa: p, h1-h6, ul, ol, li, div inline elem: csak annyi helyet foglal el, amennyi szükséges, nincs sortörés Példa: a, i, b, span

65 Megjelenítés módosítása (display) 65 A megjelenítést szabályozhatjuk a display tulajdonsággal Két fontosabb értéke: inline: ennek segítségével az adott elemet egy soron belül lehet megjeleníteni. Jó példa erre a span elem. Az elem előtt és után nem lesz sortörés p {display:inline;} block: egy téglalapot foglalnak el, és abban jelenítik meg tartalmukat. Felhasználására példa lehet, mikor egy felsorolás elemeit blokként szeretnénk megjeleníteni (például menünek használva). Az elem előtt és után sortörés lesz beiktatva. ul, li { display:block; border:1px solid #000000; }

66 Weboldalak elrendezése (layout) 66 Két-oszlopos elrendezés (Two-column floated)

67 Weboldalak elrendezése (layout) 67 Két-oszlopos elrendezés (Two-column floated)

68 Weboldalak elrendezése (layout) 68 Három-oszlopos elrendezés (Three-column floated)

69 Weboldalak elrendezése (layout) 69 Három-oszlopos elrendezés (Three-column floated)

70 Weboldalak elrendezése (layout) 70 Három-oszlopos változó szélességű elrendezés (Threecolumn liquid/fluid)