Első fejezet: A css mint stílusleíró nyelv
A CSS (angolul Cascading Style Sheets) a számítástechnika egyik stílusleíró nyelve, amely a HTML vagy XHTML dokumentumok megjelenését írja le. A CSS-t a html, xhtml dokumentumokban arra használják, hogy a lapok színét, hátterét, betűtípusait, elrendezéseit stb. beállítsák.
Kis történet, hogy tudjuk honnan indultunk:
A stíluslapok már 1990 óta jelen vannak valamilyen formában. A böngészők a stílus módosítására létrehozták saját leírónyelvüket, amelyet a webes dokumentumok megjelenésének módosítására lehetett használni. Eredetileg a stíluslapokat a felhasználók használták, mivel a HTML korai verziói még csak kevés prezentációs lehetőséget tartalmaztak. A fejlesztői igények folyamatosan növekedtek a stilisztikai lehetőségek irányába, így a HTML nyelvbe is egyre több stilisztikai elem került. A CSS eredetileg Håkon Wium Lie ötlete volt 1994-ben. Bert Bos időközben egy Argo nevű böngészőn dolgozott, amely saját stíluslapokat használt; végül ők ketten döntöttek a CSS kifejlesztése mellett.
Ekkoriban több stílusleírónyelv is létezett, de a CSS volt az első, ami a kapcsolás ötletét használta fel, vagyis a dokumentum stílusa több különböző stíluslapból tevődhetett össze. Ezáltal lehetőség nyílt arra, hogy a felhasználó által megadott stílus bizonyos esetekben felülírja a szerző stílusát.
Az 1990-es évek közepén alakult meg a Word Wide Web Consortium is, amely később fellépett a CSS érdekében, és létrehozott egy bizottságot a CSS részletes kidolgozására. 1996 decemberében hivatalosan is megjelent a CSS level 1 ajánlása. A CSS Level 2, mint hivatalos ajánlat, 1998 májusában jelent meg, a CSS 3 még fejlesztés alatt áll.
A CSS bevezetésével elkülönítették a dokumentumok struktúráját a megjelenéstől, így a weblapok használhatóbbak, kezelhetőbbek, egyszerűbbek lettek, ugyanis a CSS használatával a kódból eltűntek egyebek között a karakterformázó tag-ek.
A CSS ugyancsak alkalmas arra, hogy a dokumentum stílusát a megjelenítési módszer függvényében adja meg, így elkülöníthető a dokumentum formája a képernyőn, a nyomtatási lapon, a hangos böngészőben (amely beszédszintetizátor segítségével olvassa fel a weblapok szövegét), vagy braille készüléken megjelenítve.
A CSS szintaxisa egyszerű, csak néhány angol nyelvű kulcsszót használ a stílusok tulajdonságaihoz. A stíluslap maga a stílust leíró szabályok sora. Minden szabályhoz tartozik egy szelektor és egy deklarációs szakasz. Ez utóbbi kapcsos zárójelek között, pontosvesszővel elválasztott deklarációkat tartalmaz. A deklarációk formája a következő: a tulajdonság neve, egy kettőspont, majd az adott tulajdonság értéke.
Hogy megértsd egy példa a szintaxisra:
(http://g.imagehost.org/0784/css-szektor-deklar_ci_szektor.png)
Második fejezet: Első css fájlunk
Az első fejezetben taglaltuk, hogy miért jó a css, milyen előnyei vannak és, hogy konkrétan hogy épül fel.
Ebben a részben igyekszem tényleg azokat az alapokat összeszedni amik az első css fájlunkhoz szükségesek.
CSS hozzákapcsolása a HTML-hez
1. Beágyazott stíluslap
Ebben az esetben a css-t nem külön fájlban hanem magába a HTML dokumentumba írjuk bele.
A HTML dokumentum fejlécébe kell elhelyeznünk style elembe ágyazva a CSS tulajdonságokat, melyek később a dokumentum egészére hatással lesznek:
<head>
<title>Beágyazott CSS</title>
<style type="text/css">
[i]h1 { font-size: 40px; color: #000000; }
p { font-size: 11px; color: #FFFFFF; } [/i]
[b]</style>[/b]
</head>
2. Külső stíluslap
A lényege, hogy egy külön állományba kezeljük a CSS-t aminek beállításait akár több oldalba is alkalmazhatjuk. Így könnyen kezelhető, központilag beállítható CSS-t kapunk.
Személy szerint ezt támogatom, hisz így mindent megtalálunk egy helyen, és rengeteg időt is megspórolunk, arról nem is beszélve, hogy biztonságosabb, mert még a véletlen törlés veszélyét is kizárjuk.
A lényege, hogy a HTML-be hivatkoznunk kell CSS fájlunkra, ahonnan kiolvassa majd a stílusokat.
Ezt a fejlécbe tudjuk megtenni a következő módon:
<head>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
A main.css-be már ténylegesen csak a stílusokat kell bevinnünk, nincs szükség style elemre se semmi másra.
Alkalmazzuk a szektorokat és azon belül a deklarációkat.
Példának okáért, ennyit kell csak bevinnünk ha ugyan azt a hatást akarjuk elérni mint a beágyazott stíluslapnál:
h1 { font-size: 40px; color: #000000; }
p { font-size: 11px; color: #FFFFFF; }
Ez szintúgy érvényes lesz az egész dokumentumra.
3. Importált stíluslap
Tegyük fel, hogy a mi CSS dokumentumunk, egy másik kiszolgáló szerverén található de letölteni nem, maximum csak elérni tudjuk.
Természetesen megnyitni se lehet böngészővel.
Ebben az esetben sem kell aggódnunk, hisz tudunk rá hivatkozni, méghozzá a következő módon:
<style type="text/css">
@import url(http://www.teszthonlap.hu/css/main.css);
</style>
Az url-be fontos, hogy direkt linket helyezzünk, mely közvetlenül a CSS fájlunkra mutat.
4. Elemhez rendelt stíluslap
Kevésbé használt de jó ha tudtok róla.
Lehetőségünk van stílust akár egy szóhoz hozzákapcsolnunk.
Ezt a következő módon tehetjük meg:
<h1 style="font-size: 10px; margin-left: 30px; color: #3d0404;">Teszt</h1>