stíluslapok (css) a webfejleszétben

Stíluslapok (CSS)a webfejleszétben

2

Mi az a CSS?Mi az a CSS?

A CSS jelentése Cascading Style Sheets, azaz egymásba ágyazott stíluslapok.

A HTML oldalaink megjelenését befolyásoló nyelvről van szó, mely segítségével meghatározhatjuk, hogy hogyan (és hol) jelenjenek meg az egyes HTML elemek (paragrafusok, címsorok, stb.), pl. szín, méret, elhelyezkedés, margó.

3

Egymásba ágyazhatóságEgymásba ágyazhatóság

több stíluslapot, meghatározást is megadhatunk egyszerre

egy stílus lehet több elemre is érvényes, amit egy másik stílussal felüldefiniálhatunk

a stílusok öröklődnek az oldal hierarchiája szerint, ha például a gyökér elemre definiálunk egy stílust, akkor az többnyire az oldal összes elemére érvényes (a tulajdonságok alapértelmezésétől függően)

4

Document Object ModelDocument Object Model

Motiváció

azaz miért is jó a CSS?

6

Miért CSS?Miért CSS?

Miért lesz egyszerűbb az életünk a CSS használatával?

Szeretnénk, ha a címsoraink betűi nagyok és sötétvörösek lennének, míg a bekezdéseink betűi kisebbek és sötétzöldek. Ezt HTML formázással a következőképpen tudjuk megvalósítani:

7

Formázás HTML-benFormázás HTML-ben

8

Miért rossz?Miért rossz?

minden egyes címsor (h1) és bekezdés (p) esetén meg kellett határoznunk a megjelenést (font), ráadásul ezáltal sokkal kevésbé lett áttekinthető a HTML forrásunk

a betűk méretének meghatározására nincs más lehetőségünk (a szabvány szerint), csak az előre definiált (1-től 7-ig meghatározott) méretek közül kiválasztani a nekünk megfelelőt

9

Hasonló CSS-elHasonló CSS-el

10

Miért jobb így?Miért jobb így?

csak egyszer kell a formázást megtenni a kód sokkal átláthatóbb lesz a pontos méretet is meghatározhatjuk

pixelben, vagy akár %-al, stb. ha utólag módosítanunk kell a megjelenést,

egyből csak egy helyen kell ezt megtennünk, s mindenhol meg is változik

az így elkészített dokumentum sokkal kisebb méretű is lesz, gyorsabban letöltődik (különösen, ha sok oldalon használjuk ugyanazt a stíluslapot)

11

Példa: stíluslap-váltásPélda: stíluslap-váltás

A következő két kép ugyanazt a HTML oldalt mutatja, egyetlen különbség a stíluslap váltása

12


13


14

www.csszengarden.comwww.csszengarden.com

CSS hozzákapcsolása a HTML-hez

16

Beágyazott stíluslapBeágyazott stíluslap

A stílusleírást a HTML oldal fejlécében kell elhelyezni, style elembe ágyazva. A fenti példában HTML megjegyzésbe is tettük (), ezzel azt érjük el, hogy az olyan böngészők, amik nem ismerik a stíluslapokat, ne jelenítsék meg a stílus definíciónkat. Az így meghatározott stílus az egész dokumentumra érvényes lesz.

17

Külső stíluslapKülső stíluslap

A stíluslapunkat elhelyezhetjük egy külső állományban is, így lehetővé téve, hogy az több HTML állományra is érvényes legyen, s központilag szerkeszthetővé váljon (ne kelljen minden egyes HTML állományt megváltoztatnunk, ha a honlapunk ezentúl másképp jelenne meg). A külső stíluslapokra az oldal fejlécében tudunk hivatkozni, egy link vagy style elem segítségével.

18

Külső stíluslap példaKülső stíluslap példa

A stíluslapot tartalmazó állományban csak a stíluslapjaink definícióját kell elhelyeznünk:

19

Importált stíluslapImportált stíluslap

egy stílus meghatározáson belül egy másik, külső stílus meghatározásra hivatkozunk:

külső stílus hivatkozásnak meg kell előznie minden más definíciót!

20

Elemhez rendelt stíluslapElemhez rendelt stíluslap

Ritkán van rá szükség, de akkor jól jön, hogy az egyes HTML elemekhez helyben is tudunk stílust meghatározni

itt csak magát a megjelenést kellett leírnunk, nem kellett meghatározni, hogy mire vonatkozik: az így definiált stílus csak az adott elemre, illetve az adott elemen belül lesz érvényes.

Stílusok formátuma

22

Stílus-meghatározásStílus-meghatározás

Kiválasztó:azt határozza meg, hogy mely HTML elemekre vonatkozzon a definíció

Tulajdonság:a megjelenést befolyásolja

Pl:

kiválasztó { tulajdonság }kiválasztó { tulajdonság }kiválasztó { tulajdonság }

23

Elem kiválasztásaElem kiválasztása

Legegyszerűbb a HTML elemek használatapl:

Itt az első három szintű címsornak egyszerre határoztuk meg a színbeli megjelenését

24

Osztály alapú kiválasztásOsztály alapú kiválasztás

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:

25

Osztály alapú kiválasztásOsztály alapú kiválasztás

Legyen minden „fontos” osztályú tag megjelenítése piros:

Megjegyzés:az egyes stílusdefiníciók felül tudják bírálni egymást

26

Kiválasztás keveréseKiválasztás keverése

27

Azonosító alapú kiválasztásAzonosító alapú kiválasztás

hasonló az osztály alapú kiválasztáshoz,

de azonosítóval csak egy elemet tudunk megjelölni.

28

Helyzetérzékeny kiválasztásHelyzetérzékeny kiválasztás

a fában egy adott elem alatt levő elemhez rendelhetünk stílust, például megmondhatjuk, hogy a táblázatokon belül levő félkövér betűk sötétkékek legyenek, miközben a többinek nem fog megváltozni a színe:

29

Szülő-gyermek kiválasztásSzülő-gyermek kiválasztás

az elemeknek a (DOM) fában betöltött helye szerinti közvetlen szülő-gyermek kapcsolata esetén tudjuk megadni a stílus-meghatározását

30

Tulajdonság alapú kiválasztásTulajdonság alapú kiválasztás

egy adott paraméter megléte, vagy annak az értéke szerint is lehet kiválasztani:

31

VariációkVariációk

Az eddigi kiválasztási módokat tetszés szerint variálhatjuk. Pl.

Betűk megjelenítése

33

BetűtípusBetűtípus

az egész dokumentumra beállítjuk, hogy milyen betűkészlet legyen az alapértelmezett

érdemes több, hasonló betűkészletet is felsorolni, illetve a lista végére egy általános betűkészletet is elhelyezni az adott családból

34

SúlyosságSúlyosság

lehetőségek: lighter, normal, bold, bolder, illetve 100-tól 900-ig a számok 100-asával (egyre vastagabb betűkészletet választva)

35

MéretMéret

Megadási lehetőségek: pixelben (mint a példában) pontban (pt-t kell írni) százalékban, szövegesen (xx-small, x-small, small,

medium, large, x-large, xx-large, smaller, larger)

36

StílusStílus

lehetőségeink: normal, italic, oblique

37

Csoportos megadásCsoportos megadás

Lehetőségünk van a fentieket egy paraméterként is átadni:

Szöveg paraméterek

39

Szöveg paraméterekSzöveg paraméterek

h1 { color: black; } Fekete szín. Lehetőség van RGB megadásra is.

h1 { letter-spacing: 10px; } A címsor betűi közötti távolságot növeltük meg 10 képponttal. Lehetőségünk van növelni és csökkenteni a távolságot.

h1 { text-align: center; } Lehet: left, center, right és justify

40


p { text-decoration: none; } lehetséges értékek: none, underline, overline, line-through, blink

p { text-indent: 40px; } bekezdések első sorának behúzása

h1 { text-transform: uppercase; }

Lehetséges értékek: none, capitalize, uppercase és lowercase

41


p { white-space: nowrap; } Szóközök, tabulátorok kezelését állíthatjuk a white-space attribútummal. A normal a sorvégeken tördeli a szöveget, a nowrap nem enged sortörést, míg a harmadik lehetséges érték, a pre megtartja egy az egyben a sortöréseket, szóközöket, tabulátorokat.

42


p { word-spacing: 10px; }szavak közötti távolság

p { line-height: 20px; } sormagasságot állíthatjuk vele egy paragrafuson belül

Dobozok megjelenítése

44

1.margó

2.keret

3.kitöltés

4.magasság

5.szélesség

Doboz modell Doboz modell

Bármilyen téglalap alakú tartalom esetén.

45

HáttérHáttér

Vezérelhetjük a háttér színét, képet helyezhetünk el háttérként, s annak tulajdonságait (elhelyezkedését, ismétlődését, mozgását) állíthatjuk be.

46

HáttérHáttér

background-color: white; értéke színkonstans vagy hexa érték lehet

background-image: url(hatter.gif); background-position: top left; background-attachment: scroll;

lehetséges érték: fixed és scroll background-repeat: repeat;

lehetséges érték: repeat, repeat-x, repeat-y, no-repeat

47

HáttérHáttér

A háttér paraméterek egy összevonó background paraméterrel:

48

KeretekKeretek

border-width: 2pxszélesség

border-style: solidlehetséges értékek: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

border-color:blue

49

KeretekKeretek

Az előző példa egyetlen border tulajdonsággá összevonható:

50

KeretekKeretek

Lehetőségünk van a keretek mind a négy oldalon külön-külön történő beállítására, akár összevonva is:

51

MargókMargók

margin: 0px 1px 2px 3px; fenti, jobb oldali, lenti és bal oldali margó szélesség

margin: 10px 0px; függőleges és vízszintes irány

margin: 0;azonos margó minden oldalon

margin-left: 3px; a négy oldalt külön-külön is beállíthatjuk

52

KitöltésKitöltés

az egyes elemeknek a kereten belüli helyfoglalását szabályozhatjuk

Megadás pont úgy történik, mint a margó esetén. Pl:padding: 0px 1px 2px 3px;

Listák

54

Listák szerkezeteListák szerkezete

külső elem: UL, OL

belső elem: LI

ul { list-style: square inside url(pont.gif) }

list-style-image: url(pont.gif)

55

Listák szerkezeteListák szerkezete

list-style-position: insidelehetséges értékek: inside, outside list-style-type: disc lehetséges értékek:

none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian,

Látszólagos kiválasztók

57

LinkekLinkek

a { color: #0000FF; text-decoration: underline; }

Minden linkre fog vonatkozni a:link { text-decoration: none; }

még meg nem látogatott a:visited { font-style: italic; }

már meglátogatott a:hover { font-style: bold; }

ha a kurzort fölé visszük

58

Elemszerű kiválasztókElemszerű kiválasztók

kiválasztanunk egy-egy elem tartalmának csak bizonyos részeit, mintha azok külön-külön definiált elemek lennének

p:first-letter {font-size: 300%;}első betű 3-szoros

p:first-line { color: #000080; } első sor kék színű

59

Első gyermek kiválasztóElső gyermek kiválasztó

body > p:first-child { font-weight: bold; } a body első bekezdését választja ki(ha nem p az első gyermek, akkor nem lesz hatása ennek a kiválasztónak!)

60

Elem előtt és utánElem előtt és után

adott elem előtti és mögötti látszólagos részeket választjuk ki (fontos: nem az előtte levő elemeket, hanem az elem és az előtte levő elem közötti 0 hosszúságú részt)

b:before { content: '<b>'; }b:after { content: '</b>'; } ténylegesen megjeleníti a tagokat is

Megjelenítés

62

LáthatóságLáthatóság

A böngésző megjelenítse-e

visible: látható

hidden:nem látható (a helye „üres” marad!)

collapse táblázat sorát vagy oszlopát lehet elrejteni

h1 { visibility: hidden; }

63

Megjelenítés Megjelenítés

a böngésző minden elemhez meghatároz egy alapértelmezett sémát

de ez felülbírálható:

h1 { display: run-in; }

64

Megjelenítés letiltásaMegjelenítés letiltása

a dokumentumunkban jelen lesz, elérhető, használható, de fókuszt már felhasználó által nem kaphat (pl. JavaScriptből viszont igen)

.hidden { display: none; } gyakori példa:

faszerkezetű menüben a gyermekek eltüntetése JavaScripttel

65

Soron belüli megjelenítésSoron belüli megjelenítés

példa: a form elemünk blokk típusú megjelenítését soron belülire szeretnénk változtatni

form { display: inline; }

másik példa: felsorolással (UL) adjuk meg a horizontális menüt

66

Blokkban történő megjel.Blokkban történő megjel.

téglalapot foglalnak el, és abban jelenítik meg tartalmukat

pl. egy felsorolás elemeit blokként szeretnénk megjeleníteni

ul, li { display: block; border: 1px solid #000000; }

67

www.digital-web.comwww.digital-web.com

68

nagygusztav.hunagygusztav.hu

69

Befutó megjelenítésBefutó megjelenítés

betolakodhatunk a következő elembe, amennyiben az blokként jelenik meg

például egy címsor elemet az utána következő bekezdés elején tudunk megjeleníteni:

h1 { display: run-in; }

70

Jelölőként való megjelenítésJelölőként való megjelenítés

csak generált blokkban használhatjuk

pl. a lista elemnél a jelölő megjelenéséhez hasonlóan fog megjelenni a generált tartalom:

li:before { display: marker; content: "-"; width: 10px; }

A pozícionálás és kapcsolódó tulajdonságok

72

Pozícionálási sémaPozícionálási séma

azt határozhatjuk meg, hogy mihez képest helyezze el az elemet

static (alapértelmezés)ott jelenik meg az elem, ahol éppen tartunk a dokumentumban

73


relative esetén a static-hoz képest eltolhatjuk (top, left)

#fejlec { position: relative; top: -15px; left: 10px; }

absolute esetén a méret is változtatható már(right, bottom, width, height)

az elem kikerül a megjelenítés folyamából #lablec { position: absolute; bottom: 10px; right: 10px; }

74


fixed hasonlít az absolute-hoz, de itt nem a dokumentumon, hanem a képernyőn belül pozícionálhatunk

#cimke { position: fixed; bottom: 10px; right: 10px; }

példa: keret emuláció (!)

75

LebegtetésLebegtetés

A képeket mindig bal szélhez igazítja:img { float: left; }

a kép soron belüli elem, a szöveg nem tudja körbefutni enélkül

Dinamikus tartalmak

77

Külső objektumokKülső objektumok

a példa egy képet jelenít meg minden paragrafus előtt:

p:before { content: url(/images/para-start.gif); }

78

www.designprog.net/www.designprog.net/cikkolvas.php?id=208cikkolvas.php?id=208

79

SzámlálókSzámlálók

egy folyamatosan növekvő értéket fogunk beszúrni az adott elem elé. Például megszámozzuk a címeket:

h1:before { content: counter(headermains); }

80

Kurzor beállításaKurzor beállítása

adott elem felett lehetőségünk van befolyásolni az egérkurzor megjelenését

lehetséges értékek:auto, crosshair, default, pointer, move, e-resize, text, …továbbá az url(xxx.gif)

a { cursor: move; } .area { cursor: url(/images/eger.gif); }

Technikai eszközök

82

Internet ExplorerInternet Explorer

Sajnos az Internet Explorer nem tartja magára nézve kötelezőnek a szabványokat

Nem vesz figyelembe minden kiválasztót (kisebbik probléma)

Némelyiket máshogy értelmezi(nagyobbik probléma)

Akkor mit használjunk?

83

Netcsape, Mozilla, FirefoxNetcsape, Mozilla, Firefox

http://www.mozilla.org-ról letölthetők

Maximálisan szabványkövető böngészők

A Firefox-ot direkt webfejlesztőknek készítik

Sok hasznos plugin létezik, pl:Web Developer Toolbar

84

Web Developer ToolbarWeb Developer Toolbar

View style information:az egérkurzornál levő tartalom „elérési útja” az állapotsorban

85


Display block size:minden blokk mérete pixelben

86


Display ID & class details

87

Jogos kérdés, kételyJogos kérdés, kétely

Szabad-e úgy fejleszteni, hogy a szörfözők 80-90%-a nem azt fogja látni eredményül, amit szeretnék

Szerintem úgy érdemes, hogy először a szabványnak megfelelő legyen, majd kiegészíteni azzal a néhány dologgal, amit az Internet Explorer máshogy értelmez.

88

Az én megoldásomAz én megoldásom

<link rel="StyleSheet" type="text/css" href="design/stilus.css">

89

Az én megoldásomAz én megoldásom

#balmenu { width:200px; margin-top: 20px; }

.ballistablokk ul li a {padding: 0px 0px 2px 20px;margin: -5px 0px -15px 0px;

}

span.cikkdatum { margin-top: 0px; }

Validálás

(Helyesség ellenőrzés)

91

On-line ellenőrzésOn-line ellenőrzés

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

92

TIDYTIDY

http://www.w3.org/People/Raggett/tidy/

HTML és CSS ellenőrzés

Tulajdonképpen egy nyílt forrású függvénykönyvtár, bárki felhasználhatja

93

TIDY szolgáltatásaiTIDY szolgáltatásai

ellenőrzés: error, warning és access warning

automatikus korrekció (pl. van egy PHP rendszerünk, aminek a kimenetét a TIDY-vel még korrigáljuk)

HTML formázás (logikai felépítés vizuális jelzése a tabulálással)

…

94

TIDY használhatóTIDY használható

parancssori programként

saját programba beépíthetjük (pl. egy HTML + CSS editort írunk)

Mozilla, Firefox pluginazonnali ellenőrzés

95

TIDY plug-inTIDY plug-in

További Firefox plug-inek

97

addons.update.mozilla.org/addons.update.mozilla.org/extensions/extensions/

Jelenleg 695 tölthető le

JavaScript Debugger

ColorZilla

Link preview

Adblock

Download Manager Tweak

ChatZilla

98

Google previewGoogle preview

99

Felhasznált irodalomFelhasznált irodalom

http://w3c.org/Style/CSS/

http://css.lap.hu/

http://weblabor.hu/cikkek/cssalapjai1

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

Végezetül

néhány további kedvcsináló példa

101

weblabor.hu/weblabor.hu/cikkek/dobozolascikkek/dobozolas

102

weblabor.hu/weblabor.hu/cikkek/kepvalasztopanelcikkek/kepvalasztopanel

103

e-lusion.com/design/menu/e-lusion.com/design/menu/

104

www.hszk.bme.hu/~hj130/www.hszk.bme.hu/~hj130/css/drop_shadow/css/drop_shadow/

stíluslapok (css) a webfejleszétben

Documents