CSS-segédlet 1. CSS és HTML 1.1. Külső stíluslap HTML-hez csatolása A hivatkozást a HTML-dokumentum szakaszában kell elhelyezni. Ha a HTML- és a CSS-fájl nem ugyanazon könyvtárban van, akkor a HTML-ben a HREF után elérési utat is meg kell adni! Az elérési út lehetőleg relatív legyen! A style.css helyett természetesen más nevet is kaphat a stíluslap, sőt, a .css kiterjesztés helyett is használhatunk bármit. Egy stíluslap több HTML-hez is csatolható, és egy HTML-hez több stíluslap is tartozhat. Ha egy szelektor több a HTML-hez csatolt stíluslapban is szerepel, akkor a beállítások mindegyike érvényes lesz rá. Ha ugyanazon szelektor ugyanazon tulajdonsága több stíluslapból is értéket kap, akkor a legutolsó beállítás lesz az érvényes. style1.css
A HTML-dokumentum háttérszíne szürke lesz, mert bár a style1.css sárgára állította be, a style3.css ezt felülbírálva szürkét határozott meg (a HTML-ben a style3.css-t importájuk később). A H1 elemek 16 pt-os talpnélküli betűből, de nem félkövérből (lásd style3.css) lesznek szedve. A H2-es címsorok 14 pt-os talpnélküli félkövér és dőlt, kék színű betűből fognak megjelenni. Ha a HTML szakaszában további stílusdefiníciókat adunk meg, esetleg közvetlenül a HTML1
elemhez rendelünk ilyeneket, akkor azok felülbírál(hat)ják a külső stíluslap definícióit. Mindig a legutolsó tulajdonság-érték páros határozza meg a végleges formátumot.
1.2. Stílus megadása a HTML szakaszában Stílusokat közvetlenül a HTML-dokumentum szakaszában is definiálhatunk. Az így definiált stílusok hatóköre csak az adott HTML-fájl lesz, más HTML-dokumentumokban nem tudjuk az itt definiált stílusokat felhasználni. <STYLE TYPE="text/css"> BODY { margin: 10px 2em 0 25pt; padding: 0; background-image: url(hatter.jpg); } A:LINK { text-decoration: none; color: navy; }
1.3. Stílus hozzárendelése HTML-elemhez (inline hozzárendelés) Stílusok közvetlenül HTML-elemekhez is rendelhetők. Ez némileg ellentmond a CSS filozófiájának, amennyiben a CSS alkalmazásának egyik fő oka a tartalom és formátum szétválasztása.
A lopótök
A lopótök – más neveken butykos tök, nyakas tök, szívótök, sáritök vagy flaskatök – a kabakosok családjába tartozó kétszikü növény. Ez az egyetlen olyan tökfajta, amit Európában már Amerika felfedezése elött is termesztettek.
2. Elemek és stílusuk 2.1. Szelektor, tulajdonság, érték Akárhogyan is rendeljük HTLM-dokumentumainkhoz, vagy azok egy-egy eleméhez a stílusokat, a definíció mindig két részből áll: szelektorból és formázásból. A formázás egy tulajdonság és egy érték párosa. szelektor { tulajdonság: érték; tulajdonság: érték; … } 2
Egy szelektor többször is előfordulhat a stílusdefinícióban, ebben az esetben az összes felsorolt tulajdonság uniója lesz a végleges formázás alapja. Egy formázás pedig több szelektorhoz is hozzárendelhető. Ilyenkor a szelektorokat vesszővel elválasztva kell felsorolnunk. A formázásokat ; (pontosvessző) választja el egymástól. H1 { margin-top: 20px; } H1 { font-family: verdana, sans-serif; font-size: 16pt; font-weight: bold; color: black; } H1, H2, H3 { text-align: center; } Szelektorok lehetnek a HTML-ben használatos elemek (BODY – a teljes dokumentumra vonatkozó beállítások; H1, H2, H3 … – 1., 2., 3. stb. szintű címsorok; A – hiperlink a dokumentumban, stb.), illetve használahtó ún. osztályalapú és azonosítóalapú kiválasztás is.
2.2. Osztályok, azonosítók A HTML-ben a nem címsor színtű bekezdéseket rendszerint
…
tagek közé írjuk. Ha a CSS-ben a P elemhez rendelünk beállításokat, akkor az összes bekezdésünk azonos formátumot kap – hacsak inline módon az egyes bekezdéseknél nem módosítjuk azok stílusát. Ennek hamar éreznénk a korlátait, hiszen egy viszonylag egyszerű szövegben is szerepelhet többféle, a dokumentumhierarchiában különböző helyet elfoglaló bekezdés (főszöveg, megjegyzés, lábjegyzet, definíció, fontos kiemelés, stb.), amelyek formázását meg kell különböztetnünk. Erre valók az ún. osztályok. .normal, .megjegyzes, .definicio { text-align: justify; font-family: arial, tahoma, sans-serif; color: black; } .normal { font-size: 12pt; } .megjegyzes { margin: 1em 2em 1em 2em; font-style: italic; } .definicio { padding-left: 2em; border-left: 3px solid black; } 3
A CSS-ben az osztályok definíciójában az osztálynevek elé . (pont) karaktert kell írnunk. Az előző stílusdefiníciókra a HTML-dokumentumban így tudunk hivatkozni:
A Csatorna-alagút (Channel Tunnel) vagy Csalagút (Chunnel), egy 51,5 km hosszú vasúti alagút a La Manche csatorna alatt a Doveri szorosnál, amely az angliai Dover melletti Folkestone-t köti össze a franciaországi Calais közelében fekvö Coquelles városával.
Az alagutat a Eurotunnel cég üzemelteti. Az American Society of Civil Engineers kijelentette, hogy az alagút egyike a modern világ hét csodájának.
Figyeljük meg, hogy az egyes szövegrészek mind-mind
…
tagek közé kerülnek, de különböző formázást kapnak, mivel más-más osztályt rendelünk hozzájuk. A HTML-ben egy elemhez az elem neve után írott CLASS kulcsszóval rendelhetünk osztályt. Itt nem kell (nem szabad!) az osztály neve elé pontot írni! Az azonosítóalapú kiválasztás hasonlóan működik az osztályalapú kiválasztáshoz. Egy fontos különbség viszont az, hogy míg osztályokat bármelyik és bármennyi elemhez rendelhetünk, azonosítóalapú kiválasztással csak egyetlen elem jelölhető meg! #elso { margin-top: 12px; padding-top: 12px; border-top: 3px dotted gray; }
Ezt a formázást csak ehhez az elemhez lehetett hozzárendelni, másikhoz már nem lehet.
… A CSS-fájlban # (kettőskereszt) az azonosítók jele, míg a HTML-ben az elem neve után írott ID-vel hivatkozhatunk az azonosítóra.
2.3. Látszólagos osztályok Bizonyos elemekhez rendelhetünk ún. látszólagos osztályokat. Tipikus példa erre az A elem, amely segítségével hiperlinkek definiálhatók egy HTML-dokumentumban. Egy A elemhez többféle látszólagos osztály is tartozhat, ezek segítségével a hiperlink különböző megjelenését szabályozhatjuk. 4
A:link, A:visited { font-family: sans-serif; font-weight: bold; font-size: 10pt; text-decoration: none; color: black; } A:hover { color: blue; } A:active { color: red; } … Az Eszterházy Károly Föiskola honlapja … A CSS-ben a látszólagos osztályok megadásakor a szelektor neve után : (kettőspont) karakterrel kell jelölnünk a látszólagos osztály nevét. A fenti példában a link félkövér, 10 pt-os, fekete talpnélküli betűből fog megjelenni az oldalon, és a linkekre egyébként hagyományosan jellemző aláhúzás most nem fog látszódni. Ha az egérrel a link fölé állunk, a betűszín kékre fog változni. Ha az egér bal gombját nyomva tartjuk a linken, a nyomva tartás idejére a link szövege piros színűre vált. A CSS-ben általában lényegtelen az egyes szelektorok sorrendje. Hiperlinkek esetében azonban fontos, hogy mindig a következő sorrendben határozzuk meg a látszólagos osztályokat: :link, :visited, :hover, :active, különben nem a várt eredményt kapjuk! (Ha így könnyebb, jusson eszükbe ez a két szó: LoVe–HAte [szeret–utál]! A kiemelt betűk a látszólagos osztályok neveinek kezdőbetűivel egyeznek).
3. A háttér Bármely elem kaphat saját hátteret. Ez azt jelenti, hogy semmi akadálya, hogy ha a HTML-dokumentumunk pl. egy táblázatot tartalmaz, akkor külön definiáljuk a dokumentum hátterét (amelyet a BODY szelektorhoz kell megadnunk), külön hátteret állítsunk be a táblázat celláihoz, és a cellákon belül megjelenő egyes bekezdésekhez is. Ez utóbbi kettőt célszerű osztályalapú kiválasztással definiálni. (Nincs tehát akadálya az ilyen „sokhátterű” formázásnak, de értelme sincs túl sok…) BODY { background-color: white; } .tablazatCella { background-color: gray; } .szoveg { background-color: cyan; } 5
Cím
1. bekezdés
2. bekezdés
A fenti példában a HTML-dokumentumunk háttérszíne fehér lesz. A Cím is fehér háttéren jelenik meg. A dokumentum egy egyetlen cellából álló táblázatot tartalmaz még, amelyben a háttérszín szürke. Szürke háttéren jelenik meg az 1. bekezdés felirat is. Mivel azonban a szoveg osztály hátterét kékeszöldre (türkizre) állítottuk, a 2. bekezdés felirat ilyen színű háttérrel jelenik meg. 1. táblázat: Az elemek hátterére vonatkozó lehetséges beállítások: Tulajdonság Felvehető értékek background-attachment scroll | fixed
background-color
background-image
background-position
background-repeat
background
Hatás Meghatározza, hogy a háttérkép az oldal görgetésekor együtt gördül-e az elemmel, vagy helyben marad. Beállítja a háttérszínt. transparent | <szín neve>* | Pl.: black, #cc7f00, rgb(13,0,7) | A transparent érték átlátszóra álrgb(vörös, zöld, kék), ahol , , = 0..255 lítja a hátteret. (Internet Explorerben nem mindig működik.) Beállítja a megadott képet háttérurl(képfájl) képnek. Ha szükséges, meg kell adni a kép elérési útját is. Beállítja a háttérkép kezdő pozíciótop left | top center | top right | ját. center left | center center | center right | bottom left | bottom center | bottom right | x% y% | xpos ypos Beállítja, hogy a háttérkép ismétrepeat | repeat-x | repeat-y | lődjön-e, ha többször is elfér a no-repeat megadott elem háttereként. (Úgy, mint a Windows asztalon a tapéta.) A háttérre vonatkozó beállítások background-color rövid megadása, egy utasítás sebackground-image gítségével. Pl.: background white background-repeat url(hatterkep.png) no-repeat fixed background-attachment top left background-position
* Alapszínek a következők: aqua (kékeszöld), black (fekete), blue (kék), fuchsia (erős rózsaszín, magenta), gray (szürke), green (zöld), lime (világoszöld), maroon (sötétvörös), navy (sötétkék), olive (zöldesbarna), purple (olyan, mint a fuchsia, csak sötétebb), red (vörös), silver (világosszürke), teal (sötét türkiz), white (fehér) és yellow (sárga). 6
4. Mértékegységek Bárhol, ahol mértéket (nagyságot) kell megadnunk, meg kell adnunk egy mértékegységet is. Egyetlen kivétel a 0 (nulla). A nulla mérőszám után nem kell mértékegységet megadnunk. Kétféle mértékegység-csoport létezik a CSS-ben, az abszolút és a relatív mértékek csoportja.
4.1. Abszolút mértékegységek Ezek a mértékegységek (elvileg) azonos méretet garantálnak képernyőfelbontástól függetlenül, illetve nyomtatásban is. Gyakorlatilag nem mindig, mert a különböző operációs rendszerek nem mindig tudják pontosan a különböző megjelenítők felbontását, ezért becsült vagy alapértelmezett értékkel számolnak. Abszolút mértékegységek a következők: mm – milliméter, cm – centiméter in – inch (1 inch = 2,54 cm) pt – pica pont (1 pt = 1/72 inch ≈ 0,351 mm) pc – pica (12 pt = 1/6 inch ≈ 4,233 mm) Példák abszolút mértékegységgel megadott méretekre: height: 2mm; boder-width: 1.5pt; line-height: 1.2in;
4.2. Relatív mértékegységek Ezek a mértékegységek mindig az adott elem szülőeleméhez, illetve az adott megjelenítőeszköz jellemzőihez viszonyítva értelmezhetők. Relatív mértékegységek a következők: px – pixel (azért relatív, mert a különböző képernyőkön egy pixel fizikailag eltérő méretű lehet) em – a szülőelem betűméretével egyező méret. Pl. ha a BODY elemhez 16pt-s betűméretet határoztunk meg, és egy P elemhez rendelt osztályban a betűnagyságot 0.5em-ben állapítjuk meg, akkor ha ez a P bekezdés közvetlenül a BODY alá van rendelve (tehát nem mondjuk egy táblázaton belülre, amelyben más az alapértelmezett fokozat), akkor ennek a bekezdésnek a betűmérete 8pt lesz. ex – a szülőelem betűméretét alapul véve az ilyen méretű x (kis x) betű magasságával egyező méret. A böngészők többnyire az 1 ex = 0.5 em képlettel számolnak. (Amely egyébként tipográfiailag általában nem is igaz.) % – a szülőelem méretéhez vonatkoztatott %-os méret.
5. Bekezdésre (szövegre) vonatkozó beállítások Egy HTML-dokumentumban a szövegek megjelenését több szinten befolyásolhatjuk. A legkisebb egység a karakter, csakúgy, mint a szövegszerkesztő programokban. Egy szöveg akár minden egyes karakterére külön-külön beállíthajuk a betűtípust, -méretet, vastagságot, stb. A következő formázási szint a bekezdésekre vonatkozó beállításokat tartalmazza. Ebbe a kategóriában a sorköz, betűköz (bár ez tartozhatna a karakterfüggő csoportba is), sorzárás és hasonlók tartoznak. A következő szinten pedig egy szövegelem (pl. egy bekezdés, vagy egy címsor, vagy egy DIV elem) külső és belső margóit, szegélyét, körvonalát és hasonló tulajdonságait határozzuk meg. Ide tartoznak a korábban már bemutatott, háttérre vonatkozó beállítások is. A legkülső szintre vonatkozó beállítások előtt meg kell ismernünk még a CSS ún. dobozmodelljét is. Ezzel kapcsolatosan fontos megemlítenünk, hogy e téren a böngészők nem kompatibilisek. De térjünk vissza most a bekezdésekre vonatkozó beállításokhoz! 7
2. táblázat: Bekezdésekre vonatkozó beállítások (csak a fontosabbak): Tulajdonság Felvehető értékek Hatás color szín neve | hexa-érték | Beállítja a szöveg színét. (Tulajdonképpen kerülhetett volna a karaktertulajdonságok közé is.) rgb(vörös, zöld, kék) Beállítja a sorközt. line-height normal | <méret> | % Beállítja a betűközt. letter-spacing normal | <méret> Beállítja a bekezdés sorainak igazítását rendre a következőkre: text-align left | right | center | balra zárt, jobbra zárt, középre zárt, sorkizárt. justify „Dekorációt” rendel az adott szövegre, amelyek rendre a kötext-decoration none | underline | vetkezők lehetnek: nincs, aláhúzás, vonal a szöveg fölé, áthúoverline | zott, villogás. line-through | blink A bekezdés első sorának behúzása. text-indent méret | % Az adott elem szövegét változtatja meg rendre a következőktext-transform none | capitalize | re: nincs változtatás, nagy kezdőbetűk, nagybetűs, kisbetűs. uppercase | lowercase Beállítja a szavak közötti távolságot (a szóközt). Balra zárt, word-spacing normal | <méret> jobbra zárt és középre zárt igazításnál pontos értéket kapunk, a sorkizárás azonban elronthatja.
6. Betűre vonatkozó beállítások 3. táblázat: Betűre vonatkozó beállítások (csak a fontosabbak): Tulajdonság Felvehető értékek Hatás Beállítja az adott elem betűtípusát. Több értéket is beálbetütípus | általános típus* font-family líthatunk vesszővel elválasztva, ekkor az első, a kliensgépen megtalálható betűtípus lesz az elem betűtípusa. Pl.: font-family: arial, helvetica, sans-serif; Betűméret. xx-small és xx-large között különböző xx-small | x-small | small | font-size medium | large | x-large | fix méreteket jelöl. A smaller és a larger a szülőelem méretéhez képest eggyel kisebb, illetve eggyel nagyobb xx-large | smaller | larger | <méret> | % méretet jelöl. font-style normal | italic | oblique Betűváltozat. Az italic a kurzív, az oblique a döntött változatot jelenti, bár a legtöbb betűtípusnál nincs a számítógépkre külön kurzív és döntött változat telepítve. Így hatásuk többnyire ugyanaz a dőlt (ferde) betű. Kiskapitális betűt állít be. normal | small-caps font-variant font-weight normal | bold | bolder | lighter Betűvastagság. A konkrét értékek csak azoknál a betűtí| 100 | 200 | 300 | 400 | 500 | pusoknál működnek, amelyeknél léteznek a különböző vastagságok. 600 | 700 | 800 | 900 * Általános típusok a következők lehetnek: serif (talpas), sans-serif (talpnélküli), cursive (dőlt vagy kézírásos), fantasy, monospace (írógép).
7. A dobozmodell Minden CSS-elem formázásakor beállíthatjuk a következő tulajdonságokat (kívülről befelé haladva): külső margó, szegély, belső margó. A külső margó (margin)az adott elem szegélye (vagy annak helye), és a tar8
talmazó szülőelem közötti távolságot jelenti. A margókat mind a négy oldalon megadhatjuk külön-külön, vagy egy értékkel mind a négy oldalra vonatkozóan. A margó értéke lehet negatív szám is. A szegély (border) esetében mind a négy oldalon külön-külön beállítható három-három tulajdonság: a szegély vastagsága, stílusa és színe. (A lenti ábrában most mind a négy oldalon egyforma a szegély.) A belső margó (padding) a szegély (vagy annak helye) és a belső tartalom közötti távolság. Lehet negatív is.
4. táblázat: A margó, a belső margó és a szegély beállításai Tulajdonság Felvehető értékek Hatás Felső margó. auto | <mérték> | % margin-top Jobb margó. auto | <mérték> | % margin-right Alsó margó. auto | <mérték> | % margin-bottom Bal margó. auto | <mérték> | % margin-left A margók gyors megadásának módja. A négy értéket margin top right bottom left szóközzel választjuk el. A mértékegységek lehetnek különbözők. Pl. margin 10px 0 20pt 1.4em; Felső belső margó. auto | <mérték> | % padding-top Jobb oldali belső margó. auto | <mérték> | % padding-right Alsó belső margó. padding-bottom auto | <mérték> | % Bal oldali belső margó. auto | <mérték> | % padding-left A belső margók gyors megadásának módja. Paramétepadding top right bottom left rezése megegyezik a margin paraméterezésével. Az adott szegély vastagsága. border-width thin | medium | thick | <méret> Az adott szegély stílusa. Rendre a következők: nincs, border-style none | hidden | dotted | rejtett (a vastagsága számít, de nem látszik), pontozott, dashed | solid | double | groove | ridge | inset | outset szaggatott, folytonos, dupla, gravírozott, perem, benyomódó, kidomborodó. Az adott szegély színe. szín border-color A négy oldal szegélye külön-külön meghatározható. Pl.: border-top-color: black; border-bottom-style: ridge; stb. Egy értékadással mind a négy oldal egyszerre állítható be: border: 1px solid black;
8. Szélesség, magasság, pozíció CSS-sel meghatározható egy elem szélessége és magassága. Nagyon fontos azonban tudnunk azt, hogy ezeket a tulajdonságokat eltérő módon kezeli az Internet Explorer és a többi (Mozilla Firefox, Opera, Safari, Google Chrome) böngésző. Az Explorer szegélytől szegélyig számítja a szélességet és a magasságot (beleért9
ve a szegélyek vastagságait is), míg a többi böngésző a padding nélküli tényleges belső tartalmat veszi alapul. A pozíció az adott elem bal felső és jobb alsó sarkával határozható meg (left, top, right és bottom), de csak akkor, ha a position tulajdonságot is beállítjuk. 5. táblázat: Méret és pozíció Tulajdonság Felvehető értékek width auto | <méret> | % height auto | <méret> | % position static | relative | absolute | fixed left auto | <méret> | % top auto | <méret> | % right auto | <méret> | % bottom z-index vertical-align
overflow
auto | <szám> baseline | sub | super | top | text-top | middle | bottom | text-bottom | <érték> | % visible | hidden | scroll | auto
Hatás Az adott elem szélessége. Az adott elem magassága. Az elem pozícionálásának típusa. Az elem bal szélének távolsága a szülőelem bal szélétől. Az elem tetejének távolsága a szülőelem tetejétől. Az elem jobb szélének távolsága a szülőelem jobb szélétől. Az elem aljának távolsága a szülőelem aljától. Az adott elem takarást meghatározó értéke. Az elem tartalmának függőleges igazítása.
Az elem tartalmának túlcsordulása.
A position az adott elem elhelyezésének módját határozza meg. A static az alapértelmezett. Választásakor az elem ott fog megjelenni, ahol egyébként is meg kellene jelennie a HTML-forrás alapján. A relative érték szintén azt jelenti, hogy az elem ott jelenik meg, ahol egyébként is meg kellene jelennie, de ez módosítható a top, right, bottom és left értékekkel, akár negatív irányban is. Az absolute érték használatával nem a szülőelemtől mérjük a távolságot a top, right, bottom és left tulajdonságokkal, hanem a böngészőablak bal felső sarkától, mint (0;0) koordinátájú kezdőponttól. Ha a böngészőablak tartalmát görgetjük, az absolute opcióval pozícionált elemek is gördülni fognak. A fixed opcióval ugyanúgy pozícionálhatunk, mint az absolute választásával, de a fixed pozíciójú elemek akkor is a helyükön maradnak, ha a böngészőablakot görgetjük. Az oldal többi tartalma tehát gördíthető, a fixed opcióval pozícionált elemek viszont állandóan a helyükön maradnak. A z-index opcióval azt határozhatjuk meg, hogy az egymásra pozícionált elemek hogyan takarják egymást. Egy adott z-index tulajdonságú elem takarni fogja az összes olyan elemet, amelyeknek legalább egy része ugyanazon a területen van, ahol ez az adott elem, és a z-index tulajdonságaik kisebb értékűek, mint ennek az adott elemnek.
z-index:1 z-index:2 z-index:3
Az overflow tulajdonság az elem tartalmának túlcsordulását szabályozza. A visible opciót választva egy elem teljes tartalma (pl. szöveg esetén az összes karakter) akkor is látható lesz, ha az elem szélessége (width) és magassága (height) ezt egyébként nem tenné lehetővé. Ilyenkor a szöveg „kifolyik” a dobozából. A hidden opció választásával azt érhetjük el, hogy egy elem tartalmából csak annyi jelenjen meg, amennyit az elem szélessége és a magassága lehetővé tesz. A scroll opció mindkét gördítősávot megjeleníti az elem szélén és alján. Az auto opció csak azt, amelyikre szükség van. Az auto opcióval kikapcsolható az Internet Explorer inaktív függőleges gördítősávja is, ha a BODY elemhez rendeljük. A Firefox csak akkor jeleníti meg a függőeleges gördítősávot a lap szélén, ha arra tényleg szükség is van. 10
