a标签的伪类
概念
a标签可以根据用户的不同行为的触发，从而实现四种状态的样式，这四种状态是可以设置的，我们称这四种状态为伪类。
a:link 访问前的状态
a:visited 访问后的状态
a:hover 鼠标悬停状态
a:active 鼠标点击状态
非超级链接也可以设置伪类状态，此时只有两个状态是用，分别是hover和active
伪类选择器规定：一定要选设置好需要的选择器，可以使用class类名，不会引起冲突，或者使用后代选择器精确匹配，以防打乱页面的布局状态。
伪类的权重和普通选择器权重是一样的
书写顺序
a标签有时会有2~3个触发状态，一定需要按照书写顺序去执行
顺序：link、visited、hover、active
所有的伪类中，最常用的是hover
实际应用
页面中，为了保持页面的统一状态，此时会将a标签的访问前和访问后的状态进行统一设置。
应用一：设置默认样式
应用二：工作中会遇到通过hover状态设置背景颜色
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 505px;
list-style: none;
margin: 100px auto;
}
ul li{
width: 100px;
float: left;
line-height: 35px;
text-align: center;
border-right: 1px solid #fff;
}
ul li a{
display: block;
background: cyan;
text-decoration:none;
color: #fff;
}
ul li a:hover{
background: gold;//如果这里写的代码是color：gold，那么只会将文字选定时改为金色，并不是整个模块变成金色。
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">综合</a></li>
</ul>
</body>
background属性学习
在前面的课程中我们学习background-color，作用是给盒子设置背景颜色。其实background是一个综合属性
Background-color：
作用：给盒子添加背景颜色
关于背景颜色的覆盖范围：width、height、padding、border
属性值：颜色名、颜色值
颜色值：rgb模式、十六进制模式、rgba模式
Rgba模式是rgb模式的一种拓展，拓展的是透明度，a（alpha）代表的是透明度，取值0~1之间，0表示完全透明，1表示纯色
Background-image
作用：给标签的盒子显示区域添加背景图片
渲染范围和背景颜色一样，width、height、padding、border
图片默认是有重复平铺状态
如果不需要重复则需要设置
background-repeat:no-repeat;
属性值：url（图片地址）
url是统一资源定位符，后面必须要跟一对小括号，括号内部是图片的引入地址，地址可以使相对路径和绝对路径。
如果背景图片和背景颜色同时设置，会如何显示？
答案是都会加载，只不过背景图片会优先覆盖到背景颜色上
Background-repeat
如果不需要背景图片进行重复平铺，则需要设置background-repeat：no-repeat；
作用：用来设置背景图的渲染状态
根据属性值的不同，背景图会显示三种状态
repeat：背景重复渲染，默认值
background-repeat：repeat；
no-repeat：设置背景图片状态为不重复
background-repeat:no-repeat;
repeat-x：背景图片在水平方向上重复
background-repeat:repeat-x;
repeat-y：背景图片在垂直方向上重复
background-repeat:repeat-y;
实际应用场景
使用上下左右都对称的图片进行页面的背景设置
背景定位background-position
作用：设置背景图（常用于设置不重复的背景图）在盒模型中的加载位置
属性值：单词表示法、像素表示法、百分比表示法
无论哪种表示方法，都有两个值进行设置，中间用空格隔开
第一个属性值：描述的是背景图在盒子中水平方向的位置
第二个属性值：描述的是背景图在盒子中垂直方向的位置
单词表示法：
Eg:background-position:right bottom;
第一个属性值的可选值：left、center、right，分表表示图片在水平方向上居左、居中、居右
第二个属性值的可选值：top、center、bottom，分别表示图片在垂直方向上居上、居中、居下
书写时，根据需要来使用两个属性值（可以理解为九宫格）
关于单词表示法的应用场景：
如果页面中盒子的宽高是固定的并且比背景图片小，此时会提供一种解决方案，就是战士核心区域
比如下面的图片，如果不展示核心区域，可能只有局部左上角状态
如果此时设置居中属性：background-position:center center;
网页中会出现大的居中的banner图片
像素表示法
背景定位的两个属性值都是以px为单位的数字表示法
第一个属性值：表示水平方向，图片距离盒子左上角border以为的顶点距离
第二个属性值：表示垂直方向，图片距离盒子左上角border以内的顶点距离
例如：background-position:100px 100px;
需要注意的是：像素值可以为负数
正数表示图片从图片从左上顶点为参考点向右和下进行移动
如果为负数，表示图片从左上顶点为参考点向左和上进行移动