CSS 常用语法详解
CSS（Cascading Style Sheets，层叠样式表）用来给 HTML 页面设置样式：颜色、大小、布局、间距等。
核心语法结构：选择器 { 属性: 值; 属性: 值; }
一、基础语法格式
选择器 {
属性名: 属性值;
属性名: 属性值;
}示例：
p {
color: red; /* 文字颜色：红色 */
font-size: 16px; /* 字体大小：16像素 */
}p：选择器 ，选中页面里所有<p>标签color：属性，要修改的样式项red：属性值，属性对应的参数;：每条样式结束符，最后一条可以省略，建议都写上/* 注释内容 */：CSS注释，不会被浏览器解析
二、CSS 三种引入方式
1. 外部样式表（推荐，项目常用）
单独 .css 文件，HTML 通过 <link> 引入
<link rel="stylesheet" href="style.css">2. 内部样式表（写在HTML页面内）
放在 <head> 的 <style> 标签中
<style>
div { margin: 10px; }
</style>3. 行内样式（优先级最高，不推荐大量使用）
直接写在标签 style 属性
<div style="color:blue;">文字</div>优先级（从高到低）：行内样式 > ID选择器 > 类选择器 > 标签选择器
三、常用选择器（重点）
1. 标签选择器
直接写标签名，选中页面所有该标签
div { background: #eee; }2. 类选择器 .
. 开头，给标签加 class，一个标签可以多个class
.box { width: 200px; }
<div class="box"></div>3. ID选择器 #
# 开头，对应标签 id，一个页面id唯一
#header { height: 60px; }
<div id="header"></div>4. 通配符选择器 *
选中页面所有元素，常用于初始化样式（重置margin/padding）
* { margin: 0; padding: 0; box-sizing: border-box; }5. 后代选择器（空格分隔）
选中父元素内部所有后代元素
ul li { color: #333; }6. 子代选择器 >
只选中直接子元素，不包含孙子元素
.wrap > p { font-weight: bold; }7. 并集选择器 ,
多个选择器共用一套样式，逗号分隔
h1,h2,h3 { font-family: "Microsoft Yahei"; }四、高频常用属性
1. 文字相关
color: #333; /* 文字颜色，支持单词/十六进制/rgb */
font-size: 14px; /* 字体大小 */
font-family: "微软雅黑"; /* 字体 */
font-weight: bold; /* 字重：bold加粗 / normal正常 */
text-align: center; /* 文本对齐 left / center / right */
line-height: 1.5; /* 行高，设置文字垂直居中常用 */
text-decoration: none; /* 文字下划线 none去掉下划线，underline添加 */2. 盒子模型（CSS核心）
盒子四部分：
content内容区→padding内边距→border边框→margin外边距
width: 300px;
height: 200px;
padding: 10px; /* 内边距：内容和边框之间距离 */
border: 1px solid #ccc; /* 边框：粗细 样式 颜色 */
margin: 20px; /* 外边距：盒子和其他盒子距离 */
box-sizing: border-box; /* 边框盒：width包含border+padding，开发必加 */简写规则（顺时针：上 右 下 左）
margin: 10px 20px; /* 上下10，左右20 */
margin: 10px 20px 30px; /* 上10，左右20，下30 */3. 背景
background-color: #f5f5f5; /* 背景色 */
background-image: url("bg.jpg"); /* 背景图片 */
background-repeat: no-repeat;/* 是否平铺 no-repeat不平铺 */
background-position: center;/* 背景图位置 */
background-size: cover; /* 覆盖容器，图片可能裁切 */4. 显示与隐藏
display: block; /* 块级元素，独占一行，可设宽高 */
display: inline; /* 行内元素，不能设置宽高 */
display: inline-block;/* 行内块，同行显示，可设宽高 */
display: none; /* 元素完全隐藏，不占页面空间 */
visibility: hidden;/* 隐藏元素，保留原来占位空间 */5. 浮动 float（老布局，现在优先flex）
float: left; /* 元素向左浮动，脱离文档流 */
clear: both; /* 清除浮动 */6. Flex 弹性布局（现代布局首选）
给父容器设置 display:flex，子元素自动变成弹性项目
.flex-box {
display: flex;
justify-content: center; /* 水平方向：center居中 / space-between两端对齐 */
align-items: center; /* 垂直方向居中 */
gap: 10px; /* 子元素之间间距 */
}7. 定位 position
position: static; /* 默认，正常文档流 */
position: relative; /* 相对定位，相对于自身原来位置，占位保留 */
position: absolute; /* 绝对定位，相对于最近非static父元素，脱离文档流 */
position: fixed; /* 固定定位，相对于浏览器窗口，滚动页面位置不变 */
top: 0;
left: 0;五、单位
px：像素，固定尺寸%：百分比，相对于父元素rem：相对于根标签(html)字体大小，移动端适配常用em：相对于当前元素字体大小vw/vh：视口单位，1vw = 视口宽度1%
六、层叠（Cascade）& 权重
样式冲突时，浏览器按权重计算：
- 行内样式：1000
- ID选择器：100
- 类/伪类：10
- 标签选择器：1
- 通配符：0
!important 权重最高，慎用
div { color: red !important; }七、伪类、伪元素
伪类：元素状态 ，:
a:hover { color: orange; } /* 鼠标悬浮 */伪元素：创建虚拟元素，::
p::before { content: "★"; } /* 在p前面插入内容 */