CSS

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.

Ez a szócikk a HTML stíluslapnyelvéről szól. Hasonló címmel lásd még: Catalina Sky Survey.

Cascading Style Sheets
Fájlkiterjesztés	.css
MIME-típus	text/css
Fejlesztő	World Wide Web Consortium
Kiadás dátuma	1999. december 17.
Formátum típusa	Style sheet language
Standard	Level 1 (ajánlás) Level 2 (ajánlás) Level 2 Revision 1 (ajánlás)
Weboldal	https://www.w3.org/Style/CSS/

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.^[1]

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>

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 a h2 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 összes h2 címsor megjelenését a teljes dokumentumban vagy webhelyen:

h2 {
    text-align: center;
    color: red;
    font-size: large;
    font-family: "Times New Roman", serif;
    font-style: italic;
}

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ár elavultké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.

Példa XHTML dokumentumra beágyazott CSS stílussal

 <!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 style="color: red; background: green;">
     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>

Példa a felhasználói stílusra

A cimsorkiemeles.css fájl tartalma:

h1 {color: white; background: orange !important; }
h2 {color: white; background: green !important; }

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.