# CSS

### A Wikipédiából, a szabad lexikonból.

A CSS (angolul Cascading Style Sheets) 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. Ezen kí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.

## [szerkesztés] Á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 `: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 pszeudo-osztályok a `:first-line`, a `:visited` vagy a `:before`.

A szelektorok kombinálhatók a széleskörű alkamazá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 */`

## [szerkesztés] 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" konferecián került bemutatásra Chicagoban, először 1994-ben, majd később 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 Microsoft-tó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 is fejlesztés alatt áll.

## [szerkesztés] 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.

## [szerkesztés] 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ér stí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, ezért 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 webfejleszető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őltbetű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 ugyaní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 alternatív stíluslapokat megadhatunk, í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.

### [szerkesztés] 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>
         <h1>Ez a szöveg félkövér, dőlt és kék</h1>
         <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>
         <h2>Ez a szöveg félkövér, dőlt és kék</h2>
         <p>Normál szöveg.</p>
       </body>
     </html>

### [szerkesztés] 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.

## [szerkesztés] Külső hivatkozások

### [szerkesztés] Ajánlások

- Jelenlegi munkálatok (CSS 3)
- CSS 2.1
- CSS 1

### [szerkesztés] Ellenőrzés

- A W3C CSS érvényesítő szolgáltatása

### [szerkesztés] Bemutatók és példák

- CSS Zen kert - Bemutató, hogy mit lehet elérni a CSS alapú tervezéssel
- CSS Beauty - CSS alapú minőségi weblapok gyűjteménye
- css/edge - Lenyűgöző gyűjtemény a CSS lehetőségeinek bemutatására
- Netoktató - Kiváló CSS leckék
- Az Acid teszt
- A második Acid teszt
- Weblabor CSS cikkek kategóriája
- Horváth János CSS cikkei és linkgyüjteménye

### [szerkesztés] Linkgyűjtemények

- CSS.lap.hu - CSS.lap.hu

A lap eredeti címe "http://hu.wikipedia.org../../../c/s/s/CSS_2c56.html"

Kategóriák: Számítógépes nyelvek | Fájlformátumok

##### Views

- Szócikk
- Vitalap
- Aktuális változat

##### Keresés

##### Más nyelveken

- English
- العربية
- Bosanski
- Català
- Česky
- Dansk
- Deutsch
- Esperanto
- Español
- Eesti
- Euskara
- Suomi
- Français
- עברית
- Bahasa Indonesia
- Íslenska
- Italiano
- 日本語
- 한국어
- Lietuvių
- Nederlands
- Norsk (nynorsk)
- Norsk (bokmål)
- Polski
- Português
- Română
- Русский
- Simple English
- Slovenčina
- Slovenščina
- Svenska
- ไทย
- Türkçe
- Tiếng Việt
- 中文