Ez a cikk egy cikksorozat második része. Használok benne fogalmakat, amiket az első részben tisztáztunk, így ha valamit nagyon nem tudsz, hogy mi, ott várhatóan megleled. Ha a cikksorozat összes eddigi cikkére vagy kíváncsi, akkor nézd meg “A honlap mögött” címkéhez tartozó cikkeket.
Nagyon röviden megfogalmazva, a CSS (stíluslap) arra van, hogy megadjuk a HTML kódnak, hogy hogyan is nézzen ki. Nézzük meg ezt egy kicsit részletesebben.
Ami a HTML-ből kell a CSS-hez
A CSS kód megírásához elengedhetetlenül szükséges a HTML kód, amihez írjuk a CSS-t. A HTML-ben van a tartalom, és a CSS adja a kinézetet. A CSS-hez számunkra nem fontos, hogy pontosan milyen tartalom is lesz az oldalon, nekünk a HTML szerkezete kell. A szerkezet alatt alapvetően az oldal hierarchikus felépítését értjük, és a HTML tag-ekhez tartozó esetleges id és class attribútumok értékeit. Legtöbbször ezeket használjuk a CSS-ben.
Hogyan néz ki a CSS kód
A CSS kód alapvetően kettő részből áll:
- először megadjuk, hogy milyen HTML elemre is akarjuk, hogy vonatkozzanak a szabályok, amiket írunk
- majd megadjuk magukat a CSS definíciókat.
Nézzünk rá pár sor példát
#container h1 { margin: 10px 5px; }
#container ul.fine-list { float: left; clear: both: width: 250px; margin-right: 10px; }
#container ul.fine-list li.cool-row { float: left; clear: both; width: 250px; padding: 10px 5px; }
.just-an-example {
display: block;
color: #000080;
text-decoration: none;
font-weight: bold;
}
Formai megkötések
Tehát, először van a HTML „elérése”, amire vonatkozik a CSS szabály. Egy-egy ilyen leírás lehet, hogy csak egyetlen egy HTML elemre vonatkozik, de az is lehet, hogy akár több százra. Utána kapcsos zárójelek között vannak megadva maguk a CSS leírások. Ezekből is lehet csupán egyetlen egy, de akár egy tucat is.
Egy-egy tulajdonságnál először megadjuk, hogy milyen tulajdonságról akarunk nyilatkozni, majd egy kettőspont után megadjuk annak a tulajdonságnak az értékét.
Ahogy a példában is láthatod, ízlés kérdése, hogy ki hogyan írja a CSS-t. A szóközök, tabok, enterek nem számítanak, tehát bizonyos keretek között tetszőlegesen lehet rendezni a kódot, ahogy neked tetszik.
Amit mindenképp néznünk kell a HTML kódból
Ha egy adott elemre akarunk egyedi stílust, akkor először is meg kell néznünk, hogy arra az adott tag-re hogyan tudunk hivatkozni. Leggyakrabban a tag nevével, és/vagy úgynevezett osztállyal (class) vagy id-val szoktunk hivatkozást írni.
Ha csak a tag nevét használjuk, nincs megkülönböztető jelzés, class esetén pont („.”) van az osztály neve előtt, id esetén kettőskereszt van előtte („#”). Most nem fogok mélyebben belemenni a részletekbe, sok cikket meg lehetne vele tölteni.
Tehát ahhoz, hogy hatékony legyél a stíluslapokkal, először a HTML-t kell legalább annyira ismerned, hogy átlásd a struktúráját, és megértsd belőle, ami a CSS szempontjából fontos.
A dobozmodell
A HTML elemeket lehet úgy nézni, hogy mind egy-egy dobozban van, és sok-sok különböző méretű dobozt pakolunk egymásba, egymás mellé, sokféleképp. Amikor megadunk valamilyen stílusdefiníciót, akkor azt mondjuk meg, hogy az általunk megadott doboz(ok) hogy nézzen(ek) ki.
Most, hogy már ennyivel többet tudsz a HTML-ről, elkezdhetünk tényleg a CSS-ről beszélni.
Mit csinál a CSS
A CSS kinézetet ad a „dobozoknak”. Meg tudod adni a segítségével egy-egy doboz magasságát, szélességét, színét, többféle eltartását, a keretének a tulajdonságait, a benne lévő szöveg tulajdonságait, és még sok más dolgot.
Ez nagyon sok lehetőséget rejt magában. Konkrétan van egy oldal, amit azért készítettek, hogy megmutassa, mekkora ereje van a CSS-nek: CSS Zen Garden – itt a HTML kód azonos mindegyik oldal mögött, csak a CSS az, ami más. Nézegesd meg, hogy mennyire eltérő kinézetet lehet csinálni csupán CSS használatával, úgy, hogy a tartalom nem változik. Ez a CSS szépsége és ereje.
Oké, szép-szép, de hogy tud bárki ilyet csinálni?
Arra a szintre eljutni, amit a CSS Zen Garden CSS-készítői művelnek, nem fél perc eljutni. Idő, tanulás, gyakorlás, befektetett energia kell hozzá. Ha még nincs tapasztalatod a CSS-el, szerencsére van sok leírás a neten.
- …ha tudsz angolul, akkor a HTML-es cikknél már ismertetett w3schools CSS részét ajánlom. Ennél jobb ingyenes bevezető anyagot nehezen találsz a CSS-hez.
- …ha magyar nyelvű leírást keresel, akkor az alapok lényegét megismerheted ebből a cikkből. (FONTOS: Ez a cikk lassan 15 éves. Nem arra van, hogy ez alapján dolgozz a HTML-el, hanem hogy az alapokról képet kapj. A friss információkért a w3schools oldalát ajánlom, magyarul még nem találtam azt megközelítő leírást.)
Összegzés
- A HTML nagyon erősen összefügg a CSS-el, konkrétan mielőtt akár egy sor CSS-t is írnánk, érdemes elmélyedni a HTML szerkezetében.
- A CSS segítségével a HTML elemek kinézetét lehet megváltoztatni, hihetetlenül sok lehetőségünk van.
- Ha komolyan meg szeretnénk ismerkedni a honlapunk mögötti dolgokkal, akkor érdemes megtanulni angolul.
