Stíluslapok (CSS) a webfejleszétben

Az előadások a következő témára: "Stíluslapok (CSS) a webfejleszétben"— Előadás másolata:

1 Stíluslapok (CSS) a webfejleszétben
Nagy Gusztáv PHP Konferencia RoadShow Kecskemét

2 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á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 Model

5 Motiváció azaz miért is jó a CSS?

6 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-ben

8 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-el

10 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á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 Példa: stíluslap-váltás

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

14

15 CSS hozzákapcsolása a HTML-hez

16 Beá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í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élda A stíluslapot tartalmazó állományban csak a stíluslapjaink definícióját kell elhelyeznünk:

19 Importá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í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.

21 Stílusok formátuma

22 Stí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ása Legegyszerűbb a HTML elemek használata pl:
Itt az első három szintű címsornak egyszerre határoztuk meg a színbeli megjelenését

24 Osztá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á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ése

27 Azonosí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á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á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ás
egy adott paraméter megléte, vagy annak az értéke szerint is lehet kiválasztani:

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

32 Betűk megjelenítése

33 Betű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á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é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ílus lehetőségeink: normal, italic, oblique

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

38 Szöveg paraméterek

39 Szö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 Szöveg paraméterek 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 Szöveg paraméterek 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 Szöveg paraméterek p { word-spacing: 10px; } szavak közötti távolság
p { line-height: 20px; } sormagasságot állíthatjuk vele egy paragrafuson belül

43 Dobozok megjelenítése

44 Doboz modell Bármilyen téglalap alakú tartalom esetén. margó keret
kitöltés magasság szélesség Bármilyen téglalap alakú tartalom esetén.

45 Há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é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ér A háttér paraméterek egy összevonó background paraméterrel:

48 Keretek border-width: 2px szélesség
border-style: solid lehetséges értékek: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-color:blue

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

50 Keretek 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ó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é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;

53 Listák

54 Listá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 szerkezete list-style-position: inside
lehetsé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,

56 Látszólagos kiválasztók

57 Linkek 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ó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ó
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á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

61 Megjelenítés

62 Lá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 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á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é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.
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

68 nagygusztav.hu

69 Befutó 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é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; }

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

72 Pozí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 Pozícionálási séma 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 Pozícionálási séma 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é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

76 Dinamikus tartalmak

77 Kü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/ cikkolvas.php?id=208

79 Szá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á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); }

81 Technikai eszközök

82 Internet 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, Firefox
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 Toolbar View style information: az egérkurzornál levő tartalom „elérési útja” az állapotsorban

85 Web Developer Toolbar Display block size: minden blokk mérete pixelben

86 Web Developer Toolbar Display ID & class details

87 Jogos 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ásom <link rel="StyleSheet" type="text/css" href="design/stilus.css"> <!--[if IE]> <link rel="StyleSheet" type="text/css" href="design/ie_stilus.css"> <![endif]-->

89 Az é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; }

90 (Helyesség ellenőrzés)
Validálás (Helyesség ellenőrzés)

91 On-line ellenőrzés http://validator.w3.org/

92 TIDY 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á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ó parancssori programként
saját programba beépíthetjük (pl. egy HTML + CSS editort írunk) Mozilla, Firefox plugin azonnali ellenőrzés

95 TIDY plug-in

96 További Firefox plug-inek

97 addons.update.mozilla.org/ extensions/
Jelenleg 695 tölthető le JavaScript Debugger ColorZilla Link preview Adblock Download Manager Tweak ChatZilla

98 Google preview

99 Felhasznált irodalom http://w3c.org/Style/CSS/ http://css.lap.hu/
cover.htm

100 néhány további kedvcsináló példa
Végezetül néhány további kedvcsináló példa

101 weblabor.hu/ cikkek/dobozolas

102 weblabor.hu/ cikkek/kepvalasztopanel

103 e-lusion.com/design/menu/

104