Cascading Style Sheets

Uit Wikipedia, de vrije encyclopedie
Ga naar: navigatie, zoeken
Cascading Style Sheets
Cascading Style Sheets
Status gepubliceerd
Startjaar 1994
Auteurs W3C
Gerelateerde standaarden HTML
Afkorting CSS
Domein World_Wide_Web
Website CSS2
Portaal  Portaalicoon   Informatica

Cascading Style Sheets (afgekort tot CSS), stijlbladen, zijn een mogelijkheid om de vormgeving van webpagina's los te koppelen van hun feitelijke inhoud en centraal vast te leggen. Het Engelse "style" heeft de betekenis van "opmaak", niet van schrijfstijl. Het begrip "cascading" (als een waterval) verwijst naar de mogelijkheid van het overerven van opmaak-eigenschappen (zie onder).

De CSS-informatie voor de vormgeving van het document wordt toegevoegd aan de HTML-code ervan. Die informatie mag in het HTML-bestand zelf staan, maar ook in een apart bestand waar het HTML-document naar verwijst. Een dergelijk extern bestand wordt ook wel stylesheet genoemd.

Een belangrijke reden voor de introductie van Cascading Style Sheets was de eenvoudigere en consistentere vormgeving van webpagina's, met minder webbrowser-specifieke eigenaardigheden. Het World Wide Web Consortium (W3C) heeft daartoe de standaard vastgelegd. De vastgelegde standaard is in de loop van de jaren significant uitgebreid. De oorspronkelijke standaard staat bekend als CSS1. Latere uitbreidingen staan bekend als CSS2 en CSS3. Deze laatste uitbreiding (CSS3) is gedeeltelijk nog in ontwikkeling en is als zodanig geen officiële standaard.

Moderne browsers ondersteunen CSS1 en CSS2. CSS3 is nog geen officiële standaard, hierdoor is er minder ondersteuning door webbrowsers.

Aspecten van stijl en overerving[bewerken]

Met Cascading Style Sheets kan de vormgeving van elk element in een webpagina worden bepaald. Een element van een webpagina wordt gedefinieerd door het gebruik van een HTML-tag. De term cascading geeft aan dat de stijl van elementen overerving vertoont: elk element neemt de stijl over van zijn parent-element, tenzij er een eigen stijl voor dat element is gegeven. Elke webbrowser heeft een ingebouwde stylesheet die de vormgeving van alle elementen bepaalt als er geen stylesheets aan een document worden meegegeven.

Een stijl bestaat uit een aantal aspecten zoals lettertype en voor- en achtergrondkleur. Ook breedte van kantlijnen, de horizontale en verticale positie, de zichtbaarheid, de transparantie, of een element boven of onder een ander element ligt en vele andere aspecten kunnen in een stylesheet worden aangegeven.

Elk aspect van de stijl wordt onafhankelijk overgeërfd door child-elementen in een webpagina. Daarom hoeven alleen de afwijkende aspecten van een stijl te worden aangegeven. Als er in de stijl een lettertype wordt aangegeven voor het hele document, dan wordt dat lettertype in het hele document gebruikt en hoeft het niet voor elk element apart te worden aangegeven.

Niet alle aspecten van een stijl erven over. Bijvoorbeeld de breedte en hoogte van een element erven niet over. Als een element een box vormt met gespecificeerde breedte, dan refereert een relatieve aanduiding voor breedte van child-elementen aan de breedte van de box. Als de breedte van een tabel op 100 pixels is gezet en een cel in die tabel heeft breedte 25%, dan betekent dat 25% van 100 pixels.

CSS biedt, met behulp van mediatypes, de mogelijkheid om voor verschillende typen media, waarop een webtoepassing kan worden uitgevoerd, een andere stijl te definiëren. Daardoor kan de stijl van een webpagina worden aangepast aan weergave op een beeldscherm, op papier (als de pagina wordt afgedrukt), een handheld of een brailleleesregel. In geval van spraaksynthese door middel van een voicebrowser kan via CSS zelfs worden bepaald of de tekst door een mannen- of vrouwenstem wordt uitgesproken en wat de snelheid en toonhoogte is!

Klassen[bewerken]

De syntaxis van Cascading Style Sheets
In een stylesheet wordt de stijl van een klasse geformuleerd met:
tagname.classname:pseudoclass {gespecificeerde stijlen}
Het toevoegen van de onderstaande stijl aan de stylesheet van de Wikipedia resulteert erin dat alle externe links een gele achtergrond krijgen als je muispijl erover gaat:
a.external:hover {background-color:yellow}
- de genoemde tag is a, dat is de tag voor een hyperlink.
- de genoemde class is external. De software van de Wikipedia geeft alle externe links de klassenaam external. Dit is een verzonnen naam en buiten de Wikipedia dus niet algemeen geldig.
- de genoemde pseudoclass is hover. Dat betekent dat de stijl alleen wordt toegepast als de muis in het betreffende deel van de pagina staat.

De klasse van een HTML-element wordt aangegeven door de naam van de tag. Het is echter mogelijk om aan een tag een klasse toe te voegen (class="verzonnen_klassenaam"), waardoor het element de stijl van de corresponderende klasse in het stylesheet overneemt. De aspecten van stijl die niet in deze corresponderende klasse worden aangegeven, erft het element echter nog steeds van het parent element of van de tag klasse.

CSS kent ook pseudoklassen. Daarmee wordt aangegeven dat de stijl van een element afhankelijk is van een status. Een bekende pseudoklasse is de status van een link, de tekst van een link kan een andere kleur hebben als het betreffende document recent is bekeken. Een andere pseudoklasse is de hover waardoor de stijl van een element anders wordt als de muis in het element staat.

Prioriteit[bewerken]

Omdat er verschillende manieren zijn om een stijl aan te geven, is de prioriteit hiervan expliciet geregeld. Hieronder staat de prioriteit aangegeven (een hogere prioriteit heeft voorrang over een lagere prioriteit). Elk aspect van stijl wordt daarbij afzonderlijk bekeken.

  1. stijl met !important-regel in de stijldefinitie.
  2. stijl aangegeven in de tag van het element.
  3. stijl volgens de naam van de id in de tag.
  4. stijl volgens de naam van de class in de tag.
  5. stijl volgens de naam van de tag (aspecten van stijl die niet expliciet zijn aangegeven worden bepaald door de ingebouwde stylesheet in de browser).
  6. stijl van het parent-element.

Geschiedenis[bewerken]

Vanaf het begin van het World Wide Web heeft elke browser zijn eigen interne stylesheet gehad, die er voor zorgde dat de tags in een document werden geïnterpreteerd. Het concept van cascading style sheets werd in 1994 voorgesteld door de Noor Håkon Wium Lie. Hij besloot samen te werken met de Nederlander Bert Bos die in die tijd werkte aan een eigen browser (Argo) die gebruik maakte van stylesheets.

Het voorstel werd door Håkon Wium Lie gepresenteerd op de "Mosaic and the Web"-conferentie in Chicago, en samen met Bert Bos, nogmaals in 1995. In die tijd was het W3C in oprichting en organiseerde een project om tot een standaard voor CSS te komen. In december 1996 werd de CSS1-aanbeveling gepubliceerd. In 1997 begon een werkgroep van de W3C aan uitbreiding van de specificatie. Dit resulteerde in de CSS2-aanbeveling, gepubliceerd mei 1998. Een aanpassing van CSS2 (CSS2 revisie 1, CSS2.1 genoemd) wijzigde delen van de CSS2-standaard; onder andere werden enkele nieuwe waarden toegevoegd en niet-geïmplementeerde delen uit de standaard verwijderd. Een verdere uitbreiding van CSS tot CSS3 is in ontwikkeling bij het W3C.

Ondersteuning[bewerken]

Hoewel de CSS1-aanbeveling in 1996 werd gepubliceerd, duurde het tot 2000 voordat er een browser beschikbaar kwam die deze specificatie volledig ondersteunde. De eerste browser die deze ondersteuning bood was Internet Explorer 5.0 voor de Mac. Andere browsers volgden toen echter snel.

Op dit moment ondersteunen vrijwel alle browsers CSS2.

Zie ook[bewerken]

Logo Wikibooks
Wikibooks heeft een studieboek over dit onderwerp: Cascading Style Sheets.