HTML <style> 标签 的详细用法

HTML &lt;style&gt; 标签功能

  • &lt;style&gt; 标签定义 HTML 文档的样式信息。
  • &lt;style&gt; 元素中,您可以规定在浏览器中如何呈现 HTML 文档。
  • 每个 HTML 文档能包含多个 &lt;style&gt; 标签。

HTML &lt;style&gt; 标签用法

在 HTML 文档中使用 &lt;style&gt; 元素:

    &lt;style type=&quot;text/css&quot;&gt;
        .demo h1 {color:red;}
        .demo p {color:blue;}
    &lt;/style&gt;

    &lt;div class='demo'&gt;
        &lt;h1&gt;这是一个标题&lt;/h1&gt;
        &lt;p&gt;这是一个段落。&lt;/p&gt;
    &lt;/div&gt;

HTML &lt;style&gt; 标签演示

<style type="text/css">

.demo h1 {color:red;}
.demo p {color:blue;}

</style>

<div class='demo'>

&lt;h1&gt;这是一个标题&lt;/h1&gt;
&lt;p&gt;这是一个段落。&lt;/p&gt;

</div>


浏览器支持

所有主流浏览器都支持 &lt;style&gt; 标签。

提示和注释

  • 提示:如需链接外部样式表,请使用 &lt;link&gt; 标签。
  • 提示:如需学习更多有关样式表的知识,请阅读我们的 CSS 教程。
  • 注释:如果没有使用 "scoped" 属性,则每一个 &lt;style&gt; 标签必须位于 head 头部区域。

HTML4 与 HTML5 之间的差异

"scoped" 属性是 HTML 5 中的新属性,它允许我们为文档的指定部分定义样式,而不是整个文档。

如果使用 "scoped" 属性,那么所规定的样式只能应用到 style 元素的父元素及其子元素。

属性

New :HTML5 中的新属性。

属性 描述
media media_query 为样式表规定不同的媒体类型。
scopedNew scoped 如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。
type text/css 规定样式表的 MIME 类型。

全局属性

&lt;style&gt; 标签支持 HTML 全局属性

事件属性

&lt;style&gt; 标签支持 HTML 事件属性

本文参考HTML中文帮助文档

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。