CSS 语法详解:选择符、属性与样式规则全指南
CSS(层叠样式表)的核心是通过 “选择符定位元素 + 属性 - 值控制样式” 实现网页美化与布局。理解 CSS 语法结构(选择符、属性、值)及各类选择符的使用场景,是精准控制元素样式、提升代码可维护性的基础。从 “基础语法结构→核心选择符分类→组合使用技巧→优先级规则” 四个维度,系统讲解 CSS 语法的使用方法与实战细节。
CSS 基础语法结构
CSS 样式规则由 选择符(Selector)、属性(Property) 和 值(Value) 三部分组成,基本格式如下:
1 2 3 4
| 选择符 { 属性1: 值1; /* 控制元素的某一样式(如颜色、尺寸) */ 属性2: 值2; }
|
关键说明:
- 选择符:定位需要应用样式的 HTML 元素(如标签名、class、id);
- 属性:CSS 预定义的样式维度(如
color 控制颜色,font-size 控制字体大小);
- 值:属性的具体取值(需符合属性的语法规则,如
color: red 或 color: #ff0000);
- 代码规范:
- 花括号
{} 包裹属性 - 值对,建议独占一行;
- 每个属性 - 值对以分号
; 结尾,增强代码可读性;
- 缩进(如 2 个或 4 个空格)可提升代码层级感,便于维护。
核心选择符分类与用法
选择符是 CSS 语法的 “定位工具”,不同选择符对应不同的元素匹配规则。以下按 “基础选择符→关系选择符→属性选择符” 的顺序,详解常用选择符的用法。
1. 基础选择符:直接定位元素
基础选择符是最常用的选择符,直接通过元素的标签名、class、id 等属性定位元素。
(1)标签选择符(元素选择符)
通过 HTML 标签名匹配元素,作用于页面中所有该类型的标签,适合 “统一设置某类元素的基础样式”。