Címzés a stíluslapban  Szelektor#id

{definíció}

 Példa  div#fejlec

{margin: 10px;}

19

Látszólagos (pszeudo) 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

{}  a:visited  a:active  a:hover

/* link */

{} {} {}

/* látogatott link */ /* aktív link */ /* ha fölé viszem az egeret */

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

Tipográfiai látszólagos elemek 21



:first-letter

<TITLE>Stíluslapok <STYLE TYPE="text/css">

A sor első betűje kétszer akkora lesz, mint a többi.

Természetesen ebben a bekezdésben is.

Tipográfiai látszólagos elemek 22



:first-line

<TITLE>Stíluslapok <STYLE TYPE="text/css">

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

Rangsor 24



Meghatározás sorrendje szerint 

Későbbi deklaráció > korábbi deklaráció

<TITLE>Stíluslapok <STYLE TYPE="text/css">

Ez egy 1-es címsor

Rangsor 25



explicit súly szerinti rendezés 

! Important > normál

<TITLE>Stíluslap példa <STYLE TYPE="text/css">

Ez egy 1-es címsor

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]

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 {...} UL LI {...} OL UL LI {...} LI.red {...} OL UL LI.red {...} #x34y {...}

/* /* /* /* /* /*

a=0 a=0 a=0 a=0 a=0 a=1

b=0 b=0 b=0 b=1 b=1 b=0

c=1 c=2 c=3 c=1 c=3 c=0

=> => => => => =>

egyediség egyediség egyediség egyediség egyediség egyediség

= = = = = =

1 */ 2 */ 3 */ 11 */ 13 */ 100 */

Dokumentumfa 28

 

forrásdokumentumban van kódolva. minden elemnek pontosan egy szülő eleme van, kivéve a gyökérelemet, amelynek nincs gyökér szülő eleme. HTML HEAD

Gyermek eleme

BODY

Első gyerek TITLE

H1 Testvérek

P

UL

LI

LI

LI

Leszármazottja

CSS szelektorok használata 29 Jelentés

Minta

*

Megfelel bármelyik elemnek.

E

Egyezik bármely E elemmel (bármely E típusú elemmel).

EF

Egyezik bármely F elemmel, ami egy E elem leszármazottja.

E>F

Egyezik bármely F elemmel, ami egy E elem gyermek-eleme

E:first-child

Megegyezik az E elemmel, ha az E a szülő elemének első gyermeke.

E:link E:visited

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).

E:active E:hover E:focus

Megegyezik az E elemmel, bizonyos felhasználói beavatkozások alatt.

E:lang(c)

Megegyezik az E típusú elemmel, ha az a (beszélt) c nyelven íródott.

CSS szelektorok használata 30 Minta

Jelentés

E+F

Megegyezik bármely F elemmel, amelyet közvetlenül megelőz egy E elem.

E[valami]

Megegyezik bármely E elemmel, amelynek "valami" attribútuma be van állítva (tekintet nélkül annak értékére).

E[valami="warning"]

Megegyezik azzal az E elemmel, amelynek "valami" attribútumának értéke pontosan "warning".

E[valami~="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

Csak HTML. Ugyanaz, mint a DIV[class~="warning"].

E#azonositó

Megegyezik azzal az E elemmel, amelynek ID-je "azonosito".

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

http://www.quirksmode.org/css/contents.html

31

CSS2 példák 32

<style type="text/css">b, td>b { color: #0000a0; } -->

A cserebogarak halhatatlanságáról
A cserebogárnak vannak lábai. Ebből...	Minden cserebogárnak van lába... Minden cserebogár bogár...

Minden cserebogár bogár...

Nem gyerek, csak leszármazott

http://weblabor.hu/cikkek/cssalapjai1

CSS2 példák 33

<style type="text/css">

Név: Jelszó:

http://weblabor.hu/cikkek/cssalapjai1

CSS2 példák 34

<style type="text/css">

Első bekezdés

Második bekezdés

• Lista1

Harmadik bekezdés

Negyedik bekezdés

http://weblabor.hu/cikkek/cssalapjai1

CSS2 példák 35

<style type="text/css">

Első bekezdés

Első bekezdés

Second paragraph

Second paragraph

http://weblabor.hu/cikkek/cssalapjai1

Formázásmodell 36

Margó: margin Szegély: border Kitöltés: padding

Margó, kitöltés megadása 37

top

left

right

margin: margin-top: margin-right: margin-bottom: margin-left:

padding: padding-top: padding-right: padding-bottom: padding-left:

bottom margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 3px;

margin: 5px 10px 15px 3px;

Margó, kitöltés megadása 38

5px margin: 5px 10px 15px 3px;

3px

10px 15px 5px

margin: 5px;

5px

5px 5px

margin: 5px 10px;

5px 10px

10px 5px 5px

margin: 5px 10px 15px;

10px

10px 15px

39

Blokkszintű elemek (margó összevonás) <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; } ...

• Első elem
• Második elem

Lebegő elemek (float: left | right | none) 40 <TITLE>Stíluslap példa <STYLE TYPE="text/css">

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

41

Lebegő elemek és a clear tulajdonság  



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.

Pozícionálás 42



Position: static | relative | absolute | fixed | inherit



Static 



Relative 



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 

Példák

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 



Nem pozícionált, a kódban elfoglalt helye határozza meg a vásznon való elhelyezkedését

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)

Layoutok 43



http://www.maxdesign.com.au/articles/csslayouts/

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  



Beállíthatjuk az ismétlődés módját  



background-position vízszintesen (left,center, right, %, hossz) függőlegesen (top, center, bottom, %, hossz) 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)

Háttérkép példa 45



Háttérkép példa 46



Háttérkép példa 47



Háttérkép példa 48



Háttérkép példa 49



Háttérkép példa 50



Háttérkép példa 51



Háttérkép példa 52



Szegélyek 53



Mind a 4 szegélyre vonatkozik az alábbi: 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  Border-style:



Kompakt megadás:  Border:

1px solid green;

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;

Szegély stílusok 55

dashed

dotted

groove

inset

double

ridge

outset

solid

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!

Betűtípus (font) 57



Official Reference: CSS Level 1, Section 5.2 



5.2.7: '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 15.2 

15.2.4: 'font-size-adjust' 15.2.3: 'font-stretch' 15.2.5: 'font' 15.2.3: 'font-style' 15.2.3: 'font-variant' 15.2.3: 'font-weight' 15.2.4: 'font-size' 15.2.2: 'font-family'

http://www.blooberry.com/indexdot/css/properties/font.htm

Szöveg (text) 58



Official Reference: CSS Level 1, Sections 5.4.1-7, 5.6.2 



5.4.1: '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 16 

16.4: 'word-spacing' 16.4: 'letter-spacing' 16.6: 'white-space' 16.2: 'text-align' 16.3.1: 'text-decoration' 16.5: 'text-transform' 16.3.2: 'text-shadow' 16.1: 'text-indent'

Szín/háttér (color/background) 59



Official Reference: CSS Level 1, Section 5.3.1-7 



5.3.1: '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 14.1-2 

14.1: 'color' 14.2.1: 'background' 14.2.1: 'background-color' 14.2.1: 'background-image' 14.2.1: 'background-repeat' 14.2.1: 'background-attachment' 14.2.1: 'background-position'

Lista (list) 60



Official Reference: CSS Level 1, Section 5.6.3-6 



5.6.6: '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 12.6 

12.6.1: 'marker-offset' 12.6.2: 'list-style' 12.6.2: 'list-style-type' 12.6.2: 'list-style-position' 12.6.2: 'list-style-image'

Dimenziók 61



Official Reference: CSS Level 1, Sections 5.4.8 and 5.5.23-24 



5.5.23: 'width' 5.4.8: 'line-height' 5.5.24: 'height'

Official Reference: CSS Level 2, Sections 10.2-8 

10.2: 'width' 10.4: 'min-width' 10.4: 'max-width' 10.8: 'line-height' 10.5: 'height' 10.7: 'min-height' 10.7: 'max-height'

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 1 2

1

3 3

3

2

2

1

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

Display tulajdonság 2. 64



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

Probléma 65



El akarjuk érni a következő megjelenést. Mit használjunk?

<TITLE> <STYLE type="text/css"> H3 {???? }

Címsor

Lorem ipsum…

Példa (inline) 66

<TITLE> <STYLE type="text/css"> H3 { display: inline }

Címsor

Lorem ipsum…

Példa (inline) – nem valid 67

<TITLE> <STYLE type="text/css"> H3 { display: inline }

Címsor

Lorem ipsum…

Példa (run-in) 68

<TITLE> <STYLE type="text/css"> H3 { display: run-in }

Címsor

Lorem ipsum…

Display tulajdonság 3. 69



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.

Display tulajdonság - példa 70



<style type="text/css">

CSS alkalmazásával

CSS nélkül

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

http://www.quirksmode.org/css/display.html

72

Böngészők viselkedése és a 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!

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  



Mi alapján váltunk? 



Quirks: régi szabályok szerinti megjelenítés Strict: szabványkövető üzemmód 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 http://hsivonen.iki.fi/doctype/ http://www.quirksmode.org/css/quirksmode.html

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.

elemek új sorba törése nem kívánt megjelenést eredményezhet (megnövekedett függőleges hely)

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

Mi történik Quirks módban? 75







Tag soup parsing.

text

... kód esetén Firefox Quirks módban a táblázat a

elem része, szabványos üzemmódban a

lezárja a megnyitott

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)

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

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.

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

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.

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

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ő.

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

Hasznos információk 79



Különböző böngészőkben különböző Quirks mód van implementálva a Netscape 4.x-et imitálja  IE6+ az IE5-t imitálja  Mozilla



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 http://www.quirksmode.org/css/quirksmode.html

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

http://hsivonen.iki.fi/doctype/

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

http://hsivonen.iki.fi/doctype/

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

http://hsivonen.iki.fi/doctype/

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

http://hsivonen.iki.fi/doctype/

84

Internet Explorer 8 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

http://hsivonen.iki.fi/doctype/ie8-mode.png Internet Explorer 8 különlegesség

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 különbségek 

Média típusok  Hogyan

jelenjen meg a dokumentum különböző

médián Példa @import url("loudvoice.css") aural; @media print { /* css definíciók */ }

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

Média csoportok 89

Média típusok

Média csoportok continuous/ paged

visual/aural/ tactile

grid/ bitmap

interactive/ static

aural continuous

aural

N/A

both

braille continuous

tactile

grid

both

tactile

grid

both

visual

both

both

print paged

visual

bitmap

static

projection paged

visual

bitmap

static

screen continuous

visual

bitmap

both

tty continuous

visual

grid

both

visual, aural

bitmap

both

emboss paged handheld both

tv both

http://www.w3.org/TR/REC-CSS2/media.html#media-types

90

CSS1 és CSS2 közti 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; }

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 }

http://htmlinfo.polyhistor.hu/css2ref/aural.htm

92

CSS1 és CSS2 közti különbségek 

Lapozható média 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: A

az oldalon levő dobozok kiosztását tartalmazza.  margó terület; amely körülveszi az oldalterületet.  oldalterület;

@page { size 8.5in 11in; margin: 2cm }

93

CSS1 és CSS2 közti 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, print"> @font-face { font-family: "Robson Celtic"; src: url("http://site/fonts/robcelt") } H1 { font-family: "Robson Celtic", serif }

http://www.w3.org/TR/REC-CSS2/fonts.html#font-selection

94

CSS1 és CSS2 közti 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

http://www.w3.org/TR/REC-CSS2/fonts.html#font-selection

95

CSS1 és CSS2 közti különbségek 

Méret megadásnál  Minimális

és maximális méretek megadása

minimális szélesség  max-width: maximális szélesség  min-height: minimális magasság  max-height: maximális magasság  min-width:

http://www.w3.org/TR/REC-CSS2/fonts.html#font-selection

96

CSS1 és CSS2 közti 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.

http://htmlinfo.polyhistor.hu/css2ref/visuren.htm#compact

97

CSS1 és CSS2 közti 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

http://htmlinfo.polyhistor.hu/css2ref/visuren.htm#compact

98

CSS1 és CSS2 közti különbségek 

Generált elemek  :before

és :after peszudo elemek

 P.jegyzet:before

 a:after

{ content: "Jegyzet: " }

{ content: " (" attr(href) ") "; }

http://htmlinfo.polyhistor.hu/css2ref/visuren.htm#compact

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

http://www.quirksmode.org/css/contents.html

100

CSS1 és CSS2 közti különbségek 

Kurzor beállítási lehetőség

http://www.javascriptkit.com/dhtmltutors/csscursors.shtml

Stíluslapok validálása 101

 

CSS Validation Service http://jigsaw.w3.org/css-validator/

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, …..

CSS3 szelektorok

103

Jelentés

Minta E~F

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)

E[attr]

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.

:empty

Tartalom nélküli elemre illeszkedik

:enabled :disabled :checked

Enabled, disabled, checked állapotú (űrlap)elemekre illeszkedik

:first-of-type :last-of-type :only-of-type

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

:last-child

Utolsó gyermekelem

:not

Tagadás p#test *:not(em) {text-decoration: underline;} A test azonosítójú bekezdés leszármazottai,kivéve az em elemeket.

Néhány példa 104

Kódrészlet

CSS div#content >:first-child {color:red;}

Néhány példa 105

Kódrészlet

CSS div#content >div:first-child {color:red;}

Néhány példa 106

Kódrészlet

CSS div#content >div:first-of-type {color:red;}

Néhány példa 107

Kódrészlet

CSS div#content >:only-of-type {color:red;}

108

CSS3 szelektorok

109

Jelentés

Minta :nth-child()

Egy formulával meghatározható sorszámú gyerek div#test > *:nth-child(3n+1) { color: red; }

: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()

Hasonló a fentiekhez, de az utolsó elemre vonatkozik. (A sorszám az utolsótól számítódik)

:only-child

Olyan elem, amely a szülő elem egyetlen gyermeke

:root

Minden blokk gyökéreleme (HTML-ben ez a 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

111

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

112

113

114

115

http://www.normansblog.de/demos/browser-support-checklist-css3/

http://www.normansblog.de/demos/browser-support-checklist-css3/

116

Vége 117