Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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

Hasonló előadás


Az előadások a következő témára: "Stíluslapok (CSS) a webfejleszétben Nagy Gusztáv PHP Konferencia RoadShow Kecskemét."— Előadás másolata:

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

2 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 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 4 Document Object Model

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

6 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 7 Formázás HTML-ben

8 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 9 Hasonló CSS-el

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

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

14 14

15 CSS hozzákapcsolása a HTML- hez

16 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 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 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 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 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 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 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 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 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 26 Kiválasztás keverése

27 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 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 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 30 Tulajdonság alapú kiválasztás Tulajdonság alapú kiválasztás  egy adott paraméter megléte, vagy annak az értéke szerint is lehet kiválasztani:

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

32 Betűk megjelenítése

33 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 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 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 36 Stílus  lehetőségeink: normal, italic, oblique

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

38 Szöveg paraméterek

39 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 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 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 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 44 1.margó 2.keret 3.kitöltés 4.magasság 5.szélesség Doboz modell Bármilyen téglalap alakú tartalom esetén.

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

48 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 49 Keretek  Az előző példa egyetlen border tulajdonsággá összevonható:

50 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 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 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 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 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 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 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 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 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:after { content: ' '; } ténylegesen megjeleníti a tagokat is

61 Megjelenítés

62 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 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 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 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 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 67

68 68 nagygusztav.hu

69 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 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 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 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 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 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 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 78 cikkolvas.php?id=208

79 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 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 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 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 84 Web Developer Toolbar  View style information: az egérkurzornál levő tartalom „elérési útja” az állapotsorban

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

86 86 Web Developer Toolbar  Display ID & class details

87 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 88 Az én megoldásom 

89 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 Validálás (Helyesség ellenőrzés)

91 91 On-line ellenőrzés  

92 92 TIDY  /  HTML és CSS ellenőrzés  Tulajdonképpen egy nyílt forrású függvénykönyvtár, bárki felhasználhatja

93 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 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 95 TIDY plug-in

96 További Firefox plug-inek

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

98 98 Google preview

99 99 Felhasznált irodalom     cover.htm

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

101 10 1 weblabor.hu/ cikkek/dobozolas

102 10 2 weblabor.hu/ cikkek/kepvalasztopanel

103 10 3 e-lusion.com/design/menu/

104 10 4 rop_shadow/


Letölteni ppt "Stíluslapok (CSS) a webfejleszétben Nagy Gusztáv PHP Konferencia RoadShow Kecskemét."
Google Hirdetések