前端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;