Tuba Honlap Tipp

Honlapkészítés tippek, trükkök tanácsok...

Reklám

Linkblog

CSS rejtelmei

2007.07.26. 14:54 tuby smith

Igéretemhez híven.

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">&nbsp;Szülő &lt;div&gt;, többnyire üresen szerepel.
<div style="border: 2px solid red; width: 45%; float: left;">&nbsp;Balra lebegtetett &lt;div&gt;<br />
</div>
<div style="border: 2px solid green; width: 45%; float: right;">&nbsp;Jobbra lebegtetett &lt;div&gt;<br />
</div>
<div style="border: 2px solid blue; clear: both;">Méretezésért felelős &lt;div&gt;, 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

Szólj hozzá!

Címkék: css webfejlesztés honlap fejlesztés alapismeret

A bejegyzés trackback címe:

http://tuba-honlap.blog.hu/api/trackback/id/tr6125832

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben.

Nincsenek hozzászólások.