学习日记-CSS-day53-9.11
约 1960 字
预计阅读 4 分钟
学习日记-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样式应用 | 通过 |
