css是一门用来描述文档样式表现的语言，能够给我们的网页增色不少。在html中，标签被用来描述文本的结构。那么如何通过css为这些标签增加样式呢？本文将带你一起学习如何通过css设置标签样式。
一、语法
在CSS中，通过选择器来选取标签，并为其设置样式。选择器有多种类型，如标签选择器、类选择器、id选择器等等。下面是一些常用语法：
- 标签选择器
标签选择器用来为相应类型的标签设置样式。例如：
p {
color: red;
}上面这段代码表示为所有的 <p> 标签设置字体颜色为红色。
立即学习“前端免费学习笔记（深入）”；
- 类选择器
类选择器用来为页面上某个类的所有标签设置样式。例如：
.intro {
font-size: 20px;
}上面这段代码表示为所有包含 class 为“intro”的标签设置字体大小为 20 像素。
- id选择器
id选择器用来为页面上某个id的标签设置样式。例如：
#header {
background-color: yellow;
}上面这段代码表示为id为“header”的标签设置背景颜色为黄色。
二、选择器优先级
在CSS中，如果一个元素被多个选择器选中，那么就会有多个样式规则作用于它身上。这时就需要用到选择器优先级的概念。
选择器优先级一般按以下顺序来计算：
- !important声明
- 行内样式（例如：
<p style="color: red;">） - id选择器
- 类选择器、属性选择器、伪类选择器
- 标签选择器、伪元素选择器
其中，!important声明具有最高的优先级，即使和后面的样式规则的优先级相同，也会被覆盖。
三、常用样式属性
接下来，我们将介绍一些常用的样式属性，帮助你更好地为标签设置样式。
- color
color属性用于设置标签文本的颜色。例如：
p {
color: red;
}上面这段代码表示为所有的 <p> 标签设置字体颜色为红色。
立即学习“前端免费学习笔记（深入）”；
- font-size
font-size属性用于设置标签文本的字体大小。例如：
p {
font-size: 18px;
}上面这段代码表示为所有的 <p> 标签设置字体大小为 18 像素。
- background-color
background-color属性用于设置标签背景颜色。例如：
#header {
background-color: yellow;
}上面这段代码表示为id为“header”的标签设置背景颜色为黄色。
- text-align
text-align属性用于设置标签文本对齐方式。例如：
h1 {
text-align: center;
}上面这段代码表示为所有的 <h1> 标签设置文本对齐方式为居中。
- padding
padding属性用于设置标签内边距大小。例如：
.container {
padding: 20px;
}上面这段代码表示为class为“container”的标签设置内边距为 20 像素。
四、总结
本文介绍了CSS设置标签样式的语法、选择器优先级和常用样式属性。通过将这些知识融会贯通，你可以轻松为网页中的标签增加个性化样式，使你的网页更加美观和具有个性。
