HTML - <style> 标签



HTML <style> 标签包含 HTML 文档或文档一部分的样式信息。这包括CSS(层叠样式表),它应用于包含 <style> 标签的 HTML 文档的内容。

<style> 标签用于在 HTML 文档的 head 元素内声明样式表。一个 head 元素中可以有多个 style 元素。通常,CSS 有三种类型,如果我们在 head 元素内使用 style 元素,则此 CSS 称为内联 CSS。

语法

<style>.....</style>

属性

HTML style 标签支持全局事件HTML 属性。也接受一些特定的属性,如下所示。

属性 描述
media media_query 指定媒体资源针对的媒体/设备。
type text/css 指定媒体类型。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

HTML style 标签示例

下面的示例将说明 style 标签的用法。在哪里、何时以及如何使用 style 标签来设置 HTML 文档的样式。

使用 style 标签设置 HTML 文档样式

在下面的程序中,我们使用 HTML <style> 标签将简单的样式表 (CSS) 应用于 HTML 文档。

Open Compiler
<!DOCTYPE html> <html lang="en"> <head> <title>HTML style Tag</title> <style> h1 { color: green; font-size: 40px; font-style: italic; } </style> </head> <body> <h1>Text within h1 tag</h1> </body> </html>

添加多个 Style 标签

以下是 HTML <style> 标签的另一个示例。在这里,我们将两个 <style> 标签包含到应用于 HTML 文档的样式表中,并查看后面的 style 元素中冲突的声明如何覆盖前面的声明(如果它们具有相同的特异性)。

Open Compiler
<!DOCTYPE html> <html lang="en"> <head> <title>HTML style Tag</title> <style> p { color: rgb(17, 114, 217); font-size: 40px; font-style: italic; font-weight: bolder; } </style> <style> p { color: red; font-size: 35px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } </style> </head> <body> <p>Text within p tag</p> </body> </html>

使用 style 标签进行媒体查询

在这个例子中,我们使用 media(即媒体查询)属性与第二个“style”元素一起使用。因此,只有当视口(屏幕尺寸)宽度小于 500px 时,它才会应用于 HTML 文档。

Open Compiler
<!DOCTYPE html> <html lang="en"> <head> <title>HTML style Tag</title> <style> h3 { color: red; font-size: 25px; font-style: italic; } </style> <style media="all and (max-width: 500px)"> h3 { color: green; font-size: 30px; font-weight: bolder; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } </style> </head> <body> <h3>This is the 'h3' HTML element.</h3> </body> </html>

支持的浏览器

标签 Chrome Edge Firefox Safari Opera
style
html_tags_reference.htm
广告