CSS röviden
Tartalomjegyzék |
Mi a CSS?
CSS (Cascading Style Sheets), vagyis egymásba ágyazott stíluslapok. Segítségével egyszerűen befolyásolhatjuk HTML-oldalaink kinézetét, az egyes elemek elhelyezkedését. A HTML elsősorban a tartalommal foglalkozik, nem azzal, hogy a böngészőnek milyen módon kell azt megjelenítenie. A stíluslapokkal pontosan és egységesen írhatjuk le a megjelenítési előírásokat.
CSS (nagyon rövid) története
A HTML-dokumentumoknál alkalmazott első stíluslapszabványt, CSS1 névvel, 1996-ban fejlesztette ki a W3C. 1998 közepén jelent meg a második szabvány, a CSS2, amely jóval bővebb lődjénél. A CSS3 még kidolgozás alatt áll.
CSS beágyazása HTML-be
CSS beágyazása HTML-be többféleképpen történhet:
- Ágyazhatjuk magába a forrásfájlba, ekkor a stílusleírásokat a <head></head>, azon belül a <style></style> tagok között kell elhelyezni.
<head> <style type="text/css"><!-- h1 {font-size: 20px; color: #000000; } p {font-size: 12px; color: #CCFFCC; }--> </style> </head>
- Lehet külön fájlban tárolni a stílusleírásokat, így lehetővé tesszük, hogy több HTML állomány is érvényes legyen, és a szerkesztés is jóval egyszerűbbé válik, hiszen a változtatni kívánt stílustulajdonságot csak egy fájlban kell megkeresni és kijavítani.
<head> <link rel="stylesheet" href="style.css" type="text/css"></link> </head>
- Az egyes elemekhez külön is rendelhetünk stlíust:
<p style="font-size: 10px; color: #33CC33;">Példa</p>
- További lehetőségünk, hogy importáljunk egy másik stílus állományt. Ez a következőképp történhet:
<style type="text/css"> <!-- @import url(http://www.valami.hu/style.css); --> </style>
CSS külön állományban
A külön fájlban letárolt CSS stíluslapon belül is többféleképpen adhatjuk meg az egyes tulajdonságokat. A legegyszerűbb módszer talán a következő:
div.title { font-family: "Verdana"; font-size: 13px; font-weight: 400; background-color: #CCCCFF; text-align: justify; }
Ebben a példában magát a div elemet formáztuk. A betűtípus Verdana lesz (bármi is az alapértelmezett), a betűméret 13 pixel, vastagsága normál (bold-nak a 900 felel meg). Beállítottuk még a háttérszínt, és a szöveg igazítását. Ezek a beállítások érvényesek lesznek minden olyan HTML-forrásfájlban, amiben erre a stílusfájlra hivatkozunk. Ilyen beállításokat elvégezhetünk szinte bármely HTML-elemre. A kinézet megjelenítéséhez azonban nem elég a külön állományra való hivatkozást beírni a forrásfájlba. Amely tagot szeretnénk formázni, annak tulajdonságai közé is be kell írni a style paraméterhez azt a nevet, amit megadtunk a CSS-állományban. Pl:
<div style="title">...</div>
Ha nem csak egyetlen tag tartalmára szeretnénk megadni stílustulajdonságokat, akkor a CSS-állományban elég, ha egy ponttal helyettesítjük a tag nevét. Pl:
.menu {tulajdonság-érték lista}
A stílustulajdonságok megadásánál (bármely beágyazási típusnál) figyeljünk a pontosvesszőkre! Ha nem tesszük ki az egyes sorok végén, akkor az utána következő tulajdonságok nem lesznek érvényben.
Linkek
Ha van kedved többet olvasgatni a CSS-ről, az alábbi oldalakat ajánlom figyelmedbe:
- http://css.lap.hu (innen nagyon sok oldalra juthatsz, magyar-külföldi egyaránt)
- http://weblabor.hu/cikkek/rovatok/css
- http://www.prog.hu/cikkek/907/Bevezetes+a+CSS+alapjaiba.html