• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <style>

    HTML的<style>元素包含文档的样式信息或者文档的部分内容。默认情况下,该标签的样式信息通常是CSS的格式。

    浏览器支持

    所有主流浏览器都支持<style>标签。

    示例

    一个简单的样式表

    <style type="text/css">
    body {
      color:red;
    }
    </style> 
    

    一个scoped的样式表

    <article>
      <div>the scoped attribute allows for you to include style elements mid-document.
       inside rules only apply to the parent element.</div>
      <p>this text should be black. if it is red your browser does not support the scoped attribute.</p>
      <section>
        <style scoped>
          p { color: red; }
        </style>
        <p>this should be red.</p>
      </section>
    </article>
    

    属性

    该元素包含所有全局属性。

    • type该属性以MIME类型(不应该指定字符集)定义样式语言。如果该属性未指定,则默认为text/css
    • media该属性规定该样式适用于哪个媒体。属性的取值CSS媒体查询,默认值为all
    • nonce
    • A cryptographic nonce(number used once)to whitelist inline styles in a style-src Content-Security-Policy. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource’s policy is otherwise trivial.
    • title指定可选的样式表。
    • scoped如果该属性存在,则样式应用于其父元素;如果不存在,则应用于整个文档。
    • 非标准
      This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behaviour my change in the future.


      已淘汰
      This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

    定义和用法

    <style>标签定义文档中的样式。

    如果需要在文档中引用样式表,应该定义外部的样式表,然后使用<link>来连接这个样式表。

    HTML 4.01 与 HTML 5 之间的差异

    "scoped"属性是 HTML 5 中的新属性,它允许我们为文档的指定部分定义样式,而不是整个文档。
    如果使用"scoped"属性,那么所规定的样式只能应用到 style 元素的父元素及其子元素。

    提示和注释:

    提示:如需学习更多有关样式表的内容,请访问我们的CSS 教程。

    提示:在 HTML 5 中,所有元素都不支持style 属性,如需为一个元素添加样式,请在 style 元素中使用 scoped 属性。

    注释:如果没有定义 scoped 属性,则<style>元素必须是 head 元素的子元素,或者是(属于 head 元素的子元素的) noscript 元素的子元素。

    例子

    <head>
        <style type="text/css">
        h1 {color: blue}
        h2 {color: red}
        </style>
    </head>
    

    实例

    在 HTML 文档中使用<style>元素:

    <html>
    <head>
    <style type="text/css">
    h1{color:red;}
    p{color:blue;}
    </style>
    </head>
    <body>
    <h1>a heading</h1>
    <p>a paragraph.</p>
    </body>
    </html>

    上篇:<meta>

    下篇:<title>