深入了解style标签元素

共计 1087 个字符，预计需要花费 3 分钟才能阅读完成。

<style>标签元素是一种“metadata”（元数据），它的主要作用是为文档中的元素提供样式。我们通过使用这个标签在 HMTL 文档中嵌入样式，而不是通过它来引用外部样式表。

除了全局的 HTML 标签属性之外，<style>标签还可以接收下面的一些属性。

属性	描述	默认值
type	指定 MIME 类型	“text/css”
media	指定媒体查询	“all”
title	指定替换样式元素的标题	none
scoped	允许我们将 `<style>` 元素放置在文档的 body 中，并限制该样式为 `<style>` 元素的直接父元素的样式	none/false

默认情况下，大多数浏览器会将 <style> 元素的样式设置为隐藏。

style {display: none;}

你可以像为其它 HTML 元素设置样式一样，为 <style> 元素设置样式。

虽然不是很常见，但是我们可以为 <style> 元素设置 CSS 样式。

例如下面的代码：

style {  
  display: block;
  background-color: palevioletred;
  color: #fff;
}

<style>  
  html {
    font-family: '微软雅黑';
    padding: 30px;
    color: #fff;
  }
</style>

得到的结果如下图所示：

我们还可以直接在 <style> 标签中使用 style 属性来设置 CSS 样式：

<style style=“display: block; background-color: palevioletred; color: #fff;">  
    ......
</style>

我们甚至可以在 <style> 中为它 <style> 元素设置样式。

<style>  
  style {
    display: block;
    background-color: palevioletred;
    color: #fff;
  }
</style>

通常我们都会将 <style> 元素放置在文档的 <head> 中。HTML5 规范中为 <style> 元素引入了一个 scoped 属性。该属性支持在页面 body 的任何地方插入 <style> 元素，并限制该样式为 <style> 元素的直接父元素的样式。例如：

<p> 这段文本的颜色为黑色。</p>

<div>  
  <style scoped>
    p {color: red;}
  </style>
  <p> 这段文本的颜色为红色。</p>
</div>

但是，目前只有极少数的浏览器支持这个属性，目前已知的只有firefox 浏览器支持它。

其它浏览器同样可以将 <style> 元素放置在文档的 <body> 中，但是没有“限制样式”的能力，它们的样式会对在它们之后的文档都有效。