目錄
如何添加CSS之行內樣式
當瀏覽器讀取一個樣式表時，它將根據樣式表中的信息對HTML文檔進行格式化
CSS中有三種插入樣式表的方法
1.內聯CSS
2.內部CSS
3.外部CSS
內聯CSS：也稱之為內聯樣式，又稱為行內樣式。它被用來為一個單一的元素應用一個獨特的樣式。
要使用內聯樣式需要將樣式屬性添加到相關的元素中，樣式屬性可以包含任何css屬性。
比如在div上添加一個內聯樣式需要定義一個style屬性
一些文字
另外一些文字
在這段里，標簽直接作為選擇器使用，最后一個樣式聲明可以不用添加分號，但是建議大家添上，這樣可以避免在添加新的樣式時忘記添。
盡量少用內聯樣式。
行內樣式存在的問題：沒有使結構和樣式相分離，樣式代碼和CSS代碼寫到了一起，雜亂。
通過內部樣式添加CSS
如果一個單一的HTML頁面有一個獨特的風格，那可以使用一個內部樣式表。
內部樣式表一般定義在head元素里，通過style元素來定義。頁面的樣式聲明均需要添加在style元素內部。
CSS選擇器：用來尋找或選擇你想要定義樣式的HTMl元素的。
1.元素選擇器：根據元素名稱選擇html元素
例如這段代碼中的body，h1，就是元素選擇器css三種樣式中的優先級順序，根據這個名稱選擇了這個html文檔里的全部p元素。
-left用于定義h1標題元素位于父容器左側的距離。
內部樣式解決了行內樣式的代碼分離問題。
弊端1：內部樣式只能作用與一個頁面，如果要實現多個頁面共享一個樣式，就做不到了。
弊端2：隨著樣式代碼的不斷增加，在編輯器中，要不停的上下滾動屏幕，非常不方便。
如何添加CSS外部樣式
外部CSS：也叫外部樣式，可以通過改變一個文件來改變整個網站的外觀，外部樣式將css代碼放在一個獨立的，以.css為后綴名的文件中，使html頁面結構文件和css樣式文件完全獨立開來。
每個html頁面都必須在head元素里面添加一個元素
link是鏈接的意思，在link元素里定義rel屬性css三種樣式中的優先級順序，rel是的縮寫，譯為關系、關聯。值為，表示關聯一個樣式表，再定義一個href屬性，用來設置一個對外部樣式表文件的引用，值為css文件的路徑。
例如：
CSS樣式表的優先級
如果三個樣式表修飾同一個元素，哪一個優先起作用？
內聯樣式作用優先級最高，內部樣式和外部樣式，瀏覽器最后讀取的優先級高。
當一個html元素有一個以上的樣式時，作用優先級如下：
在一個html元素捏，內聯樣式優先級最高，會覆蓋外部樣式和內部樣式以及瀏覽器默認樣式。
在head里添加的內部樣式和引入的外部樣式，后添加和引入的優先級高。
瀏覽器默認的樣式優先級最低。
CSS選擇器
CSS選擇器：用來尋找或選擇你想要定義樣式的html元素的。
選擇器類別：
1.簡單選擇器：根據名稱、ID、類別來選擇元素。
2.組合選擇器：根據元素之間的特定關系來選擇元素。
3.偽類選擇器：根據某種狀態來選擇元素。
4.偽元素選擇器：為一個元素的指定部分設置樣式。
5.屬性選擇器：根據一個屬性或屬性值來選擇。
CSS簡單選擇器 元素選擇器
：根據元素名稱來選擇html元素的。
ID選擇器
：使用一個html元素的id屬性來選擇一個特定的元素。
元素的id是唯一的。所以id選擇器是用來選擇一個唯一元素的。
一段文字
#para2 {
text-align: center;
}#+id
id名稱不能以數字開頭。
類選擇器
：可以選擇具有特定class屬性的html元素。
.+類別名稱
一些文字
另外一些文字
一段文字
.italic {
font-style: initial;
}
p.deco{
text-decoration:underline ;
}font-style：聲明字體風格 表示斜體
text-：聲明文本修飾樣式 表示下劃線
分組選擇器
：選擇所有具有相同樣式的html元素。
實現方法：將多個選擇器用逗號分隔。
通用選擇器
：選擇頁面上的所有html元素。
定義方法：使用通配符星號。（*）
*{
background-color:#000080;
}CSS組合選擇器 后代選擇器
：通過空格連接
匹配作為指定元素后代的所有元素
一號標題
文本1
三號標題
-
哈哈哈哈哈哈哈哈哈1
-
哈哈哈哈哈哈哈哈哈2
-
哈哈哈哈哈哈哈哈哈3
div h3 {
color:blue;
}
div li p {
color:blue;
}子選擇器
：通過大于號（>）連接
只能選擇作為某元素的子元素，不能選擇到孫輩的元素
div>p {
color:red;
}相鄰的兄弟選擇器
：通過加號（+）連接
一般兄弟選擇器
：通過波浪線（~）連接
CSS偽類選擇器
偽類選擇器：屬于類選擇器中的一種，根據特定狀態選取元素
基本語法：：鼠標行為 {}
為其他基礎選擇器 ：鼠標行為為常見的偽類選擇器
常用的偽類選擇器
鼠標點擊前
：link
代表鼠標沒有操作時元素的默認樣式
鼠標點擊后
：
代表鼠標點擊并離開元素之后的樣式
鼠標懸停時
：hover
代表鼠標懸停或者劃過元素時元素的樣式
鼠標點擊時
：
代表鼠標點擊元素瞬間，元素顯示的樣式
注意：1.冒號和后面的鼠標行為，沒有任何空格，必須連接在一起；
2.四個偽類選擇器必須按照以上介紹的順序書寫（:link,:,:hover,:），否則在瀏覽器中部分樣式不能實現
3.偽類選擇器全部一起使用的情況，主要是應用在超鏈接上，偶爾也會獨立使用在其他標簽上面。
4.偽類選擇器也可以應用在其他元素上，但是只能實現激活瞬間和hover鼠標懸停效果。
CSS偽元素選擇器
通過偽元素選擇器，可以設置元素指定部分的樣式。主要用來設置元素內文本的首字母，首行的樣式、或是在元素內容之前或之后插入其他內容。
基本語法：::- {}
是目標元素
::-代表的是向目標元素內添加偽元素并對偽元素的內容進行修飾
::first-
用來實現向文本的首個字符添加特殊樣式
::first-line
用來實現向文本的首行添加特殊樣式
::
用來實現在元素內容之前插入內容
::after
用來實現在元素內容之后插入內容
::
用來更改選中文本的樣式
div::first-letter {
color: blue;
font-size: 30px;
}為第一個字母添加樣式
div::first-line {
color: blue;
font-size: 30px;
}為第一行字母添加樣式
div::before {
content: "我是向前添加";
font-size: 30px;
}
div::after {
content: "我是向后添加";
}向前或向后添加
注意：在使用偽元素選擇器向前向后插入內容時必須配合才能實現效果，向前向后插入進來的內容都需要符合css樣式聲明的基本語法
div::selection {
color: red;
background-color: skyblue;
}選中文本的樣式
注意：偽元素選擇器只支持以下幾個樣式聲明：color（文本顏色），（背景），（鼠標樣式），（描邊效果）
CSS屬性選擇器
：是根據屬性或屬性值來查找元素。
基本語法：[]
或 [="value"]
譯為元素，譯為屬性
[]：查找帶有該屬性的元素，然后添加樣式聲明
css選擇器的四種屬性
1.[]：來查找HTMl結構中，帶有屬性的所有元素
2.[="value"]：來查找HTMl結構中，帶有屬性，并且屬性值為value的元素
3.[~="value"]：來查找HTMl結構中，帶有屬性，并且在多個屬性值中包含value的元素
4.[|="value"]：來查找HTMl結構中帶有屬性，并且屬性值以value或者是value-開頭的元素
該屬性的值只能有一個，不能有多個。
簡單選擇器和組合選擇器，可以完成元素的查找。
其他選擇器可以更加精準高效的查找元素，從而能提高我們編碼速度。
屬性選擇器，在實際開發的過程中，大部分會應用在表單控件中，因為表單控件可添加的屬性比較多。