Trapsgewijze stijlbladen

Trapsgewijze stijlbladen
Bestandsextensie :	.css
MIME-type :	tekst / css
Ontwikkeld door:	Wereldwijde web consortium
Type:	Stijlbladtaal
Standaard(en) :	Niveau 1 (aanbeveling) Niveau 2 (aanbeveling) Niveau 2 Revisie 1 (aanbeveling) Niveau 2 Revisie 2 (aanbeveling)
Website :	https://www.w3.org/Style/CSS/

Cascading Style Sheets ( Engelse uitspraak [ kæsˌkeɪdɪŋˈstaɪlʃiːts ]; voor 'stepped design sheets'; kortom: CSS ) is een stylesheettaal voor elektronische documenten en, samen met HTML en JavaScript, een van de kerntalen van het World Wide Web . ^[1] Het is een zogenaamde levensstandaard, levensstandaard' en het World Wide Web Consortium blijft evolueren (W3C). CSS wordt gebruikt om ontwerpinstructies te maken die voornamelijk worden gebruikt in combinatie met de opmaaktalen HTML en XML (bijvoorbeeld in SVG ).

Basis

CSS is ontworpen om presentatievereisten grotendeels te scheiden van inhoud. Als deze scheiding consequent wordt uitgevoerd, worden alleen de inhoudsstructuur van een document en de betekenis van de onderdelen ervan beschreven in HTML of XML, terwijl bij CSS de presentatie van de inhoud afzonderlijk wordt gespecificeerd, bij voorkeur in afzonderlijke CSS-bestanden (bijv. Lay-out, kleuren en typografie). In het begin waren er alleen eenvoudige display-instructies, in de loop daarvan werden complexere modules toegevoegd. B. animaties en verschillende representaties kunnen worden gedefinieerd voor verschillende uitvoermedia.

Elementen van een document kunnen worden geïdentificeerd op basis van verschillende eigenschappen. Naast de elementnaam (bijv. a voor alle hyperlinks ), hun ID en hun positie binnen het document (bijv. alle afbeeldingselementen binnen linkelementen), omvat dit ook details zoals attributen (bijv. alle linkelementen waarvan href - Attribute begint met www.example.com ) of de positie in een reeks elementen (bijvoorbeeld elk oneven element in een lijst). CSS-instructies kunnen worden gebruikt om specificaties voor de weergave voor elke dergelijke elementgroep te definiëren. Deze specificaties kunnen centraal worden gemaakt, ook in aparte bestanden, zodat ze makkelijker kunnen worden hergebruikt voor andere documenten. CSS bevat ook een overervingsmodel voor opmaakkenmerken dat het aantal vereiste definities vermindert.

Met CSS kunnen verschillende representaties worden gespecificeerd voor verschillende uitvoermedia ( scherm , papier , projectie , taal ). Dit is handig om b.v. B. om de referentieadressen van hyperlinks te vermelden bij het afdrukken, en om weergaven te bieden voor apparaten zoals PDA's en mobiele telefoons met een klein beeldscherm of een lage beeldresolutie die smal genoeg en niet te hoog zijn om leesbaar te blijven op dergelijke apparaten.

CSS is de standaard stylesheettaal op het World Wide Web . Eerder gebruikelijke, presentatie-georiënteerde HTML-elementen, zoals font of center als "verouderd" ( Engels achterhaald) beschouwd, dat wil zeggen dat ze in de toekomst uit de HTML-standaard moeten worden verwijderd. ^[2] Zo zijn deze oa sinds HTML 4 (1997) als "ongewenst" en met HTML5 als afgekeurd ( Engels afgekeurd). ^[3]

Geschiedenis en versies

begin

Er was een eerste voorstel voor webstijlbladen in 1993, verscheidene anderen volgden tot 1995. Op 10 oktober 1994 publiceerde Håkon Wium Lie , een collega van Tim Berners-Lee bij CERN , het eerste voorstel voor "Cascading HTML-stijlbladen", ^[4] die hij later in het kort "CHSS" noemde. ^[5] Bert Bos werkte destijds aan de implementatie van een browser genaamd Argo , die een eigen stylesheet-taal gebruikte. De twee besloten samen CSS te ontwikkelen. In die tijd waren er ook andere talen met hetzelfde doel, maar de uitvinders van CSS waren de eersten die op het idee kwamen om regels te definiëren die over meerdere stylesheets en binnen één stylesheet beslissen welke CSS-opmaak van toepassing is op het betreffende element moet worden toegepast.

Nadat Lie CSS presenteerde op de " Mozaïek en het Web"-conferentie in Chicago in 1994 en later met Bos in 1995, werd het World Wide Web Consortium (W3C) zich bewust van CSS. Lie en Bos werkten in deze context samen met andere leden aan CSS. In december 1996 werd de CSS Level 1-aanbeveling gepubliceerd.

CSS2

CSS Level 2 (CSS2) werd in mei 1998 gepubliceerd. Tot begin 2010 werd deze aanbeveling echter door geen enkele populaire webbrowser volledig geïmplementeerd. Al in 2002 heeft het W3C gewerkt aan de herziene versie CSS Level 2 Revision 1 (CSS 2.1). ^[6] De ervaringen met CSS2 zijn hier opgenomen, inconsistenties zijn gecorrigeerd en enkele subtechnieken die in verschillende browsers niet correct waren geïmplementeerd, zijn verwijderd. Fundamenteel nieuwe vaardigheden werden niet opgenomen. 7 juni 2011 CSS 2.1 werd gepubliceerd als een volledige aanbeveling (Aanbeveling). ^{[7] In} 2014 verwerkten de meeste webbrowsers CSS 2.1 grotendeels correct, slechts enkele gedeeltelijke technologieën werden niet volledig ondersteund. Het eerste openbare werkconcept van CSS 2.2 werd in april 2016 gepubliceerd. ^[8e]

CSS3

CSS Level 3 is in ontwikkeling sinds 2000. ^[9] Dit is waar de ontwikkelingen die al zijn begonnen met CSS2 verder worden geduwd. In tegenstelling tot zijn voorgangers zal CSS3 een modulaire structuur hebben, waarmee individuele subtechnologieën (bijvoorbeeld aansturing van spraakoutput of selectors) in afzonderlijke versiestappen kunnen worden ontwikkeld. CSS ligt qua mogelijkheden dichter bij de gevestigde DSSSL (voor SGML ) en zal in de toekomst waarschijnlijk een alternatief blijven voor op XML gebaseerde stylesheettalen zoals XSL-FO . Standaarden die momenteel zijn gepubliceerd en breed worden ondersteund, zijn onder meer CSS Color Level 3 , CSS Namespaces , Selectors Level 3 en Media Queries . Naast deze modules komen ook andere elementen aan bod, zoals een opmaakmodule en diverse grafische filters . ^[10] Moderne browsers ondersteunden in 2014 al veel CSS3-modules, ^[11] hoewel er al een aanbeveling (aanbeveling) was ingediend door het W3C voor slechts een paar onderdelen. ^[10] In de loop van de tijd kwamen er steeds meer functies voor CSS, evenals aanbevelingen van het W3C.

In het voorjaar van 2012 werd gemeld dat het W3C al werkte aan een opvolger van CSS3, die met versienummer 4 zou moeten verschijnen. ^[12] In september 2012 maakten vertegenwoordigers van de CSS-werkgroep van het W3C duidelijk dat er geen versienummer 4 zou moeten zijn: “ Er zal nooit een CSS4 zijn ”. ^{[13] Het is} veeleer voor de toekomstige ontwikkeling van standaarden dat de afzonderlijke CSS-modules verder kunnen worden ontwikkeld onder eigen versienummers, terwijl de algemene standaard bedoeld is om de naam of alleen CSS3 CSS te behouden. ^[13]

syntaxis

De structuur van CSS-instructies

 Kiezer1 [, Kiezer2 [, ... ] ] {
    Eigenschap-1 : waarde-1 ;
    ...
    Eigenschap-n : waarde-n [; ]
}
/ * Commentaar * /
/ * Tussen vierkante haken staat optionele informatie * /

Een CSS-statement ( Engelse regel ) specificeert dat een combinatie van bepaalde eigenschappen van toepassing moet zijn op bepaalde delen van een document. Het wordt geschreven als een door komma's gescheiden lijst van selectors ("Voor dit soort onderdelen ...") , gevolgd tussen accolades door een door puntkomma's gescheiden lijst van eigenschapdeclaraties ("... gebruik de volgende eigenschappen!") . Elke eigenschapsdeclaratie bestaat uit de naam van de eigenschap, een dubbele punt en de waarde die deze moet aannemen. Na de laatste eigenschapsdeclaratie is een afsluitende puntkomma toegestaan ​​voor de afsluitende accolade, maar dit is niet noodzakelijk.

Rond deze delen van een instructie kan vrij worden gebruikgemaakt van witruimte . Vaak schrijft men de dubbele punt zonder spatie achter de eigenschapsnaam, elke eigenschapsdeclaratie in een aparte regel en sluit ook de laatste eigenschap af met een puntkomma. Dit betekent dat syntaxisfouten minder snel optreden als er later wijzigingen worden aangebracht. Mochten er echter syntaxisfouten optreden, dan kan een CSS-validator worden gebruikt om fouten te corrigeren. ^[14]

Een stylesheet kan een willekeurig aantal van dergelijke uitspraken bevatten. Onderstaande tabel bevat een compleet overzicht van alle selectors waarmee elementen (veelal HTML- elementen) geselecteerd kunnen worden.

Selectors

Een selector specificeert de voorwaarden die van toepassing moeten zijn op een element, zodat de volgende set CSS-declaraties en de bijbehorende presentatiespecificaties op het element worden toegepast. Dergelijke voorwaarden beschrijven duidelijk welke eigenschappen (type, klasse, ID, attribuut of attribuutwaarde) elementen moeten hebben of de context waarin ze in het document moeten staan ​​(bestaan ​​van een bepaald bovenliggend element of een voorgaand element van een bepaald type) zodat de beeldschermspecificaties moeten hierop van toepassing zijn. In een selector kunnen meerdere selectiecriteria worden gekoppeld.

voorbeeld

Het CSS-boxmodel

CSS-code:

 blz . informatie {
	font-familie : arial , schreefloos ;
	lijnhoogte : 150 % ;
	marge-links : 2 em ;
	opvulling : 1 em ;
	rand : 3 px effen rood ;
	achtergrondkleur : # f89 ;
	weergave : inline-blok ;
}
blz . info span {
	lettergewicht : vet ;
}
blz . info span :: na {
	inhoud : ":" ;
}

HTML code:

 < p class = "info" >
	< span > opmerking </ span >
	Je bent succesvol ingelogd.
</ p >

De HTML- tags <p> en </p> definiëren de tekst ertussen als een alinea. Dit krijgt de klasse "info" toegewezen met zijn CSS-weergavespecificaties voor lettertype, frame, enz. Vanuit een CSS-compatibele browser wordt de alinea daarom als volgt weergegeven:

Hier worden de declaraties toegewezen aan alle p elementen die het class attribuut met de waarde info . Zonder de p in de selector zouden alle elementen van de info klasse worden beïnvloed, zonder de .info zouden alle p elementen worden beïnvloed. span elementen binnen dergelijke paragrafen worden vet weergegeven; daarachter wordt een dubbele punt gegenereerd met het pseudo-element ::after .

Een belangrijk principe van CSS is de overerving van eigenschapswaarden aan ondergeschikte elementen en de combinatie van verschillende stylesheets, waarbij de laatste eigenschapdeclaratie voor een element eerdere declaraties van dezelfde eigenschap overschrijft met een andere waarde voor dit element. Deze kunnen uit verschillende bronnen komen: van de auteur van de stylesheet, van de browser ( user agent ) of van de gebruiker. De informatie van de browser wordt eerst geïmplementeerd, vervolgens de informatie die door de gebruiker wordt verstrekt en ten slotte de informatie die door de auteur wordt verstrekt.

Lay-outs maken met CSS

Voorheen werden elementen gerangschikt met behulp van het <table> -element. Hiervoor is de gehele website als tabel ingericht zodat de verschillende elementen geordend kunnen worden. Dit komt omdat CSS nog niet over de juiste eigenschappen beschikte om lay-outs te maken. Dit had veel nadelen, zoals een rigide website die niet responsive is .

Tegenwoordig zijn er verschillende manieren om lay-outs te maken:

• Float is een CSS-eigenschap waarbij elementen andere elementen om hen heen laten stromen . ^[15]
• Met Flexbox kunnen elementen naar wens worden opgesteld in een flexibele container. Een flexcontainer dient als basis. ^[16]
• CSS-rasterlay- out wordt gekenmerkt door het verdelen van een pagina in hoofdgebieden of het definiëren van de relatie tussen delen van een besturingselement dat bestaat uit HTML-basiselementen in termen van grootte, positie en laag. ^[17]

Browsercompatibiliteit

De verschillende browsers verschillen sterk in de reikwijdte van de ondersteunde eigenschappen en de standaardweergaven van verschillende HTML-elementen. ^[18] Dit levert problemen op voor de ontwikkelaar, omdat hij niet alle functies volledig kan gebruiken en ervoor moet zorgen dat de website niet te veel verschilt tussen de afzonderlijke browsers. Er zijn verschillende manieren om dit probleem op te lossen: ^[19]

• Een reset-stylesheet kan worden gebruikt om de verschillende CSS-standaardinstellingen opnieuw in te stellen en vervolgens uw eigen regels voor de elementen te declareren.
• Voorwaardelijke opmerkingen zijn HTML-opmerkingen die alleen Internet Explorer kan begrijpen. Dit maakt optimalisatie voor deze browser veel gemakkelijker, omdat deze niet veel functies en eigenschappen ondersteunt.
• Browserprefixen worden gebruikt om functies in oudere versies van de browser te gebruiken. Deze zijn alleen getest in de bijbehorende versies en pas later als standaard geïmplementeerd. Er zijn ook functies die alleen in de afzonderlijke browsers beschikbaar zijn. ^[11]

Een andere methode is CSS-hacks. ^[20] Deze gebruiken CSS-syntaxis om zwakke plekken in de browser te misbruiken bij het ontwerpen van weblay-outs.

CSS-hacks

CSS-hacks worden gebruikt om verschillen in de weergave van weblay-outs in verschillende browsers te compenseren of om CSS-instructies voor specifieke webbrowsers toe te wijzen of uit te sluiten. De term hack verwijst naar niet-gestandaardiseerde CSS-commando's die misbruik maken van de zwakke punten van een webbrowser die deze instructies interpreteert of negeert. Hiermee kunnen zwakke punten in webbrowsers worden gecompenseerd, zodat in elke webbrowser hetzelfde resultaat kan worden weergegeven.

Een CSS-hack combineert b.v. B. Onjuist gespecificeerde selectors met extra tekens of instructies bevatten die bepaalde webbrowsers niet kennen. Een bekend voorbeeld van een CSS hack is de zogenaamde star HTML hack. Het * -teken dient als universele selector en is zinloos voor de html selector.

Voorbeeld van CSS-code:

 p { achtergrondkleur : blauw ; }
* html p { achtergrondkleur : rood ; }

In dit geval zouden alle browsers in eerste instantie de p elementen met een blauwe achtergrond weergeven. Alleen Internet Explorer vóór versie 7 interpreteert ook de tweede regel en kleurt de alinea's rood, hoewel <html> geen bovenliggend element heeft waarop * toepassing kan zijn.

Combinatie met HTML of XHTML

Meestal wordt CSS gecombineerd met HTML of XHTML. Dit kan op meerdere plekken, hier een paar voorbeelden:

Als externe stylesheet voor een (X) HTML-bestand ( link element)

 < link rel = "stylesheet" type = "text / css" href = " example.css " />

Als externe stylesheet voor een XHTML-bestand (xml-stylesheet- verwerkingsinstructie )

 <? xml-stylesheet type = "text / css" href = "example.css"?>

Als interne stylesheet in een (X) HTML-bestand ( style element)

 < hoofd >
	< titel > document met opmaak </ titel >
	<Style type = "text / css">
		lichaam { kleur : paars ; achtergrondkleur : # d8da3d ; }
	</ stijl >
</ hoofd >

Binnen (X) HTML- tags ( style )

 < span style = "lettergrootte: klein;" > Tekst </ span >

De integratie als externe stylesheet is de meest gebruikte methode. Het heeft als voordeel dat de stylesheet maar één keer hoeft te worden gedownload voor meerdere documenten die dezelfde set regels gebruiken. Dit voorkomt ook repetitieve code. CSS zelf maakt de integratie van verdere externe stylesheets mogelijk met het @import commando.

 < hoofd >
	< titel > voorbeeld </ titel >
	<Style type = "text / css">
		@ import url ( url_des_stylesheets ) ;
	</ stijl >
</ hoofd >

Er zijn drie manieren om stylesheets te integreren met een link element. Ze verschillen in hoe strikt de stylesheets in aanmerking worden genomen:

Permanente stylesheets (permanent)

 < link rel = "stylesheet" type = "text / css" href = " example.css " />

Als je zo'n stylesheet toevoegt, wordt deze zeker gebruikt.

Voorkeursstijlbladen

 <Link rel = "stylesheet" type = "text / css" href = "beispiel.css" title = "Some Title" />

Als deze integratie wordt gebruikt, wordt de stylesheet gebruikt totdat de gebruiker een andere kiest.

Alternatieve stylesheets (alternatief)

 < link rel = "alternate stylesheet" type = "text / css" href = " example.css " title = "some title " />

Als de stylesheet op deze manier aan het HTML-document wordt gekoppeld, moet de gebruiker er expliciet voor kiezen om deze te gebruiken. Dit is van invloed op de meeste browsers (bijv. Internet Explorer , Firefox , Opera en Konqueror ). Deze functie wordt dus geïmplementeerd door de meest gebruikte browsers. Bovendien mag een "alternatieve stylesheet" alleen worden gebruikt in combinatie met een andere, permanent geïntegreerde, zodat het slechts een echt alternatief is.

Als alternatief is het ook mogelijk om de stylesheet dynamisch te integreren met JavaScript , maar het kan voorkomen dat de inhoud tijdens het laadproces korte tijd wordt weergegeven zonder de stijl, wat kan worden opgemerkt als Flash of Unstyled Content .

Specifieke stylesheets

Om specifieke apparaten of eigenschappen aan te pakken, zijn er speciale attributen in CSS. Sinds CSS2 kunnen geselecteerde apparaten worden aangesproken met mediaspecifieke stylesheets en sinds CSS3 alleen apparaten met bepaalde eigenschappen, bijvoorbeeld de schermbreedte, met eigenschapspecifieke stylesheets (mediaquery's). Mediaquery's zijn vooral belangrijk voor responsive webdesign .

Mediaspecifieke stylesheets

Het is mogelijk om verschillende stylesheets voor verschillende media te integreren, bijvoorbeeld om het ontwerp te regelen bij het printen of op displays van mobiele telefoons. Dit is het doel van het media attribuut. De parameters die van toepassing zijn op deze stylesheet worden vermeld in dit attribuut.

Voorbeeld van een @media opdracht in een CSS-bestand

 @ Media afdrukken {
	lichaam {
		kleur : zwart ;
		achtergrondkleur : wit ;
	}
	h1 {
		lettergrootte : 14 pt ;
	}
	. navigatie {
		weergave : geen ;
	}
}

Er kunnen verschillende @media commando's worden gebruikt om verschillende uitvoerapparaten aan te spreken binnen een CSS-bestand of een <style> -blok.

Voorbeeld van een media attribuut bij het opnemen van een CSS-bestand

 <Link rel = "stylesheet" type = "text / css" href = "beispiel.css" media = "print" />

Voorbeeld van een media attribuut van een <style> -blok

 < style type = "tekst / css" media = "print" >
	lichaam {
		kleur : zwart ;
		achtergrondkleur : wit ;
	}
	h1 {
		lettergrootte : 14 pt ;
	}
	. navigatie {
		weergave : geen ;
	}
</ stijl >

Aangezien veel moderne smartphones het handheld- type niet ondersteunen en in plaats daarvan de schermstijlspecificaties gebruiken, is men afhankelijk van "eigenschapspecifieke stijlbladen" (mediaquery's) .

Property-specifieke stylesheets (mediaquery's)

Media Queries is een concept dat werd geïntroduceerd met CSS3 en breidt het principe van het mediatype in CSS2 uit. In plaats van strak te definiëren welk medium het doelmedium is, kunnen de eigenschappen van het huidige apparaat direct worden opgevraagd met mediaquery's. Beschikbare apparaateigenschappen zijn bijvoorbeeld:

• Breedte en hoogte van het browservenster
• Breedte en hoogte van het apparaat
• Oriëntatie (liggend of staand)
• Schermresolutie

Vooral op het gebied van mobiele webprogrammering worden mediaquery's al vaak gebruikt om de website optimaal aan te passen aan het momenteel gebruikte apparaat.

In het volgende voorbeeld zijn elementen voorzien van CSS instructies . Deze instructies gelden voor het hele document. Er wordt dan een mediaquery gebruikt, die van kracht wordt zodra de breedte van het browservenster kleiner is dan 1025 pixels. In dit geval veranderen de eigenschappen die eerder algemeen gedefinieerd waren of zijn er aanvullende eigenschappen van toepassing.

 # inhoud {
	breedte : 800 px ;
}

@ Media scherm en (max-width: 1024px) {
	# inhoud {
		breedte : 600 px ;
	}

	opzij {
		weergave : geen ;
	}
}

Zie ook

• Sass

literatuur

• Ingo Chao, Corina Rudel: geavanceerde CSS-technieken . 3. Uitgave. Galileo Computing, Bonn 2012, ISBN 978-3-8362-1695-1 (gedetailleerde en veeleisende uitleg van CSS internals).  
• Florence Maurice: CSS3: de nieuwe functies voor geavanceerde webontwerpers . 2e editie. dpunkt.verlag, Heidelberg 2013, ISBN 978-3-86490-118-8 (innovaties in CSS3).  

web links

Wikibooks: Website-ontwikkeling: CSS - leer- en lesmateriaal

• Cascading Style Sheets homepage. W3C, 2014, geraadpleegd op 24 september 2014 .  
• CSS-waarden en eenheden Module Niveau 4. Editor's Draft. W3C, 3 juni 2020, geraadpleegd op 14 juni 2020 .  
• CSS-referentie. Mozilla Developer Network, 8 juli 2014, geraadpleegd op 24 september 2014 (referentie inclusief Mozilla Extensions).  
• CSS-zelfstudie voor een snelle introductie tot CSS
• CSS3-zelfstudie met alle basisprincipes van CSS en geavanceerde onderwerpen over CSS3
• SELFHTML: meer informatie over CSS
• Browsercompatibiliteit - Gedetailleerde tabel met ondersteuning voor CSS-eigenschappen en selectors van populaire webbrowsers
• CSS Framework - Bevat een responsief, mobiel eerste vloeistofrastersysteem dat op de juiste manier kan worden geschaald tot 12 kolommen naarmate het apparaat of de viewport groter wordt

Individueel bewijs

V – D

Standards des World Wide Web Consortiums

World Wide Web Consortium (W3C)

Empfehlungen	ActivityPub •ARIA • Canonical XML • CDF • CSS • DOM • Geolocation API • HTML • HTML5 • InkML • ITS • JSON-LD • MathML • OWL • P3P • PLS • PNG • RDF • RDF-Schema • RIF • SCXML • SISR • SKOS • SMIL • SOAP • SRGS • SSML • SVG • SPARQL • Timed Text • Turtle • VoiceXML • WSDL • XForms • XHTML • XHTML+RDFa • XInclude • XLink • XML • XML Base • XML-Encryption • XML Events • XML Information Set • XML Namespace • XML Schema • XML Signature • XPath • XPointer • XProc • XQuery • XSL • XSL-FO • XSLT ( Elemente )
Arbeitsentwürfe und Kandidaten	CCXML • CURIE • SMIL Timesheets • sXBL • WICD • XFrames • XBL • XHTML+MathML+SVG • XMLHttpRequest
Anmerkungen	XAdES •XFDL • XHTML+SMIL • XUP
Richtlinien	Web Content Accessibility Guidelines • Multimodal Interaction Activity • Markup Validation Service
Initiativen	Web Accessibility Initiative