Főmenü megnyitása

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.

Cascading Style Sheets
Nuvola mimetypes source css.png
Fájlkiterjesztés .css
MIME-típus text/css
Fejlesztő World Wide Web Consortium
Kiadás dátuma 1996. 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.

Tartalomjegyzék

ÁttekintésSzerkeszté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éneteSzerkesztés

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ásbanSzerkesztés

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álataSzerkesztés

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">
<em>A CSS használata</em></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ílussalSzerkesztés

 <!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ílusraSzerkesztés

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.

JegyzetekSzerkesztés

További információkSzerkesztés

AjánlásokSzerkesztés

EllenőrzésSzerkesztés

Bemutatók és példákSzerkesztés

LinkgyűjteményekSzerkesztés