一、CSS介紹
CSS：層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標准通用標記語言的一個應用）或XML（標准通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
二、CSS語法
2.1CSS實例
每個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之后用分號結束。
2.2注釋
/*注釋*/
三、CSS的幾種引入方式
3.1行內樣式
行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。
<p style="color: red">Hello world.</p>
3.2內部樣式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3.3外部樣式
外部樣式就是將css寫在一個單獨的文件中，然后在頁面進行引入即可。推薦使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
四、CSS選擇器
4.1基本選擇器
4.1.1 標簽選擇器
標簽名{
color: "red";
}
4.1.2 ID選擇器
#ID名 {
color: "red";
}
4.1.3 類選擇器
.類名{
color: "red";
}
標簽 .類名{
color: "red";
}
注意：樣式類名不要用數字開頭(有的瀏覽器不支持)。標簽中的class屬性如果有多個，要用空客分隔。
4.1.4通用選擇器
* {
color: "red";
}
4.2組合選擇器
4.2.1 后代選擇器
/*li內部的a標簽設置字體顏色*/
li a {
color: green;
}
4.2.2 兒子選擇器
/*選擇所有父級是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
4.2.3 毗鄰選擇器
/*選擇所有緊接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;
}
4.2.4 兄弟選擇器
/*給同級標簽，所有相同類名的標簽*/
標簽名~ .類名{
color: red;
}
4.3 屬性選擇器
/*用於選取帶有指定屬性的元素。*/
p[title] { color: red; } /*用於選取帶有指定屬性和值的元素。*/ p[title="213"] { 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;
}
不怎么常用的屬性選擇器
4.4分組和嵌套
4.4.1分組
當多個元素的樣式相同的時候，我們沒有必要重復的為每一個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
div, p {
color: red;
}
4.4.2嵌套
多種選擇器可以混合起來使用，比如：.c1類內部所有p標簽設置字體顏色為紅色。
.c1 p {
color: red;
}
4.5 偽類選擇器
/* 未訪問的鏈接 */
a:link {
color: #FF0000
}
/* 鼠標移動到鏈接上 */
a:hover {
color: #FF00FF
}
/* 選定的鏈接 */
a:active {
color: #0000FF
}
/* 已訪問的鏈接 */
a:visited {
color: #00FF00
}
/*input輸入框獲取焦點時樣式*/
input:focus {
outline: none;
background-color: #eee;
}
4.6 偽元素選擇器
4.6.1 first-letter
常用的給首字母設置特殊樣式：
p:first-letter {
font-size: 48px; color: red;
}
4.6.2 before
在每個<p>元素之前插入內容
p:before { content:"*"; color:red; }
4.6.3 after
在每個<p>元素之后插入內容
p:after { content:"[?]"; color:blue; }
before和after多用於清除浮動。
4.7 選擇器的優先級
4.7.1CSS繼承
繼承是CSS的一個主要特征，它是依賴於祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的后代。例如一個body定義了的字體顏色值也會應用到段落的文本中。
body {
color: red;
}
此時頁面上所有標簽都會繼承body的字體顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
我們只要給對應的標簽設置字體顏色就可覆蓋掉它繼承的樣式。
p { color: green; }
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
4.7.2選擇器的優先級
我們上面學了很多的選擇器，也就是說在一個HTML頁面中有很多種方式找到一個元素並且為其設置樣式，那瀏覽器根據什么來決定應該應用哪個樣式呢？
其實是按照不同選擇器的權重來決定的，具體的選擇器權重計算方式如下圖：
除此之外還可以通過添加 !important方式來強制讓樣式生效，但並不推薦使用。因為如果過多的使用!important會使樣式文件混亂不易維護。
萬不得已可以使用!important