1 Star 0 Fork 1

小弟调调 / html-tutorial

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
style.md 2.14 KB
一键复制 编辑 原始数据 按行查看 历史
小弟调调 提交于 2022-05-01 19:08 . doc: add tag document.

HTML <style> Tag

示例

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

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

定义和用法

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

<style> 元素中,您可以指定 HTML 元素应如何在浏览器中呈现。

提示和注意事项

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

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

浏览器支持

Element chrome edge firefox safari opera
<style> Yes Yes Yes Yes Yes

属性 Attributes

属性 描述
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>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

相关页面

HTML 教程: HTML CSS

默认 CSS 设置

大多数浏览器将显示具有以下默认值的 <style> 元素:

style {
  display: none;
}
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/jaywcjlove/html-tutorial.git
git@gitee.com:jaywcjlove/html-tutorial.git
jaywcjlove
html-tutorial
html-tutorial
main

搜索帮助