深入了解style标签元素

来源：互联网发布：投资者的社交网络编辑：程序博客网时间：2024/05/11 21:08

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

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

属性描述默认值type指定MIME类型"text/css"media指定媒体查询"all"title指定替换样式元素的标题nonescoped允许我们将<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> 
  <stylescoped>
    p { color: red; }
  </style>
  <p>这段文本的颜色为红色。</p>
</div>

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

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

0 0