HTML <style> Tag


Voorbeeld

Gebruik van die <style>-element om 'n eenvoudige stylblad op 'n HTML-dokument toe te pas:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

Meer "Probeer dit self" voorbeelde hieronder.


Definisie en gebruik

Die <style>merker word gebruik om stylinligting (CSS) vir 'n dokument te definieer.

Binne die <style>element spesifiseer jy hoe HTML-elemente in 'n blaaier moet weergee.


Wenke en notas

Let wel: Wanneer 'n blaaier 'n stylblad lees, sal dit die HTML-dokument formateer volgens die inligting in die stylblad. As sommige eienskappe vir dieselfde keurder (element) in verskillende stylblaaie gedefinieer is, sal die waarde van die laaste gelees stylblad gebruik word (sien voorbeeld hieronder)!

Wenk: Om na 'n eksterne stylblad te skakel, gebruik die <link> -merker.

Wenk: Lees asseblief ons CSS -tutoriaal om meer oor stylblaaie te wete te kom .


Blaaierondersteuning

Element
<style> Yes Yes Yes Yes Yes


Eienskappe

Attribute Value Description
media media_query Specifies what media/device the media resource is optimized for
type text/css Specifies the media type of the <style> tag

Globale eienskappe

Die <style>merker ondersteun ook die Global Attributes in HTML .


Gebeurtenis eienskappe

Die <style>merker ondersteun ook die gebeurteniskenmerke in HTML .


Meer voorbeelde

Voorbeeld

Veelvuldige style vir dieselfde elemente:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Verwante bladsye

HTML-tutoriaal: HTML CSS

CSS-tutoriaal: CSS-tutoriaal

HTML DOM verwysing: Style Object


Verstek CSS-instellings

Die meeste blaaiers sal die <style>element met die volgende verstekwaardes vertoon:

style {
  display: none;
}