1、CSS介紹
概念：
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行渲染
語法：每一個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每一個聲明以後用分號結束
span {width: 1000px;background-color: red}
註釋：/*註釋內容*/
2、CSS的引入方式
一、行內樣式
行內式是在標籤的style屬性中設定CSS樣式。
<p style="color: red;font-size:20px">Hello World!</p>
二、內部樣式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p {color:green;font-size:20px}
</style>
</head>
三、外部樣式
外部樣式就是將css寫在一個單獨的文件(.css文件)中，而後在HTML頁面進行引入。
<link rel="stylesheet" href="Mystyle.css"> # 能夠在任意位置聲明，但通常在head標籤內部聲明
3、CSS基本選擇器
一、元素選擇器：直接賦予某元素一些樣式，直接選中這個元素標籤
p {color: "red";}
二、ID選擇器：賦予某ID一些樣式，#表明ID選擇器選中這個ID
#i1 {background-color: red;}
三、類選擇器：賦予某類class一些樣式，.表明類選擇器選中這個class
.c1 {font-size: 14px;}
p.c1 {color: red;} # 這個是表明有c1這個類的p元素
<p class="c1">我是有c1的p元素</p> # 樣式生效
<i class="c1">我是有c1的i元素</i> # 樣式不生效
注意：
樣式類名不要用數字開頭（有的瀏覽器不兼容）
標籤中的class屬性若是有多個，要用空格分隔。
四、通用選擇器：全部的標籤均可以使用這個樣式(可是優先級高的會覆蓋這個通用樣式)
* {font-size:24px;}
4、組合選擇器
一、兒子選擇器：只找兒子，孫子不要
/*選擇div下的a標籤*/
div>a {font-size: 25px}
<div>
<a href="">我是兒子a</a>
<a href="">我也是兒子a</a>
<p>
<a href="">我是孫子a</a> <!-- 孫子a字體沒有變大-->
</p>
</div>
二、後代選擇器：子子孫孫
/*在ID值爲d1的標籤中找p標籤*/
#d1 p {color: green}
<div id="d1">
<p>我是兒子P標籤</p>
<p>我也是兒子P標籤</p>
<a href="">
<p>我是孫子P標籤</p>
</a>
</div>
三、毗鄰選擇器
/*選擇緊接着<div></div>元素以後的一個<p></p>元素*/
div+p {color: deeppink}
<div></div>
<p>div下的第一個P</p> <!--變粉色-->
<p>div下的第二個P</p> <!--沒有變粉色-->
四、弟弟選擇器
/*ID值爲d2的標籤後面全部的兄弟p標籤*/
#d2~p{color:purple}
<div id="d2">d2</div>
<p>我是d2的弟弟p</p> <!--樣式生效-->
<a href="">我是d2的弟弟a</a> <!--樣式不生效-->
<p>我也是d2的弟弟p</p> <!--樣式生效-->
五、注意
兒子、孫子表明的是在某個標籤內的其餘標籤，是被某個標籤包含的，例如：
<div>
<p>div的兒子</p>
</div> 而毗鄰和弟弟並非包含關係，是同級的，例如：
<div></div>
<p>div的弟弟(毗鄰)</p>
<p>div的弟弟</p>
5、屬性選擇器
一、經常使用的：
/*用於選取帶有指定屬性的元素*/
/*找到全部帶title這個屬性的p標籤*/
p[title] {color: red;}
<p title="">p1</p>
<p title="">p2</p>
<p title="123">p3</p>
p一、p二、p3都生效
/*用於選取帶有指定屬性和值的元素。*/
/*找到title屬性值是'hello'的p標籤*/
p[title="hello"] {color: green;}
<p title="">p1</p>
<p title="">p2</p>
<p title="hello">p3</p>
只有p3生效
二、不經常使用的
/*找到全部title屬性以hello開頭的div元素*/
div[title^="hello"] {
color: red;
}
/*找到全部title屬性以hello結尾的div元素*/
div[title$="hello"] {
color: yellow;
}
/*找到全部title屬性中包含（字符串包含）hello的div元素*/
div[title*="hello"] {
color: red;
}
<div title="helloworld">helloworld</div>
<div title="hello world">hello world</div>
都生效
/*找到屬性值按照空格分割獲得的列表中包含指定的值的div元素*/
div[title~="hello"] {
color: green;
}
<div title="helloworld">helloworld</div>
<div title="hello world">hello world</div>
只有第二個生效
6、分組和嵌套
一、分組
當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
例如：
div, p {
color: red;
}
上面的代碼爲div標籤和p標籤統一設置字體爲紅色。
二、嵌套
多種選擇器能夠混合起來使用，好比：.c1類內部全部p標籤設置字體顏色爲紅色。
.c1 p {
color: red;
}
7、僞類選擇器
根據標籤不一樣狀態給標籤設置不一樣樣式
僞類選擇器格式：標籤:狀態 {樣式}
例如：
/* 未訪問的連接 */
a:link {
color: red
}
/* 已訪問的連接 */
a:visited {
color: blue
}
/* 鼠標移動到連接上 */
a:hover {
color: yellow
}
/* 點擊連接的那一瞬間 */
a:active {
color: pink
}
/*鼠標移上去以後*/
span:hover {color: purple}
/*input輸入框獲取焦點時樣式*/
input:focus {
background-color: green
}
8、僞元素選擇器
經過CSS操做HTML內容
一、first-letter
/*經常使用的給首字母設置特殊樣式*/
div:first-letter {
font-size: 48px;
color: red;
}
二、before
/*在每一個<p>元素以前插入內容*/
p:before {
content:"*";
color:red;
}
三、after
/*在每一個<p>元素以後插入內容*/
p:after {
content:"[?]";
color:blue;
}
before和after多用於清除浮動。
四、例如
/*css樣式*/
<style type="text/css">
div:first-letter{
font-size: 28px;
color: red;
}
p:before {
content: "*";
color: red;
}
p:after {
content: "?";
color: deeppink;
}
</style>
/*body部分代碼*/
<body>
<div>幽谷茶香，感嘆生命的茁壯</div>
<div>幽谷茶香，感嘆生命的茁壯</div>
<p>幽谷茶香，感嘆生命的茁壯</p>
<p>幽谷茶香，感嘆生命的茁壯</p>
<p>幽谷茶香，感嘆生命的茁壯</p>
</body>
9、選擇器的優先級
一、選擇器的優先級：瀏覽器是根據不一樣選擇器的權重來決定選用哪一個樣式的，具體的選擇器權重計算方式以下 內聯樣式(1000) > id選擇器(100) > 類選擇器(10) > 元素選擇器(1) > 繼承(0)
內聯樣式的權重爲：1000 --> <p style="color: red;">內聯樣式</p>
id選擇器的權重爲：100 --> <p id="d1">id選擇器</p>
類選擇器的權重爲：10 --> <p class="c1">類選擇器</p>
元素選擇器的權重爲：1 --> <p>元素選擇器</p>
繼承的權重爲：0
例子：
/*css樣式*/
<style>
/* p1權重100 */
#p1 {color: orange}
/* .c1>.c2權重10+10=20 */
.c1>.c2 {color: yellow}
/* c2權重10 */
.c2 {color: green}
/* p權重1 */
p {color: red}
</style>
/*body部分代碼*/
<div class="c1">
<p class="c2" id="p1" >c1內部的p標籤</p>
</div>
/*最終顏色是orange*/
注意：權重計算永不進位 也就是說想.c1>.c2這樣每一個類選擇器權重是10(兩位數)，兩個就是20，雖然權重能夠相加， 可是權重計算不會進位，也就是說就算有11個類選擇器相加，也不會進位，不會變成3位數， 所以不管多少個類選擇器相加權重也是同樣沒有一個id選擇器的權重大，只是能夠在類選擇器中佔的權重大， 好比.c1>.c2>.c3權重比.c1>.c2權重大 不講道理的important： 經過添加!important方式來強制讓樣式生效，但並不推薦使用。由於若是過多的使用!important會使樣式文件混亂不易維護。 萬不得已的狀況下才使用!important
二、css繼承
繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。 繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。
例如一個div定義了的字體顏色值也會應用到div的後代中。
/*css樣式*/
<style>
.c {color: red}
</style>
/*body部分代碼*/
<body>
<div class="c">
abc
<p>def</p>
<div>
<p>gh</p>
</div>
</div>
<p>qwe</p>
</body>
上面的代碼中abc def gh 都會變成紅色
而qwe則不會變
然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0， 咱們只要給對應的標籤設置字體顏色就可覆蓋掉它繼承的樣式。
/*css樣式*/
<style>
.c {color: red}
p {color: blue;}
</style>
/*body部分代碼*/
<body>
<div class="c">
abc
<p>def</p>
<div>
<p>gh</p>
</div>
</div>
<p>qwe</p>
</body>
上面的代碼中只有abc會變成紅色
而 def gh qwe則變成藍色
注意： 繼承是CSS重要的一部分， 但CSS繼承也是有限制的， 有一些屬性不能被繼承， 如：border, margin, padding, background等。