前端CSS样式详细笔记

一、CSS基础概念

1. 什么是CSS

• CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档外观的样式表语言
• 核心作用：控制网页元素的布局、颜色、字体、间距等视觉表现，实现"内容与样式分离"

2. CSS三大核心特性

• 层叠性：多个样式规则可以叠加应用，根据优先级决定最终效果
• 继承性：子元素可以继承父元素的某些样式（如字体、颜色等）
• 优先级：当样式冲突时，根据选择器权重决定应用哪个样式

3. CSS基本语法结构

/* 选择器 { 声明块 } */h1{color:#333;/* 属性: 值; */font-size:24px;/* 每个声明以分号结尾 */}

• 选择器：指定应用样式的HTML元素（如h1、.class、#id）
• 声明块：包含在大括号{}内的样式规则
• 声明：由属性和值组成的键值对，格式为property: value;

二、CSS引入方式

优先级规则：行内样式 > 内部样式表 = 外部样式表（后定义的覆盖先定义的）

三、CSS选择器详解

1. 基础选择器

• 元素选择器：p { color: #333; }- 选择所有<p>元素，优先级最低（1分）
• 类选择器：.text-red { color: red; }- 选择所有class="text-red"的元素，优先级10分
• ID选择器：#header { background: #f5f5f5; }- 选择唯一id="header"的元素，优先级100分
• 通配选择器：* { margin: 0; padding: 0; }- 选择所有元素，优先级最低

2. 组合选择器

• 后代选择器：div p { line-height: 1.5; }- 选择div内所有p元素（空格分隔）
• 子元素选择器：ul > li { list-style: none; }- 仅选择直接子元素（>分隔）
• 相邻兄弟选择器：h1 + p { margin-top: 0; }- 选择紧接在h1后的p元素（+分隔）
• 通用兄弟选择器：h1 ~ p { color: gray; }- 选择h1之后的所有p元素（~分隔）
• 并集选择器：h1, h2, .heading { font-family: Arial; }- 选择多个元素（,分隔）

3. 属性选择器

• 存在属性：[disabled] { opacity: 0.5; }
• 精确匹配：[type="text"] { border: 1px solid #ccc; }
• 包含特定值：[class~="active"] { background: #007bff; }
• 属性值开头匹配：[href^="https"] { color: green; }
• 属性值结尾匹配：[src$=".jpg"] { border-radius: 4px; }

4. 伪类与伪元素

• 伪类：匹配元素状态（以:开头）
  • a:hover { color: red; }- 鼠标悬停状态
  • li:nth-child(odd) { background: #f9f9f9; }- 选择奇数子元素
  • input:focus { outline: 2px solid blue; }- 获得焦点状态
• 伪元素：创建虚拟元素（以::开头）
  • .text::before { content: "★"; }- 在元素前添加内容
  • .text::after { content: "★"; }- 在元素后添加内容

四、选择器优先级规则

1. 优先级计算方法

• 优先级从低到高：元素选择器(个) < 类/伪类/属性选择器(十) < ID选择器(百) < 行内样式(千) <!important(最高)

• 计算方式：按"百、十、个"计数（如#main .container p= 1(ID) + 1(类) + 1(元素) = 111）

• 权重相同：当两个选择器的权重完全相同时，在 CSS 文件中后出现（或后加载）的那条规则会覆盖先出现的规则。

  等级	包含的选择器类型	分值 (权重)	备注
  A (百位)	ID 选择器(#id)	100	权重极高，通常不建议堆叠
  B (十位)	类选择器(.class)、属性选择器([type="text"])、伪类(:hover)	10	属性和类是平级的
  C (个位)	标签选择器(div,p)、伪元素(::before)	1	权重最低

2. 优先级实战示例

.text p{color:red;}/* 1(类)+1(元素) = 11 */div p{color:blue;}/* 2(元素) = 2 */#main p{color:green;}/* 1(ID)+1(元素) = 101 */

• 最终效果：.text p文字红色（优先级11 > 2）
• 同优先级规则：后声明的样式覆盖先声明的

3. 优先级注意事项

• 避免滥用!important：会破坏样式层级，难以维护
• ID选择器慎用：优先级过高，后期难以覆盖，且ID全局唯一无法复用
• 行内样式尽量少用：不利于样式复用和维护
• 样式合并：CSS 的样式合并是指浏览器将多条匹配规则中不冲突的属性进行叠加互补，而对冲突的属性则依据权重和源码顺序进行覆盖，最终计算出元素唯一应用样式的过程。CSS 的处理逻辑其实是“属性级”的，而不是“规则级”的。

五、CSS盒模型

1. 盒模型组成

• content：内容区域（文本、图片等）
• padding：内边距（内容与边框之间的空间）
• border：边框（围绕内容和内边距的边框）
• margin：外边距（边框与相邻元素之间的空间）

2. 盒模型计算

• 标准盒模型：元素总宽度 = 内容宽度 + padding + border + margin
• 怪异盒模型：元素总宽度 = 内容宽度（包含padding和border）
• 设置怪异盒模型：* { box-sizing: border-box; }

3. 外边距折叠

• 当两个垂直外边距相遇时，它们将合并为一个外边距，合并后的外边距等于两个外边距中较大的那个
• 解决方法：使用overflow: auto创建BFC（块格式化上下文）

六、CSS布局技术

1. 浮动布局

• 基本原理：float: left/right使元素脱离文档流，向左或向右浮动
• 清除浮动：使用clear: both或创建BFC（如overflow: auto）
• 应用场景：多列布局、文字环绕图片

2. 定位布局

• relative：相对定位，相对于自身原位置移动
• absolute：绝对定位，相对于最近的定位祖先元素移动
• fixed：固定定位，相对于视口定位，滚动页面时位置不变
• static：默认定位，遵循正常文档流

3. Flexbox布局

• 容器设置：display: flex，可设置justify-content、align-items等属性
• 项目设置：可设置flex-grow、flex-shrink、flex-basis等属性
• 优势：灵活控制子元素间距，实现复杂布局

4. Grid布局

• 容器设置：display: grid，可设置grid-template-columns、grid-template-rows等
• 项目设置：可设置grid-column、grid-row等属性
• 优势：二维布局，适合复杂网格结构

七、CSS样式属性

1. 文本样式

• 字体大小：font-size: 16px;（默认单位px）
• 字体颜色：color: #333;或color: red;
• 字体粗细：font-weight: bold;或font-weight: 700;
• 字体类型：font-family: "Arial", sans-serif;
• 文本对齐：text-align: center;（左、右、居中）

2. 盒子样式

• 宽高设置：width: 300px; height: 200px;
• 边框样式：border: 1px solid #ddd;
• 圆角设置：border-radius: 8px;
• 阴影效果：box-shadow: 0 2px 4px rgba(0,0,0,0.1);

3. 背景样式

• 背景颜色：background-color: #fff;
• 背景图片：background-image: url('bg.jpg');
• 背景重复：background-repeat: no-repeat;
• 背景位置：background-position: center;

八、CSS高级特性

1. 媒体查询（响应式设计）

/* 手机设备 */@media(max-width:767px){.container{width:100%;}}/* 平板设备 */@media(min-width:768px)and(max-width:1023px){.container{width:750px;}}/* 桌面设备 */@media(min-width:1024px){.container{width:1200px;}}

• 作用：根据不同设备尺寸应用不同样式，实现响应式网页设计

2. CSS动画与过渡

• 过渡效果：transition: color 0.3s ease;
• 关键帧动画：

@keyframesslide{0%{transform:translateX(0);}100%{transform:translateX(100px);}}.element{animation:slide 2s infinite;}

• 应用场景：按钮悬停效果、页面元素动态变化

3. CSS变量

:root{--primary-color:#007bff;--spacing:16px;}.button{background:var(--primary-color);padding:var(--spacing);}

• 优势：便于维护，实现样式统一

九、CSS最佳实践

1. 代码规范

• 展开式写法：比紧凑式更易读

/* 推荐 */.container{width:1200px;margin:0 auto;}/* 不推荐 */.container{width:1200px;margin:0 auto;}

• 统一小写：font-size而非FontSize
• 空格规范：冒号后加空格，选择器与{之间加空格

2. 组织CSS技巧

• 模块化设计：将样式按功能拆分（如_header.css、_footer.css）
• OOCSS（面向对象CSS）：抽离通用样式为基类，特殊样式为子类
• 使用注释：/* 导航栏样式 */提高代码可读性

3. 调试CSS问题

• 浏览器开发者工具：检查元素、查看样式计算
• 样式重置：* { margin: 0; padding: 0; }消除浏览器默认样式差异
• 优先级问题排查：检查选择器优先级，避免过度使用!important

十、学习建议

1. 从基础开始：先掌握选择器、盒模型、基本属性等核心概念
2. 多实践：通过实际项目巩固知识，尝试实现常见布局
3. 善用开发者工具：Chrome DevTools等工具能帮助你快速调试和理解CSS
4. 关注最新规范：CSS3新增了许多强大特性，如Flexbox、Grid、动画等
5. 学习优秀代码：分析GitHub上高质量项目的CSS实现方式

CSS是Web前端开发的基石，掌握好CSS能让你的网页更加美观、结构清晰、用户体验更佳。随着技术发展，CSS的功能越来越强大，值得深入学习和探索。