CSS 知識(shí)

一、CSS概述

CSS是Cascading Styles Sheets的縮寫(xiě)，中文譯名為層疊樣式表，是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。
HTML和CSS的關(guān)系就是“內(nèi)容”和“形式”的關(guān)系，由HTML組織網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容，而通過(guò)CSS來(lái)決定頁(yè)面的表現(xiàn)形式

1. CSS語(yǔ)法

CSS樣式表由一系列樣式規(guī)則組成，瀏覽器將這些規(guī)則應(yīng)用到相應(yīng)的元素上，下面是一條樣式規(guī)則。

h1{
    color: red;
    font-size: 25px;
}

css語(yǔ)法

2. CSS樣式規(guī)則的組成-----選擇器

一條CSS樣式規(guī)則由選擇器(selector)和聲明(declarations)組成。
選擇器是為了選中網(wǎng)頁(yè)中某些元素的，選擇器可以是一個(gè)標(biāo)記名，表示將網(wǎng)頁(yè)中該標(biāo)記的所有元素都選中，也就是定義了CSS規(guī)則的作用對(duì)象。
選擇器也可以是一個(gè)自定義的類名，表示將自定義的一類元素全部選中，為了對(duì)這一類元素進(jìn)行標(biāo)識(shí)，必須在這一類的每個(gè)元素的標(biāo)記里添加一個(gè)html屬性class＝"類名"；
選擇器還可以是一個(gè)自定義的id名，表示選中網(wǎng)頁(yè)中某一個(gè)唯一的元素，同樣，該元素也必須在標(biāo)記中添加一個(gè)html屬性id＝"id名"讓CSS來(lái)識(shí)別。

3. CSS屬性值的寫(xiě)法

如果屬性的某個(gè)值不是一個(gè)單詞，則值要用引號(hào)引起來(lái)

p {font-family: "sans serif"}；

如果一個(gè)屬性有多個(gè)值，則每個(gè)值之間要用空格隔開(kāi)

a {margin:6px 4px 3px}；

要為某個(gè)屬性設(shè)置多個(gè)候選值，則每個(gè)值之間用逗號(hào)隔開(kāi)

p {font-family: "Times New Roman", Times, serif}；

二、在HTML中引入CSS的方法

在HTML中，引入CSS的方法有行內(nèi)式、內(nèi)嵌式、導(dǎo)入式和鏈接式4種

1. 行內(nèi)式

html標(biāo)記都有一個(gè)通用的style屬性，行內(nèi)式就是在該屬性內(nèi)添加CSS屬性和值，如：

<td style="color: #FF0000; text-decoration: underline" width="88%">

有時(shí)我們需要做測(cè)試或?qū)€(gè)別元素設(shè)置CSS屬性時(shí)，可以使用這種方式，這種方式由于CSS屬性就在標(biāo)記內(nèi)，其作用對(duì)象就是標(biāo)記內(nèi)的元素。所以不需要指定CSS的選擇器，只需要書(shū)寫(xiě)CSS屬性和值。
缺點(diǎn)
沒(méi)有體現(xiàn)出CSS統(tǒng)一設(shè)置許多元素樣式的優(yōu)勢(shì)。

2. 嵌入式

嵌入式將頁(yè)面中各種元素的CSS樣式設(shè)置集中寫(xiě)在<style>和</style>之間，<style>標(biāo)記是專用于引入嵌入式CSS的一個(gè)html標(biāo)記，它只能放置在文檔頭部，即下面這段代碼只能放置在html文檔的<head>和</head>之間。

<style>
    h1{  color: red;    font-size: 25px; }
</style>

對(duì)于單一的網(wǎng)頁(yè)，這種方式很方便。但是對(duì)于一個(gè)包含很多頁(yè)面的網(wǎng)站，如果每個(gè)頁(yè)面都以嵌入式的方式設(shè)置各自的樣式，不僅麻煩，冗余代碼多，而且網(wǎng)站每個(gè)頁(yè)面的風(fēng)格不好統(tǒng)一。因此一個(gè)網(wǎng)站通常都是編寫(xiě)一個(gè)獨(dú)立的CSS文件，使用以下兩種方式之一，引入到網(wǎng)站的所有html文檔中

3. 鏈接式和導(dǎo)入式

鏈接式和導(dǎo)入式的目的都是將一個(gè)獨(dú)立的CSS文件引入到HTML文件，我們?cè)趯W(xué)習(xí)CSS或制作單個(gè)網(wǎng)頁(yè)時(shí)，為了方便可采取行內(nèi)式或嵌入式方法，但若要制作網(wǎng)站則主要應(yīng)采用鏈接式方法引入CSS。
鏈接式和導(dǎo)入式最大的區(qū)別在于鏈接式使用HTML的標(biāo)記引入外部CSS文件，而導(dǎo)入式則是用CSS的規(guī)則引入外部CSS文件，因此它們的語(yǔ)法不同
鏈接式是在網(wǎng)頁(yè)文檔頭部通過(guò)link標(biāo)記引入外部CSS文件，格式如下：

<link href="style1.css" rel="stylesheet"/>

外部樣式表文件書(shū)寫(xiě):
只要將方式一中<STYLE>和</STYLE>之間的定義內(nèi)容保存成一個(gè)以"css"為擴(kuò)展名的文本文件即可。

而使用導(dǎo)入式，則需要使用如下語(yǔ)句：

<style>
    @import url("style2.css");
</style>

三、選擇器的分類

選擇器的分類
標(biāo)記選擇器
偽類選擇器
類選擇器
id選擇器
關(guān)聯(lián)選擇器
組合選擇器

1.標(biāo)記選擇器

CSS標(biāo)記選擇器用來(lái)聲明哪種標(biāo)記采用哪種CSS樣式，因此，每一種html標(biāo)記的名稱都可以作為相應(yīng)的標(biāo)記選擇器的名稱。
標(biāo)記選擇器將擁有同一個(gè)標(biāo)記的所有元素全部選中。如：

<style>
p{              /* 標(biāo)記選擇器 */
    color:blue;
    font-size:18px;
}
</style>

2. 偽類選擇器

所謂偽類就是指標(biāo)記的狀態(tài)。
網(wǎng)頁(yè)中的鏈接標(biāo)記能響應(yīng)瀏覽者的點(diǎn)擊。a標(biāo)記有四種狀態(tài)能描述這種響應(yīng)，分別是a:link、a:visited、a:hover、a:active，a標(biāo)記在這幾種狀態(tài)下的樣式能夠通過(guò)偽類選擇器來(lái)分別定義，偽類選擇器的標(biāo)記和偽類之間用“:”隔開(kāi)。其格式為

偽類選擇器格式
在默認(rèn)的瀏覽器瀏覽方式下，超鏈接為統(tǒng)一的藍(lán)色并且有下劃線，被單擊過(guò)的超鏈接則為紫色并也有下劃線。
動(dòng)態(tài)超鏈接是通過(guò)CSS偽類選擇器實(shí)現(xiàn)的，因?yàn)閭晤惪梢悦枋龀溄釉诓煌瑺顟B(tài)下的樣式，所以我們通過(guò)定義a標(biāo)記的各種偽類具有不同的屬性風(fēng)格，就能制作出千變?nèi)f化的動(dòng)態(tài)超鏈接。
a標(biāo)記有四種偽類，用來(lái)描述鏈接的4種狀態(tài)

a標(biāo)記的4種偽類

<style>
    a {font-size: 14px; text-decoration: none; } 
    a:link {color: #666666;}
    a:visited {color: #996600; }
    a:hover {color: #ECBD00; text-decoration: underline;}
    a:active {color: #FF3399;}
</style>

<body>
    <a href="#">普通鏈接</a><a href="#">鼠標(biāo)懸停時(shí)鏈接</a><a href="#">點(diǎn)擊過(guò)鏈接</a>
</body>

效果：

效果

通過(guò)偽類選擇器做動(dòng)態(tài)超鏈接

偽類選擇器可以看成是一種特殊的標(biāo)記選擇器，它用來(lái)選中在某種狀態(tài)下的標(biāo)記
需要注意兩點(diǎn)：
1.鏈接偽類選擇器的書(shū)寫(xiě)應(yīng)遵循LVHA的順序，即CSS代碼中四個(gè)選擇器出現(xiàn)的順序應(yīng)為a:link→ a:visited→ a:hover→ a:active，若違反這種順序鼠標(biāo)停留和激活樣式就不起作用了。

各種偽類選擇器將繼承a標(biāo)記選擇器定義的樣式。
a:link選擇器只能選中具有href屬性的a標(biāo)記，而a選擇器能選中所有a標(biāo)記，包括用a標(biāo)記作為錨點(diǎn)。

P:first-line 首行
P:first-letter 首字母

3.類選擇器

標(biāo)記選擇器一旦聲明，那么頁(yè)面中所有該標(biāo)記的元素都會(huì)產(chǎn)生相應(yīng)的變化。
例如當(dāng)聲明<p>標(biāo)記為紅色時(shí)，頁(yè)面中所有的<p>元素都將顯示為紅色
但是如果希望其中某一些<p>元素不是紅色，而是藍(lán)色，就需要將這些<p>元素自定義為一類，用類選擇器來(lái)選中它們；或者希望不同標(biāo)記的元素應(yīng)用同一樣式，也可以將這些不同標(biāo)記的元素定義為同一類。
類選擇器以半角“.”開(kāi)頭，且類名稱的第一個(gè)字母不能為數(shù)字

p.warning {color: red}                    <P CLASS=“warning”>
.note { font-size: small }                <P CLASS=“note” >

格式

類選擇器

一個(gè)例子

<style>
    .one {color: red;}
    .two {font-size:20px;}
</style>
<p>選擇器之標(biāo)記選擇器1</p>
<p class="one">應(yīng)用第一種class選擇器樣式</p>
<p class="two">應(yīng)用第二種class選擇器樣式</p>
<p class="one  two">同時(shí)應(yīng)兩種class選擇器樣式</p>
<h3 class="two">h3同樣適用</h3>

以上定義了類別名的元素都會(huì)應(yīng)用相應(yīng)的類選擇器的樣式，其中第四行通過(guò)class=“one two”將兩種樣式同時(shí)加入，得到紅色20象素的大字體。第一行的p元素因未定義類別名則不受影響

4.id選擇器

id選擇器的使用方法與class選擇器基本相同，不同之處在于一個(gè)id選擇器只能應(yīng)用于html文檔中的一個(gè)元素，因此其針對(duì)性更強(qiáng)，而class選擇器可以應(yīng)用于多個(gè)元素。
id選擇器以半角“#”開(kāi)頭，且id名稱的第一個(gè)字母不能為數(shù)字。
例如 “#UserName”
格式

id選擇器格式

<style>
#one{
    font-weight:bold;       /* 粗體 */
}
#two{
    font-size:30px;     /* 字體大小 */
    color:#009900;      /* 顏色 */
}
</style>
<body>
<p id="one">ID選擇器1</p>
<p id="two">ID選擇器2</p>
<p id=“two”>ID選擇器3</p>  /*不推薦 ，ID應(yīng)該唯一*/
<p id=“one two”>ID選擇器3</p> /*錯(cuò)誤*/

上例中，第一行應(yīng)用了#one的樣式，第二行和第三行將一個(gè)id選擇器應(yīng)用到了兩個(gè)元素上，顯然違反了一個(gè)id選擇器只能應(yīng)用在一個(gè)元素上的規(guī)定，但瀏覽器卻也顯示了CSS樣式風(fēng)格且沒(méi)有報(bào)錯(cuò)。雖然如此，我們?cè)诰帉?xiě)CSS代碼時(shí)，還是應(yīng)該養(yǎng)成良好的編碼習(xí)慣，一個(gè)id最多只能賦予一個(gè)html元素，因?yàn)槊總€(gè)元素定義的id不只是CSS可以調(diào)用，JavaScript等腳本語(yǔ)言也可以調(diào)用，如果一個(gè)html中有兩個(gè)相同id屬性的元素，那么將導(dǎo)致JavaScript在查找id時(shí)出錯(cuò)，例如函數(shù)getElementById ( )。第四行在瀏覽器中沒(méi)有任何CSS樣式風(fēng)格顯示，這意味著ID選擇器不支持像class選擇器那樣的多風(fēng)格同時(shí)使用。因?yàn)樵睾蚷d是一一對(duì)應(yīng)的關(guān)系，不能為一個(gè)元素指定多個(gè)id，也不能將多個(gè)元素定義為一個(gè)id。類似id="one two"這樣的寫(xiě)法是完全錯(cuò)誤的。

關(guān)于類名和id名的大小寫(xiě)：CSS大體上是不區(qū)分大小寫(xiě)的語(yǔ)言，但是對(duì)于標(biāo)記實(shí)體的類名和id名是否區(qū)分大小寫(xiě)取決于標(biāo)記語(yǔ)言是否區(qū)分大小寫(xiě)，如果使用XHTML，那么類名和id名是區(qū)分大小寫(xiě)的，如果是HTML，則不區(qū)分大小寫(xiě) 。

5.關(guān)聯(lián)選擇器

關(guān)聯(lián)選擇符只不過(guò)是一個(gè)用空格隔開(kāi)的兩個(gè)或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性，而且因?yàn)閷盈B順序的規(guī)則，它們的優(yōu)先權(quán)比單一的選擇符大。例如，以下的上下文選擇符

P B { background: yellow }

是P B。這個(gè)值表示段落中的強(qiáng)調(diào)文本會(huì)是黃色背景；而其它的強(qiáng)調(diào)文本則不受影響。

為了減少樣式表的重復(fù)聲明，組合的選擇符聲明是允許的。例如，文檔中所有的標(biāo)題可以通過(guò)組合給出相同的聲明:

H1, H2, H3, H4, H5, H6 { 
    color: red; 
    font-family: sans-serif 
}

四、容器標(biāo)記 <div> 和 <span>

div和span是不含有任何語(yǔ)義的標(biāo)記，用來(lái)在其中放置任何網(wǎng)頁(yè)元素，就象一個(gè)容器一樣，當(dāng)把文字放入后，文字的格式外觀都不會(huì)發(fā)生任何改變，應(yīng)用容器標(biāo)記的主要作用是通過(guò)引入CSS屬性對(duì)容器內(nèi)元素內(nèi)容的表現(xiàn)進(jìn)行設(shè)置。

div和span的唯一區(qū)別是div是塊級(jí)元素，span是行內(nèi)元素

<body> <div style="background-color:#3399ff">塊狀區(qū)域1</div> 
<div style="background-color:#99ccff">塊狀區(qū)域2</div>
 <span style="background-color:#ffccff">行間區(qū)域1</span> 
<span style="background-color:#993399">行間區(qū)域2</span> </body>

結(jié)果預(yù)覽：

image.png

<div>標(biāo)記是一個(gè)塊狀的容器，其默認(rèn)的狀態(tài)就是占據(jù)整個(gè)一行。
<span>標(biāo)記是一個(gè)行內(nèi)的容器，其默認(rèn)狀態(tài)是行內(nèi)的一部分，占據(jù)行的長(zhǎng)短由內(nèi)容的多少來(lái)決定。

五、CSS的文本屬性

CSS中控制文本樣式的屬性主要有font-屬性類和text-屬性類，再加上修改顏色的color屬性和行高line-height屬性。

text-indent表示首行縮進(jìn)，在每段開(kāi)頭空兩格通常是用text-indent: 2em;來(lái)實(shí)現(xiàn)。
text-decoration: none;表示去掉下劃線
line-height: 150%;表示調(diào)整為1.5 倍行間距。

text-align：這個(gè)屬性用來(lái)設(shè)定文本的對(duì)齊方式。有以下值：

left (居左，缺省值)
right (居右)
center (居中)
justify (兩端對(duì)齊)
示例代碼如下：

.p2 {text-align:right}

text-decoration, 這個(gè)屬性主要設(shè)定文本劃線的屬性。有以下值：

none (無(wú)，缺省值)
underline (下劃線)
overline (上劃線)
line-through (當(dāng)中劃線)
示例代碼如下：

.p2 {text-decoration: underline overline;}

text-indent ,這個(gè)屬性設(shè)定文本首行縮進(jìn)。其值有以下設(shè)定方法：

length (長(zhǎng)度，可以用絕對(duì)單位(cm, mm, in, pt, pc)或者相對(duì)單位 (em, ex, px))
percentage (百分比，相當(dāng)于父對(duì)象寬度的百分比)
示例代碼如下：

.p1 {text-indent: 8mm}

line-height, 這個(gè)屬性設(shè)定每行之間的距離。其值有以下設(shè)定方法：

normal (缺省值)
length (長(zhǎng)度，可以用絕對(duì)單位(cm, mm, in, pt,pc)或者相對(duì)單位 (em, ex, px))
percentage (百分比，相當(dāng)于父對(duì)象高度的百分比)
示例代碼如下：

.p1 {line-height:1cm}

用顏色屬性(color)可以改變文本的字體顏色。
示例代碼如下：

.p1{color:gray}

font-style , 主要是用于指定斜體文字的字體樣式屬性。
這個(gè)屬性有三個(gè)值：

正常 - 正常顯示文本
斜體 - 以斜體字顯示的文字
傾斜的文字 - 文字向一邊傾斜（和斜體非常類似，但不太支持）
實(shí)例

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

font-family屬性：字體系列

font-family 屬性設(shè)置文本的字體系列。
font-family 屬性應(yīng)該設(shè)置幾個(gè)字體名稱作為一種"后備"機(jī)制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。
注意: 如果字體系列的名稱超過(guò)一個(gè)字，它必須用引號(hào)，如Font Family："宋體"。
多個(gè)字體系列是用一個(gè)逗號(hào)分隔指明：
實(shí)例

p{font-family:"Times New Roman", Times, serif;}

三段文字設(shè)置不同的字體粗細(xì)：

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

letter-spacing, 這個(gè)屬性用來(lái)設(shè)定字符之間的距離。

normal (缺省值)
length (長(zhǎng)度，可以用絕對(duì)單位(cm, mm, in, pt, pc)或者相對(duì)單位 (em, ex, px))
示例代碼如下：

.p1 {letter-spacing: 3mm}

六、CSS的繼承性

CSS具有兩個(gè)特性：層疊性和繼承性。

CSS的繼承性 ：是指如果子元素定義的樣式?jīng)]有和父元素定義的樣式發(fā)生沖突，那么子元素將繼承父元素的樣式風(fēng)格，并可以在父元素樣式的基礎(chǔ)上再加以修改，自己定義新的樣式，而子元素的樣式風(fēng)格不會(huì)影響父元素。如：

<style>
  body {
      text-align: center;}
  p {
      font-size: 24px;
      text-decoration: underline;}
  em {
      color: #FF0000;}
  .right{
      text-align: right;}
</style>

<body>
  <p><em>電子商務(wù)</em>教研</p>
  <p class=“right"><em>電子商務(wù) </em>教研室</p>
</body>

繼承性

注意

需要注意的是并不是所有的CSS屬性都具有繼承性，一般是CSS的文本屬性具有繼承性，而其他屬性（如背景屬性、盒子屬性等）則不具有繼承性。
具有繼承性的屬性：color, font-類，text-indent, text-align, text-decoration, line-height, letter-spacing, border-collapse等
無(wú)繼承性的屬性：text-decoration:none, 所有背景屬性，所有盒子屬性,布局屬性等

七、CSS的層疊性

CSS具有兩個(gè)特性：層疊性和繼承性。
層疊性 ：是指當(dāng)有多個(gè)選擇器都作用于同一元素時(shí)，即多個(gè)選擇器的作用范圍發(fā)生了重疊，CSS怎樣處理？CSS的處理原則是：
1）如果多個(gè)選擇器定義的規(guī)則不發(fā)生沖突，則元素將應(yīng)用所有選擇器定義的樣式，即效果累加。如：

<style>
  p{                    /* 標(biāo)記選擇器 */
      color:blue;
      font-size:18px;}
  .special{             /* 類別選擇器 */
      font-weight: bold;    }       /* 粗體 */
  #underline{
      text-decoration: underline; } /* 有下劃線 */
</style>
  <p>標(biāo)記選擇器1</p><p>標(biāo)記選擇器2</p>
  <p class="special">受到標(biāo)記、類兩種選擇器作用</p>
  <p id="underline" class="special">受到標(biāo)記、類和id三種選擇器作用</p>

層疊性

2）如果多個(gè)選擇器定義的規(guī)則發(fā)生了沖突，則CSS按選擇器的優(yōu)先級(jí)讓元素應(yīng)用優(yōu)先級(jí)高的選擇器定義的樣式。CSS規(guī)定選擇器的優(yōu)先級(jí)從高到低為：
行內(nèi)樣式 > ID樣式 > 類別樣式 > 標(biāo)記樣式。總的原則是：越特殊的樣式，優(yōu)先級(jí)越高。如：

<style>
p{      /* 標(biāo)記選擇器 */
    color:blue; 
    font-style: italic; }
.green{  /* 類選擇器 */
    color:green;    }
.purple{
    color:purple; }
#red{  /* ID選擇器 */
    color:red;}
</style>
<body>
<p>這是第1行文本</p>
<p class="green">這是第2行文本</p>
<p class="green" id="red">這是第3行文本</p>
<p id="red" style="color:orange;">這是第4行文本</p>
<p class="purple green">這是第5行文本</p>
</body>

選擇器的優(yōu)先級(jí)

可以通過(guò)!important強(qiáng)制改變選擇器的優(yōu)先級(jí)，則優(yōu)先級(jí)為!important >行內(nèi)樣式 > ID樣式 > 類別樣式 > 標(biāo)記樣式
另外，如果在同一個(gè)選擇器中定義了兩條相沖突的規(guī)則，則以后一條為準(zhǔn)。如果為某一條添加了!important，那么IE6總是以后一條為準(zhǔn)，不認(rèn)!important 。而Firefox/IE7以定義了!important的為準(zhǔn)

#box {
     color:red!important;  /*Firefox執(zhí)行這一條*/
     color:blue;                  /*IE6執(zhí)行這一條*/}

八、選擇器的組合

每個(gè)選擇器都有它的作用范圍，基本的選擇器的作用范圍都是一個(gè)單獨(dú)的集合

1.復(fù)合選擇器

復(fù)合選擇器就是兩個(gè)或多個(gè)基本選擇器，通過(guò)不同方式組合而成的選擇器。主要有:

交集選擇器
并集選擇器（組合選擇器）
后代選擇器（關(guān)聯(lián)選擇器）

交集選擇器是由兩個(gè)選擇器直接連接構(gòu)成，其結(jié)果是選中兩者各自作用范圍的交集。其中第一個(gè)必須是標(biāo)記選擇器，第二個(gè)必須是類選擇器或id選擇器。例如：h1.class；p#intro。這兩個(gè)選擇器之間不能有空格。

交集選擇器

交集選擇器將選中同時(shí)滿足前后二者定義的元素，也就是前者定義的標(biāo)記類型，并且指定了后者的類別或id的元素。它的作用范圍如圖所示

舉例：
例如由于所有的表單控件都是input標(biāo)記，如果設(shè)置input標(biāo)記選擇器的樣式，那么所有的表單控件都會(huì)受影響，如果只希望某個(gè)表單控件（如提交按鈕）受影響，則可用交集選擇器input.red{ ……}

input.red { color: #FF0000;}
<input type="submit" name="Submit" class="red" value="提交" />

對(duì)于上例IE7、Firefox還支持屬性選擇器
可不創(chuàng)建red類，直接寫(xiě)
input[type=‘submit’]

所謂并集選擇器就是對(duì)多個(gè)選擇器進(jìn)行集體聲明，多個(gè)選擇器之間用“,”隔開(kāi)。如果某些選擇器定義的樣式完全相同，或者部分相同，這時(shí)便可以利用并集選擇器同時(shí)聲明風(fēng)格完全相同或部分相同的樣式。如h2,.class{…}其選擇范圍如圖所示：

并集選擇器

<style>
h1,h2,h3,p {
font-size: 12px;
color: purple;
}
h2.special, .special, #one {
text-decoration: underline;}
</style>
<body>
<h1>示例文字h1</h1>
<h2 class="special">示例文字h2</h2>
<h3>示例文字h3</h3>
<h4 id="one">示例文字h4</h4>
<p class="special">示例文字p1</p>

image.png

通配符
如果要對(duì)網(wǎng)頁(yè)中所有的元素進(jìn)行集體聲明可使用通配選擇符 *

*{          /* 全局聲明 */
    color:purple;   /* 文字顏色 */
    font-size:15px; /* 字體大小 */
}
h2.special, .special, #one{     /* 集體聲明 */
    text-decoration:underline;  /* 下劃線 */}

在CSS選擇器中，還可以通過(guò)嵌套的方式，對(duì)特殊位置的html元素進(jìn)行控制，例如當(dāng)<a>與</a>之間包含<b>……</b>元素時(shí)，就可以使用后代選擇器選中出現(xiàn)在a元素中的b元素。a為父元素，b為子元素。
后代選擇器的寫(xiě)法是把外層的標(biāo)記寫(xiě)在前面，內(nèi)層的標(biāo)記寫(xiě)在后面，之間用空格隔開(kāi)。其選擇范圍如圖所示：
a b {…}

后代選擇器

<style>
a {
    font-size: 16px;
    color: red; 
}
a b {
    color: mediumpurple; 
}
</style>
<body>
<b>這是b標(biāo)記中的文字</b><br />
<a href="#">這是<b>a標(biāo)記中的b<span>標(biāo)記</span></b></a>

image.png

<a href="#">這是<b>a標(biāo)記中的b<span>標(biāo)記</span></b></a>
和其他所有CSS選擇器一樣，后代選擇器會(huì)繼承父元素的沒(méi)有沖突的樣式。
后代選擇器定義的具有繼承性的樣式同樣也能被其子元素繼承。例如在上例中，b元素內(nèi)又包含了span元素，那么span元素也將顯示為淡紫色。這說(shuō)明子元素（span）繼承了父元素（a b）的顏色樣式
后代選擇器的使用非常廣泛，實(shí)際上不僅標(biāo)記選擇器可以用這種方式組合，類選擇器和ID選擇器也都可以進(jìn)行嵌套，而且后代選擇器還能夠進(jìn)行多層嵌套。例如：
.special b { color : red }
#menu li { padding : 0 6px ; }
td.top .ban1 strong{ font-size : 16px ; }
#menu a:hover b
經(jīng)驗(yàn)：選擇器的嵌套在CSS的編寫(xiě)中可以大大減少對(duì)class或id的聲明。因此在構(gòu)建頁(yè)面html框架時(shí)通常只給外層標(biāo)記（父標(biāo)記）定義class或id，內(nèi)層標(biāo)記（子標(biāo)記）能通過(guò)嵌套表示的則利用這種方式，而不需要再定義新的class或id。
CSS優(yōu)先級(jí)總圖

image.png

復(fù)合選擇器的優(yōu)先級(jí)比組成它的單個(gè)選擇器的優(yōu)先級(jí)都要高。我們知道基本選擇器的優(yōu)先級(jí)是“ID選擇器 > 類選擇器 > 標(biāo)記選擇器”，所以不妨設(shè)ID選擇器的優(yōu)先級(jí)權(quán)重是100，類選擇器的優(yōu)先級(jí)權(quán)重是10，標(biāo)記選擇器的優(yōu)先級(jí)權(quán)重是1，那么復(fù)合選擇器的優(yōu)先級(jí)就是組成它的各個(gè)選擇器權(quán)重值的和。

h1{color:red;}          /* 權(quán)重=1 */
p em{color:blue;}       /* 權(quán)重=2 */
.warning{color:yellow;}         /* 權(quán)重=10 */
p.note em.dark{color:gray;}         /* 權(quán)重=22 */
#main{color:black;}         /* 權(quán)重=100 */

當(dāng)權(quán)重值一樣時(shí)，會(huì)采用“層疊原則”，一般后定義的會(huì)被應(yīng)用

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS

CSS

CSS 知識(shí)

一、CSS概述

1. CSS語(yǔ)法

2. CSS樣式規(guī)則的組成-----選擇器

3. CSS屬性值的寫(xiě)法

二、在HTML中引入CSS的方法

1. 行內(nèi)式

2. 嵌入式

3. 鏈接式和導(dǎo)入式

三、選擇器的分類

1.標(biāo)記選擇器

2. 偽類選擇器

3.類選擇器

4.id選擇器

5.關(guān)聯(lián)選擇器

四、容器標(biāo)記 <div> 和 <span>

五、CSS的文本屬性

六、CSS的繼承性

七、CSS的層疊性

八、選擇器的組合

1.復(fù)合選擇器

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS

CSS 知識(shí)

一、CSS概述

1. CSS語(yǔ)法

2. CSS樣式規(guī)則的組成-----選擇器

3. CSS屬性值的寫(xiě)法

二、在HTML中引入CSS的方法

1. 行內(nèi)式

2. 嵌入式

3. 鏈接式和導(dǎo)入式

三、選擇器的分類

1.標(biāo)記選擇器

2. 偽類選擇器

3.類選擇器

4.id選擇器

5.關(guān)聯(lián)選擇器

四、容器標(biāo)記 <div> 和 <span>

五、CSS的文本屬性

六、CSS的繼承性

七、CSS的層疊性

八、選擇器的組合

1.復(fù)合選擇器

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

三、選擇器的分類

四、容器標(biāo)記 <div> 和 <span>

五、CSS的文本屬性

六、CSS的繼承性