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