Attributen
Dit element bevat de globale attributen.
|
Dit attribuut geeft expliciet aan dat bepaalde bewerkingen moeten worden geblokkeerd tijdens het ophalen van kritieke subresources en het toepassen van de stylesheet op het document. Met
Opmerking
Alleen | |
Dit attribuut definieert op welke media de stijl moet worden toegepast. De waarde ervan is een media query, die standaard all is als het attribuut ontbreekt. | |
| Een cryptografische nonce (een getal dat maar één keer wordt gebruikt) die het mogelijk maakt inline stijlen toe te staan in een style-src Content-Security-Policy. De server moet elke keer dat hij een beleid verzendt een unieke nonce-waarde genereren. Het is van cruciaal belang om een nonce te geven die niet te raden is, aangezien het beleid van een resource anders eenvoudig te omzeilen is. | |
| Dit attribuut specificeert sets van alternatieve stylesheets. |
Verouderde attributen
type Verouderd | Dit attribuut mag niet worden opgegeven: als het toch wordt opgegeven, zijn de enige toegestane waarden de lege tekenreeks of een niet-hoofdlettergevoelige overeenkomst met text/css. |
|---|
Voorbeelden
Een eenvoudige stylesheet
In het volgende voorbeeld passen we een korte stylesheet toe op een document:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>Resultaat
<style> gebruiken binnen <template>
Een <style>-element kan ook worden geplaatst binnen een <template>-element. De stijlen blijven inactief totdat de inhoud van de template wordt geïnstantieerd en in het document wordt ingevoegd.
<template id="card-template">
<style>
.card {
border: 1px solid #cccccc;
padding: 1rem;
border-radius: 0.5rem;
}
</style>
<div class="card">Template content</div>
</template>Meerdere style-elementen
In dit voorbeeld hebben we twee <style>-elementen opgenomen — merk op hoe de conflicterende declaraties in het latere <style>-element de declaraties in het eerdere overschrijven, als ze een gelijke specificiteit hebben.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>Resultaat
Een media query opnemen
In dit voorbeeld bouwen we voort op het vorige, door een media-attribuut op te nemen in het tweede <style>-element, zodat het alleen wordt toegepast wanneer de viewport smaller is dan 500px.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style media="(width < 500px)">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>Resultaat
Technische samenvatting
| Content categories | Metadata content. |
|---|---|
| Toegestane inhoud |
Tekstinhoud die overeenkomt met het type-attribuut, dat is
text/css.
|
| Weglaten van tags | Geen van beide tags kan worden weggelaten. |
| Toegestane ouders | Elk element dat metadata content accepteert. |
| Impliciete ARIA-rol | Geen bijbehorende rol |
| Toegestane ARIA-rollen | Geen role toegestaan |
| DOM-interface | HTMLStyleElement |