css初識(shí)
CSS(Cascading Style Sheets)通常稱為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表），主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。css提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。
css三種引入方式
內(nèi)部樣式表
內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中，并且用style標(biāo)簽定義，其基本語法格式如下：
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
我們把style標(biāo)簽一般位于head標(biāo)簽中title標(biāo)簽之后；type="text/CSS"，type表示“類型”，text就是“純文本”，css也是純文本。
行內(nèi)式（內(nèi)聯(lián)樣式）
內(nèi)聯(lián)樣式，又有人稱行內(nèi)樣式、行間樣式、內(nèi)嵌樣式。是通過標(biāo)簽的style屬性來設(shè)置元素的樣式，其基本語法格式如下：
<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>
語法中style是標(biāo)簽的屬性，實(shí)際上任何HTML標(biāo)簽都擁有style屬性，用來設(shè)置行內(nèi)式。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同，行內(nèi)式只對(duì)其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用。
外部樣式表（外鏈?zhǔn)剑?/strong>
鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中，通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：
<head>
<link href="CSS文件的路徑" rel="stylesheet" />
</head>
href：定義所鏈接外部樣式表文件的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。
type：定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。
rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。
| 樣式表 | 優(yōu)點(diǎn) | 缺點(diǎn) | 使用情況 | 控制范圍 |
|---|---|---|---|---|
| 行內(nèi)樣式表 | 書寫方便，權(quán)重高 | 沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離 | 較少 | 控制一個(gè)標(biāo)簽（少） |
| 內(nèi)部樣式表 | 部分結(jié)構(gòu)和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個(gè)頁面（中） |
| 外部樣式表 | 完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離 | 需要引入 | 最多，強(qiáng)烈推薦 | 控制整個(gè)站點(diǎn)（多） |
css選擇器
要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器（選擇符）。
基礎(chǔ)選擇器
標(biāo)簽選擇器
標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。其基本語法格式如下：
標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
css選擇器的語法，是key-value的形式；標(biāo)簽選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式，同時(shí)這也是他的缺點(diǎn)，不能設(shè)計(jì)差異化樣式。標(biāo)簽選擇器 可以把某一類標(biāo)簽全部選擇出來；所有的標(biāo)簽都可以是選擇器。
ID選擇器
針對(duì)某一個(gè)特定的標(biāo)簽來使用，只能使用一次。css中的ID選擇器以”#”來定義。
id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名，其基本語法格式如下：
#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
我們強(qiáng)調(diào)，id屬性值應(yīng)該是唯一的，所以id選擇器只能選中一個(gè)標(biāo)簽。
類選擇器
類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名
類選擇器可以針對(duì)你想要的所有標(biāo)簽，添加該類使用，非常靈活，其語法如下：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標(biāo)簽調(diào)用的時(shí)候用 class=“類名” 即可。類選擇器最大的優(yōu)勢是可以為元素對(duì)象定義單獨(dú)或相同的樣式。 可以選擇一個(gè)或者多個(gè)標(biāo)簽 。
另外，同一個(gè)標(biāo)簽可以使用多個(gè)類選擇器，中間用空格隔開，如：
<div class="class-one class-two">測試</div>
類的命名，我們建議：
- 長名稱或詞組可以使用中橫線來為選擇器命名。
- 不建議使用“_”下劃線來命名CSS選擇器。
- 不要純數(shù)字、中文等命名， 盡量使用英文字母來表示。
- 樣式顯示效果跟HTML元素中的類名先后順序沒有關(guān)系,受CSS樣式書寫的上下順序有關(guān)
我們在使用類選擇器時(shí)，不要去試圖用一個(gè)類型，把某個(gè)標(biāo)簽的所有樣式寫完，這個(gè)標(biāo)簽可以多攜帶幾個(gè)類，共同完成這個(gè)標(biāo)簽的樣式，使用類選擇器，類內(nèi)容盡量不要太大，要有“公共”的概念，能夠讓更多的標(biāo)簽使用。
怎么選擇類和id選擇器
我們一般在css上選擇class選擇器，id在特殊情況下使用在樣式上，因?yàn)槲覀冋J(rèn)為，id屬性盡可能的交給js去使用，來控制html的行為。
總結(jié)：
- 標(biāo)簽選擇器針對(duì)的是頁面上的一類標(biāo)簽。
- ID選擇器是只針對(duì)特定的標(biāo)簽(一個(gè))，ID是此標(biāo)簽在此頁面上的唯一標(biāo)識(shí)。
- 類選擇器可以被多種標(biāo)簽使用。直接在標(biāo)簽應(yīng)用類選擇器即可
通配符選擇器
通配符 選擇器用“*”號(hào)表示，能匹配頁面中所有的元素。
通配符選擇器，將匹配任何標(biāo)簽。其基本語法如下：
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
css復(fù)合選擇器
下面，我們來說一下css中的復(fù)合選擇器
復(fù)合選擇器包括：后代選擇器，子代選擇器，交集選擇器，并集選擇器和偽類選擇器。
后代選擇器
后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。
后代選擇器，描述的是一種祖先結(jié)構(gòu),也并不是一定緊挨著的，但他們保持著一種后代關(guān)系。
子代選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級(jí)標(biāo)簽寫在前面，子級(jí)標(biāo)簽寫在后面，中間跟一個(gè) > 進(jìn)行連接，注意，符號(hào)左右兩側(cè)各保留一個(gè)空格。
如，
.demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。
通俗一點(diǎn)來說，子代選擇器，只選擇自己的兒子
交集選擇器
交集選擇器由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器，或者id選擇器，兩個(gè)選擇器之間不能有空格，所謂交集選擇器就是并且的意思
如， p.one 選擇的是： 類名為 .one 的 段落標(biāo)簽。 如果后一個(gè)選擇器id選擇器則，如p#one，取交集的意思，選擇的元素要求同時(shí)滿足兩個(gè)條件：必須是p標(biāo)簽，然后必須是one的標(biāo)簽
并集選擇器
并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過逗號(hào)連接而成的，
任何形式的選擇器（包括標(biāo)簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。如， .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個(gè)選擇器都會(huì)執(zhí)行顏色為紅色。 通常用于集體聲明。
偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個(gè)，第n個(gè)元素
鏈接偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個(gè)，第n個(gè)元素
偽類選擇器分為靜態(tài)偽類和動(dòng)態(tài)偽類。
（1）靜態(tài)偽類：
:link 超鏈接點(diǎn)擊之前
:visited 鏈接被訪問過之后
（2）動(dòng)態(tài)偽類：針對(duì)所有標(biāo)簽都適用的樣式。
:hover “懸?！保菏髽?biāo)放到標(biāo)簽上的時(shí)候
:active “激活”： 鼠標(biāo)點(diǎn)擊標(biāo)簽，但是不松手時(shí)。
:focus 是某個(gè)標(biāo)簽獲得焦點(diǎn)時(shí)的樣式（比如某個(gè)輸入框獲得焦點(diǎn)）
針對(duì)超鏈接，常用的四種偽類：
- :link /* 未訪問的鏈接 */
- :visited /* 已訪問的鏈接 */
- :hover /* 鼠標(biāo)移動(dòng)到鏈接上 */
- :active /* 選定的鏈接 */
寫的時(shí)候，他們的順序盡量不要顛倒 按照 lvha 的順序
a { /* a是標(biāo)簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標(biāo)經(jīng)過 */
color: red; /* 鼠標(biāo)經(jīng)過的時(shí)候，由原來的 灰色 變成了紅色 */
}
