一：CSS簡介
CSS：Cascading Style Sheets 層疊樣式表
CSS負責描述HTML頁面的樣式；從審美的角度描述頁面的樣式
1，CSS語法：
selector {
property: value;
property: value;
}2，CSS創建：
<!-- 1，外部(外聯)樣式表；最常用的方式 -->
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<!--2，內部(內嵌)樣式表 -->
<style type="text/css">
p {color:red;}
</style>
<!-- 3，行內(內聯)樣式；不推薦使用，儘量別用 -->
<p style="color:red,font-size:20px">我用了行內樣式，呵呵</p>
<!-- 4,使用@import加載外部樣式表 -->
<!-- 注：@import指令出現在樣式表中的其他規則之前 -->
<style type="text/css">
@import url("mystyle.css");
p {color:red;}
</style>
<!-- 在外部樣式表中導入其他樣式表，這些代碼寫在CSS文件內 -->
@import url("mystyle1.css")
@import url("mystyle2.css")
body {
color:red;
}3，CSS特性：
3.1，層疊性
樣式可以層疊，即多重樣式將按某種規則層疊爲一個；樣式的覆蓋與樣式的調用順序無關，與樣式的定義順序有關
3.2，繼承性
前提：標籤之間屬於一種嵌套關係
與文字有關的屬性大都可以實現繼承，除了<a>、<h1>-<h6>，這幾個標籤是例外
3.3，優先級
層疊規則，優先級高的樣式可以覆蓋優先級低的樣式。
行內(內聯)樣式 > 內部樣式 > 外部樣式 > 默認樣式(瀏覽器缺省設置)
默認樣式 < 標籤選擇器< 類選擇器 < id選擇器< 行內(內聯)樣式 < !important
0 1 10 100 1000 1000以上
上面用數字來表示優先級（權重），只是一個類比，10個標籤選擇器的優先級還是不如1個id選擇器的，其他類推
繼承來的樣式的權重爲0；權重可以疊加，即10個標籤選擇器的權重爲10
二：CSS選擇器
1，標籤選擇器(元素選擇器)
語法：標籤名 {屬性: 值;}
body {margin:0;}
p {color:red;}2，通配選擇器
/* 通配選擇器使用通配符*來匹配所有標籤 */
* {
padding: 0;
margin: 0;
}3，類選擇器
在css文件或<style>標籤內定義：.類名 {屬性:值;} ； 在開始標籤內以屬性的方式調用：class="類名"
類的命名規範：不能以數字開頭定義類名；不能以特殊符號開頭，下劃線_除外；不推薦使用漢字、標籤名和屬性名定義類名。
<style type="text/css">
.c1 {
color: red;
}
.c2 {
text-decoration: underline;
}
</style>
<body>
<p class="c1">我是一條鹹魚</p>
<p class="c1 c2">我也是一條鹹魚</p>
</body>4，ID選擇器
在css文件或<style>標籤內定義：#id名 {屬性:值;} ； 在開始標籤內以屬性的方式調用：id="id名"
注意：id名唯一性，即一個id名在整個文檔內只使用一次；一個標籤只能調用一個id選擇器；id主要用來和JS配合使用
#d1 {
color: red;
}
#d2 {
text-decoration: underline;
}
<p id="d1">我是一條鹹魚</p>
<!-- 一個標籤只能調用一個id選擇器,所以下面的用法是錯誤的 -->
<p id="d1 d2">我也是一條鹹魚</p>5，複合選擇器
<style type="text/css">
/* 1，標籤指定式選擇器 */
p.c1 {
color: red;
}
p#d1 {
color: blue;
text-decoration: underline;
}
/* 2，選擇器分組/聲明分組，以逗號分隔，同時爲多個選擇器定義樣式 */
h3,p.c2,p#d2 {
color: deeppink;
}
/* 3，後代選擇器：選擇上所有的某種後代，如選擇所有是h3的後代 */
.div1 h3 {
font-style: italic;
font-size: 50px;
}
/* 4，子元素選擇器：只選擇到下一級相應的元素，無法選擇上下下一級及更下面的相應元素 */
div>h3 {
color: red;
}
/* 5，相鄰兄弟選擇器：只選擇上同一級緊跟在後面的一個相應元素，之間不能有其他的元素 */
div+h3 {
color: red;
}
/* 6，兄弟選擇器：選擇上同一級後面的所有相應元素 */
div~h3 {
color: red;
}
</style>
<body>
<p>我是一條鹹魚</p>
<p>我也是一條鹹魚</p>
<h3>hehehhe</h3>
<div class="div1">
<h3>自我介紹</h3>
<p class="c1">我是一條鹹魚</p>
<p id="d1">我是一條鹹魚</p>
<ul>
<li>
<h3>我躲在這裏</h3>
</li>
</ul>
<h3>自我介紹結束</h3>
</div>
<p>我來隔開你們</p>
<h3>hehehhe</h3>
<h3>hehehhe</h3>
<div class="div2">
<h3>自我介紹</h3>
<p class="c2">我是一條鹹魚</p>
<p id="d2">我是一條鹹魚</p>
<h3>自我介紹結束</h3>
</div>
<h3>hehehhe</h3>
<h3>hehehhe</h3>
</body>6，屬性選擇器
1，簡單屬性選擇器
img[alt] {}
*[title] {}
a[href][title] {}
2，具體屬性值選擇(完全匹配)
a[title="baidu"] {}
p[class="car"][id="ben"] {}
p[class="urgent warning"] {}
3，部分屬性值選擇；屬性值含有該部分就能匹配上
p[class~="figure"] {}
4，子串匹配屬性選擇器
[foo^="bar"] --選擇foo屬性值以"bar"開頭的所有元素
[foo$="bar"] --選擇foo屬性值以"bar"結尾的所有元素
[foo*="bar"] --選擇foo屬性值包含"bar"的所有元素
[foo|="bar"] --選擇foo屬性值等於"bar"的或以"bar"開頭的所有元素7，僞類選擇器
<style type="text/css">
a:link {
color: gray;
text-decoration: none;
}
a:visited {
color: blue;
}
/* a:focus {
text-decoration: overline;
} */
/* :focus,:hover,:active IE6只允許超鏈接使用，IE7允許應用於所有元素 */
a:hover {
text-decoration: underline;
color: red;
}
a:active {
color: yellowgreen;
}
input:focus {
background-color: green;
}
/* 取得第一個p元素，IE7開始支持 */
p:first-child {
color: deeppink;
}
</style>8，僞元素選擇器
p:first-letter {
color: red;
}
p:first-line {
text-decoration: underline;
}
P:before {
color: green;
}
p:after {
color: blue;
}三：層疊
特殊性：使用0,0,0,0表示法表示特殊性，左邊爲高位，可以疊加，但不能進位，數字越大則特殊性越高。
| * 通配選擇器 | 0,0,0,0 |
| 標籤/僞元素選擇器 | 0,0,0,1 |
| 類/僞類/屬性選擇器 | 0,0,1,0 |
| ID選擇器 | 0,1,0,0 |
| 內聯(行內)樣式 | 1,0,0,0 |
| 繼承的樣式 | 無特殊性 |
繼承值無特殊性，即0特殊性的通配選擇器都比繼承值強
重要聲明：p {color: #333 !improtant;} 其特殊性最高！
樣式層疊規則分析：
四：文本樣式
1，字體
寫在前面：文檔顯示的字體取決於用戶機器上安裝了的字體系列；如果用戶機器上安裝的字體與你設計使用的字體不同，那麼文檔看上去會大不同！
5種通用字體系列：
Serif 字體：字體成比例且有上下短線；包括 Times、Georgia、New Century Schoolbook
Sans-serif 字體：成比例但沒有上下短線；包括 Helvetica、Geneva、Verdana、Arical
Monospace 字體：不成比例，每個字符的寬度都完全相同；包括 Courier、Courier New、Andale Mono
Cursive 字體：模仿人的手寫體；包括 Zapf chancery、Author、Comic Saus
Fantasy 字體：Western、Woodblock、Klingon
推薦寫法：
/* 按字體的優先級排序；字體名中有空格或#/$之類符號需加引號 */
/* 通過結合特定字體名和通用字體系列，可以創建與你預想的基本相同的文檔 */
p {
font-family: Times,TimesNR,'New York',serif;
}
/* 設置字體的粗細使用font-weight */
/* font-weight:normal(400)|bold(700)|bolder|lighter|100-900 */聯寫時，size和family必須有且順序不能變，即size要在family前面
注：在使用簡寫屬性font時，所有被忽略的值都會重置爲其默認值！
2，字體顏色：
方式一：使用命名顏色，如 red，green，blue
方式二：rgb(0,0,0) rgb(255,255,255) rgba(0,0,0,0.7) a爲alpha 透明度
方式三：rgb(100%,100%,100%)
方式四：使用十六進制數 #RRGGBB，如#FFFFFF，可簡寫爲#FFF
web安全顏色：RGB值20% 和 51 的倍數，0% 和 0也是安全值；十六進制中，使用值00、33、66、99、CC、FF的三元組
3，文本屬性
基線：是英文字母"x"的下端沿
內容區：底線和頂線之間的區域
行高 line-height：是文本行基線之間的距離 （能繼承）
line-height - font-size = 行間距
text-indent 文本縮進 應用於塊級元素
text-align: left | center | right | justify
vertical-align: sub | super | top | middle | bottom
應用於行內元素和表單元格、替換元素 （不能繼承）
text-transform: uppercase | lowercase | capitalize | none
text-decoration: none | underline | overline | line-through | blink （無繼承性）
五：背景
前景色：color ①影響邊框 ②影響表單元素
背景：內容框和內邊距是元素背景的一部分，且邊框畫在背景之上。
background-color: 背景顏色
background-image: url(); 背景圖像
background-repeat: repeat (平鋪，默認) | repeat-x | repeat-y | no-repeat
background-position: left | right | top | bottom | center | 百分數 | 長度值
決定原背景圖像的放置位置
其相對於元素的內邊框邊界放置原圖像
background-position:top; 只寫一個關鍵字，則認爲等同於 background-position:top center;
background-attachment: scroll (滾動，默認) | fixed (固定)
背景圖像關聯，相對於視窗
background 聯寫：
background: white url() top left repeat-x fixed; 無順序要求
注：在使用簡寫background屬性時，所有被忽略的值都會重置爲其默認值，從而覆蓋先前給定的值！
