当前位置主页 > 资料库 > 前端教程 > 深入了解style标签元素

深入了解style标签元素

2016-12-14

<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>元素设置样式

虽然不是很常见,但是我们可以为<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>元素的位置

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

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

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

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

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

Previous:
上一篇:javaScript中的排序方法
Next:
下一篇:使用text-stroke 和 text-shadow制作CSS描边文字

我要评论

返回顶部