学习日记-CSS-day53-9.11
1.CSS介绍
知识点 | 核心内容 | 重点 |
CSS定义 | 层叠样式表，用于内容修饰和样式展现 | 英文全称cascading style sheets |
CSS作用 | 实现HTML内容与样式分离，提高开发效率 | 对比传统HTML元素单独设置样式的低效方式 |
学习建议 | 掌握常用功能即可，重点在打通前后端数据通道 | 与前端开发者的学习深度要求对比 |
CSS官方资源 | 包含基础/中级/高级教程、响应式设计等完整体系 | 离线手册使用技巧（Ctrl+滚轮缩放） |
样式分离优势 | 统一修改多元素样式，避免重复劳动 | 通过三个table案例说明维护效率差异 |
2.CSS快速入门
知识点 | 核心内容 | 重点 |
CSS基础语法 | style标签内定义CSS规则，通过选择器（如div）匹配HTML元素并设置样式属性（宽度、高度、背景色等） | 分号分隔多属性；最后属性分号可省略但建议保留 |
样式复用优势 | 集中定义样式后，所有匹配元素自动生效；修改样式属性可全局同步更新（如颜色、尺寸） | 传统方法（行内样式）VS CSS集中控制效率对比 |
常用CSS属性 | width、height、background-color的单位（如px）及写法规范 | 属性值必须带单位（如300px）；颜色值可用名称或十六进制代码 |
开发工具技巧 | 浏览器快捷键调整页面缩放（Ctrl+滚轮）；IDE报错提示（如缺少分号） | 分号缺失报错关键词：expected |
3.CSS语法
知识点 | 核心内容 | 重点 |
CSS基本语法结构 | 由选择器和声明两部分组成 | 选择器类型区分（元素/类/ID选择器） |
声明部分构成 | 属性+值组成，多个声明用分号分隔 | 最后一个声明分号可省略但建议保留 |
代码规范建议 | 每行只写一个属性声明 | 单行多属性写法虽有效但不推荐 |
调试技巧 | 通过修改颜色/大小验证样式生效 | 颜色调试法为实用经验 |
CSS注释写法 | /* 注释内容 */ 类似Java语法 | 与HTML注释<!-- -->区分 |
开发工具特性 | IDE自动格式化多属性为分行显示 | 格式化功能体现行业规范 |
4.字体颜色和边框
知识点 | 核心内容 | 重点 |
CSS颜色表示方法 | 三种指定颜色的方式： 1. 英文单词（如red）; 2. 16进制（如#00ff00）; 3. RGB三原色（如rgb(255,0,0)） | 16进制与RGB的书写格式差异; - 16进制需加#前缀; - RGB需用rgb()函数包裹 |
CSS边框属性 | border的复合写法： - 宽度（如1px）; - 样式（如solid/dashed）; - 颜色（如blue） | 样式关键字易混淆; - solid（实线） vs dashed（虚线） |
宽度/高度单位 | 支持两种单位： 1. 固定像素（如300px）; 2. 百分比（如50%） | 百分比单位的计算基准; - 相对于父容器尺寸 |
代码演示逻辑 | 1. 颜色切换示例（红→绿→自定义）; 2. 边框样式切换（实线→虚线）; 3. 响应式宽度（百分比动态调整） | 实操顺序影响理解; - 需先定义元素再添加样式 |
5.背景颜色和字体样式
知识点 | 核心内容 | 重点 |
背景颜色设置 | 使用background-color属性设置元素背景色 | 属性名是background-color而非background |
div基础样式 | 通过width和height设置元素尺寸 | 单位需统一使用px等标准单位 |
字体大小控制 | 使用font-size属性调整文字尺寸 | 注意浏览器默认字体大小差异 |
字体粗细设置 | 通过font-weight:bold实现粗体效果 | 需区分bold与数值(700等)的等效性 |
字体类型指定 | 用font-family设置字体族(如微软雅黑) | 字体可用性依赖用户本地安装 |
边框基础样式 | border:1px solid black三要素组合 | 顺序/单位/颜色值的规范写法 |
CSS选择器应用 | 通过元素选择器(如div)定位目标元素 | 类选择器与ID选择器的优先级差异 |
6.div和文本居中
知识点 | 核心内容 | 重点 |
div居中 | 使用margin-left: auto; margin-right: auto;实现div水平居中 | 注意与text-align: center的区别（后者仅控制文本） |
文本居中 | 使用text-align: center属性控制文本水平对齐 | 可替换为left/right实现不同对齐方式 |
自适应特性 | 居中的div会随页面宽度变化自动保持居中位置 | 需理解auto值的自适应计算原理 |
7.超链接去下划线和表格细线
知识点 | 核心内容 | 重点 |
超链接去下划线 | 使用CSS的text-decoration: none属性去除超链接默认下划线 | text-decoration属性值理解（none/underline/overline等） |
表格细线控制 | 通过组合选择器统一设置table, tr, td的边框样式，配合border-collapse: collapse消除间隙 | 组合选择器优先级 vs 单独选择器 |
CSS组合选择器 | 使用逗号分隔的多元素选择器实现样式复用（如table, tr, td） | 选择器作用范围与样式继承关系 |
8.无序列表去掉样式
知识点 | 核心内容 | 重点 |
列表去修饰 | 使用list-style: none去除无序列表默认符号 | 区分有序列表和无序列表的默认样式差异 |
CSS样式应用 | 通过<style>标签内联样式控制列表显示 | 内联样式与外部样式表的优先级比较 |
实际开发案例 | 京东首页大量使用ul/li结构但隐藏默认符号 | 电商网站导航结构的实现方式 |
代码演示 | ul { list-style: none }完整实现代码 | 不同浏览器对列表样式的兼容性处理 |
9.CSS使用方式(1) 行内样式
知识点 | 核心内容 | 重点 |
CSS的三种使用方式 | 行内样式(style属性直接设置) | 代码臃肿 vs 外部样式表的维护性 |
行内样式示例 | <div style="width:300px; height:100px; background-color:#color"> | 分号分隔多个样式属性 |
行内样式缺点 | 代码量大、可读性差、维护困难(需逐个修改相同样式) | 修改背景色需改动多处代码 |
样式复用场景 | 相同样式需在多个元素重复定义 | 与外部样式表的DRY原则对比 |
10.CSS使用方式(2) head标签style指定
知识点 | 核心内容 | 重点 |
CSS的第二种使用方式 | 在head标签中使用style标签定义CSS样式 | style标签必须包含type属性 |
样式定义方法 | 通过选择器(如div、span)统一管理多个元素的样式 | 选择器优先级问题 |
div元素样式 | 设置宽度(300px)、高度(100px)、背景色 | 像素单位与百分比单位的区别 |
span元素样式 | 使用border属性设置边框(1px solid red) | border简写属性顺序 |
内联样式与内部样式表对比 | 内部样式表更方便统一管理多个元素 | 样式优先级：内联 > 内部 > 外部 |
11.CSS使用方式(3) 引入外部CSS文件
知识点 | 核心内容 | 重点 |
CSS外部引入方式 | 通过<link>标签引入独立CSS文件 | rel属性必须写 vs type属性可选 |
link标签属性 | rel="stylesheet"表示关联样式表; href指定CSS文件路径 | relation单词拼写与缩写(rel) |
路径引用方式 | 支持相对路径和绝对路径 | 京东案例展示完整域名路径 |
多文件引入 | 可重复使用link标签引入多个CSS文件 | 样式叠加时的优先级问题 |
开发实践建议 | 实际开发推荐外部引入方式; 教学演示常用内联样式(style标签) | 开发与教学的差异点 |
12.CSS元素选择器
知识点 | 核心内容 | 重点 |
CSS选择器 | 元素选择器（如div、h1、p等）是最基础的选择器，直接匹配HTML元素 | 优先级规则（元素选择器 vs 其他选择器） |
元素选择器特点 | 修饰所有匹配的HTML元素（如所有h1统一应用样式） | 作用范围全局性 vs 其他选择器的局部性 |
CSS应用方式 | 示例中使用内嵌样式（第二种方式），实际开发推荐外部样式表（第三种方式） | 开发规范与实际场景差异 |
选择器优先级对比 | 元素选择器优先级低于类选择器/ID选择器 | 权重计算规则（!important > 行内 > ID > 类 > 元素） |
13.ID选择器
知识点 | 核心内容 | 重点 |
ID选择器定义 | 为特定ID的HTML元素指定样式，通过#定义 | 与元素选择器的区别：ID唯一性 vs 元素选择器的全局性 |
ID选择器语法 | #id值 {样式规则}，需先在元素标签中定义id="自定义值" | 需注意：ID值不能重复，否则报错（duplicated ID） |
使用场景 | 需对单个元素个性化修饰时使用（如仅修改某一h1标签样式） | 对比：元素选择器会修饰所有同类标签 |
优先级冲突 | 未直接解答，但暗示ID选择器优先级高于元素选择器（需后续讲解） | 易混淆点：多选择器共存时的样式覆盖规则 |
代码示例 | 通过#css1 {color: gold}和#css2 {color: green}演示差异化样式 | 关键细节：ID值需与代码中的定义严格匹配（区分大小写） |
14.类选择器
知识点 | 核心内容 | 重点 |
类选择器（Class Selector） | 通过class属性选择并统一修饰一组元素，语法为.class名 {样式} | 与ID选择器（唯一性）和元素选择器（全局性）的区别 |
元素选择器（Element Selector） | 通过标签名（如div）全局修饰所有同类元素 | 无法针对性修饰部分元素 |
ID选择器（ID Selector） | 通过id属性唯一修饰单个元素，语法为#id名 {样式} | id不可重复，与class的复用性对比 |
选择器应用场景对比 | 唯一修饰用ID，全局修饰用元素选择器，部分修饰用类选择器 | 三类选择器的优先级问题（ID > Class > Element） |
类选择器实操示例 | 1. 元素添加class属性（如class="css1"）; 2. 样式表中定义.css1 {color: pink;} | 类名可重复使用，需用.前缀声明 |
15.组合选择器
知识点 | 核心内容 | 注意事项 | 应用示例 |
组合选择器 | 让多个选择器共用同一CSS样式，语法为选择器1, 选择器2 {属性:值} | 需用逗号分隔选择器，且各选择器需符合原有命名规范（如类选择器用.，ID选择器用#） | div.class01, #id01 {width:300px; border:1px solid red} |
样式复用优势 | 避免重复代码，类似面向对象的继承思想（共通用父类，差异单独写） | 与单独写多段样式对比：维护性差（需同步修改多处） | 表格案例中class01和id01共用宽/高/边框样式 |
优先级问题 | 未展开讲解，但提示后续会分析元素/类/ID选择器的优先级规则 | 需注意组合选择器内部各选择器的优先级仍独立计算 | “元素同时有元素/类/ID选择器时需判断优先级” |
16.选择器的优先级
知识点 | 核心内容 | 重点 |
CSS选择器优先级规则 | 行内样式 > ID选择器 > 类选择器 > 元素选择器 | 优先级与代码书写顺序无关，需通过权重计算判定 |
行内样式演示 | 通过style属性直接定义（如color: red），优先级最高 | 即使存在ID/类选择器，仍优先生效 |
ID选择器演示 | 通过#id定义（如#id1 { color: yellow }），优先级次之 | 需注意与类选择器的权重差异（ID权重更高） |
类选择器演示 | 通过.class定义（如.class1 { color: green }），优先级低于ID | 易与元素选择器混淆（类选择器权重更高） |
元素选择器演示 | 通过标签名定义（如div { color: brown }），优先级最低 | 常作为基础样式，易被其他选择器覆盖 |
动态验证案例 | 通过逐步移除不同选择器，观察样式变化验证优先级 | 关键结论：行内 > ID > 类 > 元素（与顺序无关） |
17.CSS练习
知识点 | 核心内容 | 重点 |
CSS基础概念 | CSS指层叠样式表（Cascading Style Sheets） | 外部样式表引用方法（<link>标签） |
外部样式表引用 | 通过<link>标签在HTML的<head>部分引用 | type属性可省略，href必须存在 |
内部样式表定义 | 使用<style>标签在HTML中定义 | 与行内样式（style属性）易混淆 |
行内样式（内联样式） | 通过元素的style属性直接定义 | 优先级高于外部和内部样式表 |
CSS语法规则 | 选择器 + 声明块（如body { color: red; }） | 元素选择器（如h1）与类/ID选择器区别 |
CSS注释 | 使用/* 注释内容 */ | 与HTML注释（<!-- -->）区分 |
背景颜色控制 | background-color属性 | 与文本颜色（color）属性区分 |
文本样式控制 | color（颜色）、font-size（尺寸）、font-weight（粗体） | font-weight: bold与<strong>标签效果差异 |
超链接样式 | text-decoration: none去除下划线 | 需覆盖浏览器默认样式 |
边框定制化 | border-width按上、右、下、左顺时针顺序定义 | 多值语法（如10px 1px 5px 20px） |
边距与间距 | margin-left控制左边距，padding定义内容与边框间距 | padding不支持负值 |
列表样式 | list-style-type定义项目符号（如square） | 与无序列表（<ul>）默认样式对比 |
CSS优先级 | 行内样式 > 内部样式 > 外部样式 | !important强制覆盖规则 |
实践方法论 | 通过案例测试CSS属性效果（如边框宽度顺序验证） | 灵活运用开发者工具调试 |