目錄
1. CSS背景
1.1 基本屬性
- background-color
背景顏色可以那些顏色值，包括RGB函數來設置它
- background-image
背景圖片我們需要添加一個url函數，url括號雙引號內是圖片的完整路徑和文件名，如果同時添加背景圖片和背景顏色，那麼背景圖片會覆蓋掉背景顏色，但是如果背景圖片沒有被顯示出來，這個時候背景顏色就會起作用
注：當我們做一個空元素，它只有標籤而沒有裏面的內容，這個時候我們要先定義這個元素它的高度和寬度，然後才能顯示出來你所添加的背景顏色和背景圖片的效果
- background-repeat
repeat：它表示的就是背景圖片的一個填充方式，在做背景圖片的時候，通常做很小的一幅背景圖片，然後我們再填充的時候，要讓它作爲背景圖片填充滿整個頁面，使用的是棋盤格填充,在水平和垂直的方向上重複填充整個網頁
repeat-x：橫向填充一行
repeat-y：縱向填充一列
no-repeat：只顯示一次，不重複填充，適合使用一幅很大的背景圖片填充
- background
上面所有屬性可以用background屬性來統一的設置，設置時按照背景顏色、背景圖片、重複填充方式的順序
1.2 文件組織形式
images內含名爲bg1.gif的1px*30px的圖片：
1.3 測試代碼
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新聞頁面</title>
<style type="text/css">
#newstitle{
height:30px;
background:url(images/bg1.gif) repeat-x;
}
#newstitle h1{
font: bold 16px "幼圓";
text-align: center;
line-height: 30px;/*垂直居中對齊*/
}
</style>
</head>
<body>
<div id = "newstitle"><!----新聞標題---->
<h1>金融危機下歐洲華商陷窘境 變思維逆境突破</h1>
</div>
</body>
</html>
1.4 效果圖
圖片高度爲30px，因此設置div的高度爲30px， 水平橫向填充
2. CSS超鏈接
2.1 鏈接的四種狀態
第四種狀態超鏈接點擊的時刻就是什麼時候超鏈接被激活，就是當你按下鼠標的時候，這個時候超鏈接處於激活狀態，還有如果這個超鏈接是需要下載文件，在整個文件下載過程中，超鏈接都屬於活動的超鏈接
這四種樣式的名字都是a開頭一個冒號隔開，後面是一個狀態，我們把這種超鏈接或者是這種選擇器的類型，稱爲是僞類選擇器，所以超鏈接的這四種狀態下，我們用的是僞類選擇器作爲它的樣式的名字，那麼當然如果你要設置在任何狀態下，超鏈接的樣式挪麼直接去設置a標籤
2.2 鏈接的次序
可以用love and hate這兩個單詞來記住這個順序，love裏面的l就表示link，v表示visited，hate裏面的就表hover，a就表示active。
2.2 測試代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#othernews {
text-align:left;
font-size:14px;
line-height:1.5em;
}
a:link {
color: #09f;/*淺藍*/
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #935;/*紅*/
}
a:hover {
text-decoration: underline;
color: #03c;/*深藍*/
font-size:150%;
}
a:active {
text-decoration: none;
color: #03c;/*深藍*/
}
</style>
</head>
<body>
<div id = "othernews">
相關閱讀:
<p><a href="#" >迪拜華商財富縮水 瞻望前景信心猶豫</a></p>
<p><a href="#" >全球華商總資產恢復增至3.9萬億美元</a></p>
<p><a href="#" >華商基金胡宇權：行業不平衡將帶來投資機會</a>
</div>
</body>
</html>
2.3 效果圖
運行後顯示的普通狀態下全部是淺藍色
鼠標懸停時會有下劃線 ,且字號放大到150%
訪問過則顯示紅色