这是我参与「第四届青训营 」笔记创作活动的第二天
今天我将介绍CSS的伪类、字体、和布局。
伪类
伪类分为结构伪类和状态伪类。
- 状态伪类
状态伪类一般用于链接和表单，可以让目标对象的状态变化后改变它的样式。下面我来介绍几个<a>标签常用的状态伪类。
a:link {
color: blue;
}
这个伪类的作用是可以设置<a>标签默认状态下（未访问）的样式。
a:visited {
color: red;
}
这个伪类的作用是让已被访问过的链接样式发生改变，上示代码为让访问过的<a>标签颜色变为红色。
a:hover {
color: green;
}
这个伪类可以让<a>标签在鼠标经过时样式发生改变，鼠标离开后变回原来的样式。
a:active {
color: pink;
}
这个伪类是当鼠标点击<a>标签时改变样式，直到松开鼠标左键后恢复原来的样式。
:hover不仅仅用于<a>标签，也能用于其他标签，效果与上述一样。
2.字体
为文本指定字体可以用font-family:，后面接字体名称，多种字体间用逗号隔开，浏览器后从前往后识别字体，不支持的字体就跳过直到支持就使用当前字体，所以一般最后放一个适用性高的字体。
font-family: Arial, 'Microsoft YaHei';如果字体名称中有空格、中文或其他符号，用引号括起来（单引号双引号都可以），且不区分大小写。
3.布局
(1)标准流
- 块级元素独占一行，从上往下
- 行内元素按照顺序从左往右，遇到边缘自动换行
(2)浮动
浮动用float;lft loat:right实现左浮右浮，浮动后的元素可以脱离标准流，不占位置，行内元素按照顺序从左往右，遇到边缘自动换行
浮动最初是为了实现文字环绕效果的，所以浮动后的元素不会遮挡文字。
(3)定位
定位分为绝对定位，相对定位，固定定位和粘性定位。
定位可以给元素定在一个位置，由定位模式position和边偏移组成。
- 相对定位
relative是相对于自身位置进行偏移，还占有原来的位置 - 绝对定位
absolute是相对于父元素（相对）进行偏移，不占有位置 - 固定定位
fixed可以固定在浏览器可视窗口，不占有位置，不随滚动条滚动而滚动 - 粘性定位
sticky是以浏览器可视区为参照点进行偏移的，它占有原来的位置
