标签：repeat 07 color link background visited position CSS 入门
超级链接美化
1.伪类
同一个超级链接，根据用户的点击情况，有自己样式：
超级链接根据用户点选情况，有4种状态：
a:link 没有访问的超级链接
a:visited 已经访问的超级链接
a:hover 鼠标悬停的时候
a:active 鼠标按下的时候
<style type="text/css">
a:link{
color:orange;
}
a:visited{
color:green;
}
a:hover{
color:black;
font-size: 20px;
border: 1px solid black;
}
a:active{
font-size: 30px;
}
</style>在css里面叫做类，这个东西是工程师加的，可以明确的指定某一个标签是什么类；
但是:link、:visited，是用户指定的状态，在页面编辑的时候，我们只能定义，但是不知道是属于什么类，所以叫做“伪类”。
2.爱恨准则
先爱了，才能恨。
css有规定，四个伪类的顺序必须是：
link、visited、hover、active
和love hate的顺序一样，所以可以帮助记忆，叫做“爱恨准则”。
如果顺序不一样，那么就有可能一些样式会错乱。
注意，可以省略某个，但是顺序不能变。比如我们省略visited，那么：link、hover、active
3.常见写法
一般的，我们都会把a:link、a:visited写在一起， 这样点过和没有点过样式一样：
<style type="text/css">
a:link,a:visited{
text-decoration: underline;
color:#333;
}
a:hover{
color:red;
}
</style>如果a要转块、设置宽高，那么我们一般习惯把盒模型的属性写在a这个选择器里。把关于文字的属性，写在伪类选择器中。特别的，一定要记住text-decoration一定要写在伪类里面，或者a标签里，绝对不能从父亲继承，因为父亲继承来的text-decoration:none;干不掉超级链接默认的下划线。
.nav ul li a{
display: block;
width: 120px;
height: 40px;
}
.nav ul li a:link , .nav ul li a:visited{
text-decoration: none;
color:white;
}
.nav ul li a:hover{
background-color: gold;
}a这个选择器，“暗含”了a:link、a:visited，所以也可以不写a:link、a:visited，直接写a:hover
.nav ul li a{
display: block;
width: 120px;
height: 40px;
text-decoration: none;
color:white;
}
.nav ul li a:hover{
background-color: gold;
}伪类的权重和类一样，如果增加了一个类选择器。
background系列属性
1.background-color
背景颜色属性background-color:#f00;
没有什么好说的，我们一直在用，记住，padding区域也有背景颜色！border以内的地方都有颜色。
2.background-image
背景图片属性background-image:url(images/1.jpg);
url是uniform resource locator统一资源定位器的意思，说人话就是“网站”。
url里面没有引号，是相对路径、绝对路径都是可以的。
和插入图片不一样
背景图的应用
<img src=”” />
背景图片会默认的横向、纵向铺很多个。
3.background-repeat
repeat就是重复的意思
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-image: url(images/libai.png);
background-repeat: repeat-y;4.background-position
图片位置属性。
background-position:100px 200px;
表示让背景图片在盒子中向右移动100px，向下移动200px。
如果想向左、向下移动，要写负数。
background-position最常见的用处就是“CSS精灵”css sprite，有些人叫做“CSS雪碧技术”。
就是指把多个小杂碎图片，合成一张图片，然后用background-position定位只显示其中某一部分。
这样能够显著降低HTTP请求数。原来10个背景需要用10张图片，但是现在只需要1个。
background-position不仅仅可以用两个数字来定位，还可以用单词来定位。
在左右层面，我们用left、center、right来表示左、中、右
在上下层面，我们用top、center、bottom来表示上、中、下
先左右后上下
background-position:left bottom;
可以用百分比来表示background-position
backgrond-position:50% 0;等价于 background-position:center top;
假设盒子现在宽度是600px，背景图的宽度是121px，所以
background-position:center top;
等价于：background-position:50% 0;
等价于：background-position:239.5px 0;
怎么计算来的？
600 / 2 - 121 /2 = 239.5px
应用：
1） 大背景
2） 通栏banner
banner的尺寸一般都非常宽，是为了照顾有钱的用户，他们使用的是宽屏显示器，分比率达到1920，所以banner的宽度基本都是1920的。我们要用背景来做banner，写上
background-image: url(images/banner160223.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #E0B895;不管多大的分辨率，我们的banner都是通栏的：
5.background-attachment
背景附属属性，attachment就是附属的意思。它的一个值比较有用fixed;
background-attachment: fixed;
css2.1层面，就这些。css3中又要增加background另外5个属性，等到时候再说。
我们可以合写：
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:-10px -100px;
background-attachment:fixed;等价于：
background:red url(1.jpg) no-repeat -10px -100px fixed;
背景图的应用
1.图换文字
我们要插入logo：
<h1>
<img src="images/logo.png" alt="" />
</h1>这种插入logo的方式，对搜索引擎不友好。我们希望的是h1里面是文字，而不是图片。搜索引擎是无法识别图上的文字的。
所以，比较好的方法，就是用背景图来呈递这个图片，标签中写上文字，标签中的文字是搜索引擎能抓取的。
<h1>爱前端-专业前端开发培训</h1>
.header h1{
width: 221px;
height: 68px;
background:url(images/logo.png);
text-indent: -999em; → 赶走文字，让用户看不到文字
}也可以：
.header h1{
width: 221px;
height: 68px;
background:url(images/logo.png);
line-height: 400px;
overflow: hidden;
}2.先导符号放在 padding里
3.精灵的摆放
所有要成为先导符号的小图标，一定要放到精灵图的最右边。
标签：repeat,07,color,link,background,visited,position,CSS,入门 来源： https://www.cnblogs.com/shy-kevin/p/11369600.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。