CSS leírások, alapoktól indulva

Action · 2011 január 14, 03:29:07 DÉLUTÁN

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:

Action · 2011 január 14, 03:50:52 DÉLUTÁN

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:

Kód Kijelölés

<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:

Kód Kijelölés

<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:

Kód Kijelölés

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:

Kód Kijelölés

<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:

Kód Kijelölés

<h1 style="font-size: 10px; margin-left: 30px; color: #3d0404;">Teszt</h1>

Informatikai Barkács Fórum

CSS leírások, alapoktól indulva

Action

Action