导图社区 Web前端基础Day03
这是一个关于Web前端基础Day03的思维导图，包含CSS选择器、CSS字体，文本属性等。
这是一个关于Web前端基础Day19的思维导图，包含网格布局的基本概念、容器属性、项目属性等。
这是一个关于Web前端基础Day18【项目】响应式的思维导图，复习PC端和移动端开发、 响应式开发等。
这是一个关于Web前端基础Day17的思维导图，包含transform 转换(变化)、animate动画库等。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
Day03
1、CSS选择器
1.1、基础选择器
1.1.1、通配符（通用）选择器
语法：*{ 样式声明; }
作用：匹配页面中所有的HTML元素
1.1.2、元素名称选择器
语法：元素名称 { 样式声明; }
作用：选择所有同一元素名称的所有元素
1.1.3、class（类）选择器
语法： HTML: <标签名 class="类名"></标签名> CSS: .类名{ 样式声明； }
类名的命名规范： 1、 见名知意，可以采用多个单词组合的形式 驼峰式（offcnLogo） 中划线连接（offcn-logo） 下划线连接（offcn_logo） 2、 可以包含数字、字母、中划线、下划线 3、 不能包含除中划线、下划线以外的其他特殊字符 4、 不能以数字开头 5、 区分大小写
注意： 可以使用词列表（同一个元素可以添加多个类名，多个类名之间空格隔开） 同一个页面中class可以重复使用（class相当于是人名，可以重名的
作用:选择所有带有指定类名的元素
1.1.4、id选择器（具有唯一性）
语法：HTML: <标签名 id="id名称"></标签名> CSS: #id名称{ 样式声明； }
注意： id具有唯一性，一般用于页面中唯一的元素身上，搭配js使用 同一个页面中相同的id名称只能使用一次（id相当于身份证号） id不可以使用词列表 不能使用词列表、不同使用相同的id名称 id名称命名规范同class
【笔试题】class选择器与id选择器的区别
语法不同： class是以.标识，id是以#标识
使用频率不同： class使用较频繁，id具有唯一性，同一个页面中同一id只使用一次，配合js来使用
class可以使用词列表，id不能使用词列表的
同一个页面中相同的class名称可以出现多次，id不可以的
1.1.5、优先级：id>class>标签>通配符
1.1.6、总结
总结使用频率 基础选择器中最常用是类选择器 id用于页面中唯一模块 元素名称选择器定义的全局样式，单独使用要慎重 *号通常用于重置样式【最不常用】
总结id与类的区别 基础选择器的优先级
3、复合选择器
概述：由两个或多个基础选择器通过不同的方式组合而成的选择器
3.1、后代元素选择器
语法：E F { 样式声明; }
【空格】连接一个或多个选择器
作用： 选择E元素内部包含的所有F元素
3.2、子元素选择器
语法：E > F { 样式声明; }
描述：【大于】号 连接一个或多个选择器
作用： 选择E元素内部包含的所有直接子元素F（第一嵌套层级）
3.3、相邻选择器
语法：E + F { 样式声明; }
描述：【加号】连接一个或多个选择器
作用： E元素之后紧跟着的兄弟元素F
3.4、交集选择器
语法：E.F { 样式声明; }
描述：【无连接符】
作用：选择同时被所有选择器交集选中的元素
3.5、并集选择器
语法：E，F { 样式声明; }
描述：【逗号】连接一个或多个选择器
作用： 使用逗号分隔的列表来对选择器进行分组，给列表中每一个选择器选中的元素设置样式
3.6、伪类选择器
a:link{ css样式 } //链接未被访问
a:visited{ css样式 } //链接被访问过后
a:hover{ css样式 } //链接被鼠标悬停
a:active{ css样式 } //链接被激活（鼠标按下不抬起时）
总结： 注意书写顺序 l-h-v-a 实际工作中最常用的是:hover 可以与其它选择器结合灵活使用
2、CSS字体 ，文本属性
2.1、font-family设置文本的字体类型
语法：font-family:字体名称；
常用值： 一个字体名称或系列名称（介绍常用字体名称、字体系列） 微软雅黑 Microsoft YaHei 宋体 SimSun 黑体 HeiTi 楷体 KaiTi 多个字体名称 逗号分开 如果浏览器不支持第一个字体，则会尝试下一个（回退机制）
注意:如果字体名称包含空格、汉字、特殊字符，必须加引号!
2.2、font-size：设置字体的大小
语法：font-size:值；
常用值： 长度值（通常是像素px） 百分比（相对于父元素计算） 相对单位：em用于字号，相当于父元素字号计算，用于其它属性，相对于当前元素的字号 rem相对于根元素的font-size来计算的 大多数浏览器的默认值字号：16px；浏览器最小字号是12px；字号为0时文字消失。
2.3、font-style：设置字体的风格
normal 正常【常用于去掉标签自带的样式】 例：em，i，strong，b，h1-h6，th等等 italic 斜体显示（倾斜）
2.4、font-weight：设置文字的粗细
normal 正常（400） bold 加粗（700） 100-900
2.5、font简写：设置所有字体属性
语法：font: 字体风格 字体加粗 字号/行高 字体；
总结：只有当【字号和字体】同时存在简写才是有效的，简写属性可以精简代码
2.6、line-height：设置行高（效果是产生文本行间距）
语法：line-height:值；
特性：实现单行文本的垂直居中 测量：文字高+行间距
常用值： normal 合理的行高 px 绝对长度单位（像素） 相对单位：数字 数字乘以当前文字的高度得到的结果就是行高的值 % 相对于当前元素的font-size来计算的 rem 相对于根元素的font-size来计算的 em 相对于当前元素的font-size来计算的
2.7、text-align：设置文本的水平对齐方式
语法：text-align:值；
常用值 left居左对齐 [默认值] right居右对齐 center居中对齐 justify两端对齐
注意：适用于块状元素
2.8、text-decoration：设置文本装饰
语法：text-decoration:值；
常用值 none 默认。定义标准的文本。 【常用】 underline 定义文本下的一条线 【常用】 line-through 定义穿过文本的一条线。【比较常用】 overline 定义文本上的一条线。 【不常用】
2.9、text-indent：设置文本块首行的缩进
语法：text-indent:值；
常用值 默认值：0 长度值，px,em(更方便) 百分比: 相对于元素内容宽进行计算 允许负值
2.10、color：设置文字的颜色
语法：color:颜色值；
常用值： 1、 颜色名称：如red、blue等 2、十六进制颜色表示方法 3、rgb颜色表示方法
2.11、文本属性继承性
简单渗透:字体文本属性大多具有继承性。 可继承的属性 font-size font-family font-style font-weight font line-height text-align text-indent color
不可继承 text-decoration(穿透性)
