CSS基础知识第二篇
CSS基础知识
- 复合选择器
- 后代选择器
- 子元素选择器
- 交集选择器
- 并集选择器
- 伪类选择器
- 行高
- 单行文本垂直居中
- 行高和高度的三种关系
- 标签显示模式
- 什么是标签显示模式
- 块级元素
- 行内元素
- 行内块级元素
- 标签显示模式转换
- CSS特性
- 层叠性
- 继承性
- 优先级
- CSS背景
- 背景颜色
- 背景图片
- 背景平铺
- 背景位置
- 背景附着
- 背景简写
- 背景透明
- CSS注释
复合选择器
后代选择器
概念
后代选择器又称为包含选择器
语法
.class h3{color:red;font-size:16px;}
作用
用来选择元素或元素组的子孙后代
把外层标签写在前面，内层标签写在后面，中间用空格分隔
子元素选择器
语法
.class>h3{color:red;font-size:14px;}
作用
子元素选择器只能选择作为某元素子元素(亲儿子)的元素
把父级标签写在前面子级标签写在后面中间跟一个>连接
交集选择器
条件
由两个选择器构成，找到的标签必须满足：既有标签一的特点也有标签二的特点
语法
第一个为标签选择器第二个为class选择器，二者间不能有空格
并集选择器
并集选择器是各个选择器通过 , 连接而成的，通常用于集体声明
应用
某些选择器定义的相同样式可利用并集选择器，让代码更简洁
语法
并集选择器用逗号隔开的，所有选择器都会执行后面样式
伪类选择器
作用
用于向某些选择器添加特殊的效果。如给链接添加特殊效果
链接伪类
a:link /* 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 */
行高
基线和基线的距离为行高
单行文本垂直居中
文字的行高等于盒子的高度，行高 = 上距离 + 内容高度 + 下距离
行高和高度的三种关系
如果行高等于高度文字会垂直居中
如果行高大于高度文字会偏下
如果行高小于高度文字会偏上
标签显示模式
什么是标签显示模式
标签以什么方式进行显示，比如div自己占一行， span一行多个
作用
网页标签非常多不同地方用不同类型的标签以便更好的完成网页
分类
块级元素
特点
一行只能放一个块
高度，宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素
行内元素
特点
相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素
注意
链接里面不能再放链接
特殊情况a里面可以放块级元素
行内块级元素
特点
和相邻行内元素在一行上,但是之间有空白缝隙，一行可显示多个
默认宽度就是它本身内容的宽度
高度，行高、外边距以及内边距都可以控制
标签显示模式转换
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
CSS特性
层叠性
概念
层叠性是指多种CSS样式的叠加
原则
样式冲突，遵循的原则是就近原则
样式不冲突，不会层叠
继承性
概念
子标签会继承父标签的某些样式，如文本颜色和字号
优先级
概念
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时
选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题
权重计算公式
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity
权重叠加
交集选择器后代选择器是有多个基础选择器组合而成，会出现权重叠加
继承的权重是0
修改样式要看该标签是否被选中
如果选中以上面公式计权重
如果没有选中，那么权重是0
CSS背景
背景颜色
语法
background-color:颜色值; 默认的值是 transparent 透明的
背景图片
语法
background-image : none | url（地址文件名）
背景平铺
语法
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数
repeat（背景图像在纵向和横向上平铺）no-repeat（背景图像不平铺）
repeat-x（背景图像在横向上平铺）repeat-y（背景图像在纵向平铺）
背景位置
语法
background-position : length || length
background-position : position || position
参数
length
百分数 | 由浮点数字和单位标识符组成的长度值
position
top | center | bottom | left | center | right 方位名词
背景附着
背景附着就是解释背景是滚动的还是固定的
语法
background-attachment : scroll | fixed
参数
scroll（背景图像是随对象内容滚动）fixed（背景图像固定）
背景简写
background：属性的值的书写顺序官方并没有强制标准的
语法
background: transparent url(image.jpg) repeat-y scroll center top ;
背景透明
语法
background: rgba(0, 0, 0, 0.3);
CSS注释
规则
/* 需要注释的内容 */ 进行注释的