CSS3知识体系思维导图（手工整理）

CSS3知识体系思维导图 CSS3是当前Web开发中最流行的样式表语言之一，对网页的布局、美化和交互效果产生了极大的影响。本文旨在梳理CSS3的知识体系，通过构建CSS3知识树，帮助开发者对CSS3的知识体系有更清晰的认知。 一、 CSS3概述 CSS3是层叠样式表语言的第三代版本，主要用于描述网页的样式和布局。CSS3的作用可以归结为两大类：布局和美化页面。布局方面，CSS3可以控制网页的结构和排版，美化页面方面，CSS3可以设置字体、颜色、背景等样式。 二、 语法规则 CSS3的语法规则可以分为三种：内嵌式、外联式和行内式。内嵌式写在style标签中，外联式写在单独一个.CSS文件中，但需要link标签在网页引入。行内式写在标签的style中，使用有限。 三、 选择器 选择器是CSS3中最重要的概念之一，用于选中HTML标签，并设置样式。基础选择器包括标签选择器、类选择器、id选择器和通配符选择器。 * 标签选择器：直接选中HTML标签，例如`p{}`。 * 类选择器：选中拥有相同类名的标签，例如`.class{}`。 * id选择器：选中拥有相同id的标签，例如`#id{}`。 * 通配符选择器：选中所有HTML标签，例如`*{}`。 四、 字体和文本样式 字体和文本样式是CSS3中最重要的样式之一，用于设置字体、字号、字体粗细、字体样式等。 * 字体样式：字体大小font-size，单位：像素px，默认16px。 * 字体组：font-widget，正常：400px，加粗：700px。 * 字体样式：font-style，是否倾斜normal、italic。 * 字体类型：font-family， 一般使用无衬线字体，如黑体、Arial。 * 文本样式：文本缩进text-indent，取值数字+px或数字+em。 * 文本水平对齐方式：text-align，左对齐left、居中对齐center、右对齐right。 * 文本修饰：text-decoration，下划线underline、无装饰线none、删除线line-through、上划线overline。 五、 行高作用 行高作用用于控制一行的上下间距，line-height取值数字+px或倍数，当前font-size的倍数。应用让单行文本垂直居中可以设置line-height：文字父元素高度。 六、 颜色属性名 颜色属性名用于设置文字颜色和背景颜色。 * 文字颜色：color。 * 背景颜色：background-color。 * 属性值：rgb表示法、十六进制表示法。 七、 高级选择器 高级选择器包括后代选择器、子代选择器、并集选择器、交集选择器和伪选择器。 * 后代选择器：选择器1 选择器2{}。 * 子代选择器：选择器1 > 选择器2{}。 * 并集选择器：选择器1，选择器2{}。 * 交集选择器：选择器1选择器2{}。 * 伪选择器：hover{}，作用：选中鼠标悬停在元素上的状态，设置样式。 八、 背景属性 背景属性用于设置背景颜色、背景图片、背景平铺和背景位置。 * 背景颜色属性名：background-color(bgc)。 * 背景图片属性名：background-image(bgi)。 * 背景平铺属性名：background-repeat(bgr)。 * 背景位置属性名：background-position(bgp)。 九、 盒子模型 盒子模型是CSS3中最重要的概念之一，用于描述页面中每一个标签的结构。盒子模型组成内容区域（content）、内容距区域（padding）、边框区域（border）和外边距区域（margin）。 * 尺寸属性名：width/height。 * 边框单方向设置：border-方位名词。 * 边框粗细：border-width。 * 边框样式：border-style。 * 边框颜色：border-color。 十、盒模型手动内建自动内建 盒模型手动内建自动内建用于给盒子设置属性，box-sizing：border-box；即可。其他清楚默认内外边距，浏览器会默认给部分标签设置默认margin和padding。 十一、 CSS特性 CSS特性包括继承性、层叠性和权重叠加计算。 * 继承性：子元素默认继承父元素样式的特点。 * 层叠性：相同样式，会层叠覆盖。 * 权重叠加计算：使用场景：复合选择器。 CSS3知识体系思维导图旨在帮助开发者对CSS3的知识体系有更清晰的认知，掌握CSS3的基础知识和高级知识，可以更好地应用于Web开发中。