HTML <style> etiket

Definition og brug

<style> etiketten bruges til at definere dokumentets stilinformation (CSS).

I <style> Elementer, hvor du kan specificere, hvordan HTML-elementer vises i browseren.

Bemærk, at style-elementet definerer CSS-stilarter indlejret i HTML-dokumentet, mens link-elementet bruges til at importere stilarter fra eksterne stilark.

style-elementet kan forekomme i alle dele af HTML-dokumentet. En dokument kan indeholde flere style-elementer, så det er ikke nødvendigt at placere alle stildefinitioner i head-sektionen. Denne egenskab er meget nyttig i situationer, hvor der bruges skabelonmotorer til at generere sider, da det så er muligt at supplere skabelondefinerede stilarter med side-specifikke stilarter.

Se også:

HTML-tur:HTML CSS

CSS-tur:CSS Læringsvejledning

HTML DOM referencehåndbog:Style-objekt

Eksempel

Eksempel 1

Brug <style> Element anvender en simpel stilark til HTML-dokumentet:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Dette er en overskrift</h1>
<p>Dette er en afsnit.</p>
</body>
</html>

Prøv det selv

Eksempel 2

Flere stilarter for samme element:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>Dette er en overskrift</h1>
<p>Dette er en afsnit.</p>
</body>
</html>

Prøv det selv

Påmindelser og kommentarer

Bemærk:Når browseren læser stilarkene, formaterer den HTML-dokumentet efter informationerne i stilarkene. Hvis der er defineret nogle egenskaber for samme vælger (element) i forskellige stilark, bruges værdierne fra det sidst læste stilark (se eksemplet ovenfor)!

Tip:Brug for at linke til en ekstern style-skal <link> tagget.

Tip:For at få mere information om style-sheets, læs vores CSS Læringsvejledning.

Egenskab

Egenskab Værdi Beskrivelse
media Media-forespørgsel Definerer mediet, der bruges til at anvende stilen.
type text/css Definerer medietypen for <style> tagget.

Globale egenskaber

<style> Tagget understøtter også Globale egenskaber i HTML.

event egenskaber

<style> Tagget understøtter også Event egenskaber i HTML.

Standard CSS-indstillinger

De fleste browsere viser standardværdierne nedenfor <style> Element:

style {
  display: none;
}

Browserstøtte

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support