ACSS (Cascading Style Sheets, magyarul: „lépcsőzetes stíluslapok”) a számítástechnikában egystílusleíró nyelv, mely aHTML vagyXHTML típusú strukturált dokumentumok megjelenését írja le. Ezenkívül használható bármilyenXML alapú dokumentum stílusának leírására is, mint például azSVG,XUL stb.
A CSS-t aweblapok 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 weblapokhaszná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 (melybeszédszintetizátor segítségével olvassa fel a weblapok szövegét), vagyBraille-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 vagywebbö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 vagyid attribútumok alapján – például .class és/vagy #id aclass="osztály" vagyid="azonosító" elemekhez
Ezeken kívül rendelkezésre áll többpszeudo-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áula: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 egyszelektor és egydeklarációs szakasz. Ez utóbbi kapcsos zárójelek között pontosvesszővel elválasztottdeklarációkat tartalmaz. A deklarációk formája a következő: atulajdonság neve, egy kettőspont, majd az adott tulajdonságértéke.
Ez összesen öt szabály, ap,h2,.megjegyzes,p#bevezetes ésa:hover szelektorokra. A deklarációra egy példa acolor: red, ahol acolor(szín) tulajdonság értékered(vörös).
Az első két szabályban ap(bekezdés) ésh2(második szintű címsor) HTML elemekhez rendeltünk stilisztikai tulajdonságokat. A bekezdésekGaramond 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 aclass attribútummal, például:
<p>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 olyanp elemre vonatkozik, melynekid attribútumabevezetes: ez az elem egy 3 pixel széles fekete szaggatott keretet fog kapni.
Az utolsó szabály ahover állapothoz tartozó megjelenést szabályozza aza 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:
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.
Awebfejlesztő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 eredetilegHåkon Wium Lie ötlete volt1994-ben.Bert Bos időközben egyArgo 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 akapcsolá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ásraChicagóban, először1994-ben, majd1995-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 aMicrosofttól.1996 decemberében a CSS level 1 ajánlata hivatalosan is megjelent.
1997 elején a CSS egyChris 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ánlat1998 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.[1]
Ez a lap vagy szakasz tartalmában elavult, korszerűtlen, frissítésre szorul. Frissítsd időszerű tartalommal, munkád végeztével pedig távolítsd el ezt a sablont!
Bár a CSS1specifikációja már1996-ban elkészült, több mint három évbe telt, mire egy böngészőben megjelent a teljes megvalósítása. AzInternet Explorer 5.0Macintosh2000 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 azOperá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ére2004-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 azaural éspages 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 ésmegkerü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 aMozillaGecko, az OperaPresto, és aSafari, valamint aKonquerorKHTML motorja között – mindhárom vezető pozíciót szerzett a CSS különböző területein. Az Internet Explorer2005-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 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 awebbö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 ah2 HTML elem megadja, hogy a benne foglalt szöveg második szintű címsor. Ez kisebb jelentőségű, mint ah1 címsor, viszont nagyobb, mint ah3 címsor. Ah2 ezen tulajdonságastrukturális.
Szokás szerint acímsorok csökkenő méretben vannak megjelenítve, így ah1 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 ah2 elem általában félkövér betűtípussal, ah3-nál nagyobb, de ah1-nél kisebb betűmérettel jelenik meg. Ah2 elem ezen tulajdonságaprezentációs.
A CSS előtt a webfejlesztők, ha módosítani akarták ah2 elemek színét, betűtípusát, méretét vagy más jellemzőit, akkor a HTMLfont 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>
A kiegészítő prezentációs jelölések miatt a HTML dokumentum sokkal bonyolultabb lesz, és nehezebb karbantartani is. Ha azt szeretnénk, hogy minden ilyen címsor így jelenjen meg, akkor mindegyikre külön használni kell ezt a kiegészítést. Továbbá a dokumentumot olvasó felhasználónak nincs lehetősége módosítani a megjelenésen, ha ő például kék színű címsorokat szeretne, mivel az oldal szerzője egyértelműen megadta a címsorok színét.
A CSS használatával ah2 elem csak strukturális információt hordozhat, míg a stíluslap megadja a prezentációs tulajdonságokat. A fenti kód itt így nézne ki:
<h2>A CSS használata</h2>
Az alábbi stílus pedig definiálja az összesh2 címsor megjelenését a teljes dokumentumban vagy webhelyen:
A megjelenés így elvált a tartalomtól. A CSS ilyen típusú előnyei miatt a W3C a HTML prezentációs elemeit és attribútumait márelavultként jelölte be. Így a HTML csak a strukturális, míg a CSS a prezentációs információkat írja le.
A CSS stílusinformációkat beépíthetjük a HTML dokumentumba, vagy csatolhatjuk külső hivatkozásként. Egyszerre több stíluslapot is importálhatunk, valamint megadhatunk alternatív stíluslapokat , így a felhasználó választhat közülük. A megjelenítés helyétől függően különböző stílusokat alkalmazhatunk, például a nyomtatási stílus teljesen különbözhet a képernyőn megjelenő változattól.
Az a tendencia, hogy a címsorok helyett inkább osztállyal azonosított paragrafusokat használunk, lehetőleg kerülendő. Egyes felolvasók és szöveges böngészők nem használják az osztályokat, így nem képesek követni a weblapok struktúráját. A címsorok használatával a lap strukturális megjelenése a régebbi böngészőkön és akár kikapcsolt stílusok mellett is megmarad.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Minta</title> <style type="text/css"> body { background: #fff; color: #000; } h1,h2 { font: bold italic large sans-serif; color: blue; } </style> </head> <body>= Ez a szöveg félkövér, dőlt és kék = <p>Normál szöveg.</p> <h2> Ez a szöveg zöld hátterű, félkövér, dőlt és vörös; a fent megadott h2 stílus részben felül lett írva. </h2> <p>Normál szöveg.</p>== Ez a szöveg félkövér, dőlt és kék == <p>Normál szöveg.</p> </body> </html>
Egy ilyen fájl helyileg tárolódik, és a böngésző beállításaiban lehet aktiválni. Az "!important" azt jelenti, hogy a stílus a szerző specifikációja fölött is érvényesül.
