前端CSS样式详细笔记

文章目录一、CSS基础概念1. 什么是CSS2. CSS三大核心特性3. CSS基本语法结构二、CSS引入方式三、CSS选择器详解1. 基础选择器2. 组合选择器3. 属性选择器4. 伪类与伪元素四、选择器优先级规则1. 优先级计算方法2. 优先级实战示例3. 优先级注意事项五、CSS盒模型1. 盒模型组成2. 盒模型计算3. 外边距折叠六、CSS布局技术1. 浮动布局2. 定位布局3. Flexbox布局4. Grid布局七、CSS样式属性1. 文本样式2. 盒子样式3. 背景样式八、CSS高级特性1. 媒体查询响应式设计2. CSS动画与过渡3. CSS变量九、CSS最佳实践1. 代码规范2. 组织CSS技巧3. 调试CSS问题十、学习建议一、CSS基础概念1. 什么是CSSCSSCascading Style Sheets层叠样式表是一种用于描述HTML或XML文档外观的样式表语言核心作用控制网页元素的布局、颜色、字体、间距等视觉表现实现内容与样式分离2. CSS三大核心特性层叠性多个样式规则可以叠加应用根据优先级决定最终效果继承性子元素可以继承父元素的某些样式如字体、颜色等优先级当样式冲突时根据选择器权重决定应用哪个样式3. CSS基本语法结构/* 选择器 { 声明块 } */h1{color:#333;/* 属性: 值; */font-size:24px;/* 每个声明以分号结尾 */}选择器指定应用样式的HTML元素如h1、.class、#id声明块包含在大括号{}内的样式规则声明由属性和值组成的键值对格式为property: value;二、CSS引入方式引入方式语法示例优点缺点适用场景行内样式div stylecolor: red;优先级最高针对性强无法复用耦合度高临时调整单个元素内部样式表stylediv { color: red; }/style与HTML同文件便于调试文件臃肿不利于复用小型页面或临时测试外部样式表link relstylesheet hrefstyle.css样式与结构分离复用性强需额外加载文件项目开发首选import导入import url(another.css);可组织样式文件影响性能不推荐使用特定场景优先级规则行内样式 内部样式表 外部样式表后定义的覆盖先定义的三、CSS选择器详解1. 基础选择器元素选择器p { color: #333; }- 选择所有p元素优先级最低1分类选择器.text-red { color: red; }- 选择所有classtext-red的元素优先级10分ID选择器#header { background: #f5f5f5; }- 选择唯一idheader的元素优先级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; }精确匹配[typetext] { 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)、属性选择器([typetext])、伪类(: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.cssOOCSS面向对象CSS抽离通用样式为基类特殊样式为子类使用注释/* 导航栏样式 */提高代码可读性3. 调试CSS问题浏览器开发者工具检查元素、查看样式计算样式重置* { margin: 0; padding: 0; }消除浏览器默认样式差异优先级问题排查检查选择器优先级避免过度使用!important十、学习建议从基础开始先掌握选择器、盒模型、基本属性等核心概念多实践通过实际项目巩固知识尝试实现常见布局善用开发者工具Chrome DevTools等工具能帮助你快速调试和理解CSS关注最新规范CSS3新增了许多强大特性如Flexbox、Grid、动画等学习优秀代码分析GitHub上高质量项目的CSS实现方式CSS是Web前端开发的基石掌握好CSS能让你的网页更加美观、结构清晰、用户体验更佳。随着技术发展CSS的功能越来越强大值得深入学习和探索。