一.css概述
CSS（Cascading Style Sheet)層疊樣式表,定義如何顯示HTML元素，給HTML設置樣式，讓它更加美觀。當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。
CSS創建於1996年,在1997年W3C頒布HTML4.0與XHTML1.0時同時公布了CSS1標准.1998年推出了CSS2標准,目前仍不斷發展和完善中
二.css語法
1.實例
2.注釋
/* 注釋內容 */
三.css的引入方式
優先級: 內聯樣式）Inline style > （內部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式
1.行內樣式:行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。
<p style="color: red">Hello world.</p>
2.內部樣式:嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
3.外部樣式:外部樣式就是將css寫在一個單獨的文件中，然后在頁面進行引入即可。推薦使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/> # 注意css樣式表路徑,這里使用的是相對路徑
4.導入方式:導入方式指的是使用 CSS 規則引入外部 CSS 文件。(不推薦,因為!import引入的文件會等頁面全部下載完畢再被加載)
<style> @import url(style.css); </style>
鏈接方式（下面用 link 代替）和導入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，並且說明為什么不推薦使用 @import。
1.link 屬於 HTML，通過 <link> 標簽中的 href 屬性來引入外部文件，而 @import 屬於 CSS，所以導入語句應寫在 CSS 中，要注意的是導入語句應寫在樣式表的開頭，否則無法正確導入外部文件；
2. @import 是 CSS2.1 才出現的概念，所以如果瀏覽器版本較低，無法正確導入外部樣式文件；
3.當 HTML 文件被加載時，link 引用的文件會同時被加載，而 @import 引用的文件則會等頁面全部下載完畢再被加載；
四.css選擇器
基本選擇器
1.元素選擇器:(控制整個類型)
p {color: "red";}
2. id選擇器:
/*號表示id屬性，后面的i1表示id屬性的值*/
#i1 {
background-color: red;
}
3. 類選擇器:(樣式列名不要用數字開頭)
/* .表示class屬性，c1表示class的值*/
.c1 {
font-size: 14px;
}
/*找到所有p標簽里面含有class屬性的值為c1的p標簽*/
p.c1 {
color: red;
}
4. 通用選擇器
* {
color: white;
}
/*表示所有的標簽*/
5. 組合選擇器
/*li內部的a標簽設置字體顏色*/
li a {
color: green;
}
6.子代選擇器
/*選擇所有父級是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }
7.同輩選擇器
/*選擇所有緊接着<div>元素之后的<p>元素*/ div+p { margin: 5px; }
8.屬性選擇器
/*用於選取帶有指定屬性(title)的所有p元素。*/
p[title] {
color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="red"] {
color: green;
}
/*找到所有title屬性以hello開頭的元素*/ [title^="hello"] { color: red; } /*找到所有title屬性以hello結尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title屬性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; } /*找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：*/ [title~="hello"] { color: green; }
9.分組和嵌套:
當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用
逗號分隔的分組選擇器來統一設置元素樣式。
div, p {
color: red;
}
10. 偽類選擇器
可以根據標簽的不同狀態再進行進一步的區分，比如一個a標簽，點擊前，點擊時，點擊后有不同的三個狀態。
/* 未訪問的鏈接 */
a:link {
color: #FF0000
}
/* 已訪問的鏈接 */
a:visited {
color: #00FF00
}
/* 鼠標移動到鏈接上 */ 這個用的比較多
a:hover {
color: #FF00FF
}
/* 選定的鏈接 */ 就是鼠標點下去還沒有抬起來的那個瞬間，可以讓它變顏色
a:active {
color: #0000FF
}
/*input輸入框獲取焦點時樣式*/
input:focus { #input默認的有個樣式，鼠標點進去的時候，input框會變淺藍色的那么個感覺
#outline: none;
background-color: #eee; #框里面的背景色
11.偽元素選擇器
#將p標簽中的文本的第一個字變顏色變大小 p:first-letter { font-size: 48px; color: red; } /*在每個<p>元素之前插入內容*/ p:before { content:"這是之前插入的元素"; color:red; } /*在每個<p>元素之后插入內容*/ p:after { content:"[?]"; color:blue; }
選擇器的優先級
權重計算
CSS 優先級法則：
A 選擇器都有一個權值，權值越大越優先；
B 當權值相等時，后出現的樣式表設置要優於先出現的樣式表設置；
C 創作者的規則高於瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式；
D 繼承的CSS 樣式不如后來指定的CSS 樣式；
E 在同一組屬性設置中標有“!important”規則的優先級最大
當某個樣式屬性有可能會重復定義,但又不希望被優先級高的樣式覆蓋掉時,則可以在樣式屬性之后使用!important關鍵字將該屬性提高到最高優先級,相當於鎖定該屬性防止以后被優先級高的樣式表覆蓋.
body{ color:red; !important;}
五.css屬性相關
1.寬和高
width: 16px; 默認16px
height
2.文字字體
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
3.字體大小
font-size: 14px;
4.字體粗細
font-weight
