标签：11 状态 repeat background 设置 day 背景图片 属性
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;
需要注意的是：像素值可以为负数
正数表示图片从图片从左上顶点为参考点向右和下进行移动
如果为负数，表示图片从左上顶点为参考点向左和上进行移动
标签：11,状态,repeat,background,设置,day,背景图片,属性 来源： https://www.cnblogs.com/DvisHuang/p/14527308.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。