Pontosabban építeni nem is nagyon kell, mert úgy fél éve már felépítettünk egyet. Tehát le kell előbb porolni a HTML-kódot, aztán összeállítani életünk első stíluslapját és összekapcsolni a kettőt. Ám előbb akad még itt egy kis bökkenő!
Kedves szülő!
Szomorúan állapítom meg, hogy gyermeke órán nem figyel, és nem vesz részt a közösségi munkában.
Dátum, aláírás, pecsét.
Az történt, hogy előző leckébe becsúszott egy apró hiba, mondjuk úgy, félreértésre okot adó malőr, ám hiába vártuk, hogy a CSS-szakkörök Országos Egyesülete tiltakozó felvonulást szervezzen a szerkesztőség elé, még csak egy kanyi levél sem jött ezzel kapcsolatban. Nahát! Akkor talán tegyük rendbe a dolgot egyszer s mindenkorra!
ISMÉTLÉS: MARGÓ, ELTARTÁS, KERET
Az előző rész végén megismerkedtünk a dobozmodell három nagyon fontos alkotóelemével, a margóval (margin), a kerettel (border) és az eltartással (padding). A dobozunk téglalap alakú, alkotóelemei négy oldalról veszik körül, ennek megfelelően a tulajdonságaikat – a margó és az eltartás méretét, illetve a keret vastagságát, színét és kinézetét – oldalanként külön-külön is meg tudjuk határozni. Például a margó esetében: a margin-top a felső, a margin-bottom az alsó, a margin-left a bal, míg a margin-right a jobb margót jelöli. Ha tehát úgy szeretnénk a margót beállítani, hogy felül 20, alul 0, balra 10, jobbra pedig 50 képpont legyen, akkor azt a következőképpen tehetjük meg a CSS fájlban:
Még egyszer: margó, keret, eltartás, valamint az egyes oldalak jelölései a dobozmodell szerint
margin-top: 20px;
margin-bottom: 0px;
margin-left: 10px;
maring-right: 50px;
Az is kiderült, hogy van ezeknek a tulajdonságoknak egy összefoglaló, úgynevezett rövid alakja, amely lehetővé teszi, hogy egy stílusdefinícióban határozzuk meg a margó és az eltartás méretét, valamint a keret összes paraméterét. A legfontosabb információ ezzel kapcsolatban – ami egyébként helyesen szerepelt az előző leckében is –, hogy az egyes oldalakra vonatkozó értéket felülről indulva, az óramutató járásával megegyező irányban haladva kell megadnunk, tehát felső (top), jobb (right), alsó (bottom), bal (left).
margin: top right bottom left;
Azonban a példa, amely a fenti beállításokat szerette volna a rövid alakban szemléltetni, sajnos teljesen félresikerült. Helyesen így nézett volna ki:
margin: 20px 50px 0px 10px;
Elhangzott az is, hogy a rövidített alak lehet még rövidebb, ha azonos értékeket szeretnénk beállítani bizonyos oldalakon. Ha csak egy értéket adunk meg, akkor a beállítás mind a négy oldalra vonatkozik; ha kettőt, akkor az első érték a felső és alsó, a második a bal és jobb margóra vonatkozik; ha pedig hármat – és ez erről nem volt szó korábban –, akkor az első a felsőre, a második a bal és jobb, a harmadik pedig az alsó margóra lesz érvényes. Az eltartás esetében a padding tulajdonság pontosan ugyanígy működik.
Ha egy jelölőben adjuk meg a dobozmodell különböző oldalaira vonatkozó beállításokat, mindig felső, jobb, alsó, bal a sorrend
A keretnél viszont már teljesen más a helyzet, lévén a keretnek nemcsak vastagsága (width), hanem még színe (color) és kinézete (style) is van. Ha kombináljuk ezeket a négy oldallal (top, right, bottom, left), pontosan 12 különböző keretmegadási lehetőséget kapunk: border-top-width, border-top-style, border-top-color, border-right-width és így tovább. Hogy ne őrüljön meg minden ember, aki weboldalt akar csinálni, ebben az esetben is rendelkezésünkre állnak rövidebb alakok, mégpedig oldalanként (border-top, border-right, border-bottom és border-left), valamint tulajdonságonként (border-width, border-style, border-color) csoportosítva. Utóbbiak ugyanúgy működnek, mint a margó és az eltartás rövid alakjai, míg az oldalankénti rövidített alakok mindhárom tulajdonságot tartalmazzák méret, stílus és szín sorrendben. Például a
border-bottom: 1px dotted red;
azt jelenti, hogy az alsó keret legyen 1 képpont vastag, pöttyös és piros színű. A legrövidebb alak, a border, ami pont úgy működik, mint az oldalankénti rövidített alakok, de mind a négy keret tulajdonságát egyszerre állítja be.
PORTÖRLÉS: LOREM.HTML
Ugye rémlik még, hogy bő fél éve egyszer már eljutottunk odáig, hogy megterveztük a csodálatos Lorem Ipsum MMIX konferencia weboldalát? Káprázatos vázlataink születtek először papíron, aztán pedig fellengzősen akár látványtervnek is nevezhető kép grafikus formában. Ennek annyira örültünk, hogy legott lefektettük az oldal XHTML alapjait, aztán az egészet félretettük, hogy megismerkedjünk a stíluslapok varázslatos világával.
Lévén elég régen esett szó az XHTML-ről, szaladjunk végig az azóta leporolt, némileg egyszerűsített kódon. A szabályoknak megfelelően oldalunk a dokumentumtípus definíciójával kezdődik: az XHTML 1.0 szabvány szigorú (Strict) változatának megfelelő weboldalt tervezünk alkotni. Az oldal fejlécében (‹head›...‹/head›) beállítjuk a karakterkódolást, megadjuk az oldal címét, és hozzákapcsoljuk az oldalhoz a külső stíluslapot. Vegyük észre, hogy a stíluslap nem az oldal forrását tartalmazó lorem.html állomány mellett, hanem egy külön css mappában foglal majd helyet. Ennek túl nagy jelentősége nincs – azon kívül, hogy sajátítsuk el a rendszeretetet –, ugyanakkor látható, hogy semmi ördöngösség sincs egy alkönyvtárban levő stíluslap linkelésében, egyszerűen csak a css fájl elé kell írnunk a könyvtár nevét, természetesen egy perjellel elválasztva.
Weboldalunk a dokumentumtípus definícióval kezdődik, amit közvetlenül a ‹head› fontos beállításai követnek
Az oldal tartalmának leírása a ‹body› és a ‹/body› által határolt részben található. Eltérés a fél évvel korábbi változathoz képest, hogy a ‹body›-t a fooldal azonosítóval láttuk el. Az utóbbi időben egyre népszerűbb és sokak által javasolt módszer lényege, hogy weboldalunk különböző oldalaiban más-más azonosítót kap a ‹body› tag, így a stíluslapon nagyon egyszerűen tudunk hivatkozni az adott oldalon belüli HTML elemekre, amivel megspórolhatunk egy csomó felesleges osztályba sorolást és/vagy újabb azonosítók kiadását. Tekintve, hogy mi most épp az első oldalunkat építjük, ennek megint nincs akkora jelentősége, de máris megjegyezhetjük, mint jó szokást.
A ‹body› tagben található az oldal tényleges tartalma: fejléc, középső rész és az egyszerű lábléc
Oldalunk három fő részre tagolódik – fejléc, középső rész, lábléc – az egészet pedig egy oldal azonosítójú ‹div› foglalja keretbe. A fejlécben két címsor (‹h1›, ‹h2›) található, amelyek a konferencia „logóját”, valamint a helyszínt és az időpontot tárják a kedves idelátogató elé. Noha eredetileg grafikus logót terveztünk, az egyszerűség kedvéért most maradunk a szövegeknél, de hogy ne legyen teljesen egyhangú, a konferencia címét azért egy kicsit megbolondítottuk. Egy későbbi leckében részletesen tárgyaljuk majd, hogyan helyettesíthető a HTML-kódban szereplő címsor szöveges tartalma a logó valódi ábrájával.
A középső részt további két részre osztottuk a bal_panel és a jobb_panel azonosítójú ‹div›-ekkel. Előbbiben kap helyet a menü, amelyet egy felsorolással oldunk meg, lévén a menü valójában a menüpontok felsorolása, és nekünk nagyon fontos, hogy olyan HTML elemekkel írjuk le az oldal egyes részeit, amelyek jelentésükkel is utalnak az adott oldalrész funkciójára. Jobb oldalra a köszöntőt és a konferenciával kapcsolatos híreket terveztük. Nos, a köszöntő az egyszerűsítés áldozatává vált, így maradtak a hírek, ahonnan meg a dátumot dobtuk ki „több is veszett Mohácsnál” alapon. Hírblokkjaink tehát egy hir osztályú ‹div›-ből, azon belül pedig egy harmadik szintű címsorból (‹h3›) és egy bekezdésből állnak majd. Természetesen ezek csak rövid előzetesek, a teljes anyaghoz a címre vagy a Tovább feliratra kattintva lehet eljutni – a képzeletünkben, hiszen a hivatkozások egyelőre nem vezetnek sehova, viszont máris megtanuljuk, hogy a stíluslap kidolgozásánál mennyi pluszmunkát jelentenek!
Végül a lap alján található a lábléc, szintén külön ‹div›-ben, amelyben egyelőre kizárólag a konferenciát rendező alapítványt tüntetjük fel.
Ez a kiindulási pontunk: így néz ki az oldal a Firefox saját stíluslapjával megjelenítve
Töltsük be az oldalt kedvenc böngészőnkbe, és nézzük meg, hogy mutat stíluslap nélkül. Azaz, mit is beszélünk? Hiszen az előző hónapok során már az unalomig ismételgettük, hogy ilyenkor a böngésző a saját stíluslapja alapján jeleníti meg az oldalunkat, ezért látjuk nagyobb méretűnek a ‹h1› címsort a ‹h2›-nél, ezért kék színűek és aláhúzottak a hivatkozások, és ezért van pötty minden menüpontunk előtt (merthogy felsorolás). Ezen a ponton álljunk meg, és olvassuk el A CSS Reset gombja című keretes írást, majd térjünk ide vissza.
JÖHET A LOREM.CSS!
Ha kipróbáltuk az Eric Meyer-féle Reset stíluslapot, akkor ne felejtsük el visszaírni a lorem.html fej részében a lorem.css állományunkra, amit hozzunk is létre kedvenc kódszerkesztő alkalmazásunkkal. Ha eddig még nem tettük volna, készítsünk egy css nevű mappát is a HTML állomány mellé, és abba mentsük el a stíluslapot.
A csillag a minden
A stíluslap elején olyan szabályokat, stílusokat érdemes definiálnunk, amelyek az egész oldalra érvényesek lesznek. Kezdjük rögtön a „szegény ember Reset stílusával”, ami az alábbi módon néz ki:
* {
margin: 0;
padding: 0;
border: 0;
}
A csillag a CSS nyelvén azt jelenti, hogy minden, ez a szabály tehát valamennyi HTML tagre vonatkozik. Bármi is szerepel a weboldalunkban, egyik építőelemnek sem lesz margója, eltartása és kerete. Ha azt akarjuk, hogy legyen, nekünk kell azt definiálni. Vegyük észre, hogy a nullák után nincs megadva mértékegység – ezt a CSS nem követeli meg tőlünk, elvégre teljesen lényegtelen, hogy nulla mi a margó vagy az eltartás értéke.
A csillag használata, bár első ránézésre nagyon hatékony megoldásnak tűnik, sajnos nem mindig jó ötlet. Nem véletlen, hogy Meyer nem csillagot rak a Reset stíluslapjának első beállításához, hanem felsorolja a tagek jelentős részét, ugyanis van néhány olyan (például az űrlapok építőelemei), amelynek nem „tesz jót”, ha levesszük az eltartást vagy akár a keretét. Mivel mi most ilyen tageket egészen biztosan nem használunk, nyugodtan betehetjük a csillagos szabályt a stíluslap elejére.
Body: szövegbeállítások
Ahogy a HTML oldalban is a ‹body› tartalmazza a lényeget, a tényleges tartalmat, a stíluslapon is kitüntetett szerepe van, hiszen rá vonatkozó szabályok – kevés kivételtől eltekintve – az oldalban szereplő valamennyi tagre érvényesek lesznek. (Korábban beszéltünk a CSS-szabályok öröklődéséről; tekintve, hogy az oldalunk valamennyi építőeleme a ‹body› tagen belül foglal helyet, automatikusan örökli annak összes örökölhető, öröklődő beállítását.)
A ‹body› tagre vonatkozó stílusdefiníciók egy részét – például a betűtípusra vonatkozó beállításokat – a benne levő oldalelemek is öröklik
A szabály első négy sora az oldalban használni kívánt általános betűkészletet, vastagságot, méretet és sortávolságot definiálja. A font-family megadásánál ezúttal is több lehetséges betűkészletet sorolunk fel, amelyek közül a böngésző az első olyat fogja használni, amit megtalál az adott rendszerben. Windows-környezetben ez minden bizonnyal a Verdana lesz, míg a Macintoshokon a Geneva. Ha pedig egyik sem nyert, akkor jöhet a sans-serif, azaz a böngészőben alapértelmezettként beállított talpatlan betűtípus. A szöveg normál vastagságára vonatkozó font-weight beállítás csak a teljesség kedvéért szerepel a stíluslapban. A betűméretet (font-size) 12 képpontra állítottuk be – ez remélhetőleg nem jelent senkinek újdonságot. A sortávolságról (line-height) is volt szó már korábban: ez a bekezdésen belüli sorok közti távolságot állítja, mégpedig a beállított betűméret arányában. Nagyon fontos tulajdonság, alapvetően hozzájárul a szöveg olvashatóságához, hiánya pedig az első pillanatban elárulja a weboldal készítőjéről, hogy nincs a helyzete magaslatán. Az 1.5-ös érték ebben az esetben a korábban beállított 12 képpontos betűméret másfélszeresét, azaz 18 képpontot jelent.
Body: háttérbeállítás
Jöjjön valami új! A bodyra vonatkozó szabály utolsó sorában beállítjuk az oldal hátterét, amelyhez egyszerre használunk háttérszínt és háttérgrafikát. A background, hasonlóan a keretnél látottakkal, már egy rövidített forma, ugyanis a hátteret nem kevesebb, mint öt különböző tulajdonság írhatja le a CSS-ben. A háttér vagy egyszínű (background-color), és/vagy használhatunk egy képet háttérként (background-image). A felhasznált fotó lehet rögzített vagy gördülhet az oldallal együtt, ha lejjebb lapozunk (background-attachment), meghatározhatjuk az pozícióját (background-position), valamint azt is, hogy ismétlődjön-e, és ha igen, melyik irányban (background-repeat). A background ezeket a tulajdonságokat mind egyesíti magában, mégpedig a következő sorrendben: háttérszín, kép, ismétlés, rögzítés, pozíció. Ebből az ötből négyre látunk példát az általunk használt szabályban; a kétállapotú rögzítésnek, amely lehet scroll vagy fixed értékű, az az alapértelmezett állapota, hogy nincs definiálva a backgroundban. A böngésző a scroll értékkel dolgozik, tehát a háttér nem rögzített, hanem együtt gördül az oldallal, ami nekünk tökéletesen megfelel.
A háttér színét a legelterjedtebb, egy korábbi leckében már megtanult módon, a kettős kereszt után az RGB értékek tizenhatos számrendszerbeli alakjával adtuk meg (#106399). A kép már izgalmasabb: az url kulcsszó után zárójelben közvetlenül kell megadnunk a használni kívánt grafika helyét. Fontos, hogy a zárójelen belül nincs semmilyen idézőjel, tehát ha egy mód van rá, ne próbáljunk weboldalt készíteni olyan mappákban, amelyeknek szóköz van a nevében, mert nem fogunk tudni rájuk hivatkozni a stíluslapon. Mivel a háttérkép helyét (ami egyébként egy images nevű mappában van) a stíluslaphoz képest kell megadnunk, a két pont azt jelenti, hogy lépjünk vissza a css nevű mappából a lorem.html mellé, majd onnan belépünk az imagesbe, és ott lesz a bg_body.png kép. Ez egyébként egy sötétkékből világoskékbe tartó színátmenet, amiben van annyi apró trükk, hogy a sötétkék ugyanaz a kék lesz, mint a fejlécünk háttere, a világos pedig az, amit épp most állítottunk be háttérszínnek.
Mivel ez a kép 10×540 képpontból áll, ahhoz, hogy beterítsük vele az oldalt, vízszintesen ismételgetnünk kell – ezt csinálja a repeat-x állítás. Végül a top left azt mondja meg, hogy a kép a ‹body› bal felső csücskéből induljon. Mint látható, kissé összetett a háttérkép beállítását végző CSS-jelölőnk, ha valakinek úgy kényelmesebb vagy könnyebben meg tudja jegyezni, nyugodtan használhatja a különálló beállítási lehetőségeket. Mi is ezt tesszük például, amikor kizárólag háttérszínt szeretnénk beállítani.
Így lesz egy 10 pixel széles csíkból és a CSS-kódból egész oldalas háttérkép
A:link, a:visited
A CSS-szabvány egy hivatkozás két alapállapotát különbözteti meg, így lehetővé teszi, hogy eltérő stíluselemekkel jelenítsük meg az oldalban azokat a hivatkozásokat, amelyekre a felhasználó már rákattintott, és azokat, amelyekre még nem. Az utóbbihoz a link, az előbbihez a visited jelölést használja. Ezek úgynevezett pszeudo-osztályok, amelyeket kettősponttal kapcsolunk a stíluslapon a jelölőhöz. E kettőn kívül számos másikat is használhatunk az oldaluk izgalmasabbá tételéhez. Egy harmadik, amelyet gyakran szoktak emlegetni a hivatkozásokkal kapcsolatban, a hover, amely azt az állapotot jelöli, amikor az egérrel rámutatunk egy hivatkozásra. Érdemes azonban tudni, hogy hover állapota nemcsak hivatkozásoknak, hanem majdnem minden HTML elemnek van, ám mivel az Internet Explorer 6 kizárólag az ‹a› tagen tudta ezt értelmezni, így terjedt el a köztudatban – tévesen.
A hivatkozások globális beállítása az oldalra nézve – nem biztos, hogy minden oldalelem esetében megfelelő
Jelen esetben nem cifráztuk túl a dolgot, a hivatkozás mindkét állapotát ugyanarra a színre állítottuk be, és kikapcsoltuk alattuk az automatikus aláhúzást.
AZ OLDAL ID-JŰ ‹DIV›
Még mielőtt elmennénk karácsonyi szünetre, gyorsan nézzük meg a teljes weboldal befoglaló, oldal azonosítójú ‹div› beállításait. Látható, hogy a fő tartalmi részünket 950 képpont szélesre állítjuk, fehér hátteret adunk neki, illetve középre igazítjuk a
margin: 0 auto;
szabállyal. A lecke elejéről emlékezhetünk rá, hogy mivel csak két érték van megadva, az első a felső-alsó, a második a bal-jobb margókat állítja. Az auto érték megadásával azt mondjuk a CSS-nek, hogy igyekezzen úgy beállítani az oldalsó margókat, hogy a 950 képpont széles ‹div›-ünk két oldalán, hogy azok egyforma méretűek legyenek, valójában a ‹div› középre igazítását jelenti.
A ‹div›, ami az oldalt körbeveszi: középre igazítás, oldalszélesség és fehér háttérszín
Mentsük el a CSS-t, és nézzük meg, mi változott a kiinduló állapothoz képest. Fogjuk rá, hogy alakul, távolról már kezd hasonlítani egy weboldalra, de azért még bőven lesz dolgunk vele, ha megjöttünk a bejglivadászatból! (Például semmi esetre se nézzük meg Internet Explorerben, ha nem akarunk sírni.)
Idáig jutottunk: oldalt már van háttérszínünk, középen a tartalom még nem mutat túl sokat
KIEGÉSZTŐ: A CSS RESET GOMBJA
A böngésző saját stíluslapjában levő alapbeállítások a kezdő weboldalkészítők számára nagy segítséget jelentenek, számunkra viszont, akik már kapisgáljuk a CSS-témát, elég kellemetlen, mert így a stíluslapunk elkészítése jó részt másból sem áll majd, mint a program beállításainak felülbírálásából. Igen ám, de ahány böngésző, annyiféle alapbeállítás – még ha bizonyos tekintetben azért hasonlítanak is egymásra –, szóval úgy tűnik, akad itt egy megoldásra váró probléma.
A weboldalkészítő közösség Nagy Koponyái össze is dugták a fejüket, mert meggyőződésük volt, hogy sokkal egyszerűbb volna valóban nulláról építeni oldalaikhoz a stíluslapokat. Végül megalkották az úgynevezett Reset stíluslapot. Ha a Google-ban rákeresünk a „css reset style” kifejezésre, számos találatot fogunk kapni; az alábbiakban a CSS egyik legnagyobb szakértőjének számító Eric Meyer által kialakított stílusbeállításokat láthatjuk, amelyet a www.meyerweb.com című blogjában tett közzé még tavaly májusban (közvetlen link a cikkre).
Nem túl bonyolult, csak annak látszik: Eric Meyer Reset stíluslapja hatékonyan hatástalanítja a böngészők saját beállításait
Bátran másoljuk ki az oldalból, helyezzük el kedvenc szövegszerkesztőnkbe, és mentsük el reset.css-ként, majd írjuk át a lorem.html oldal fejlécét, hogy a lorem.css stíluslap helyett a reset.css-t töltse be. Nézzük meg a bekövetkező változásokat! Látható, hogy a böngésző saját stíluslapjának jó részét sikerült semlegesíteni. Nagyjából minden szöveg azonos módon és méretben jelenik meg, köszönhetően a stíluslap szörnyű első szabályának, amelyben Meyer tulajdonképpen felsorolja majdnem az összes HTML taget és ugyanazt a stílusbeállítást húzza rájuk. Lenullázza a margókat, az eltartásokat és a keretet, valamint az outline-t, amin most ugorjunk át. A betűkre vonatkozó beállítások eredménye, hogy minden szöveges tartalom úgy jelenik majd meg, ahogy az a böngészőnk beállításaiban szerepel. Ki is próbálhatjuk: nyissuk meg a Firefox Eszközök menüjéből a Beállítások panelt, lépjünk a Tartalom fülre, és állítsuk át az alapértelmezett betűtípust és méretet. Az OK gomb megnyomása után a weboldalunk valamennyi szövege olyanra változott, amit beállítottunk.
Így néz ki az oldal a Reset után: a legfeltűnőbb, hogy eltűntek a különböző szövegrészek közötti különbségek
Mostani weboldalunk felépítésénél nem fogjuk használni a reset stíluslapot, pont azért, hogy bizonyos esetekben küzdeni kelljen a böngésző stílusbeállításaival, és így új dolgokat tanulhassunk. Ettől még a Reset egy nagyon okos dolog, már csak azért is, mert rákényszeríti az embert arra, hogy ne vegyen készpénznek olyan dolgokat, amiket korábban megszokott, például azt, hogy a címsorok félkövér betűkkel jelennek meg. A stílusok létrehozásánál alaposnak kell lennünk, mindenre kiterjedően kell definiálnunk a szabályokat.
