HTML <style> etikett

Definition och användning

<style> etikett används för att definiera dokumentets stilmatrisinformation (CSS).

I <style> Element, där du kan specificera hur HTML-elementet ska presenteras i webbläsaren.

Observera att style-elementet definierar inbäddade CSS-stilar i HTML-dokumentet, medan link-elementet används för att importera stilar från externa stilmatriser.

style-elementet kan dyka upp i olika delar av HTML-dokumentet. Ett dokument kan innehålla flera style-element, så det behöver inte placeras i head-sektionen. Detta är särskilt användbart i situationer där sidor genereras med mallmotorer, eftersom det då är möjligt att lägga till specifika sidostilar till stilar definierade av mallen.

Se också:

HTML-utbildning:HTML CSS

CSS-utbildning:CSS handledning

HTML DOM-handbok:Style-objekt

Exempel

Exempel 1

Använd <style> Element tillämpar en enkel stilmatris på HTML-dokumentet:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Detta är en rubrik</h1>
<p>Detta är en stycke.</p>
</body>
</html>

Prova själv

Exempel 2

Flera stilar för samma element:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>Detta är en rubrik</h1>
<p>Detta är en stycke.</p>
</body>
</html>

Prova själv

Tips och kommentarer

Observera:När webbläsaren läser in stilmatrisen, formaterar den HTML-dokumentet baserat på informationen i stilmatrisen. Om samma attribut definieras för samma väljare (element) i olika stilmatriser, används värdet från den senaste inlästa stilmatrisen (se exempel ovan)!

Tips:För att länka till en extern stilmall, använd <link> etikett.

Tips:För mer information om stilar, läs vår CSS handledning.

Egenskap

Egenskap Värde Beskrivning
media Media frågor Definierar mediet som stilen används på.
type text/css Definierar mediatypen för <style> etiketten.

Globala egenskaper

<style> Etiketter stöder också Globala egenskaper i HTML.

händelseegenskaper

<style> Etiketter stöder också Händelseegenskaper i HTML.

Standard CSS-inställningar

De flesta webbläsare visar med följande standardvärden <style> Element:

style {
  display: none;
}

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd