第03篇CSS语法与注释规范学会正确的 CSS 语法是写出可维护代码的第一步。看似简单的选择器 大括号背后有一套严谨的语法规则和最佳实践。本篇将带你系统掌握 CSS 的语法结构、合法值类型、以及专业的代码规范。学习目标掌握 CSS 规则的完整语法结构理解各种合法值类型长度、颜色、百分比等学会写清晰、有用的 CSS 注释了解 CSS 的大小写敏感规则和空白处理建立良好的代码格式习惯核心知识点一、CSS 规则的基本结构每一条 CSS 规则由三部分组成选择器{属性:值;}/* ↑ ↑ 选择器 声明块包含一条或多条声明 */完整示例拆解/* 选择器选中页面中所有 class 为 button 的元素 */.button{/* 声明 1背景颜色 */background-color:#4a90d9;/* 声明 2文字颜色 */color:#ffffff;/* 声明 3内边距 */padding:12px 24px;/* 声明 4边框圆角 */border-radius:6px;}术语对照表术语示例说明规则 (Rule).button { ... }完整的一条 CSS 规则选择器 (Selector).button指定样式作用于哪些元素声明块 (Declaration Block){ ... }包含在花括号中的所有声明声明 (Declaration)color: red;一条具体的样式设置属性 (Property)color要设置的样式特性值 (Value)red属性的具体设置多个选择器共享样式/* 用逗号分隔多个选择器 */h1, h2, h3{font-family:PingFang SC,sans-serif;color:#333;}/* 等效于分别写三条规则但更简洁 *//* h1 { font-family: PingFang SC, sans-serif; color: #333; } *//* h2 { font-family: PingFang SC, sans-serif; color: #333; } *//* h3 { font-family: PingFang SC, sans-serif; color: #333; } */一个选择器多条声明.card{/* 推荐每个声明单独一行 */background:white;border:1px solid #e0e0e0;border-radius:8px;padding:24px;margin-bottom:16px;}/* ❌ 不推荐全部挤在一行难以阅读 */.card{background:white;border:1px solid #e0e0e0;border-radius:8px;padding:24px;margin-bottom:16px;}二、CSS 中的合法值类型CSS 属性接受多种类型的值掌握这些类型是正确使用 CSS 的基础。1. 数值类型长度值 (Length).box{width:200px;/* 像素最常用的绝对单位 */height:50%;/* 百分比相对于父元素的百分比 */font-size:1.5rem;/* rem相对于根元素(html)字体大小 */padding:2em;/* em相对于当前元素的字体大小 */margin:2vw;/* vw视口宽度的百分比 (1vw 视口宽度的1%) */}单位类型说明px绝对像素点最常用%相对相对于父元素的对应属性rem相对相对于根元素(html)的字体大小em相对相对于当前元素的字体大小vw相对视口宽度的百分比vh相对视口高度的百分比ch相对数字0的宽度无单位数值.line{line-height:1.5;/* 无单位字体大小的倍数 */opacity:0.8;/* 0~1 之间的小数 */z-index:10;/* 整数 */flex-grow:1;/* 整数 */}⚠️注意line-height推荐用无单位数值如1.5不要用px或em。这样当字体大小变化时行高会自动按比例调整。2. 颜色值 (Color).color-demo{/* 颜色名称147个预定义名称*/color:red;background:cornflowerblue;/* Hex 十六进制 */color:#ff0000;/* 红色 */color:#f00;/* 简写形式 */color:#ff000080;/* 带透明度 (8位) *//* RGB / RGBA */color:rgb(255,0,0);color:rgba(255,0,0,0.5);/* 半透明红色 *//* HSL / HSLA更直观的颜色表示*/color:hsl(0,100%,50%);/* 色相0°、饱和度100%、亮度50% 红色 */color:hsla(120,50%,50%,0.8);/* 半透明绿色 */}HSL 颜色模型图解HSL(色相, 饱和度, 亮度) 色相 (Hue)0°~360° 0° 红色 120° 绿色 240° 蓝色 饱和度 (Saturation)0%~100% 0% 灰色 100% 纯正颜色 亮度 (Lightness)0%~100% 0% 黑色 50% 正常颜色 100% 白色建议日常开发用 Hex (#ff6600) 或 HSL (hsl(24, 100%, 50%))。需要调整透明度时用 RGBA/HSLA。3. 字符串值.quote::before{content:「;/* 用于 ::before/::after 插入内容 */}font-face{font-family:MyFont;/* 字体名称 */src:url(font.woff2);/* 字体文件路径 */}4. 函数值.calc-demo{/* calc()数学计算 */width:calc(100% - 40px);height:calc(50vh 20px);}.transform-demo{/* 变换函数 */transform:translateX(50px);transform:rotate(45deg);transform:scale(1.2);}.gradient-demo{/* 渐变函数 */background:linear-gradient(45deg,#ff6b6b,#4ecdc4);background:radial-gradient(circle,#fff,#000);}三、CSS 注释单行注释/* 这是单行注释 */.button{background:blue;/* 设置按钮背景为蓝色 */}多行注释/* * 这是多行注释 * 每行前面加 * 是可选的但这样更整齐 * 用于解释复杂的样式逻辑 */专业注释规范/* 区域划分注释大模块之间 *//* ------------------------------------------ 组件注释组件开头 ------------------------------------------ *//* 子模块名 ------------------------------------------ */.button{/* 基础样式 */display:inline-block;padding:10px 20px;/* 颜色 */background:#4a90d9;color:#fff;/* 边框 */border:none;border-radius:4px;/* 文字 */font-size:16px;cursor:pointer;}/* 按钮悬停状态 */.button:hover{background:#357abd;}/* 按钮禁用状态 */.button:disabled{background:#ccc;cursor:not-allowed;}注释黄金法则要写注释的情况不需要写注释的情况复杂的计算逻辑如calc()color: red这种显而易见的Hack 代码或兼容性处理标准属性的一般用法为什么这么写Why做了什么What代码本身已说明组件的用途和使用方法单纯重复代码内容的注释四、CSS 的大小写与空白规则大小写敏感规则/* 选择器通常用小写 */.Button{}/* ✅ 可以但不推荐 */.button{}/* ✅ 推荐 */.BUTTON{}/* ⚠️ 可以但别这样 *//* 类名和 ID 在 HTML 中区分大小写 *//* HTML: div classBtn 不会匹配 .btn *//* 属性名不区分大小写 */COLOR:red;/* ✅ 合法但别这样写 */color:red;/* ✅ 标准写法 */Color:red;/* ✅ 合法但不推荐 *//* 属性值大部分不区分大小写 */display:BLOCK;/* ✅ 合法 */display:block;/* ✅ 标准 */background:RED;/* ✅ 合法 */font-family:ARIAL;/* ✅ 合法但字体名通常区分大小写*/约定俗成选择器、属性名、属性值全部小写类名小写多个单词用短横线连接如.main-navID小写多个单词用短横线或下划线如#user-name空白处理/* ✅ 标准格式 */.selector{property:value;}/* ✅ 压缩格式生产环境 */.selector{property:value;}/* ❌ 不推荐 */.selector{property:value;}CSS 对空白不敏感字符串内部除外但为了可读性请遵循格式规范。五、代码格式最佳实践缩进与空格/* ✅ 推荐2个空格缩进 */.card{background:white;padding:20px;}/* ✅ 也可以4个空格缩进团队统一即可*/.card{background:white;padding:20px;}/* ❌ 不推荐Tab 缩进不同编辑器显示宽度不同*//* ❌ 不推荐混用空格和 Tab */声明顺序建议.component{/* 1. 定位与布局 */position:relative;display:flex;z-index:10;/* 2. 盒模型 */width:100%;height:auto;margin:0;padding:20px;border:1px solid #ddd;/* 3. 视觉样式 */background:#fff;color:#333;box-shadow:0 2px 4pxrgba(0,0,0,0.1);/* 4. 文字排版 */font-size:16px;line-height:1.5;text-align:center;/* 5. 交互与动画 */cursor:pointer;transition:all 0.3s ease;}顺序原则定位与布局position,display,float,z-index盒模型width,height,margin,padding,border视觉样式background,color,box-shadow文字排版font,line-height,text-align交互与动画cursor,transition,transform省略不必要的单位/* ✅ 正确0 后面不需要单位 */margin:0;padding:0;/* ❌ 错误 */margin:0px;padding:0em;/* ✅ 正确小数点前的 0 可以省略 */opacity:.5;/* ✅ 正确但建议保留 0可读性更好 */opacity:0.5;引号使用/* ✅ 属性值包含空格时必须加引号 */.content::after{content:→ Read more;}/* ✅ 字体名称包含空格时必须加引号 */body{font-family:Microsoft YaHei,PingFang SC,sans-serif;}/* ✅ URL 通常不加引号加引号也可以*/background:url(image.png);background:url(image.png);/* 也可以 */动手练习练习 1修正格式错误的 CSS以下 CSS 有很多格式问题请找出并修正.Card{Background-Color:#FFFFFF;border:1px solid #ddd;PADDING:20PX;margin:0px;FONT-SIZE:16px;box-shadow:0px 2px 4pxrgba(0,0,0,0.1);}修正要点选择器小写属性名小写统一的缩进冒号后加空格0后面去掉px统一的分号格式练习 2颜色值转换将以下颜色在不同格式间转换原始值HexRGBHSL红色#ff0000rgb(255,0,0)hsl(0,100%,50%)橙色??hsl(30,100%,50%)深绿色#2ecc71??半透明蓝?rgba(52,152,219,0.7)?使用在线工具如 https://www.colorhexa.com验证你的答案在浏览器 DevTools 中修改颜色值观察变化练习 3按规范重写样式将以下混乱的 CSS 按本文学到的规范重写/* 原代码 */nav{display:flex;justify-content:space-between;align-items:center;padding:0 20px;background:#333;height:60px;}nav a{color:#fff;text-decoration:none;margin:0 15px;font-size:16px;}nav a:hover{color:#4a90d9;}.logo{font-size:24px;font-weight:bold;color:#4a90d9;}重写要求每个声明单独一行按定位→盒模型→视觉→文字→交互排序添加适当的注释统一缩进常见误区 ⚠️误区真相“CSS 属性名大小写无所谓”虽然不区分大小写但全部小写是行业标准“0px比0更明确”0就是0任何单位下都是零。写0px是多余的“注释越多越好”注释应该解释为什么而非是什么。过度注释会增加维护负担“代码格式不重要能跑就行”团队项目中格式不一致会严重降低代码可读性“颜色用名称最直观”颜色名称只有 147 个且名称模糊如darkgray比gray还浅。推荐用 Hex 或 HSL“em和rem是一回事”em相对于父元素字体大小rem相对于根元素(html)。在嵌套结构中会差异很大“百分比高度height: 100%总是生效”百分比高度需要父元素有确定高度否则可能不生效速查卡片 CSS 规则结构选择器 { 属性: 值; 属性: 值; }常用单位速查单位相对/绝对参考基准px绝对屏幕像素%相对父元素的对应属性rem相对根元素(html)的font-sizeem相对当前元素的font-sizevw相对视口宽度的 1%vh相对视口高度的 1%颜色表示法格式示例适用场景颜色名red快速测试、学习Hex#ff6600日常开发最常用RGBrgb(255,102,0)需要程序动态计算时RGBArgba(255,102,0,0.5)需要透明度时HSLhsl(24,100%,50%)需要调整色调/饱和度时HSLAhsla(24,100%,50%,0.5)需要透明度 易调整颜色代码格式 checklist选择器和属性名全小写每个声明单独一行冒号后加空格声明末尾加分号统一缩进2 或 4 个空格0后不加单位按顺序排列声明定位→盒模型→视觉→文字→交互大括号前后留空格扩展阅读MDN: CSS 语法MDN: CSS 值和单位Google CSS 样式指南英文CSS-Tricks: CSS 长度单位英文HSL 颜色解释器英文交互式学习下一步进入 第04篇基础选择器大全学习如何精准选中页面元素。
第03篇：CSS语法与注释规范
第03篇CSS语法与注释规范学会正确的 CSS 语法是写出可维护代码的第一步。看似简单的选择器 大括号背后有一套严谨的语法规则和最佳实践。本篇将带你系统掌握 CSS 的语法结构、合法值类型、以及专业的代码规范。学习目标掌握 CSS 规则的完整语法结构理解各种合法值类型长度、颜色、百分比等学会写清晰、有用的 CSS 注释了解 CSS 的大小写敏感规则和空白处理建立良好的代码格式习惯核心知识点一、CSS 规则的基本结构每一条 CSS 规则由三部分组成选择器{属性:值;}/* ↑ ↑ 选择器 声明块包含一条或多条声明 */完整示例拆解/* 选择器选中页面中所有 class 为 button 的元素 */.button{/* 声明 1背景颜色 */background-color:#4a90d9;/* 声明 2文字颜色 */color:#ffffff;/* 声明 3内边距 */padding:12px 24px;/* 声明 4边框圆角 */border-radius:6px;}术语对照表术语示例说明规则 (Rule).button { ... }完整的一条 CSS 规则选择器 (Selector).button指定样式作用于哪些元素声明块 (Declaration Block){ ... }包含在花括号中的所有声明声明 (Declaration)color: red;一条具体的样式设置属性 (Property)color要设置的样式特性值 (Value)red属性的具体设置多个选择器共享样式/* 用逗号分隔多个选择器 */h1, h2, h3{font-family:PingFang SC,sans-serif;color:#333;}/* 等效于分别写三条规则但更简洁 *//* h1 { font-family: PingFang SC, sans-serif; color: #333; } *//* h2 { font-family: PingFang SC, sans-serif; color: #333; } *//* h3 { font-family: PingFang SC, sans-serif; color: #333; } */一个选择器多条声明.card{/* 推荐每个声明单独一行 */background:white;border:1px solid #e0e0e0;border-radius:8px;padding:24px;margin-bottom:16px;}/* ❌ 不推荐全部挤在一行难以阅读 */.card{background:white;border:1px solid #e0e0e0;border-radius:8px;padding:24px;margin-bottom:16px;}二、CSS 中的合法值类型CSS 属性接受多种类型的值掌握这些类型是正确使用 CSS 的基础。1. 数值类型长度值 (Length).box{width:200px;/* 像素最常用的绝对单位 */height:50%;/* 百分比相对于父元素的百分比 */font-size:1.5rem;/* rem相对于根元素(html)字体大小 */padding:2em;/* em相对于当前元素的字体大小 */margin:2vw;/* vw视口宽度的百分比 (1vw 视口宽度的1%) */}单位类型说明px绝对像素点最常用%相对相对于父元素的对应属性rem相对相对于根元素(html)的字体大小em相对相对于当前元素的字体大小vw相对视口宽度的百分比vh相对视口高度的百分比ch相对数字0的宽度无单位数值.line{line-height:1.5;/* 无单位字体大小的倍数 */opacity:0.8;/* 0~1 之间的小数 */z-index:10;/* 整数 */flex-grow:1;/* 整数 */}⚠️注意line-height推荐用无单位数值如1.5不要用px或em。这样当字体大小变化时行高会自动按比例调整。2. 颜色值 (Color).color-demo{/* 颜色名称147个预定义名称*/color:red;background:cornflowerblue;/* Hex 十六进制 */color:#ff0000;/* 红色 */color:#f00;/* 简写形式 */color:#ff000080;/* 带透明度 (8位) *//* RGB / RGBA */color:rgb(255,0,0);color:rgba(255,0,0,0.5);/* 半透明红色 *//* HSL / HSLA更直观的颜色表示*/color:hsl(0,100%,50%);/* 色相0°、饱和度100%、亮度50% 红色 */color:hsla(120,50%,50%,0.8);/* 半透明绿色 */}HSL 颜色模型图解HSL(色相, 饱和度, 亮度) 色相 (Hue)0°~360° 0° 红色 120° 绿色 240° 蓝色 饱和度 (Saturation)0%~100% 0% 灰色 100% 纯正颜色 亮度 (Lightness)0%~100% 0% 黑色 50% 正常颜色 100% 白色建议日常开发用 Hex (#ff6600) 或 HSL (hsl(24, 100%, 50%))。需要调整透明度时用 RGBA/HSLA。3. 字符串值.quote::before{content:「;/* 用于 ::before/::after 插入内容 */}font-face{font-family:MyFont;/* 字体名称 */src:url(font.woff2);/* 字体文件路径 */}4. 函数值.calc-demo{/* calc()数学计算 */width:calc(100% - 40px);height:calc(50vh 20px);}.transform-demo{/* 变换函数 */transform:translateX(50px);transform:rotate(45deg);transform:scale(1.2);}.gradient-demo{/* 渐变函数 */background:linear-gradient(45deg,#ff6b6b,#4ecdc4);background:radial-gradient(circle,#fff,#000);}三、CSS 注释单行注释/* 这是单行注释 */.button{background:blue;/* 设置按钮背景为蓝色 */}多行注释/* * 这是多行注释 * 每行前面加 * 是可选的但这样更整齐 * 用于解释复杂的样式逻辑 */专业注释规范/* 区域划分注释大模块之间 *//* ------------------------------------------ 组件注释组件开头 ------------------------------------------ *//* 子模块名 ------------------------------------------ */.button{/* 基础样式 */display:inline-block;padding:10px 20px;/* 颜色 */background:#4a90d9;color:#fff;/* 边框 */border:none;border-radius:4px;/* 文字 */font-size:16px;cursor:pointer;}/* 按钮悬停状态 */.button:hover{background:#357abd;}/* 按钮禁用状态 */.button:disabled{background:#ccc;cursor:not-allowed;}注释黄金法则要写注释的情况不需要写注释的情况复杂的计算逻辑如calc()color: red这种显而易见的Hack 代码或兼容性处理标准属性的一般用法为什么这么写Why做了什么What代码本身已说明组件的用途和使用方法单纯重复代码内容的注释四、CSS 的大小写与空白规则大小写敏感规则/* 选择器通常用小写 */.Button{}/* ✅ 可以但不推荐 */.button{}/* ✅ 推荐 */.BUTTON{}/* ⚠️ 可以但别这样 *//* 类名和 ID 在 HTML 中区分大小写 *//* HTML: div classBtn 不会匹配 .btn *//* 属性名不区分大小写 */COLOR:red;/* ✅ 合法但别这样写 */color:red;/* ✅ 标准写法 */Color:red;/* ✅ 合法但不推荐 *//* 属性值大部分不区分大小写 */display:BLOCK;/* ✅ 合法 */display:block;/* ✅ 标准 */background:RED;/* ✅ 合法 */font-family:ARIAL;/* ✅ 合法但字体名通常区分大小写*/约定俗成选择器、属性名、属性值全部小写类名小写多个单词用短横线连接如.main-navID小写多个单词用短横线或下划线如#user-name空白处理/* ✅ 标准格式 */.selector{property:value;}/* ✅ 压缩格式生产环境 */.selector{property:value;}/* ❌ 不推荐 */.selector{property:value;}CSS 对空白不敏感字符串内部除外但为了可读性请遵循格式规范。五、代码格式最佳实践缩进与空格/* ✅ 推荐2个空格缩进 */.card{background:white;padding:20px;}/* ✅ 也可以4个空格缩进团队统一即可*/.card{background:white;padding:20px;}/* ❌ 不推荐Tab 缩进不同编辑器显示宽度不同*//* ❌ 不推荐混用空格和 Tab */声明顺序建议.component{/* 1. 定位与布局 */position:relative;display:flex;z-index:10;/* 2. 盒模型 */width:100%;height:auto;margin:0;padding:20px;border:1px solid #ddd;/* 3. 视觉样式 */background:#fff;color:#333;box-shadow:0 2px 4pxrgba(0,0,0,0.1);/* 4. 文字排版 */font-size:16px;line-height:1.5;text-align:center;/* 5. 交互与动画 */cursor:pointer;transition:all 0.3s ease;}顺序原则定位与布局position,display,float,z-index盒模型width,height,margin,padding,border视觉样式background,color,box-shadow文字排版font,line-height,text-align交互与动画cursor,transition,transform省略不必要的单位/* ✅ 正确0 后面不需要单位 */margin:0;padding:0;/* ❌ 错误 */margin:0px;padding:0em;/* ✅ 正确小数点前的 0 可以省略 */opacity:.5;/* ✅ 正确但建议保留 0可读性更好 */opacity:0.5;引号使用/* ✅ 属性值包含空格时必须加引号 */.content::after{content:→ Read more;}/* ✅ 字体名称包含空格时必须加引号 */body{font-family:Microsoft YaHei,PingFang SC,sans-serif;}/* ✅ URL 通常不加引号加引号也可以*/background:url(image.png);background:url(image.png);/* 也可以 */动手练习练习 1修正格式错误的 CSS以下 CSS 有很多格式问题请找出并修正.Card{Background-Color:#FFFFFF;border:1px solid #ddd;PADDING:20PX;margin:0px;FONT-SIZE:16px;box-shadow:0px 2px 4pxrgba(0,0,0,0.1);}修正要点选择器小写属性名小写统一的缩进冒号后加空格0后面去掉px统一的分号格式练习 2颜色值转换将以下颜色在不同格式间转换原始值HexRGBHSL红色#ff0000rgb(255,0,0)hsl(0,100%,50%)橙色??hsl(30,100%,50%)深绿色#2ecc71??半透明蓝?rgba(52,152,219,0.7)?使用在线工具如 https://www.colorhexa.com验证你的答案在浏览器 DevTools 中修改颜色值观察变化练习 3按规范重写样式将以下混乱的 CSS 按本文学到的规范重写/* 原代码 */nav{display:flex;justify-content:space-between;align-items:center;padding:0 20px;background:#333;height:60px;}nav a{color:#fff;text-decoration:none;margin:0 15px;font-size:16px;}nav a:hover{color:#4a90d9;}.logo{font-size:24px;font-weight:bold;color:#4a90d9;}重写要求每个声明单独一行按定位→盒模型→视觉→文字→交互排序添加适当的注释统一缩进常见误区 ⚠️误区真相“CSS 属性名大小写无所谓”虽然不区分大小写但全部小写是行业标准“0px比0更明确”0就是0任何单位下都是零。写0px是多余的“注释越多越好”注释应该解释为什么而非是什么。过度注释会增加维护负担“代码格式不重要能跑就行”团队项目中格式不一致会严重降低代码可读性“颜色用名称最直观”颜色名称只有 147 个且名称模糊如darkgray比gray还浅。推荐用 Hex 或 HSL“em和rem是一回事”em相对于父元素字体大小rem相对于根元素(html)。在嵌套结构中会差异很大“百分比高度height: 100%总是生效”百分比高度需要父元素有确定高度否则可能不生效速查卡片 CSS 规则结构选择器 { 属性: 值; 属性: 值; }常用单位速查单位相对/绝对参考基准px绝对屏幕像素%相对父元素的对应属性rem相对根元素(html)的font-sizeem相对当前元素的font-sizevw相对视口宽度的 1%vh相对视口高度的 1%颜色表示法格式示例适用场景颜色名red快速测试、学习Hex#ff6600日常开发最常用RGBrgb(255,102,0)需要程序动态计算时RGBArgba(255,102,0,0.5)需要透明度时HSLhsl(24,100%,50%)需要调整色调/饱和度时HSLAhsla(24,100%,50%,0.5)需要透明度 易调整颜色代码格式 checklist选择器和属性名全小写每个声明单独一行冒号后加空格声明末尾加分号统一缩进2 或 4 个空格0后不加单位按顺序排列声明定位→盒模型→视觉→文字→交互大括号前后留空格扩展阅读MDN: CSS 语法MDN: CSS 值和单位Google CSS 样式指南英文CSS-Tricks: CSS 长度单位英文HSL 颜色解释器英文交互式学习下一步进入 第04篇基础选择器大全学习如何精准选中页面元素。
