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

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

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)

Document Object Model

Motiváció azaz miért is jó a 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:

Formázás HTML-ben

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

Hasonló CSS-el

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)

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

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

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

www.csszengarden.com

CSS hozzákapcsolása a HTML-hez

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.

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.

Külső stíluslap példa A stíluslapot tartalmazó állományban csak a stíluslapjaink definícióját kell elhelyeznünk:

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!

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.

Stílusok formátuma

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 }

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

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:

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

Kiválasztás keverése

Azonosító alapú kiválasztás hasonló az osztály alapú kiválasztáshoz, de azonosítóval csak egy elemet tudunk megjelölni.

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:

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

Tulajdonság alapú kiválasztás egy adott paraméter megléte, vagy annak az értéke szerint is lehet kiválasztani:

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

Betűk megjelenítése

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

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)

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)

Stílus lehetőségeink: normal, italic, oblique

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

Szöveg paraméterek

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

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

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.

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

Dobozok megjelenítése

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.

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.

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

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

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

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

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:

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

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;

Listák

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)

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,

Látszólagos kiválasztók

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

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ű

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

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

Megjelenítés

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; }

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; }

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

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

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; }

www.digital-web.com

nagygusztav.hu

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; }

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; }

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

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

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; }

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ó (!)

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

Dinamikus tartalmak

Külső objektumok a példa egy képet jelenít meg minden paragrafus előtt: p:before { content: url(/images/para-start.gif); }

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

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); }

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); }

Technikai eszközök

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?

Netcsape, 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

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

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

Web Developer Toolbar Display ID & class details

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.

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

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; }

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

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

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

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

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

TIDY plug-in

További Firefox plug-inek

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

Google preview

Felhasznált irodalom http://w3c.org/Style/CSS/ http://css.lap.hu/ http://weblabor.hu/cikkek/cssalapjai1 http://htmlinfo.polyhistor.hu/css2ref/ cover.htm

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

weblabor.hu/ cikkek/dobozolas

weblabor.hu/ cikkek/kepvalasztopanel

e-lusion.com/design/menu/

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