📅 最后修改于: 2023-12-03 14:52:18.826000 🧑 作者: Mango
在 HTML 中，我们可以使用样式来改变页面元素的视觉外观，包括颜色、字体、大小、位置等等。在本篇文章中，我们将介绍如何在 HTML 中使用样式，以及常用的样式属性和如何将样式应用到 HTML 页面。
在 HTML 中使用样式有三种方式：
行内样式：在 HTML 元素中使用 style 属性来设置样式。
<p style="color: red; font-size: 20px;">这是一段红色的文字，字体大小为 20px。</p>
内部样式表：在 head 标签中使用 style 标签创建样式表，然后在 HTML 元素中使用 class 或 id 属性来引用该样式。
<head>
<style>
.red {
color: red;
}
#big {
font-size: 20px;
}
</style>
</head>
<body>
<p class="red" id="big">这是一段红色的文字，字体大小为 20px。</p>
</body>
外部样式表：将样式表放在一个 .css 文件中，并在 head 标签中使用 link 标签引用该文件，然后在 HTML 元素中使用 class 或 id 属性来引用该样式。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="red" id="big">这是一段红色的文字，字体大小为 20px。</p>
</body>
下表列出了一些常用的样式属性及其作用：
| 样式属性 | 作用 | 值 | | -------------------- | --------------------- | -------------------------------- | | color | 文字颜色 | 任何 CSS 颜色值 | | font-family | 字体 | 任何字体名称或通用字体系列 | | font-size | 字体大小 | 任何长度单位 | | font-weight | 字体粗细 | normal、bold、bolder 或数值 | | text-align | 对齐方式 | left、center、right 或 justify | | background-color | 背景颜色 | 任何 CSS 颜色值 | | background-image | 背景图片 | 图片 URL | | background-size | 背景图片大小 | cover、contain 或长度单位 | | border | 边框 | 边框宽度、边框样式、边框颜色 | | padding | 内边距 | 任何长度单位 | | margin | 外边距 | 任何长度单位 | | width | 宽度 | 任何长度单位 | | height | 高度 | 任何长度单位 | | display | 显示方式 | block、inline 或 none | | float | 浮动 | left、right 或 none | | clear | 清除浮动元素的影响 | left、right、both 或 none |
要将样式应用到 HTML 页面，我们需要了解如何选择器和样式优先级。
在 CSS 中，我们使用选择器来选择我们要应用样式的 HTML 元素。有以下几种选择器：
元素选择器：选择指定的元素。
p {
color: red;
}
类选择器：选择拥有指定 class 属性的元素。
.red {
color: red;
}
id 选择器：选择拥有指定 id 属性的元素。
#big {
font-size: 20px;
}
后代选择器：选择指定元素的后代元素。
.container p {
font-size: 16px;
}
在 CSS 中，样式优先级决定了哪些样式将被应用到一个元素。样式优先级的计算规则如下：
.container p 比 .container 的优先级高。以上是 HTML 中使用样式的介绍。希望这篇文章能够帮助您更好地理解样式在 HTML 中的应用，为您的编程工作带来便利。