A CSS (Cascading Style Sheets, magyarul: „lépcsőzetes stíluslapok”) a számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le. Ezenkívül használható bármilyen XML alapú dokumentum stílusának leírására is, mint például az SVG, XUL stb.
A CSS specifikációját a World Wide Web Consortium felügyeli.
Áttekintés A CSS-t a weblapok szerkesztői és olvasói egyaránt használhatják, hogy átállítsák vele a lapok színét, betűtípusait, elrendezését, és más megjelenéshez kapcsolódó elemeit. A tervezése során a legfontosabb szempont az volt, hogy elkülönítsék a dokumentumok struktúráját (melyet HTML vagy egy hasonló leíró nyelvben lehet megadni) a dokumentum megjelenésétől (melyet CSS-sel lehet megadni). Az ilyen elkülönítésnek több haszna is van, egyrészt növeli a weblapok használhatóságát, rugalmasságát és a megjelenés kezelhetőségét, másrészt csökkenti a dokumentum tartalmi struktúrájának komplexitását. 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, nyomtatási lapon, hangos böngészőben (mely beszédszintetizátor segítségével olvassa fel a weblapok szövegét), vagy Braille-készüléken megjelenítve.
A CSS használható XML fájlok megjelenítésére is, így a strukturált dokumentumokhoz teljes körű stílust lehet megadni, befolyásolva az elrendezését, színét, betűtípusait az erre alkalmas kliensekben vagy webböngészőkben.
Az elemek stílusát különböző CSS szelektorokkal lehet kiválasztani: Minden elemre – a * szelektor használatával Az elem neve alapján – például minden 'p' vagy 'h2' HTML-elemhez Leszármazottak alapján – például az olyan 'a' elemekre, melyek egy 'li' elem részei, a szelektor "li a" class vagy id attribútumok alapján – például .class és/vagy #id a class="osztály" vagy id="azonosító" elemekhez
Ezeken kívül rendelkezésre áll több pszeudo-osztály, melyekkel további műveletekhez lehet stílust rendelni. Talán a legismertebb ezek közül a mindenek :hover, melynek stílusa akkor lép érvénybe, mikor a hozzá tartozó elem aktiválódik, például fölévisszük az egeret. Hozzá lehet fűzni a szelektorokhoz is, például a:hover vagy #elementid:hover. További ismertebb pszeudoosztályok a :first-line, a :visited vagy a :before.
A szelektorok kombinálhatók a széles körű alkalmazáshoz.
A CSS információkat a lapokhoz több módon lehet megadni: Szerzői stílus külső CSS fájl a dokumentumból hivatkozva beágyazva a dokumentumba azonnali, felülírva az általános stílust egy konkrét esetre Felhasználói stílus egy helyi CSS fájl az összes dokumentumra, melyet a felhasználó a böngésző beállításaiban adhat meg; a felhasználó megadhatja, hogy a szerző és a saját stílusai közül melyik legyen fontosabb Kliens stílus egy alapértelmezett stílus, melyet a kliens vagy a böngésző használ az elemekhez
A CSS a szabályokat a kapcsolódások alapján súlyozza, így mikor egyszerre több szabály is érvényes lehet egy elemre, akkor a legfontosabb szabályt alkalmazza.
A CSS használatának legfontosabb előnyei: Több lap vagy akár egy teljes webhely stílusait egy helyen lehet tárolni, így gyorsan és könnyen frissíthető Különböző felhasználókhoz különböző stílusokat lehet rendelni: például könnyen olvasható, nyomtatható stílusok A dokumentum mérete és komplexitása csökken, mivel nem tartalmaz információkat a megjelenítéshez
A CSS egyszerű szintaxissal rendelkezik, 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.
Például:
p { font-family: "Garamond", serif; } h2 { font-size: 110%; color: red; background-color: white; } .megjegyzes { color: red; background-color: yellow; font-weight: bold; } p#bevezetes { border: 3px dashed black; } a:hover { color: yellow; background-color: navy;
Ez összesen öt szabály, a p, h2, .megjegyzes, p#bevezetes és a:hover szelektorokra. A deklarációra egy példa a color: red, ahol a color (szín) tulajdonság értéke red (vörös).
Az első két szabályban a p (bekezdés) és h2 (második szintű címsor) HTML elemekhez rendeltünk stilisztikai tulajdonságokat. A bekezdések Garamond betűtípussal lesznek megjelenítve, vagy ha nincs ilyen, akkor valamilyen más talpas (serif) betűtípussal. A második szintű címsorok vörös színnel és fehér háttérrel jelennek meg.
A harmadik szabály egy CSS osztályt definiál, melyet bármilyen elemhez hozzá lehet rendelni a dokumentumban a class attribútummal, például:
<p class="megjegyzes">Ez a bekezdés félkövér, vörös színű lesz, sárga háttérrel.</p>
A negyedik szabály egy olyan p elemre vonatkozik, melynek id attribútuma bevezetes: ez az elem egy 3 pixel széles fekete szaggatott keretet fog kapni.
Az utolsó szabály a hover állapothoz tartozó megjelenést szabályozza az a elemhez (többek között a hiperlinkek is ilyen elemek). A szabály meghatározza, hogyan nézzen ki az elem, amikor az egérmutató fölötte áll. A példában az elem háttérszíne ilyenkor sötétkék, a szövege színe sárga lesz.
A CSS stíluslapok megjegyzéseket is tartalmazhatnak, a következő formában:
/* megjegyzés:Ez nekem segített! */
A CSS története A stíluslapok már a HTML kezdete, 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, melyet 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 attribútumot tartalmaztak, így gyakran bízták a felhasználóra, hogy a webes dokumentumok hogyan jelenjenek meg.
A webfejlesztők igényei folyamatosan növekedtek a stilisztikai lehetőségek irányába, így a HTML nyelvbe egyre több ilyen elem került. Ilyen lehetőségek mellett a stíluslapok kevésbé voltak fontosak, és egyetlen külső stílusleíró nyelv sem lett széleskörűen elfogadva a CSS megjelenése előtt.
A CSS eredetileg Håkon Wium Lie ötlete volt 1994-ben. Bert Bos időközben egy Argo nevű böngészőn dolgozott, mely saját stíluslapokat használt; végül ők ketten döntöttek a CSS kifejlesztése mellett.
Ekkor már 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, míg a többi esetben örökli azt. A stíluslapok ilyen kapcsolása mind a szerző, mind a felhasználó számára rugalmas vezérlést biztosított, mivel megengedte a vegyes stilisztikai beállításokat.
Håkon ajánlata a „Mosaic és a Web” konferencián került bemutatásra Chicagóban, először 1994-ben, majd 1995-ben. Ebben az időben alakult meg a Word Wide Web Consortium is, mely később fellépett a CSS érdekében, és megalapított egy bizottságot a részletes kidolgozására. Håkon és Bert volt az elsődleges technikai vezetője a projektnek, melyhez további tagok csatlakoztak, többek között Thomas Reardon a Microsofttól. 1996 decemberében a CSS level 1 ajánlata hivatalosan is megjelent.
1997 elején a CSS egy Chris Lilley vezette csoporthoz került a W3C-nél. A csoport azokkal a problémákkal foglalkozott, melyeket a CSS Level 1 kihagyott. A CSS Level 2 mint hivatalos ajánlat 1998 májusában jelent meg. A CSS Level 3 még jelenleg, 2014-ben is fejlesztés alatt áll, bár bizonyos funkcióit már használják a legújabb böngészők.http://www.css3.info/modules/
Problémák a megvalósításban
Bár a CSS1 specifikációja már 1996-ban elkészült, több mint három évbe telt, mire egy böngészőben megjelent a teljes megvalósítása. Az Internet Explorer 5.0 Macintosh 2000 márciusában megjelent változata volt az első olyan böngésző, mely több, mint 99%-ban támogatta a CSS1 szabványt, megelőzve ezzel az Operát is, mely már 15 hónappal azelőtt bevezette a CSS1 támogatását. A többi böngésző hamarosan követte az Internet Explorert, sőt többen már a CSS2 bizonyos elemeit is támogatták. Ennek ellenére 2004-ben még egyetlen böngésző sem támogatta teljes mértékben a CSS2-t. A legrosszabb támogatással például az aural és pages tulajdonságok rendelkeznek.
Még azok a böngészők is, melyek teljes megvalósítással rendelkeztek, tele voltak következetlenségekkel, hibákkal és trükkökkel. A fejlesztők sokszor körülírásokat és megkerülő módszereket kellett használjanak, hogy az eredmény minden böngészőben és platformon hasonló legyen. A legismertebb ilyen CSS-hiba az Internet Explorer doboz modellje: a dobozok szélességét a program 5.x, illetve ennél alacsonyabb verziószámú változatai hibásan kezelik, ezért a más böngészőkben helyesen megjelenő elemek szélessége az Internet Explorer ezen verzióiban túl keskeny lesz. A hibát el lehet kerülni, de csak a funkcionalitás rovására.
Ez csak egy a CSS több száz hibája közül az Internet Explorer, Netscape, Mozilla és Opera megvalósításaiban, melyek csökkentik a dokumentumok olvashatóságát. A CSS-hibák burjánzása megnehezítette a webfejlesztők dolgát, hogy hasonló megjelenést érjenek el minden platformon. Jelenleg erős verseny folyik a Mozilla Gecko, az Opera Presto, és a Safari, valamint a Konqueror KHTML motorja között – mindhárom vezető pozíciót szerzett a CSS különböző területein. Az Internet Explorer 2005-ben még a legrosszabb CSS megvalósítással rendelkezett, a W3C ajánlásait figyelembe véve. 2006-ban az Internet Explorer 6 még mindig csak kb. 70%-os CSS2 támogatottsággal fut.
Ezek a problémák arra késztették a W3C szakembereit, hogy felülbírálják a CSS2 szabványt. Így megalkották a CSS2.1 változatát, mely nagyjából a CSS2 jelenleg már működő részeit tartalmazza. A CSS2-nek azokat a részeit, melyeket egyetlen böngésző sem valósított meg sikeresen, kitörölték, vagy a jelenlegi megvalósításoknak megfelelően átírták. A CSS2.1 még nem végleges javaslat.
A CSS használata A CSS elsődleges célja, hogy szétválassza a dokumentumok megjelenését a tartalomtól. A CSS előtt a HTML dokumentumok csaknem minden megjelenéshez kapcsolódó része a HTML kódon belül volt; a betűtípusok, színek, háttérstílusok, elrendezések, dobozok, keretek és méretek külön meg voltak adva, gyakran ismétlődően, a HTML kód közepén. A CSS használatával a webfejlesztők ezeket az információkat áthelyezhetik a stíluslapra, mely így egy sokkal egyszerűbb, kevésbé redundáns HTML kódot eredményez. A HTML dokumentumok kisebbek lesznek, és mivel a webböngészők gyakran tárolják a CSS stíluslapokat a gyorsítótárban, a hálózati forgalom is jelentősen csökkenhet.
Például a h2 HTML elem megadja, hogy a benne foglalt szöveg második szintű címsor. Ez kisebb jelentőségű, mint a h1 címsor, viszont nagyobb, mint a h3 címsor. A h2 ezen tulajdonsága strukturális.
Szokás szerint a címsorok csökkenő méretben vannak megjelenítve, így a h1 a legnagyobb, mivel ez jelzi, hogy fontosabb a többi címsornál. A címsorok ezen kívül a nagyobb nyomaték kedvéért többnyire félkövér betűtípussal rendelkeznek. Így a h2 elem általában félkövér betűtípussal, a h3-nál nagyobb, de a h1-nél kisebb betűmérettel jelenik meg. A h2 elem ezen tulajdonsága prezentációs.
A CSS előtt a webfejlesztők, ha módosítani akarták a h2 elemek színét, betűtípusát, méretét vagy más jellemzőit, akkor a HTML font elemét kellett használniuk a címsor minden egyes használatakor. Egy középre igazított, dőlt betűs, vörös, Times New Roman típusú címsorhoz a következőt kellett használni:
<h2 align="center"><font color="red" size="+4" face="Times New Roman, serif"> ''A CSS használata''</font></h2>