深入了解style标签元素

12-14 次

标签 css教程

<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元素设置CSS样式的结果

我们还可以直接在<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>中，但是没有“限制样式”的能力，它们的样式会对在它们之后的文档都有效。