CSS = Cascade Style Sheet = Stíluslapok
Ahogy említettem a formázást előnyös stíluslapok segítségével megadni. Mit jelent ez? A honlap állományában a tényleges tartalom jelenik meg, a formázás lehet az állomány elején, vagy akár külön állományban is.
<style> </style> tagok között adjuk meg az elemek tulajdonságait.
Tipikus, és előnyös a stílust külön állományban tárolni. Ezt a html <head> részében lévő
<link href="styles.css" rel="stylesheet" type="text/css"> linkeléssel tehetjük meg.
Hogyan lehet formázni?
minek { melyik_tulajdonságát : milyenre; melyik_tulajdonságát : milyenre ; ... }
szelektor {tulajdonság:érték}
például szeretnénk az oldal szövegét kékre színezni:
body {color:blue} látható, hogy egy tulajdonság megadásakor nem kell ;
És mi van akkor, ha több dolgot akarunk ugyan olyanra formázni, például legyen minden címsor piros, félkövér 12pontos betűméretű:
h1,h2,h3,h4,h5,h6
{
color: red;
font-weight:bold;
font-size:12pt
}
amiket formázni akarunk ,-vel választjuk el.
Mi történik ha kihagyjuk a vesszőt?
Az érdekes dolog, sok kellemetlen percet tud okozni. Amikor két (több) szelektor van egymás után, akkor szülő-gyermek kapcsolatot keres. Lehet olyan, hogy egy oldalon az összes cím balra igazított legyen, kivéve a táblázatban lévők.
Nem csak alap html tag-eket lehet formázni, a tageknek meg lehet adni azonosítót és osztályt. Ezek a id="azonosító" és class="osztály" megadással érhetőek el. A különbség: azonosítóból egy lapon csak egy lehet, míg osztállyal csoportosíthatjuk az azonos tulajdonságú elemeket. Például lehet piros címünk és piros szövegrészünk is:
CSS:
.piros {color:red}
HTML:
<h1 class="piros">de csép szín</h1>
<p>Esti mese <span class="piros">Piroska</span> és a farkas.</p>
az osztályokat . (pont) kezdettel különbözteti meg a CSS. Azonosító megadása hasonló, de ott a pont helyett # (kettőskereszt, hashmark) jellet kell használni.
A következő hasznos dolog a div-ek. Ezek négyzetes területek.
Gyakran használt tulajdonság az igazítás, egész div-et lehet lebegtetni:
Szülő <div>, többnyire üresen szerepel.
Balra lebegtetett <div>
Jobbra lebegtetett <div>
Méretezésért felelős <div>, többnyire üresen szerepel.
A fenti péda így néz ki:
<div style="border: 2px solid grey;" id="pelda"> Szülő <div>, többnyire üresen szerepel.
<div style="border: 2px solid red; width: 45%; float: left;"> Balra lebegtetett <div><br />
</div>
<div style="border: 2px solid green; width: 45%; float: right;"> Jobbra lebegtetett <div><br />
</div>
<div style="border: 2px solid blue; clear: both;">Méretezésért felelős <div>, többnyire üresen szerepel.<br />
</div>
</div>
A méretezésért felelős nélkül a külső keret mérete függőlegesen szinte mindig szétesik.
Itt arra kell vigyázni, hogy szegéllyel együtt az egymás mellé kívánt div-ek szélessége ne legyen túl nagy, mert szétesik az elképzelt elrendezés, pl a width : 50% -ra a piros és a zöld keretes nem egymás mellé kerül. Próbáljátok ki.
Továbbá van lehetőségünk absolute megadni a div helyét, ekkor a pozíció az ablak bal felső sarkához igazodik.
Pozicionálásra van még pár lehetőség, de őszintén megvallva én csak ezeket használtam (ezekkel mindent meg sikerült oldani :)
Böngésző kompatibilitás: Egy nagyon fontos probléma, hogy a honlapunk ne nézzen ki jelentős eltéréseket mutatva más böngészőben. Erre láttam egy szánalmas megoldást, az egész oldal néhány képből állt össze. Keresőoptimalizálás nesze neked :)
Komolyra fordítva: egyes böngészőkben széteshetnek oldalak.
Az Internet Explorer másként kezeli a margin és padding számolását a látható részhez viszonyítva. A box model problémájáról van egy remek cikk a tutorial.hu-n.
Megjegyzéseim a cikkhez: Én böngészőfüggő formázást szoktam használni, mivel előfordulhat még 5.x-es IE. Azonban a div a div-ben nem mindig lehet előnyön (például CMS rendszer). A szabvány apró réseit kihasználó hack-ek pedig idővel inkompatibilissé válhatnak újabb böngészőkben szerintem.
Én php kódból kérdezem le (amikor lehet) a böngésző típusát, és a szerint töltöm be a css fájlt.
A CSS teljes leírása, oktató anyaga:
W3C online CSS tutorial (angol)
Ha kérés, kérdés van, írjatok
