前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性
1. font属性
- 使用font属性,能够将字号、行高、字体,能够一起设置。
font:14px/24px "Times New Roman","Microsoft YaHei","SimSun";
等价于三行语句:
font-size:14px;
line-height:24px;
font-family:"Times New Roman","Microsoft YaHei","SimSun";
- 行高也可以用百分比,表示自豪的百分之多少.一般来说,都是大于100%的,因为行高一定要大于字号.
font:12px/200% “宋体”
等价于
font:12px/24px “宋体”;
2.1 超链接的美化,牢记"爱恨准则"
- 4个"伪类"
a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}
:link表示, 用户没有点击过这个链接的样式。 是英语“链接”的意思。
:visited 表示, 用户访问过了这个链接的样式。 是英语“访问过的”的意思。
:hover 表示, 用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。
:active 表示, 用户用鼠标点击这个链接,但是不松手,此刻的样式。 是英语“激活”的意思。
记住,这四种状态,在css中年,必须按照固定呢的顺序写:a:link 、a:visited 、a:hover 、a:active,如果不按照顺序,那么将失效
2.2 超链接的美化
- a标签在使用的时候,非常的难。因为不仅仅要控制a这个盒子,也要控制它的伪类。
- 我们一定要将a标签写在前面,:link、:visited、:hover、:active这些伪类写在后面。
- a标签中,描述盒子; 伪类中描述文字的样式、背景。
.nav ul li a{
display: block;
width: 120px;
height: 40px;
}
.nav ul li a:link ,.nav ul li a:visited{
text-decoration: none;
background-color: yellowgreen;
color:white;
}
.nav ul li a:hover{
background-color: purple;
font-weight: bold;
color:yellow;
}
记住,所有的a不继承text,font这些东西.因为a自己有一个伪类的权重.
- 最标准的,就是把link、visited、hover都要写。但是前端开发工程师在大量的实践中,发现不写link、visited浏览器也挺兼容。所以就把a标签简化了:a:link、a:visited都是可以省略的,简写在a标签里面。也就是说,a标签涵盖了link、visited的状态。
.nav ul li a{
display: block;
width: 120px;
height: 50px;
text-decoration: none;
background-color: purple;
color:white;
}
.nav ul li a:hover{
background-color: orange;
}
3.1 css精灵
- “css精灵”,英语css sprite,所以也叫做“css雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
- css精灵有什么优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。
- 用fireWorks精确控制精灵
4. background综合属性
- background属性和border一样,是一个综合属性:
background:red url(1.jpg) no-repeat 100px 100px fixed;
等价于:
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
- 可以任意省略部分:
background: red;
background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
精灵的使用: background: url(images/taobao.png) no-repeat 0 -133px;