vi CSS zsebkönyv Alapvetõ képi elrendezés Tömbszerû elrendezés Szövegközi elrendezés

CSS00.qxd

6/15/2006

2:55 PM

Page v

Tartalomjegyzék

CSS zsebkönyv . . . . . . . . . . . . . . . . . . . 1 A könyvben használt jelölések . . . . . . . . . . . . . . . . . . . . 1 Dõlt betû . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Írógépbetû . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Stílusok felvétele a HTML és XHTML lapokra . . . . . . . . . . 2 Szövegközi stílusok . . . . . . . . . . . . . . . . . . . . . . 2 Beágyazott stíluslapok . . . . . . . . . . . . . . . . . . . . 3 Külsõ stíluslapok . . . . . . . . . . . . . . . . . . . . . . . . 3 Az @import utasítás . . . . . . . . . . . . . . . . . . . 4 A link elem . . . . . . . . . . . . . . . . . . . . . . . . . 4 Az xml-stylesheet feldolgozási utasítás . . . . . 5 A stílusok felépítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 A stílusok rangsora . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Szûkítés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Öröklés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 A rangsor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Az elemek osztályozása . . . . . . . . . . . . . . . . . . . . . . . . 11 Maradó elemek . . . . . . . . . . . . . . . . . . . . . . . . 11 Lecserélt elemek . . . . . . . . . . . . . . . . . . . . . . . 12 Elemmegjelenítési módok . . . . . . . . . . . . . . . . . . . . . . . 12 Tömbszerû elemek . . . . . . . . . . . . . . . . . . . . . 12 Szövegközi elemek . . . . . . . . . . . . . . . . . . . . . 13

CSS00.qxd

vi

6/15/2006

2:55 PM

Page vi

CSS zsebkönyv

Alapvetõ képi elrendezés . . . . . . . . . . . . . . . . . . . . . . . 14 Tömbszerû elrendezés . . . . . . . . . . . . . . . . . . 14 Szövegközi elrendezés . . . . . . . . . . . . . . . . . . 15 Jelöletlen szöveg . . . . . . . . . . . . . . . . . . 15 Em-mezõ . . . . . . . . . . . . . . . . . . . . . . . . 16 Tartalomterület . . . . . . . . . . . . . . . . . . . 16 Sortávolság . . . . . . . . . . . . . . . . . . . . . . 16 Szövegközi mezõ . . . . . . . . . . . . . . . . . 17 Sormezõ . . . . . . . . . . . . . . . . . . . . . . . . 17 Úsztatási szabályok . . . . . . . . . . . . . . . . . . . . . 18 Helyzetmegadási szabályok . . . . . . . . . . . . . . . . . . . . . . 19 A helyzetmegadás fajtái . . . . . . . . . . . . . . . . . . 19 Statikus helyzetmegadás . . . . . . . . . . . . 19 Relatív helyzetmegadás . . . . . . . . . . . . . 19 Független helyzetmegadás . . . . . . . . . . 20 Rögzített helyzetmegadás . . . . . . . . . . . 20 A tárolótömb . . . . . . . . . . . . . . . . . . . . . . . . . . 20 A független helyzetmegadású elemek elrendezése . . . . . . . . . . . . . . . . . . . . . . . . 22 Méretre zsugorítás . . . . . . . . . . . . . . . . . 22 Statikus helyzet . . . . . . . . . . . . . . . . . . . 22 Maradó, független helyzetmegadású elemek elrendezése vízszintesen . . . . . 22 Maradó, független helyzetmegadású elemek elrendezése függõlegesen . . . . 24 Lecserélt, független helyzetmegadású elemek elrendezése vízszintesen . . . . . 26 Lecserélt, független helyzetmegadású elemek elrendezése függõlegesen . . . . 27 Táblázatos elrendezés . . . . . . . . . . . . . . . . . . . . . . . . . . 28 A táblázatos elrendezés szabályai . . . . . . . . . . 29 Rögzített elrendezésû táblázatok . . . . . . . . . . . 31 Automatikus elrendezésû táblázatok . . . . . . . . 31 A cellaszegélyek összevonása . . . . . . . . . . . . . 35 Szegélyek összevonása . . . . . . . . . . . . . . . 35

CSS00.qxd

6/15/2006

2:55 PM

Page vii

Tartalomjegyzék Függõleges igazítás a cellán belül . . . . . . . . . . 37 Kulcsszavak . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Színértékek . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 #RRGGBB . . . . . . . . . . . . . . . . . . . . . . . 39 #RGB . . . . . . . . . . . . . . . . . . . . . . . . . . 39 rgb (rrr.rr%, ggg.gg%, bbb.bb%) . . . . . . 39 rgb(rrr, ggg, bbb) . . . . . . . . . . . . . . . . . 39 . . . . . . . . . . . . . . . . . . . . . . 40 Számértékek . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Százalékértékek . . . . . . . . . . . . . . . . . . . . . . . . 41 Hosszértékek . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Független hosszmértékegységek . . . . . . . . 41 Hüvelyk (in) . . . . . . . . . . . . . . . . . . . . . 41 Centiméter (cm) . . . . . . . . . . . . . . . . . . 42 Milliméter (mm) . . . . . . . . . . . . . . . . . . 42 Pont (pt) . . . . . . . . . . . . . . . . . . . . . . . . 42 Pica (pc) . . . . . . . . . . . . . . . . . . . . . . . . 42 Relatív hosszmértékegységek . . . . . . . . . . . 43 em-magasság (em) . . . . . . . . . . . . . . . . 43 x-magasság (ex) . . . . . . . . . . . . . . . . . . 43 Képpont (px) . . . . . . . . . . . . . . . . . . . . 43 URL címek . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 url() . . . . . . . . . . . . . . . . . . . . . . . 43 Hanggal kapcsolatos értékek . . . . . . . . . . . . . . 44 Szögmértékegységek . . . . . . . . . . . . . . 44 Idõmértékegységek . . . . . . . . . . . . . . . . 44 Frekvencia-mértékegységek . . . . . . . . . 44 Kijelölõk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Általános kijelölõ . . . . . . . . . . . . . . . . . 45 Típuskijelölõ . . . . . . . . . . . . . . . . . . . . . 45 Leszármazottkijelölõ . . . . . . . . . . . . . . . 46 Gyermekkijelölõ . . . . . . . . . . . . . . . . . . 46 Szomszédostestvér-kijelölõ . . . . . . . . . . 46 Osztálykijelölõ . . . . . . . . . . . . . . . . . . . 47 Azonosítókijelölõ . . . . . . . . . . . . . . . . . 47

vii

CSS00.qxd

viii

6/15/2006

2:55 PM

Page viii

CSS zsebkönyv

Egyszerû jellemzõkijelölõ . . . . . . . . . . . 48 Pontosjellemzõérték-kijelölõ . . . . . . . . . 48 Részlegesjellemzõérték-kijelölõ . . . . . . 49 Nyelvijellemzõ-kijelölõ . . . . . . . . . . . . . 49 Álosztályok és álelemek . . . . . . . . . . . . . . . . . . . . . . . . 49 :active • aktív . . . . . . . . . . . . . . . . . . . . 49 :after • utána . . . . . . . . . . . . . . . . . . . . 50 :before • elé . . . . . . . . . . . . . . . . . . . . . 50 :first-child • elsõ szintû gyermekelem . 51 :first-letter • elsõ betû . . . . . . . . . . . . . . 51 :first-line • elsõ sor . . . . . . . . . . . . . . . . 52 :focus • fókusz . . . . . . . . . . . . . . . . . . . 52 :hover • rámutatás egérrel . . . . . . . . . . 53 :lang • nyelv . . . . . . . . . . . . . . . . . . . . . 53 :link • hivatkozás . . . . . . . . . . . . . . . . . 54 :visited • felkeresve . . . . . . . . . . . . . . . 54 Tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Látványelemek . . . . . . . . . . . . . . . . . . . . . . . . 55 background • háttér . . . . . . . . . . . . . . . 55 background-attachment • a háttérkép csatolásának módja . . 56 background-color • háttérszín . . . . . . . 57 background-image • háttérkép . . . . . . . 58 background-position • a háttérkép helyzete . . . . . . . . . . . 59 background-repeat • a háttérkép ismétlõdési módja . . . 60 border • szegély . . . . . . . . . . . . . . . . . . 61 border-bottom • alsó szegély . . . . . . . . 61 border-bottom-color • alsó szegélyszín 62 border-bottom-style • alsó szegélystílus 63 border-bottom-width • alsó szegélyvastagság . . . . . . . . . . 63 border-color • szegélyszín . . . . . . . . . . 64 border-left • bal oldali szegély . . . . . . . 64

CSS00.qxd

6/15/2006

2:55 PM

Page ix

Tartalomjegyzék border-left-color • bal oldali szegélyszín 65 border-left-style • bal oldali szegélystílus 66 border-left-width • bal oldali szegélyvastagság . . . . . . 66 border-right • jobb oldali szegély . . . . . 67 border-right-color • jobb oldali szegélyszín . . . . . . . . . 68 border-right-style • jobb oldali szegélystílus . . . . . . . . 68 border-right-width • jobb oldali szegélyvastagság . . . . . 69 border-style • szegélystílus . . . . . . . . . . 69 border-top • felsõ szegély . . . . . . . . . . 71 border-top-color • felsõ szegélyszín . . . 71 border-top-style • felsõ szegélystílus . . 72 border-top-width • felsõ szegélyvastagság . . . . . . . . . 72 border-width • szegélyvastagság . . . . . 73 bottom • alsó szél . . . . . . . . . . . . . . . . . 74 clear • kiürített terület . . . . . . . . . . . . . 75 clip • vágás . . . . . . . . . . . . . . . . . . . . . . 75 color • szín . . . . . . . . . . . . . . . . . . . . . . 76 content • tartalom . . . . . . . . . . . . . . . . 77 counter-increment • számlálóléptetõ . . 78 counter-reset • számláló-visszaállító . . . 78 cursor • egérmutató . . . . . . . . . . . . . . . 79 direction • írásirány . . . . . . . . . . . . . . . 80 display • megjelenítés . . . . . . . . . . . . . 80 float • úsztatás . . . . . . . . . . . . . . . . . . . 81 font • betûtípus . . . . . . . . . . . . . . . . . . 82 font-family • betûcsalád . . . . . . . . . . . . 83 font-size • betûméret . . . . . . . . . . . . . . 84 font-style • betûstílus . . . . . . . . . . . . . . 86 font-variant • betûváltozat . . . . . . . . . . 86 font-weight • betûvastagság . . . . . . . . . 87

ix

CSS00.qxd

x

6/15/2006

2:55 PM

Page x

CSS zsebkönyv height • magasság . . . . . . . . . . . . . . . . 88 left • bal szél . . . . . . . . . . . . . . . . . . . . 88 letter-spacing • betûköz . . . . . . . . . . . . 89 line-height • sormagasság . . . . . . . . . . 90 list-style • listastílus . . . . . . . . . . . . . . . 91 list-style-image • listajelként használt kép . . . . . . . . 92 list-style-position • a listajel helye . . . . 92 list-style-type • a listastílus típusa . . . . . 93 margin • margó . . . . . . . . . . . . . . . . . . 94 margin-bottom • alsó margó . . . . . . . . . 95 margin-left • bal margó . . . . . . . . . . . . 96 margin-right • jobb margó . . . . . . . . . . 96 margin-top • felsõ margó . . . . . . . . . . . 97 max-height • legnagyobb magasság . . . 97 max-width • legnagyobb szélesség . . . 98 min-height • legkisebb magasság . . . . . 99 min-width • legkisebb szélesség . . . . . 99 outline • körvonal . . . . . . . . . . . . . . . 100 outline-color • a körvonal színe . . . . . 101 outline-style • a körvonal stílusa . . . . 101 outline-width • a körvonal vastagsága 102 overflow • túlnyúlás . . . . . . . . . . . . . . 102 padding • belsõ margó . . . . . . . . . . . . 103 padding-bottom • alsó belsõ margó . . 104 padding-left • bal belsõ margó . . . . . . 105 padding-right • jobb belsõ margó . . . . 106 padding-top • felsõ belsõ margó . . . . 106 position • helyzet . . . . . . . . . . . . . . . . 107 quotes • idézõjelek . . . . . . . . . . . . . . . 108 right • jobb szél . . . . . . . . . . . . . . . . . 108 text-align • szövegigazítás . . . . . . . . . 109 text-decoration • szövegdíszítés . . . . . 110 text-indent • szövegbehúzás . . . . . . . . 111 text-transform • szövegátalakítás . . . . 112

CSS00.qxd

6/15/2006

2:55 PM

Page xi

Tartalomjegyzék

xi

top • felsõ szél . . . . . . . . . . . . . . . . . . 113 unicode-bidi • Unicode – kettõs írásirány 114 vertical-align • függõleges igazítás . . . 114 visibility • láthatóság . . . . . . . . . . . . . 115 white-space • üreshelyek . . . . . . . . . . 116 width • szélesség . . . . . . . . . . . . . . . . 117 word-spacing • szóköz . . . . . . . . . . . . 117 z-index • z-index . . . . . . . . . . . . . . . . 118 Táblázatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 border-collapse • szegélyösszevonás . 119 border-spacing • szegélytávolság . . . . 119 caption-side • a táblázatcím helye . . . 120 empty-cells • üres cellák . . . . . . . . . . 121 table-layout • a táblázat elrendezése . 122 Többoldalas dokumentumok . . . . . . . . . . . . . . . . . . . . 122 orphans • árvasorok . . . . . . . . . . . . . . 122 page-break-after • utána oldaltörés . . 123 page-break-before • elõtte oldaltörés . 124 page-break-inside • oldaltörés benne . 124 widows • fattyúsorok . . . . . . . . . . . . . 125

A CSS2.1-bõl kimaradt tulajdonságok 126 Látványelemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 font-size-adjust • betûméret-beállítás . 126 font-stretch • betûszélesség . . . . . . . . 127 marker-offset • a listajel eltolása . . . . . 127 text-shadow • betûárnyékolás . . . . . . 128 Többoldalas dokumentumok . . . . . . . . . . . . . . . . . . . . 128 marks • passzerkeresztek . . . . . . . . . . 128 page • lapméret . . . . . . . . . . . . . . . . . 129 size • oldalbeállítás . . . . . . . . . . . . . . . 129 Hanggal kapcsolatos elemek . . . . . . . . . . . . . . . . . . . . 130 azimuth • irány . . . . . . . . . . . . . . . . . . 130 cue • hangbeszúrás . . . . . . . . . . . . . . 130 cue-after • hangbeszúrás utána . . . . . 131

CSS00.qxd

xii

6/15/2006

2:55 PM

Page xii

CSS zsebkönyv cue-before • hangbeszúrás elé . . . . . . 131 elevation • magasság . . . . . . . . . . . . . 132 pause • szünet . . . . . . . . . . . . . . . . . . 132 pause-after • szünet utána . . . . . . . . . 133 pause-before • szünet elõtte . . . . . . . . 133 pitch • hangmagasság . . . . . . . . . . . . 133 pitch-range • hangmagasság-tartomány . . . . . . 134 play-during • közben játszandó háttérhang . . . 134 richness • teltség . . . . . . . . . . . . . . . . 135 speak • felolvasási mód . . . . . . . . . . . 135 speak-header • a fejléc felolvasása . . . 136 speak-numeral • a számok kiolvasási módja . . . . . 136 speak-punctuation • a központozási jelek kiolvasási módja . . . . . . . . . . 136 speech-rate • a beszéd sebessége . . . . 137 stress • hangsúly . . . . . . . . . . . . . . . . . 137 voice-family • hangcsalád . . . . . . . . . . 138 volume • hangerõ . . . . . . . . . . . . . . . . 138

Tárgymutató . . . . . . . . . . . . . . . . . . . 141