學(xué)了有一小段時間前端了当窗，今做個CSS的總結(jié)稼跳！
目錄：
- CSS 簡介
- CSS 語法
- CSS 選擇器
- CSS 引入方式
- CSS 背景
- CSS 文本樣式
- CSS 字體樣式
- CSS 鏈接
- CSS 需注意的問題
CSS簡介
* CSS 指層疊樣式表 (Cascading Style Sheets)
* 樣式定義如何顯示 HTML 元素
* 樣式通常存儲在樣式表中
* 把樣式添加到 HTML 4.0 中载萌，是為了解決內(nèi)容與表現(xiàn)分離的問題
* 外部樣式表可以極大提高工作效率
* 外部樣式表通常存儲在 CSS 文件中
* 多個樣式定義可層疊為一
CSS語法
* CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器壮啊，以及一條或多條聲明:
CSS 注釋
* 注釋是用來解釋你的代碼坎藐，并且可以隨意編輯它遇西，瀏覽器會忽略它。
* CSS注釋以 "/*" 開始, 以 "*/" 結(jié)束键菱。
CSS選擇器
CSS引入方式
插入樣式表的方法有三種:
- 外部樣式表(External style sheet)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 內(nèi)部樣式表(Internal style sheet)
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
- 內(nèi)聯(lián)樣式(Inline style)
<p style="color:sienna;margin-left:20px">這是一個段落谬墙。</p>
- 多重樣式優(yōu)先級
- (內(nèi)聯(lián)樣式）Inline style > （內(nèi)部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式
- 注意：如果外部樣式放在內(nèi)部樣式的后面今布，則外部樣式將覆蓋內(nèi)部樣式经备。
CSS 背景
CSS 背景屬性用于定義HTML元素的背景拭抬。
-
CSS 屬性定義背景效果:
- background-color
十六進制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
顏色名稱 - 如："red"
- background-image
body {background-image:url('paper.gif');}
- background-repeat:設(shè)置背景圖像是否及如何重復(fù)
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;/如果你不想讓圖像平鋪
- background-attachment:背景圖像是否固定或者隨著頁面的其余部分滾動。
scroll 背景圖片隨頁面的其余部分滾動侵蒙。這是默認
fixed 背景圖像是固定的
inherit 指定background-attachment的設(shè)置應(yīng)該從父元素繼承
- background-position
background-position:right top;
CSS文本樣式
CSS字體樣式
CSS 鏈接
- 鏈接的樣式造虎，可以用任何CSS屬性（如顏色，字體纷闺，背景等）算凿。
特別的鏈接，可以有不同的樣式犁功，這取決于他們是什么狀態(tài)氓轰。
這四個鏈接狀態(tài)是：
a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶鼠標放在鏈接上時
a:active - 鏈接被點擊的那一刻
a:link {color:#000000;} /* 未訪問鏈接*/
a:visited {color:#00FF00;} /* 已訪問鏈接 */
a:hover {color:#FF00FF;} /* 鼠標移動到鏈接上 */
a:active {color:#0000FF;} /* 鼠標點擊時 */
當設(shè)置為若干鏈路狀態(tài)的樣式浸卦，也有一些順序規(guī)則：
a:hover 必須跟在 a:link 和 a:visited后面
a:active 必須跟在 a:hover后面
- 文本修飾：text-decoration 屬性主要用于刪除鏈接中的下劃線
- 背景顏色：背景顏色屬性指定鏈接背景色
- 字體顏色：字體顏色屬性color
