Master CSS for Effective Web Development | CSS Tips and Tricks

1. Stíluslapok (CSS)a webfejleszétben Nagy Gusztáv PHP Konferencia RoadShowKecskemé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. www.csszengarden.com

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á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á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 • 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: 2pxszélesség • border-style: solidlehetsé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: