这是我参与第五届青训营伴学笔记创作活动的第八天!
CSS是什么？
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
CSS标准流是什么？
又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。
文本水平对齐方式：
- 属性名：text-align 属性值：left center right
- 垂直居中：line-height
可以使哪些元素水平居中？
- 文本 span、a标签 input标签、img标签
- 如果需要元素水平居中 需要给其元素的父元素加属性text-align
文本修饰线：
- 属性名：text-decoration
- 取值：underline下划线 line-through 删除线 overline上划线 none无装饰线
- 常常使用text-decoration：none；清除a标签默认的下划线
复合选择器
- 1.后代选择器 选择父元素后代中满足条件的元素 语法：选择器1 空格 选择器2{css} 用空格隔开
- 2.子代选择器 只选中儿子选择器 选择父元素子代中满足条件的元素
- 选择器1>选择器2{css} 用>间隔开
- 3.并集选择器 同时选择多组标签 设置相同的样式
- 语法：选择器1，选择器2{css} 每组选择器可以是基础选择器也可以是复合选择器，每组选择器用逗号隔开
- 4.交集选择器 同时满足多个选择器的标签
- 语法：选择器1选择器2{css} 结果能找到被选择器1又被选择器2选中的标签 中间没有东西分隔
- 且交集选择器中如果有标签选择器，标签选择器必须写在最前面
- 5.hover伪类选择器 为鼠标悬停在元素上的状态设置样式 语法：选择器：hover{css}
元素的显示模式：
- 1.块级元素
- 显示特点：独占一行 宽度默认是父元素的宽度 高度默认由内容撑开 可以设置宽高
- 代表标签 div p h系列 ul li dd dt dl form header nav footer
- 2.行内元素
- 显示特点：一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高 代表：a，span等等
- 3.行内块元素
- 显示特点：一行可以显示多个 可以设置宽高 例如：input img textarea等
元素显示模式转换：
- 1.display：block 转换成块级元素
- 2.display：inline-block 转换成行内块
- 3.display：inline 转换成行内元素
嵌套规范：
- 1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等
- p标签中不要嵌套div、p、h等块级元素
- 2.a标签内部可以嵌套任何元素
CSS特性：
- 1.继承性：子元素默认继承父元素的样式 文字控制属性都可以继承，但要注意如果它本身有默认的样式则不会继承，比如a标签
2.层叠性：前提是优先级相同时
- 给同一个标签设置不同的样式，样式会层层叠加，共同作用于标签上
- 给同一个标签设置相同的样式，样式会叠叠覆盖，写在最后的才会生效
3.优先级：
- 选择器所选的范围越小，优先级越高。
- 从小到大依次为：继承 通配符 标签 类 id 行内 ！important
- 注意important写在属性值的最后面 分号的前面 且不能提升继承的优先级 设置important相当于此选择器为最高级
- 权重叠加计算(复合选择器)：
- 首先判断是否为继承，是否有important，继承优先级最低 如果同样都为继承 最近的父级是什么则为什么颜色
- 有important则为最高 不用比较 但如果important加在继承选择器上，依然为最低
- 比较顺序为(行内个数,id选择器个数,类选择器个数,标签选择器个数) 是不同的复合选择器去比较！
- 如果第一个比较之后有结果 则结束；相同则继续；所有数字都相同则比较层叠性
