STÍLUSLAPOK HASZNÁLATA

Átírás

1 STÍLUSLAPOK HASZNÁLATA Abonyi-Tóth Andor Egyetemi tanársegéd 1117, Budapest XI. kerület, Pázmány Péter sétány 1/C, Tel: (1) /8466

2 CSS utasítás 2 A CSS utasítás két részből áll: a szelektor tartalmazza a formázandó HTML tag megnevezését (pl. H1); a deklaráció végzi el a szelektorban meghatározott tag formázását. szelektor blokk H1 {color: blue} tulajdonság érték deklaráció

3 CSS 3 Cascading Style Sheets Lépcsőzetes stíluslapok CSS 1. szint: 1996 decemberében jelent meg Cél, hogy elkülönítsük a dokumentum megjelenését és tartalmát Növeli a használhatóságot, rugalmasságot, megjelenés kezelhetőségét és csökkenti a dokumentum komplexitását. CSS 2.szint: 1998 május CSS 2.1.: butított változat, igazodva a böngészők (gyenge) tudásához CSS 3.szint: fejlesztés alatt

4 Stíluslap csatolása <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>Stíluslapok - 1.1</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="kepek/pelda/stilus1.css" TITLE="sajat"> <STYLE url("kepek/pelda/stilus2.css");  </STYLE> </HEAD> <BODY> <H1>A címsor1 kék</h1> <H2>A címsor2 piros</h2> <P style="color: green">az egész bekezdés zöld</p> </BODY> </HTML> 4 Hivatkozás külső stíluslapra Lapon belüli definíció Stílus importálás Beágyazott (in-line) megadás

5 Alternatív stíluslapok megadása 5 <link rel="stylesheet" type="text/css" href= "uri" title="lila" media="screen" > <link rel="alternate stylesheet" type="text/css" href="uri" title="homok" media="screen" >

6 Váltás a stílusok között 6 Javascript segítségével is válthatunk stílust

7 Azonos tartalom, különböző arculat 7

8 Csoportosítás 8 H1 {font-family: verdana} H2 {font-family: verdana} H3 {font-family: verdana} H1, H2, H3 {font-family: verdana} H1 {font-family: helvetica} H1 {font-size: 12pt} H1 {font-style: normal} H1 { font-family: helvetica; font-size: 12pt; font-style: normal; } H1 {font-weight: bold} H1 {font-size: 12pt} H1 {font-family: helvetica} H1 {font: bold 12pt helvetica}

9 Stíluslapok optimalizálása 9 h1 {color: #000080} h2 {color: #000080} h3 {color: #000080} p {font-family: Arial, Verdana, sansserif} p.fejlec {color: #000080} h1,h2,h3,p.fejlec { color:# } p { font-family:arial,verdana,sans-serif }

10 Mértékegységek 10 Abszolút in (2.54 cm) cm mm pt (1/72in) pc (12pt) Relatív em (adott környezet betűméretéhez képest történő megadás. pl. 1.2em) ex (x-magasság - többnyire az adott font x betűjének magassága. pl. 2ex) % (pl. 150%) Színjelölések px (képpont) pl. 16px EM { color: #f00 } /* #rgb */ EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* egész számok: */ EM { color: rgb(100%,0%,0%) } /* százalékos : 0% - 100% */

11 Mértékegységek (Pixel) 11 Pixel: relatív, mert mérete a megjelenítő eszköztől függ. (előfordulhat, hogy több pontot is magába foglal egy adott pixelnyi érték)

12 Mértékegységek (%) 12 A %-os érték relatív értéket jelent, de hogy minek az értékét, az változó Azonos elem más tulajdonsága Szülő elem egy tulajdonsága A formázott tartalom egy tulajdonsága (pl. tartalmazó elem szélessége)

13 URL, URI megadás 13 url( url ); vagy url("url"); Példa BODY { background-image: url( images/hatter.jpg ); }

14 Öröklődés 14 A tulajdonságok többsége öröklődik a tartalmazó elemtől <H1 style="color:blue"> A címsor <EM>mindig</EM> fontos.</h1> A címsor mindig fontos. A teljes lapra vonatkozó tulajdon-ságokat a BODY elemhez kell kötni body { font-size:12pt; font-family: Arial, Verdana, sans-serif }

15 Öröklődés 2 15 A gyermek elemek nem a szülőkben megadott relatív értékeket öröklik, hanem azok számított értékét! body { font-size: 12px; text-indent: 3em; /* ami itt 36px */ } h1 { font-size: 15px } Bekezdés első sorának behúzása A h1 örökli a text-indent értéket a szülőtől (body), de csak a számított értéket. Vagyis a behúzás nem 3*15px=45px, hanem 36px lesz.

16 Összekapcsolt szelektor 16 Ha más tulajdonságokat akarok adni az elemnek, attól függően, hogy milyen elemben szerepel, összekapcsolhatom a szelektorokat Mód: szelektor1 szelektor2 {definíció} Példa H1 {color: blue} EM {color: blue} <h1>ez nagyon <em>fontos</em> dolog</h1> <p> Ez is <em>fontos</em></p> H1 EM {color: red} Ez nagyon fontos dolog Ez is fontos. Ez nagyon fontos dolog Ez is fontos.

17 Osztályok (Class) használata 17 szelektor.osztálynév {definíció}.osztálynév {definíció} <HEAD> <TITLE>Stíluslap példa</title> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY> <H1 class="zold">zöld, mint a rét</h1> <H1>Ez nem zöld, mert nem abba az osztályba tartozik</h1> <P class="zold">zöld, mint a rét, <SPAN class="piros">néhány karakter </SPAN > kivételével. </P> <P>Ez nem zöld, mert nem abba az osztályba tartozik</p> </BODY> </HTML> A HTML kódban a CLASS attribútummal tudom a megfelelő osztályba sorolni az elemet.

18 Egyedi azonosítók (ID) 18 A HTML állományban egyedi azonosítókat adhatunk az elemnek az ID attribútum használatával Példa: <div id="fejlec"> Címzés a stíluslapban Szelektor#id {definíció} Példa div#fejlec {margin: 10px;}

19 Látszólagos (pszeudo) 19 osztályok Vannak olyan elemek, amelyek szelektorként szerepelnek, de nem részei a HTML-nek Szelektor:látszólagos_osztály {def} Példa: a:link {} /* link */ a:visited {} /* látogatott link */ a:active {} /* aktív link */ a:hover {} /* ha fölé viszem az egeret */

20 Látszólagos osztályok 20 Kombinálhatók normál osztályokkal a.kulso:visited {color: blue} A CSS1 -ben a :link, :visited és :active egymást kölcsönösen kizárták; a CSS2 - ben az :active előfordulhat együtt a :link, vagy :visited látszólagos osztállyal. Példa: a:link:active { color: red } CSS2

21 Tipográfiai látszólagos elemek 21 :first-letter <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>Stíluslapok</TITLE> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY> <P> A sor első betűje kétszer akkora lesz, mint a többi.</p> <P> Természetesen ebben a bekezdésben is.</p> </BODY> </HTML>

22 Tipográfiai látszólagos elemek 22 :first-line <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>Stíluslapok</TITLE> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY> <P Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p> <P Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p> </BODY> </HTML>

23 Rangsor 23 Ellentmondó definíciók esetén melyik fog érvényesülni? => súly hozzárendelése Rangsor felállítás szabályai kérdéses elem/tulajdonság párosra alkalmazott összes deklaráció előkeresése a kérdéses elem szelektorként szerepel? Igen: OK Nem: Van örökölt érték? Igen: OK Nem: Alaptulajdonságok jutnak érvényre

24 Rangsor 24 Meghatározás sorrendje szerint Későbbi deklaráció > korábbi deklaráció <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>Stíluslapok</TITLE> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY> <H1>Ez egy 1-es címsor</h1> </BODY> </HTML>

25 Rangsor 25 explicit súly szerinti rendezés! Important > normál <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>Stíluslap példa</title> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY> <H1>Ez egy 1-es címsor</h1> </BODY> </HTML>

26 Rangsor 26 Eredet szerinti rendezés Szerző definíciói > Olvasó definíciói (felhasználói stíluslap) > Böngésző beállításai Mi van, ha olvasóként felül akarom bírálni a szerző definícióit =>! Important attribútum használata Példa a:link {color: green! important} Mi van ha a szerző is használta Szerző (important) > olvasó (important) [CSS1] Szerző (important) < olvasó (important) [CSS2]

27 Rangsor 27 Szelektor egyedisége szerint a: ID attribútumok száma b: class attribútumok száma c: tagek száma A abc számokat össze kell fűzni, így megkapjuk az egyediséget LI {...} /* a=0 b=0 c=1 => egyediség = 1 */ UL LI {...} /* a=0 b=0 c=2 => egyediség = 2 */ OL UL LI {...} /* a=0 b=0 c=3 => egyediség = 3 */ LI.red {...} /* a=0 b=1 c=1 => egyediség = 11 */ OL UL LI.red {...} /* a=0 b=1 c=3 => egyediség = 13 */ #x34y {...} /* a=1 b=0 c=0 => egyediség = 100 */

28 Dokumentumfa 28 forrásdokumentumban van kódolva. minden elemnek pontosan egy szülő eleme van, kivéve a gyökérelemet, amelynek nincs szülő eleme. gyökér HTML HEAD BODY Gyermek eleme Első gyerek TITLE H1 P UL Testvérek LI LI LI Leszármazottja

29 CSS szelektorok használata 29 Minta Jelentés * Megfelel bármelyik elemnek. E E F E > F E:first-child E:link E:visited E:active E:hover E:focus E:lang(c) Egyezik bármely E elemmel (bármely E típusú elemmel). Egyezik bármely F elemmel, ami egy E elem leszármazottja. Egyezik bármely F elemmel, ami egy E elem gyermek-eleme Megegyezik az E elemmel, ha az E a szülő elemének első gyermeke. Megegyezik az E elemmel, ha az E elem egy olyan link, amelynek célját még nem látogatták (:link), vagy már látogatták (:visited). Megegyezik az E elemmel, bizonyos felhasználói beavatkozások alatt. Megegyezik az E típusú elemmel, ha az a (beszélt) c nyelven íródott.

30 CSS szelektorok használata 30 Minta Jelentés E + F E[valami] E[valami="warning"] E[valami~="warning"] Megegyezik bármely F elemmel, amelyet közvetlenül megelőz egy E elem. Megegyezik bármely E elemmel, amelynek "valami" attribútuma be van állítva (tekintet nélkül annak értékére). Megegyezik azzal az E elemmel, amelynek "valami" attribútumának értéke pontosan "warning". Megegyezik azzal az E elemmel, amelynek "valami" attribútumának értékei szóközzel elválasztott értékek, és egyik közülük pontosan "warning". E[lang ="en"] Megegyezik azzal az E elemmel, amelynek "lang" attribútumában vesszővel elválasztott értékek állnak és balról az első közülük "en". DIV.warning E#azonositó Csak HTML. Ugyanaz, mint a DIV[class~="warning"]. Megegyezik azzal az E elemmel, amelynek ID-je "azonosito".

31 31 CSS szelektorok böngésző támogatottsága

32 CSS2 példák 32 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>css példa</title> <style type="text/css"></style> </head> <body> <table border="1"> <tr> <th colspan="2">a <b>cserebogarak</b> halhatatlanságáról</th> </tr> <tr> <td>a <b>cserebogárnak</b> vannak lábai. Ebből...</td> <td>minden <b>cserebogárnak</b> van lába... <p>minden <b>cserebogár</b> bogár...</p> </td> </tr> </table> <p>minden <b>cserebogár</b> bogár...</p> </body> </html> Nem gyerek, csak leszármazott

33 CSS2 példák 33 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>css példa</title> <style type="text/css"></style> </head> <body> <form> Név: <input name="name"> Jelszó: <input type="password" name="pwd"> </form> </body> </html>

34 CSS2 példák 34 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>css példa</title> <style type="text/css"></style> </head> <body> <p>első bekezdés</p> <p>második bekezdés</p> <ul> <li>lista1</li> </ul> <p>harmadik bekezdés</p> <p>negyedik bekezdés</p> </body> </html>

35 CSS2 példák 35 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>css példa</title> <style type="text/css"></style> </head> <body> <p lang="hu">első bekezdés</p> <p lang="en">second paragraph</p> Első bekezdés </body> </html> Second paragraph

36 Formázásmodell 36 Margó: margin Szegély: border Kitöltés: padding

37 Margó, kitöltés megadása 37 left top bottom right margin: margin-top: margin-right: margin-bottom: margin-left: padding: padding-top: padding-right: padding-bottom: padding-left: margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 3px; margin: 5px 10px 15px 3px;

38 Margó, kitöltés megadása 38 5px margin: 5px 10px 15px 3px; 3px 10px 15px margin: 5px; 5px 5px 5px 5px margin: 5px 10px; 10px 5px 10px 5px 5px margin: 5px 10px 15px; 10px 10px 15px

39 Blokkszintű elemek (margó összevonás) 39 <STYLE TYPE="text/css"> UL { background: red; margin: A B C D; padding: E F G H; } LI { color: white; background: blue; margin: a b c d; padding: e f g h; } </STYLE>... <UL> <LI>Első elem <LI>Második elem </UL>

40 Lebegő elemek (float: left right none) 40 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>Stíluslap példa</title> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY> <P> <IMG SRC="kepek/pelda/cica.gif"> Példaszöveg, melynek nincs más szerepe, minthogy bemutassa, hogy a lebegő elem a szülő elem szélére igazodik, miközben megtartja annak margóját, szegélyét és kitöltését. Megjegyzendő, hogy a szomszédos függőleges margók összevonódnak a nemlebegő blokkszintű elemek között </P> </BODY> </HTML>

41 Lebegő elemek és a clear tulajdonság 41 Clear: none left right both az elem melyik oldalán engedélyezi lebegő elemek megjelenését. Ha a clear értéke leftre van beállítva, az elem, amelyre alkalmaztuk, a bal oldalán levő bármely lebegő elem alá kerül.

42 Pozícionálás 42 Position: static relative absolute fixed inherit Static Nem pozícionált, a kódban elfoglalt helye határozza meg a vásznon való elhelyezkedését Relative A statikushoz hasonló helyre kerül az elem, de a bal és felső pozíció megadásával eltolhatjuk. (pl. kerüljön lejjebb és jobbra) Absolute Ez az elem kikerül a megjelenítési folyamatból. Az abszolút pozícionálású elemek a (dokumentumfában) legközelebb eső olyan szülő elemhez képest lesznek pozícionálva, amelyikre szintén meg van adva a position tulajdonság MÁS értékkel, mint a static. Fixed A fix pozicionálással a görgetés ellenére is adott pozíción marad az elem. (képernyő-koordinátához rögzül) Példák

43 Layoutok 43

44 Háttérkép megadása 44 CSS-ben nem csak mozaikszerű háttér elrendezésre van mód A háttérképet igazíthatjuk background-position vízszintesen (left,center, right, %, hossz) függőlegesen (top, center, bottom, %, hossz) Beállíthatjuk az ismétlődés módját background-repeat Nincs (no-repeat), mozaikszerű (repeat), vízszintesen (repeatx), függőlegesen (repeat-y) Csatolás módja background-attachment Fix (fixed) vagy tartalommal gördíthető (scroll)

45 Háttérkép példa 45 <table border="0" style="width: 400px; height: 400px; border: 4px double #800000; background-color: #D7FFD7; background-image: url('webfejlogo_kicsi.gif'); background-repeat: no-repeat; background-position: left top" >

46 Háttérkép példa 46 <table border="0" style="width: 400px; height: 400px; border: 4px double #800000; background-color: #D7FFD7; background-image: url('webfejlogo_kicsi.gif'); background-repeat: no-repeat; background-position:center bottom; " >

47 Háttérkép példa 47 <table border="0" style="width: 400px; height: 400px; border: 4px double #800000; background-color: #D7FFD7; background-image: url('webfejlogo_kicsi.gif'); background-repeat: no-repeat; background-position: 60px 20px; " >

48 Háttérkép példa 48 <table border="0" style="width: 400px; height: 400px; border: 4px double #800000; background-color: #D7FFD7; background-image: url('webfejlogo_kicsi.gif'); background-repeat: no-repeat; background-position: 30% 80%; " >

49 Háttérkép példa 49 <table border="0" style="width: 400px; height: 400px; border: 4px double #800000; background-color: #D7FFD7; background-image: url('webfejlogo_kicsi.gif'); background-repeat: repeat-x; background-position: top left; " >

50 Háttérkép példa 50 <table border="0" style="width: 400px; height: 400px; border: 4px double #800000; background-color: #D7FFD7; background-image: url('webfejlogo_kicsi.gif'); background-repeat: repeat-y; background-position: top left; " >

51 Háttérkép példa 51 <table border="0" style="width: 400px; height: 400px; border: 4px double #800000; background-color: #D7FFD7; background-image: url('webfejlogo_kicsi.gif'); background-repeat: repeat-y; background-position: 50px 100px; " >

52 Háttérkép példa 52 <table border="0" style="width: 400px; height: 400px; border: 4px double #800000; background-color: #D7FFD7; background-image: url('webfejlogo_kicsi.gif'); background-repeat: repeat; background-position: 50px 100px; " >

53 Szegélyek 53 Mind a 4 szegélyre vonatkozik az alábbi: Border-style: stílus [none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset] Border-width: vastagság [thin, medium, thick, méret] Border-color: szín vagy transparent Kompakt megadás: Border: 1px solid green;

54 Szegélyek 54 Külön is megadható a 4 oldalnak Border-top-color; border-right-color; borderbottom-color; border-left-color; Border-top-style; border-right-style; borderbottom-style; border-left-style; Border-top-width; border-right-width; borderbottom-width; border-left-width;

55 Szegély stílusok 55 dashed dotted double ridge groove inset outset solid

56 Láthatóság 56 Visibility: visible hidden collapse Visible: látható Hidden: rejtett Collapse: táblázat elemeknél használatos, egy oszlop vagy sor elrejtésére használható Attól, hogy az elem nem jelenik meg, attól még a helyet fenntartja a böngésző. Ha nem ezt akarjuk, akkor a display: none; tulajdonságot használjuk!

57 Betűtípus (font) 57 Official Reference: CSS Level 1, Section : 'font' 5.2.3: 'font-style' 5.2.4: 'font-variant' 5.2.5: 'font-weight' 5.2.6: 'font-size' 5.6.2: 'font-family' Official Reference: CSS Level 2, Section : 'font-size-adjust' : 'font-stretch' : 'font' : 'font-style' : 'font-variant' : 'font-weight' : 'font-size' : 'font-family'

58 Szöveg (text) 58 Official Reference: CSS Level 1, Sections , : 'word-spacing' 5.4.2: 'letter-spacing' 5.6.2: 'white-space' 5.4.6: 'text-align' 5.4.3: 'text-decoration' 5.4.5: 'text-transform' 5.4.7: 'text-indent' Official Reference: CSS Level 2, Section : 'word-spacing' 16.4: 'letter-spacing' 16.6: 'white-space' 16.2: 'text-align' : 'text-decoration' 16.5: 'text-transform' : 'text-shadow' 16.1: 'text-indent'

59 Szín/háttér (color/background) 59 Official Reference: CSS Level 1, Section : 'color' 5.3.7: 'background' 5.3.2: 'background-color' 5.3.3: 'background-image' 5.3.4: 'background-repeat' 5.3.5: 'background-attachment' 5.3.6: 'background-position' Official Reference: CSS Level 2, Section : 'color' : 'background' : 'background-color' : 'background-image' : 'background-repeat' : 'background-attachment' : 'background-position'

60 Lista (list) 60 Official Reference: CSS Level 1, Section : 'list-style' 5.6.3: 'list-style-type' 5.6.5: 'list-style-position' 5.6.4: 'list-style-image' Official Reference: CSS Level 2, Section : 'marker-offset' : 'list-style' : 'list-style-type' : 'list-style-position' : 'list-style-image'

61 Dimenziók 61 Official Reference: CSS Level 1, Sections and : 'width' 5.4.8: 'line-height' : 'height' Official Reference: CSS Level 2, Sections : 'width' 10.4: 'min-width' 10.4: 'max-width' 10.8: 'line-height' 10.5: 'height' 10.7: 'min-height' 10.7: 'max-height'

62 Rétegek 62 A CSS alapú megjelenítéskor minden abszolútként pozícionált elemnek van egy pozíciója a harmadik dimenzióban, a "z" tengely mentén. Z-index

63 Display tulajdonság 63 Display: Egy elem megjelenítési módját adja meg. Inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none

64 Display tulajdonság display: none Nem jelenik meg. Fókuszt nem kap (javascript segítségével igen). display: inline az elem soron belüli elem lesz (előtte és utána nem lesz sortörés) display: block Blokkszintű elemként viselkedik az elem display: run-in Befutó megjelenés. Az elemünk az utána következő blokk elem első soron belüli eleme lesz

65 65 Probléma El akarjuk érni a következő megjelenést. Mit használjunk? <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> H3 {???? } </STYLE> </HEAD> <BODY> <H3>Címsor </H3> <P>Lorem ipsum </P> </BODY> </HTML>

66 Példa (inline) 66 <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> H3 { display: inline } </STYLE> </HEAD> <BODY> <H3>Címsor </H3> <P>Lorem ipsum </P> </BODY> </HTML>

67 Példa (inline) nem valid 67 <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> H3 { display: inline } </STYLE> </HEAD> <BODY> <P> <H3>Címsor </H3> Lorem ipsum </P> </BODY> </HTML>

68 Példa (run-in) 68 <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> H3 { display: run-in } </STYLE> </HEAD> <BODY> <H3>Címsor </H3> <P>Lorem ipsum </P> </BODY> </HTML>

69 Display tulajdonság display: compact A megjelenítő egy egy soros soron belüli blokként próbálja beilleszteni a következő blokk elembe - amennyiben a következő egy blokk elem és "befér" oda - a kompakt megjelenítés tulajdonságú elemet. display: list-item A lista elemek két egymás mellett álló téglalapként jelennek meg, a bal oldali behúzásként is felfogható, a jobb oldaliban pedig a lista tartalma jelenik meg.

70 Display tulajdonság - példa 70 <div id="menu"> <ul> <li><a href="#">kezdőlap</a></li> <li><a href="#">magamról</a></li> <li><a href="#">hobby</a></li> <li><a href="#">linkek</a></li> </ul> </div> <style type="text/css"> <! div#menu ul {padding:0; margin:0;} div#menu li { list-style-type:none; display:inline; padding: 5px 20px; border-right:1px dotted black; margin:0; } --> </style> CSS alkalmazásával CSS nélkül

71 Display böngészőtámogatottság 71

72 Böngészők viselkedése és a 72 CSS Internet Explorer dobozmodell hiba A szélesség rosszul számítódik, beleveszi a kitöltés és szegély méretet is. Megoldás? Tudatni kell a böngészőprogrammal, hogy szabványos CSS megjelenítést kérünk!

73 Strict (standards), illetve Quirks mód 73 A böngészők különböző üzemmódokban képesek a CSS oldalakat megjeleníteni Quirks: régi szabályok szerinti megjelenítés Strict: szabványkövető üzemmód Mi alapján váltunk? A doctype határozza meg Nincs DTD megadás => Quirks mód Legtöbb DTD megadás => Strict (standards) mód Új, vagy ismeretlen DTD => Strict (standards) mód Lehet Quirks módba lépni DTD megadással? Igen. A böngészőprogramoknak van saját listája azon DTDkről, amelyeknél Quirks módba kell kerülni

74 Mi történik Quirks módban? 74 A dobozmodell hibás. A szélesség és magasság a doboz szélességét és magasságát jelenti, nem pedig a tartalomét Függőleges margók bizonyos esetben összenyomódnak. (pl. p tag a td elemben) Az űrlapoknak Mozilla böngészőben 1em-es alsó margó van beállítva Az elemek közti white-space karaktereknek jelentése lehet. (pl. <li> elemek új sorba törése nem kívánt megjelenést eredményezhet (megnövekedett függőleges hely)

75 Mi történik Quirks módban? 75 Tag soup parsing. <p>text<table>...</table> kód esetén Firefox Quirks módban a táblázat a <p> elem része, szabványos üzemmódban a <table> lezárja a megnyitott <p> taget. CSS bizonyos részei nem működnek (pl. maxwidth az IE7-ben, vagy white-space: pre. Fix pozícionálás nem működik, a fixed pozícionálás helyett static kerül beállításra (IE7)

76 Mi történik Quirks módban? 76 A nem szabvány szerinti osztály és azonosítók is elfogadásra kerülnek (amelyek ponttal vagy számmal kezdődnek) A kis- és nagybetű nem számít az osztály és id azonosítók megadásánál. A mértékegység nélküli paraméterekhez valamilyen rendszer szerint mértékegység társul. (10=>10px; f0f0f0=>#f0f0f0. Ez ellentmond a CSS szabályoknak, mert ezeket figyelmen kívül kellene hagynia a böngészőknek.

77 Mi történik Quirks módban? 77 A relatív betűméret beállítások hibásak. A medium nagyobb mint az alap betűméret, small jelenti az alap betűméretet. Így az egész skála (xx-small,xsmall, small, large, x-large, xx-large) eggyel nagyobb méretet eredményez, mint kellene. A táblázatban a betűméret beállítás az alap betűméretre vonatkozik, nem pedig a táblázatra megadott betűméretre. A tartalmazó elemtől nem öröklődik a font beállítás a táblázatok esetén. Blokk középre igazításánál a margin: 0 auto; beállítás nem vezet eredményre.

78 Mi történik Quirks módban? 78 A kép függőleges igazításánál bizonyos esetekben a doboz alja nem a szöveg alapvonalához igazodik. A lebegtetett képeknél van egy alap vízszintes margó beállítás (3px a 0px helyett). IE-ben a gyökér elem a body, nem pedig a html. A body tagnél megadott margónak nincs hatása Quirks módban. A táblázatok százalékos méretmegadásánál szabványos módban a tartalmazó elem mérete a meghatározó. Quirks módban a rendelkezésre álló helyet veszi a böngésző.

79 Hasznos információk 79 Különböző böngészőkben különböző Quirks mód van implementálva Mozilla a Netscape 4.x-et imitálja IE6+ az IE5-t imitálja Némelyik böngészőben van harmadik üzemmód is (Almost standards mode) Firefox, Safari, Opera 7.5+ Különbség: Táblázatcellák függőleges méretezése (line-height) Képek blokkszintű (nem beágyazott) elemként történő felfogása

80 80 DTD megadás (HTML) és a különböző módok

81 81 DTD megadás (HTML) és a különböző módok

82 DTD megadás (XHTML, ISO) és a különböző módok 82

83 DTD megadás (XHTML, ISO) és a különböző módok 83

84 Internet Explorer 8 84 különlegesség Négy üzemmód IE5.5 Quirks, IE7 standards mode, IE8 almost standards mode, IE8 standards mode Mikor mibe kerülünk? Függ a meta információtól, http fejléc, MS fekete lista, intranet zóna

85 Internet Explorer különlegesség

86 Zárszó 86 A DTD-nek a dokumentum struktúrához van köze, most mégis a megjelenésre is hatással van Nem szép megoldás

87 CSS1 és CSS2 közti 87 különbségek Média típusok Hogyan jelenjen meg a dokumentum különböző médián url("loudvoice.css") print { /* css definíciók */ } <LINK rel="stylesheet" type="text/css" media="print, handheld" href="nyomt.css">

88 Használható médiatípusok 88 All: összes eszköz Aural: beszédszintetizátor Braille: braille kijelzők számára Embossed: braille nyomtató Handheld: kézi eszközök (kis képernyő) Print: nyomtatás Projection: kivetítő Screen: színes megjelenítők Tty: fix szélességű karakteres megj. Tv: televízió típusú eszközök

89 Média csoportok 89 Média típusok continuous/ paged Média csoportok visual/aural/ tactile grid/ bitmap aural continuous aural N/A both braille continuous tactile grid both emboss paged tactile grid both handheld both visual both both print paged visual bitmap static projection paged visual bitmap static screen continuous visual bitmap both tty continuous visual grid both tv both visual, aural bitmap both interactive/ static

90 CSS1 és CSS2 közti 90 különbségek Inherit érték Az adott elem adott tulajdonsága örökli a szülőelem tulajdonságának számított értékét BODY { color: black!important; background: white!important; } * { color: inherit!important; background: transparent; }

91 Aural (hang) stíluslap 91 Beszédszintézis és hallható ikonok H1, H2, H3, H4, H5, H6 { voice-family: paul; stress: 20; richness: 90; cue-before: url("ping.au") } P.heidi { azimuth: center-left } P.peter { azimuth: right } P.goat { volume: x-soft }

92 CSS1 és CSS2 közti 92 különbségek Lapozható média A dokumentum tartalma egy, vagy több különálló oldalra lehet elosztva. Az oldaltörések kezelésére a CSS2 kiterjeszti a vizuális formázásmodellt a következők szerint Oldaldoboz: két területet foglal magában: oldalterület; az oldalon levő dobozok kiosztását tartalmazza. margó terület; amely körülveszi az { size 8.5in 11in; margin: 2cm }

93 CSS1 és CSS2 közti 93 különbségek Javított betűtípus választás Név szerinti egyeztetés Intelligens betűtípus egyeztetés (megjelenésében hasonló típus) Betűtípus szintézis (metrikus információk is kellenek) Betűtípus letöltés <STYLE TYPE="text/css" MEDIA="screen, { font-family: "Robson Celtic"; src: url(" } H1 { font-family: "Robson Celtic", serif } </STYLE>

94 CSS1 és CSS2 közti 94 különbségek Fix pozícionálás Gördítéskor egy helyben maradó területek létrehozása Lapozható média esetén minden oldalon ismétlődő területek létrehozására lehet alkalmas

95 CSS1 és CSS2 közti 95 különbségek Méret megadásnál Minimális és maximális méretek megadása min-width: minimális szélesség max-width: maximális szélesség min-height: minimális magasság max-height: maximális magasság

96 CSS1 és CSS2 közti 96 különbségek Új megjelenítés típusok (compact, run-in) Block: blokkban történő megjelenítés In-line:soron belüli megjelenítéshez Run-in: (befutó) az elem az utána következő blokk elem első soron belüli eleme lesz. Ha nem blokk elem következik utána, akkor blokként jelenik meg. Compact:A megjelenítő egy egy soros soron belüli blokként próbálja beilleszteni a következő blokk elembe - amennyiben a következő egy blokk elem és "befér" oda - a kompakt megjelenítés tulajdonságú elemet. Azt, hogy "befér"-e, a blokk elem bal vagy jobb margójának megvizsgálásával dönti el, ha az nagyobb, mint az elem szélessége, akkor a következő blokkon belül, különben pedig egy külön blokkban jelenik meg az elem.

97 CSS1 és CSS2 közti 97 különbségek Új szelektortípusok Gyermek, szomszédos elem, attribútum (korábban láttuk) Látszólagos osztály :first-child :focus :lang

98 CSS1 és CSS2 közti 98 különbségek Generált elemek :before és :after peszudo elemek P.jegyzet:before { content: "Jegyzet: " } a:after { content: " (" attr(href) ") "; }

99 99 Látszólagos osztályok böngészőtámogatottsága

100 CSS1 és CSS2 közti 100 különbségek Kurzor beállítási lehetőség

101 Stíluslapok validálása 101 CSS Validation Service

102 CSS3 102 Moduláris felépítésű Bizonyos modulok majdnem véglegesek, mások kezdetleges kidolgozásúak még Újdonságok oldal layout precízebb leírása hangalapú megjelenítőkhöz (aural) stílus Több háttérkép egy elemhez, azok kivágása, torzítása, árnyékolt szegélyek, stb. űrlapok haladó megjelenése áttetsző színek letölthető betűtípus generált tartalmak Több oszlopos megjelenés,..

103 CSS3 szelektorok Minta Jelentés 103 E ~ F E[attr] :empty :enabled :disabled :checked :first-of-type :last-of-type :only-of-type :last-child :not Olyan F elem, amelyet korábban megelőzött egy E elem. (hasonló mint E + F, de nem kell, hogy közvetlenül egymás után következzenek az elemek) p[testattr^=foo] bármely elem, amely testattr paraméterének van értéke, és az a foo karakterlánccal kezdődik. p[testattr$=foo] bármely elem, amely testattr paraméterének van értéke, és az a foo karakterlánccal végződik. p[testattr*=foo] bármely elem, amely testattr paraméterének van értéke, és abban szerepel foo karakterlánc. Tartalom nélküli elemre illeszkedik Enabled, disabled, checked állapotú (űrlap)elemekre illeszkedik X:first-of-type olyan X elem, amely a szülőjének első gyereke X:last-of-type olyan X elem, amely a szülőjének utolsó gyereke X:only-of-type olyan X elem, amely a szülőjének egyetlen gyereke Utolsó gyermekelem Tagadás p#test *:not(em) {text-decoration: underline;} A test azonosítójú bekezdés leszármazottai,kivéve az em elemeket.

104 Néhány példa 104 Kódrészlet <div id="content"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div id="text1"> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> </div> <div id="text2"> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> <div> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> </div> </div> </div> CSS div#content >:first-child {color:red;}

105 Néhány példa 105 Kódrészlet <div id="content"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div id="text1"> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> </div> <div id="text2"> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> <div> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> </div> </div> </div> CSS div#content >div:first-child {color:red;}

106 Néhány példa 106 Kódrészlet <div id="content"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div id="text1"> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> </div> <div id="text2"> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> <div> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> </div> </div> </div> CSS div#content >div:first-of-type {color:red;}

107 Néhány példa 107 Kódrészlet <div id="content"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div id="text1"> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> </div> <div id="text2"> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> <div> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </P> </div> </div> </div> CSS div#content >:only-of-type {color:red;}

108 108

109 CSS3 szelektorok Minta :nth-child() Jelentés Egy formulával meghatározható sorszámú gyerek div#test > *:nth-child(3n+1) { color: red; } 109 :nth-of-type() Egy formulával meghatározható sorszámú, adott típusú gyerek div#test div:nth-of-type(5n+2) { background-color: #9999ff; } :nth-last-child() :nth-last-of-type() :only-child Hasonló a fentiekhez, de az utolsó elemre vonatkozik. (A sorszám az utolsótól számítódik) Olyan elem, amely a szülő elem egyetlen gyermeke :root Minden blokk gyökéreleme (HTML-ben ez a <html> elem lesz.) ::selection A felhasználó által kijelölt szöveg :target Azon elem, ami link célként van beállítva (egyedi neve van és mutat rá link a #egyedinév formátumban)

110 110

111 111 Új CSS 3 deklarációk böngészőtámogatottsága

112 112

113 113

114 114

115 115

116 116

117 117 Vége