Ugrás a fő tartalomra

Alapok: CSS

A maratoni HTML alapozó után a CSS-t próbáljuk átvenni, ami szintén nem két perc lesz. Ígérem, most több képet hozok, és kevesebb lesz a szöveg, viszont így nehezebb lesz megérteni. A későbbiekben eleget használjuk majd ezeket, így ez csak egy rövid összefoglaló a legfontosabbakról.

HTML formázások

A szöveg nem mindig homogén massza, gyakran van szükség egyes elemei formázására. Ezt megtehetjük HTML-lel is, hogy az ismerős alapoknál maradjunk. Elterjedt formázások a szavak félkövérré alakítása és a kurziválás (dőlt betűk), ami rögtön össze is zavarja a kezdő szerkesztőt: félkövér kiemeléshez mind a b (bold), mind a strong használatos, ahogy a kurzív szöveget is elő lehet varázsolni az i (italic) és az em (emphasized) tagekkel. Melyiket használjuk? Nem mindegy! Oké, ránézésre mindegy. A b és i csak a megjelenését alakítja át a szövegnek, míg a másik két elemet a képernyőolvasó programok is felismerik. Emlékeztek az előző részben a webes akadálymentesítésre? Na, ez ugyanaz: a képernyőolvasók másképp olvassák az így jelölt szöveget. Tehát ha valami hangsúlyos vagy kiemelt, így jelöljük. (A Blogger nem ezt ajánlja fel, ha a szövegszerkesztőn dolgozunk. Viszont a HTML-nézetben bármikor átírható.)

CSS HTML helyett

Vannak más elemek is, amik speciális jelentésű szöveget jelölnek, de ha nekünk nincs erre szükségünk, csak a megjelenést akarjuk változtatni, a HTML tagek használata nem javallott. Ilyenkor fordulunk a CSS-hez (Cascading Style Sheets, lépcsőzetes vagy rangsorolt stíluslapok, majd meglátjuk, mire utal a név), ami egészen egyszerűen erre lett kitalálva. A webes ajánlások szerint a HTML kizárólag a tartalmat hivatott szabályozni, minden megjelenítési kérdésben a CSS szava dönt. Stílusdeklarációt több helyre is beszúrhatunk egy oldalon. Az első és leggyakoribb módszer (na, pont a Bloggeren nem) a külső hivatkozás, angolul external style sheet. A CSS kódokat egyszerűen bepakoljuk egy szövegfájlba, .css végződéssel látjuk el, feltesszük a tárhelyre (ha van), és egy speciális linkkel hivatkozunk rá. A head szekcióban elhelyezünk egy ilyen sort:

<link rel="stylesheet" type="text/css" href="cssfile.css" />
A CSS fájl teljes elérési útvonalát kell megadni. Ez Blogger esetében, ami nem ad ilyesfajta tárhelyet, nehézkes. Sokkal elterjedtebb módszer az internal style sheet, vagyis belső stíluslap. Ezzel sok oldalon találkozni, általában a "vihető kódok" mellé adnak stílusdeklarációt is. Az ilyen CSS két style tag között helyezkedik el. Bárhol előfordulhat az oldalon, van, aki az adott elem fölé helyezi (a body-ba), hogy azonnal látható legyen, melyikre vonatkozik, de a hagyományos módszer a head szekcióba tenni. A Bloggeren a skin elem például ilyen, bár ennél kicsit bonyolultabb. Az utolsó módszer kisebb, konkretizált változtatásokhoz használatos, ez az inline style, amikor közvetlenül egy elem attribútumaként adjuk meg a stílust. Oldalszerkesztés esetén a többi lehetőségről (kliens oldali CSS, böngésző saját meghatározásai) nem kell tudnunk, csak annyit, hogy a különféle böngészőkben az egyes elemek megjelenése nem egységes. Ezért minden változtatást ellenőrizzünk a lehető legtöbb böngészővel (és itt nem csak a kompatibilitási problémákról beszélek). Itt jön be a képbe, hogy miért lépcsőzetesek a stíluslapok. A kódban lejjebb található stíluslapok öröklik a feljebb lévők meghatározásait, de az ütközőket felülírják. Mit jelent ez a gyakorlatban? Nézzünk egy példát!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" style="text/css" href="mycssfile.css">

<style>
 p {color: red;}
</style>
</head>
<body>
 <p style="color: pink;">Milyen színű leszek?</p>
</body>
</html>
Az elem meghatározásában a style attribútum, ahogy mondtam, az inline stílus (nevezzük sorközinek, de angolul szokás használni). Ha a külső stíluslapon a p elem színe meghatározás szerint kék volt, milyen lesz végül a szöveg? Kis agytorna. Igen: rózsaszín. Ez van hozzá a legközelebb, a sok ugyanolyan meghatározás közül. Ha a többi stíluslapon mondjuk a betűtípus és a betűméret lett volna meghatározva, akkor azok öröklődtek volna, nem cserélődnek. Ha semmit nem határozunk meg, a böngésző alapbeállításai lesznek érvényben. A CSS nyelve szintén egyszerű, akár a HTML-é. Ha soron belül határozzuk meg a stílust, egy style attribútum, idézőjelek között (az idézőjelek lényegtelenek, lehet aposztróf is, csak ne keverjük a kettőt) az értékekkel. mit változtass: mire; a leírása, és több meghatározás is összefűzhető. A szóközök megint opcionálisak, az utolsó pontosvessző szintén. A stíluslapok esetében ez a forma marad, csak előtte jelezni kell, melyik elemre (vagy elemekre) vonatkozik a stílus, ezért a meghatározások kapcsos zárójelek közé kerülnek. A pontosvessző ez esetben kötelező. A sorközök és behúzások nem, de szokás használni, hogy átlátható maradjon a kód. A fenti példánál maradva, a color a szöveg színét határozza meg. Értelem szerint nem szöveges elemeknél nem csinál semmit.

Stílusok hatásköre

Ez egy akkora anyagrész, hogy nem megyek bele a részletekbe, mindenki olvassa el a W3Shcools oldalán. Csak az első pár sorral foglalkozunk (lesz az egészről egy külön cikk, ha nem értitek, nem gond). Nem lehet minden esetben soron belüli stílusokkal dolgozni, mert egyszerűen túl sokat kéne gépelni. A programozás, így a webprogramozási is, a DRY, azaz Don't Repeat Yourself (ne ismételd önmagad) elvén épül fel, tehát ne írjunk több kódot, mint amennyi feltétlenül szükséges. Ha azt akarjuk, hogy az oldalon minden szöveg lila legyen, nem fogjuk a p elemeket egyenként lilára színezni. Ugyanígy, ha egy hatalmas HTML-fáljban kéne keresgélni, hogy melyik elemeket akarjuk formázni, az időnk nagyja a semmire menne el. Ilyenkor jönnek jól a CSS szelektorok (nincs jobb szó rá magyarul sem, választók, talán), amik segítségével meghatározott elemeket tudunk kijelölni. A belső stíluslapoknál alkalmazzuk ezeket, ahol a példában a p áll. A nekünk kellő legfontosabbak:
.osztály
#id
elem
Az utolsó egy elem HTML-tagje alapján választ. Minden paragrafust, minden képet, minden linket. A HTML alapozó cikkben volt szó, hogy az egyes elemeket el lehet látni osztály, illetve azonosító jelölésekkel. Ilyenkor a CSS-ben ezekre a jelekre hivatkozunk. Egy konkrét azonosítójú elemre, vagy egy osztály minden elemére. (Amik nem feltétlenül ugyanolyan típusúak! Bár ez okozhat gondokat, ezért nem szokás így használni.) A többivel egyelőre nem foglalkozunk, kapnak egy külön tutorial cikket.

Következzenek a stílusok, a fontosabbak röviden:

Hátterek

Bármely elemnek, de magának a body-nak is lehet háttere. Több lehetőségünk van: háttérszín, háttérkép. Utóbbinál a böngésző automatikusan mozaikként próbálja elhelyezni a képet, ha az kisebb, mint az elem, ezért beállíthatjuk, hogyan ismételje (csak függőlegesen, csak vízszintesen, sehogy). Háttérkép választása esetében érdemes egy háttérszínt is meghatározni, ha a kép valami okból nem jelenne meg, legyen egy "tartalék" stílus, ne rontsa el teljesen a dizájnt. (Angolul fallback, ami tényleg tartalékot jelent.)

See the Pen KNJzEZ by Szuzs (@szuzs) on CodePen.

Dobozmodell

A weben minden elem belefoglalható egy dobozba. A tartalom alapvetően egy téglalap, amit több réteg vesz körül: a kitöltés (padding), a keret (border), végül a margó (margin). Mindegyik dimenziója változtatható, együtt és oldalanként külön is (top, right, bottom, left), a tartalom mérete pedig a magasság és szélesség (height, illetve width) értékekkel állítható be. Szemléltetésül álljon itt egy rövid kép a W3 Konzorcium oldaláról.
dobozmodell
CSS dobozmodell

Szövegek formázása

Ha már a képek megjelenését tudjuk állítani (lásd dobozmodell), a másik legfontosabb kérdés a szövegek megjelenése. Hátteret be tudunk állítani, legyen az egyszerű szín vagy kép, a következő lépés a betűk. A betűtípusokat (más néven fontokat) a font tulajdonság állításával változtathatjuk, ami egy, úgynevezett, shorthand metódus, vagyis rövidítés. Több más tulajdonságot tartalmaz, font-family állítja be a betűtípust magát, font-size a méretét, a font-style azt, hogy kurzív-e, vagy sem, végül a font-weight a vastagságát. Egyik sem kötelező, de ezek kombinálásával sokkal összetettebb stílusokat lehet létrehozni, mint a beépített b, vagy i HTML-tagekkel. A betűtípusok mellett a szöveg egésze is érdekes, ami szintén könnyen állítható: color felelős a szöveg színért, text-align a szöveg pozicionálásáért (balra, jobbra, középre zárt vagy sorkizárt), line-height a sortávolságért, végül a letter-spacing a betűtávolságért. Van még pár más tulajdonság (behúzások mértéke, szöveg kis- vagy nagykapitálissá tétele, árnyékok beállítása, szóelválasztás és whitespace karakterek kezelése stb.), egyről hadd legyen még szó: ez a text-decoration, amit nem sima szövegnél szoktunk alkalmazni, hanem a linkeknél. Ennek segítségével állíthatjuk be, hogy egy szöveg alá legyen-e húzva, vagy legyen fölötte egy csík, esetleg áthúzottként jelenjen meg, netán egyik sem. A linkek alapértelmezetten aláhúzást kapnak, ha rávisszük az egeret: ezt megakadályozandó ezt a tulajdonságot állítsuk none értékre.

Linkek

Emlegetett szamarak. Nem csak szövegként kezelhetőek, nem véletlenül linkek: speciális állapotaik vannak. Az első a "sima" link, amire még nem kattintottunk. Utána a hover állapot (nem szokás lefordítani), amikor ráhúzzuk a kurzort. Az aktív állapot a kattintás pillanata, végül a meglátogatott link a visited állapotban van. Mindegyik külön stílust kaphat, ha beállítjuk. Mindezt az úgynevezett pseudo-class, vagyis "álosztály" jelölőkkel (szelektorokkal) tehetjük meg. Ezek önmagukban nem léteznek, az elem neve után egy kettőspont mögött állnak.

See the Pen zoeqQy by Szuzs (@szuzs) on CodePen.

Az egyszerű a szelektor egyenlő az a:link szelektorral, de az egyértelműség kedvéért ki szoktuk írni teljes egészében. A sorrend, bármennyire is fura, mindig ez, de természetesen nem kell minden állapotot külön deklarálnunk, maradhatunk a böngésző alapbeállításainál.

Listák

Utolsó előtti szekció a listák formázása, méghozzá a felsorolásjel átállítása. Ehhez a list-style-type tulajdonságnak kell más értéket adnunk. Millió és egy beállítása van (kör, üres kör, négyzet, különféle számozások, de el is lehet tüntetni), de ha ez nem elég, akkor még képet is beállíthatunk a list-style-image tulajdonság segítségével. Hogy a felsorolásjel hol jelenjen meg, a tartalom dobozán belül, vagy azon kívül, a list-style-position határozza meg. Ez csak akkor fontos, ha van felsorolásjel, különben nem érdekes.

Pozicionálás

Akármennyire is átszaladtunk a CSS-en, a pozicionálás témakörét nehéz két mondatban összefoglalni. Régen erre a problémára táblázatokat használtak: az elemeink alapvetően téglalapok, amik jól illeszkednek a táblázatok celláiba, és a táblázat sorainak, oszlopainak mérete változtatható, így az elemek egymáshoz viszonyított helyzete, mérete egyfajta "rácsrendszer" keretében került meghatározásra. Ez ma idejétmúlt, helyette millió és egy pozicionálásért felelős tulajdonság segít mindent a neki legmegfelelőbb helyre rendezni. (Vagy nem. A függőleges középre rendezés még mindig nagy kihívás.) Tekintsük át ezeket! Lényeges az elemek megjelenési formája. Vannak alapértelmezetten blokként megjelenő elemeink (paragrafus, div, címek), illetve sorban fekvők (span, linkek, képek). Ezeket az értékeket felül lehet írni, illetve újabbakkal is bővíthetjük a palettát, rendkívül változatos megjelenési lehetőségeket teremtve. Nem lesz szó mindenről, a két alap beállításon kívül az inline-block kerül még elő gyakran, illetve az elem eltüntetése.

See the Pen Vmgjae by Szuzs (@szuzs) on CodePen.

Mint látható, az inline-block érték egy blokkot rak a sorba. Maga a blokk sorközi elemként viselkedik, ellenben belül a blokk érték szerint rendeződnek az elemek. A none érték pedig nem jeleníti meg az elemet. Ha csak egy elemről van szó, amit egy oldalra akarunk pozicionálni, és a többit szeretnénk körbefuttatni, akkor a float tulajdonság kell nekünk. Nézzünk erre is példát!

See the Pen ObdXmx by Szuzs (@szuzs) on CodePen.

A kettőt kombinálva horizontális menüket tudunk létrehozni, ami lényegében egy linklista. Figyeljük meg, hogy a link kattintható felülete az egész "dobozra" kiterjed!

See the Pen Vmgjzj by Szuzs (@szuzs) on CodePen.

A pozicionálás utolsó része a position tulajdonság használata. Ennek értékei azt határozzák meg, a blokk hol helyezkedjen el a tartalomhoz (content flow) képest. Az alap a static, ez nem jelent semmi különlegeset, az elemek egymás alá pakolódnak, esetleg egymás mellé, ha a float azt mondja. A következő a fixed, ez fixálja az elem pozícióját az általunk meghatározott képernyőrészen. Görgetésnél is ott marad, az ilyen elemek a képernyő egy adott pontján vannak. A másik kettő érték nehezebb: absolute és relative. Utóbbi a normál (azaz a static által amúgy meghatározott) pozíciójához képest csúsztatja el az elemet. Az absolute egy abszolút pozíciót határoz meg a legközelebbi nem statikus és nem fix elemhez képest. (Nem feltétlenül relative, lehet egy másik absolute pozicionálású elem). Ha ilyen nincs, a body-hoz csatolja magát. Az eltéréseket a top, right, bottom, left tulajdonságok értékeivel állíthatjuk be. A static és fixed elemekre nem mutatok példát: előbbi a normál paragrafusok, utóbbi az oldalsó menüsáv, ha legörgettek. A másik kettő ilyen:

See the Pen jVdrGv by Szuzs (@szuzs) on CodePen.

Összefoglalás

Ebben a cikkben a CSS alapjait vettük át. Nem tértem ki mindenre, ennél kétszer hosszabb is lehetne a szöveg, akkor sem értünk volna a végére. Alapozásnak ennyi elég, a további trükköket, formázási lehetőségeket a tutorial cikkekben keressétek!

Megjegyzések