Stíluslapok használata
Bevezetés 1. A HTML és a stíluslap feladata a) HTML: a weblap tartalmát és szerkezetét írja le b) Stíluslap: a weblap megjelenését szabályozza elrendezési tulajdonságok: a weblap elemeinek az elrendezését szabályozzák formázási tulajdonságok: a weblap elemeinek a megjelenését szabályozzák 2. A stíluslapok használatának előnyei: a) Sok formázási lehetőség van b) Több weblap is formázható egyszerűen ugyanúgy c) A tartalom és a forma külön-külön is módosítható 3. A stíluslapok használatának hátránya: a) Nem minden böngésző értelmezi ugyanúgy ugyanazt a formázó utasítást (különösen az újdonságokat)
A CSS rövid története 1990: Egy weblap tartalmát és formázását szét kellene választani 1993: Az első grafikus böngésző, a Mosaic megjelenése 1994: A CSS (Cascading Style Sheets, 'lépcsőzetes stíluslapok') ötlete 1996: CSS 1 (javítása: 1999) 1997: CSS 2 (javítása: 2007) 2001: CSS 3 fejlesztésének elindítása
Stíluslapok és a weblapok kapcsolata 1. 1. Szövegközi (kódon belüli) stílus: a) A weblap törzsében helyezkedik el b) Csak egy elemre vonatkozik. c) Az elem style paraméterének értékeként adhatók meg (idézőjelben, az egyes stílusokat pontosvesszővel elválasztva). d) Nem minden stílus használható. e) Ritkán használják f) Az ugyanarra az elemre vonatkozó szövegközi stílusleírás felülbírálja a külső és belső stílusleírást
Stíluslapok és weblapok kapcsolata 2. Beágyazott (belső) stíluslap: A <head>...</head> tagok közötti fejrészbe helyezendő el: <style> itt jönnek a stílusleírások </style> Egy teljes weblapra vonatkozik Az ugyanarra az elemre vonatkozó belső stílusleírás felülbírálja a külső stílusleírást
Stíluslapok és weblapok Külső stíluslapok kapcsolata 3. A stílusok egy különálló,.css kiterjesztésű fájlban vannak felsorolva, ezért ez több weblaphoz is csatolható A stíluslapfájl leggyakoribb csatolási módja a HTMLfájlhoz: a <head>...</head> közé elhelyezve: <link>, a lehetséges paraméterek: rel= stylesheet (a hivatkozott fájl egy stíluslap) href= a css fájl elérési útvonala és azonosítója Több külső stíluslap csatolása a <head> és </head> közé elhelyezett megfelelő számú @import url(a stíluslap elérési útvonala és azonosítója) utasítással történik
Egy stílus (stílusszabály) szerkezete kijelölő {tulajdonság: érték} kijelölő (selector, elemválasztó, kiválasztó, szelektor): melyik HTML elem tulajdonságát állítjuk be tulajdonság (attributum): a HTML elem melyik jellemzőjét állítjuk be érték (value): a tulajdonságnak milyen értéket adunk
Meghatározások és kijelölők csoportos megadása meghatározás (declaration): a tulajdonság: érték páros együttes neve több meghatározás megadása esetén közéjük pontosvesszőt kell tenni meghatározásblokk: a kapcsos zárójelben lévő egy vagy több meghatározás együtt több kijelölő esetén (ha mindegyikhez ugyanaz a meghatározásblokk tartozik) közéjük vesszőt kell tenni
A kijelölők legfontosabb típusai általános kijelölő: * az összes HTML elemre vonatkozik egyszerű kijelölő: elemnév csak a megadott nevű elemre vonatkozik (a weblapon az összesre) osztálykijelölő: elemnév.osztálynév az adott osztályba tartozó adott elemre vonatkozik egy HTML elemet osztályba sorolni a class paraméterrel lehet egy weblapon több elem is lehet ugyanabban az osztályban ha nincs elemnév, akkor az összes adott osztályú elemre vonatkozik azonosító kijelölő: elemnév#azonosítónév az adott elemek közül az adott azonosítójúra vonatkozik egy HTML elemnek azonosítót adni az id paraméterrel lehet egy weblapon több elemnek nem lehet ugyanaz az azonosítója ha nincs elemnév, az összes olyan azonosítójú elemre vonatkozik gyermekkijelölő: szülőelem > gyermekelem
Az értékek fajtái 1. Szám Csak a 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 számjegyeket és (tizedesvesszőként) a pontot tartalmazhatja Ha egy tizedes tört egész része 0, akkor elhagyható A + vagy előjel és a szám közé nem kell szóköz Százalék A számot szóköz nélkül követő % jel a szám századrészét jelenti
Az értékek fajtái 2. Mennyiségek: a mérőszám és a mértékegység közé nem kell szóköz ha a mérőszám 0, nem kell kiírni a mértékegységet Hossz-mértékegységek Abszolút (független) hossz-mértékegységek: a megjelenítő eszköztől függ, más hosszmértékegységtől független in (", inch, hüvelyk, coll): 1in = 2.54cm cm (centiméter): 1cm = 0.394in mm (milliméter): 1mm = 0.1cm = 0.0394in pt (pont): 1pt = 0.352mm, 1in = 72pt pc (pica): 1pc = 12pt = 4,23mm
Az értékek fajtái 3. Relatív hossz-mértékegységek: a megjelenítő eszköztől független, más hossz-mértékegységtől függ em: Az adott méretű karaktertípusban a nagy M betű magasságához (mint 100%-hoz) viszonyított érték. ex: Az adott méretű karaktertípusban a kis x betű magasságához (mint 100%-hoz) viszonyított érték. A legtöbb böngésző úgy számolja,hogy 1ex = 0.5em. px (pixel): A képernyőn megjelenő ki négyzet (a képpont vagy pixel) nagysága. Bár a CSS a 96px = 1in összefüggéssel határozza meg a px mértékegységet, a legtöbb böngésző a képernyőn lévő képpontok egy oldalának a hosszát tekinti 1px-nek
Az értékek fajtái 4. Színek #RRGGBB: az egyes alapszínek (vörös, zöld, kék) mértékét megadó, egyenként kétjegyű (00 és FF közötti) hexadecimális (tizenhatos számrendszerbeli) szám #RGB: a hat hexadecimális számjegyből álló jelölés rövidebb formában, ahol mindegyik számjegyet duplán kell érteni Ezzel a módszerrel nem minden szín adható meg. rgb(r,g,b): mindegyik alapszín mértékét megadó szám 0 és 255 közötti egész szám lehet
Az értékek fajtái 5. Színek (folytatás) rgb(rrr.rr%, bbb.bb%, ggg.gg%): mindegyik alapszín mértékét megadó, legfeljebb két tizedesjegy pontosságú, %-ban kifejezett, 0.00% és 100.00% közötti érték név: aqua (akvamarinkék), black (fekete), blue (kék), fuchsia (mályvaszín), gray (szürke), green (zöld), lime (világoszöld), maroon (gesztenyebarna), navy (mélykék), olive (olajzöld), orange (narancssárga), purple (lila), red (vörös), silver (ezüstszürke), teal (pávakék), white (fehér), yellow (sárga) stb. nem minden böngésző értelmezi mindet ugyanúgy transparent: átlátszó
Az értékek fajtái 6. fájlok elérési útvonala: url("elérési útvonal/fájl-azonosító") Kulcsszavak minden tulajdonságnál mások a kulcsszavak még az ugyanolyan alakú kulcsszavak (pl.: normal, none) más tulajdonságnál mást jelentenek az inherit (öröklés) kulcsszót minden tulajdonságnál használhatjuk, és a jelentése is ugyanaz: a tulajdonság a szülőelemtől veszi át az értékét
Öröklődés egy weblapon szülőelem az a HTML elem, amely tartalmaz egy másik HTML elemet gyermekelem az a HTML elem, amelyet tartalmaz egy másik HTML elem öröklődés egy gyermekelemnek alapértelmezésben (ha nem adjuk meg külön) ugyanazok a tulajdonságai, mint a szülőelemnek
Háttértulajdonságok 1. background-color: háttérszín background-image: háttérkép background-attachment: a háttérkép csatolási módja (viselkedése) scroll: a dokumentummal együtt gördül (alapérték) fixed: a dokumentum gördülésekor a háttérkép a helyén marad
Háttértulajdonságok 2. background-position: a háttérkép helye először a vízszintes helyzet adható meg: % vagy px értékkel, left (balra), center (középen) vagy right (jobbra) utána a függőleges helyzet adható meg: % vagy px értékkel, top (fent), center (középen) vagy bottom (lent) negatív értékek is megadhatók az alapérték mindkét irányban: center (50%)
Háttértulajdonságok 3. background-repeat: háttérkép ismétlődése repeat: mindkét irányban, mozaikszerűen (alapérték) repeat-x: csak vízszintesen repeat-y: csak függőlegesen no-repeat: nincs ismétlődés
Szövegtulajdonságok 1. color: szövegszín direction: a szöveg kiírási iránya ltr: balról jobbra (alapérték) rtl: jobbról balra font-family: karaktertípus font-style: karakterstílus normal: normál italic: dőlt
Szövegtulajdonságok 2. font-size: karakterméret adott méret xx-small, x-small, small, medium, large, x-large, xx-large: előre beállított értékek smaller: a szülőobjektum karakterméreténél kisebb larger: a szülőobjektum karakterméreténél nagyobb
Szövegtulajdonságok 3. font-weight: a karakter kövérsége (vonalának vastagsága) normal: normál bold: vastag bolder: az előzőnél vastagabb lighter: az előzőnél vékonyabb 100, 200, 300, 400, 500, 600, 700, 800, 900: egyre kövérebb karakterek
Szövegtulajdonságok 4. letter-spacing: a karakterek közötti vízszintes távolság (betűköz) normal: normál adott méret a negatív szám sűrített karaktereket eredményez text-decoration: szövegdíszítés none: nincs underline: aláhúzott overline: felülhúzott line-through: áthúzott blink: villogó
Szövegtulajdonságok 5. text-indent: a szövegblokk első sorának behúzása adott méret a blokk szélességének %-a text-transform: a szöveg átalakítása none: nincs capitalize: szavak nagybetűvel kezdődnek uppercase: nagybetűs lowercase: kisbetűs
Szövegtulajdonságok 6. white-space: térközkezelés normal: hagyományos, normál pre: megőrzi a szóközöket, sortöréseket, tabulátorokat nowrap: nincs sortörés, csak a következő <br> HTML elemnél word-spacing: a szavak közötti szóköz normal: normális adott méret
Szövegtulajdonságok 7. line-height: a sorok közötti távolság (sorköz) normal: normál (a böngésző beállítása határozza meg) adott méret az aktuális karakterméret valahány %-a text-align: a bekezdés igazítása left: balra right: jobbra center: középre justify: sorkizárt
Listatulajdonságok 1. list-style-type: a listajel stílusa none: nincs listajel rendezetlen lista (felsorolás) esetén: disc (kitöltött kör, alapértelmezett), circle (üres kör), square (kitöltött négyzet) rendezett (számozott) lista esetén: decimal (arab számok, alapértelmezett), decimal-leading-zero (arab számok bevezető nullával), upper-alpha (nagybetűk), lower-alpha (kisbetűk), upper-roman (nagybetűs római számok), lower-roman (kisbetűs római számok), lower-greek (görög kisbetűk), hebrew (héber számok), armenian (örmény számok), georgian (grúz számok) stb.
Listatulajdonságok 2. list-style-position: a listajel helye inside: benn a szövegben, a szöveggel együtt behúzva outside: a szövegen kívül list-style-image: egy kép megadása listajelként a list-style-type tulajdonságot is meg kell adni, bár a kép fog megjelenni a beállított alakzat helyett megadási módok: a képfájl elérési útvonala none: nincs
Dobozmodell 1. külső margó (margin) szegély, keret (border) térköz, belső margó (padding) tartalom (content)
Dobozmodell 2. A tartalom tulajdonságai: width: a tartalom szélessége height: a tartalom magassága A térköz (belső margó, a tartalom és a szegély távolságának) tulajdonságai: padding: a négy térköz együttes mérete padding-bottom: az alsó térköz mérete padding-top: a felső térköz mérete padding-left: a bal térköz mérete padding-right: a jobb térköz mérete
Dobozmodell 3. A szegély (keret) vastagsága: border-width: az összes szegély vastagsága border-bottom-width: az alsó szegély vastagsága border-top-width: a felső szegély vastagsága border-left-width: a bal szegély vastagsága border-right-width: a jobb szegély vastagsága ezek lehetséges értékei: konkrét érték, thin (vékony), medium (közepes), thick (vastag)
Dobozmodell 4. A szegély (keret) színe: border-color: az összes szegély színe border-bottom-color: az alsó szegély színe border-top-color: a felső szegély színe border-left-color: a bal szegély színe border-right-color: a jobb szegély színe ezek lehetséges értékei: konkrét érték
Dobozmodell 5. A szegély (keret) stílusa: border-style: az összes szegély stílusa border-bottom-style: az alsó szegély stílusa border-top-style: a felső szegély stílusa border-left-style: a bal szegély stílusa border-right-style: a jobb szegély stílusa ezek lehetséges értékei: none (nincs szegély), double (kettős), hidden (rejtett), groove (bemélyített), dotted (pontozott), ridge (kidomborodó), dashed (szaggatott), inset (süllyesztett, befelé árnyékolt), outset (kiemelkedő, kifelé árnyékolt), solid (folytonos, alapértelmezett)
Dobozmodell 6. A külső margó tulajdonságai: margin: az összes margó mérete margin-bottom: az alsó margó mérete margin-top: a felső margó mérete margin-left: a bal margó mérete margin-right: a jobb margó mérete
A relatív (más elemhez viszonyított) elrendezés display: az adott elemnek más elemhez viszonyított relatív elrendezésének megadása, a leggyakoribb értékek: block: az elem új bekezdésben jelenik meg list-item: az elem új sorban jelenik meg, előtte egy listacímkével inline: az elem az előzővel egy bekezdésben jelenik meg none: az elem nem jelenik meg
A pozicionálás (az abszolút elrendezés) módja position: annak megadása, hogy mihez viszonyítjuk egy elem helyzetét, a leggyakoribb értékek: static (statikus): az elem ott jelenik meg, ahol éppen tartunk a weblapon relative (relatív): a statikus helyzetéhez képest eltolva absolute (abszolút): a weblap bal felső sarkához viszonyított helyzet fixed (rögzített): az elem helyzete a képernyő adott helyéhez igazodik görgetésnél az elem a képernyőn mindig ugyanott marad
A pozíciók értéke annak megadása, hogy az elemnek melyik részét igazítjuk a lehetséges tulajdonságok: left: az elem bal széle top: az elem teteje bottom: az elem alja right: az elem jobb széle
Körbefolyatás annak megadása, hogy egy elem hogyan illeszkedjen egy másik elemhez a float tulajdonság leggyakoribb értékei: left: az elem a másik elem mellett balra lesz (a másik elem jobbról folyja körbe az elsőt) right: az elem a másik elem mellett jobbra lesz (a másik elem balról folyja körbe az elsőt) none: az elem mellett nem lesz másik elem (nem illeszkedik egy másik elembe)
Körbefolyatás tiltása a clear tulajdonság lehetséges értékei: left: a bal oldal tiltása (a másik elem jobbról nem folyhatja körbe az elsőt) right: a jobb oldal tiltása (a másik elem balról nem folyhatja körbe az elsőt) both: mindkét oldal tiltása (a másik elem egyik oldalról sem folyhatja körül az elsőt) none: nincs tiltás (egy másik elem mindkét oldalról körbefolyhatja az elsőt) a körbefolyatás szabályozására vagy a float, vagy a clear tulajdonságot használjuk, együttesen nem célszerű őket használni
Rétegek kezelése cél: a dobozként kezelt elemek egymásra helyezése úgy, hogy fedjék egymást a z-index tulajdonság kezelése: érték: egész szám (alapértelmezés: 0) ha egy doboz z-indexe nagyobb, mint a másiké, akkor az feljebb van (eltakarja a másikat) azonos z-indexű dobozok közül az takarja el a másikat, amelyik később van megjelenítve (a HTML kód szövegében hátrébb van)
Megjelenítés a láthatóság (vagyis az, hogy az elem elfoglalja azt a helyet, amelyet rendes körülmények között elfoglalna, de közben látható vagy láthatatlan legyen-e) a visibility tulajdonsággal szabályozható, amelynek leggyakoribb értékei: visible: az elem látható hidden: az elem nem látható, rejtett (de a helye a weblapon megmarad) collapse: táblázatelemek (sorok vagy oszlopok) elrejtése, becsukása
Látszólagos (virtuális) elemválasztók Nem egy konkrét elemet jelölnek ki Jelölés: a (valódi) elem vagy osztály neve után, kettőspontot követően, szóköz nélkül a látszólagos elem vagy osztály neve következik Látszólagos elem (álelem): az adott elem egy részére hivatkozik Látszólagos osztály (álosztály): az adott elem állapotától teszik függővé a formázást
Látszólagos elemek (álelemek) :after: a böngésző által létrehozott tartalmat fűzi az elem tartalmának a végéhez :before: a böngésző által létrehozott tartalmat szúrja be az elem tartalma elé :first-letter: az elem első karaktere formázható vele (pl.: iniciálé készítése) :first-line: az elem első sora formázható vele
Látszólagos osztályok (álosztályok) :link: még nem látogatott hivatkozás :visited: már látogatott hivatkozás :hover: ha az egérkurzor az elem fölött áll (de még nem kattintottunk) :active: ha az elem aktív (rajta van az egérkurzor és le van nyomva az egérgomb, de még nincs felengedve) :focus: ha az elem fókuszban van (pl. egy szövegbeviteli mezőben van a szövegkurzor) :first-child: minden olyan elem, amelyik egy másik elem közvetlen (első szintű) gyermekeleme :lang: minden olyan elem, amelyik a megadott emberi nyelvű