Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML <style> 标签


示例

使用 <style> 元素将一个简单的样式表应用于 HTML 文档

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>

<h1>一个标题</h1>
<p>一段文字。</p>

</body>
</html>
亲自尝试 »

下面还有更多“亲自尝试”示例。


定义和用法

<style> 标签用于定义文档的样式信息(CSS)。

<style> 元素中,您指定 HTML 元素在浏览器中的呈现方式。

<style> 元素必须包含在文档的 <head> 部分中。


提示和注释

注意:当浏览器读取样式表时,它将根据样式表中的信息格式化 HTML 文档。如果在不同的样式表中为同一个选择器(元素)定义了一些属性,则将使用最后读取的样式表的值(请参见下面的示例)!

提示:要链接到外部样式表,请使用 <link> 标签。

提示:要了解有关样式表的更多信息,请阅读我们的 CSS 教程.


浏览器支持

元素
<style>


属性

属性 描述
media media_query 指定媒体资源针对的媒体/设备
type text/css 指定 <style> 标签的媒体类型

全局属性

<style> 标签还支持 HTML 中的全局属性.


事件属性

<style> 标签还支持 HTML 中的事件属性.


更多示例

示例

相同元素的多个样式

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一段文字。</p>

</body>
</html>
亲自尝试 »

相关页面

HTML 教程:HTML CSS

CSS 教程:CSS 教程

HTML DOM 参考:Style 对象


默认 CSS 设置

大多数浏览器将使用以下默认值显示 <style> 元素

style {
  display: none;
}


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.