1 CSS概述

1.1 CSS的定義

　　全名：Cascading Style Sheets -> 層疊樣式表
　　定義：CSS成為層疊樣式表，它主要用于設置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
　　CSS以HTML為基礎，提供了豐富的功能（如字體、顏色、背景的控制以及整體排版等等），還可以針對不同的瀏覽器設置不同的樣式。

(1) 層疊的概念
　　CSS—層疊樣式表，層疊就是瀏覽器對多個樣式來源進行疊加，最終確定結(jié)果的過程。

上圖中有兩個樣式來源，第一個是引用的css1.css，第二個是自己在style中編寫的樣式。

“層疊”是個疊加的過程，可通過下圖表示：

層疊是CSS的核心機制，理解了它才能以最經(jīng)濟的方式寫出最容易改動的CSS，讓文檔外觀在達到設計要求的同時，也給用戶留下一些空間，讓他們根據(jù)需要更改文檔的顯示效果，例如調(diào)整字號。

(2) 層疊的規(guī)則

　　由于樣式的來源不同，瀏覽器在加載樣式時，需要計算出最終的樣式值，這樣才能顯示出正確的界面效果——瀏覽器會通過疊加和覆蓋這兩種方式來生成最終的樣式值。

　　

　　如上圖，不同來源的兩個樣式，第一個樣式設置了font-weight，第二個沒有，瀏覽器會把它疊加在一起，即瀏覽器會把各個零散的整合成一個整體。

　　第一個樣式color:red，第二個樣式color:blue，瀏覽器會讓后者覆蓋前者，最終結(jié)果還是color:blue。

覆蓋的默認規(guī)則是后者覆蓋前者，但是又一個特殊情況——!important。

　　如上圖。雖然color:blue是后來者，但是它沒有居上，因為前者color:red跟著!important。

　　這就像得到一個尚方寶劍，有最高執(zhí)行權(quán)，其他人統(tǒng)統(tǒng)讓路，否則佛擋殺佛。

1.2 HTML、CSS與JS三者的關(guān)系

　　HTML：頁面結(jié)構(gòu)，負責從語義的角度搭建頁面結(jié)構(gòu)。
　　CSS：頁面樣式表現(xiàn)，負責從審美的角度美化頁面。
　　JavaScript：交互行為，負責從交互的角度提升用戶體驗。

HTML+CSS是為了實現(xiàn)Web標準的樣式和結(jié)構(gòu)分離

1.3 CSS調(diào)用類型
(樣式的來源)

(1) 缺省樣式：瀏覽器樣式
    所有的標簽在不同的瀏覽器中都有各自默認的樣式，如h1,h2,p,div,span,ul等，可以通過設置修改瀏覽器的樣式。
    瀏覽器自帶一個默認的樣式，如果html中沒有為標簽設置樣式，則瀏覽器會按照自己的樣式來顯示。
    但是瀏覽器默認樣式的級別是最低的，一旦有其他地方設置了標簽樣式，瀏覽器默認樣式就會被沖掉。
    
    注:不同瀏覽器的默認樣式有些地方是不一樣的。

默認樣式代碼

html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默認狀態(tài)下一塊狀顯示，未顯示的將以內(nèi)聯(lián)元素顯示，該列表針對HTML4版本，部分元素在XHTML1中將廢棄*/
li { display: list-item }/*默認以列表顯示*/
head { display: none }/*默認不顯示*/
table { display: table }/*默認為表格顯示*/
tr { display: table-row }/*默認為表格行顯示*/
thead { display: table-header-group }/*默認為表格頭部分組顯示*/
tbody { display: table-row-group }/*默認為表格行分組顯示*/
tfoot { display: table-footer-group }/*默認為表格底部分組顯示*/
col { display: table-column }/*默認為表格列顯示*/
colgroup { display: table-column-group }/*默認為表格列分組顯示*/
td, th { display: table-cell; }/*默認為單元格顯示*/
caption { display: table-caption }/*默認為表格標題顯示*/
th { font-weight: bolder; text-align: center }/*默認為表格標題顯示，呈現(xiàn)加粗居中狀態(tài)*/
caption { text-align: center }/*默認為表格標題顯示，呈現(xiàn)居中狀態(tài)*/
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,var, address { font-style: italic }
pre, tt, code, kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea, input, object, select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }/*定義sub元素默認為下標顯示*/
sup { vertical-align: super }/*定義sub元素默認為上標顯示*/
table { border-spacing: 2px; }
thead, tbody, tfoot { vertical-align: middle }/*定義表頭、主體表、表腳元素默認為垂直對齊*/
td, th { vertical-align: inherit }/*定義單元格、列標題默認為垂直對齊默認為繼承*/
s, strike, del { text-decoration: line-through }/*定義這些元素默認為刪除線顯示*/
hr { border: 1px inset }/*定義分割線默認為1px寬的3D凹邊效果*/
ol, ul, dir, menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "A" }/*定義換行元素的偽對象內(nèi)容樣式*/
:before, :after { white-space: pre-line }/*定義偽對象空格字符的默認樣式*/
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
 /* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }/*定義BDO元素當其屬性為DIR="ltr"時的默認文本讀寫顯示順序*/
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }/*定義BDO元素當其屬性為DIR="rtl"時的默認文本讀寫顯示順序*/
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }/*定義任何元素當其屬性為DIR="ltr"時的默認文本讀寫顯示順序*/
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }/*定義任何元素當其屬性為DIR="rtl"時的默認文本讀寫顯示順序*/
@media print { /*定義標題和列表默認的打印樣式*/
    h1 { page-break-before: always }
    h1, h2, h3,    h4, h5, h6 { page-break-after: avoid }
    ul, ol, dl { page-break-before: avoid }
}

瀏覽器默認樣式

View Code

(2) 內(nèi)聯(lián)樣式：行間式，在標簽的style屬性中設定CSS樣式。
               通常用于特殊場合的特殊元素。
    <p>This is tag of paragraph</p>

(3) 內(nèi)部樣式：嵌入式，把CSS樣式代碼集中寫在<head>標簽的<style></style>內(nèi)部。
               通常用于單個page特有的樣式。
    <head>
        ...
        <style type="text/css">
            ...此處寫CSS樣式
        </style>
    </head>

(4) 外部樣式：鏈接式，將一個獨立的.css文件引入到HTML文件中，使用<link>標記寫在<head></head>標記中。
               樣式代碼存放在獨立的.css文件中。
               通常用于多個page頁面共享樣式，如：論壇帖子的排版。

    <head>
        ...
        <link href="My.css" rel="stylesheet" type="text/css">
    </head>

(5) 導入樣式：@import -> 不推薦使用的方式，會導致css不能并行下載，并且要求導入樣式的書寫必須在所有的css規(guī)則書寫之前。

    <style type="text/css">
        /*將某一個css文件的樣式直接導入到當前位置*/
        @import url(css/main.css);

        p {
            color:green; /*設置字體顏色*/
            background-color:silver;
        }
    </style>
    
    注意：
    導入式會在整個網(wǎng)頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網(wǎng)頁比較大則會兒出現(xiàn)先顯示無樣式的頁面，閃爍一下之后，再出現(xiàn)網(wǎng)頁的樣式。這是導入式固有的一個缺陷。
    
    使用鏈接式時與導入式不同的是它會以網(wǎng)頁文件主體裝載前裝載CSS文件，因此顯示出來的網(wǎng)頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網(wǎng)頁，然后再顯示有樣式的網(wǎng)頁，這是鏈接式的優(yōu)點。

2 CSS語法

2.1 CSS基礎語法

2.1 CSS基礎語法

(1) CSS規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
    
    selector {declaration1; declaration2; ... declarationN }

    選擇器通常是您需要改變樣式的 HTML 元素。
    每條聲明由一個屬性和一個值組成。
    
    注：如果要定義不止一個聲明，則需要用分號將每個聲明分開。    
    p {
        text-align: center;
        color: black;
        font-family: arial;
    }
    
(2) 屬性
    屬性（property）是您希望設置的樣式屬性（style attribute）。
    每個屬性有一個值。屬性和值被冒號分開。
    
    selector {property: value}
    
(3) 值
    當值為顏色值時，有不同寫法：
    p { color: #ff0000; }
    p { color: #f00; }
    p { color: rgb(255,0,0); }
    p { color: rgb(100%,0%,0%);    
    
    當值為若干單詞，則要給值加引號：
    p {font-family: "sans serif";}
    

2.2 CSS選擇器

(1) 通配符選擇器

(1) 通配符選擇器
　　通配符選擇器使用“*”號表示，能匹配頁面中所有的元素。
    注: 通配符的穿透力很強，其優(yōu)先級高于繼承的樣式，會覆蓋繼承的樣式，一般情況下都不會使用。
    
    作用：選擇所有標簽
    格式：
    * {
        屬性：值；
    }

    注意：
    在企業(yè)開發(fā)中一般不會使用通配符選擇器。
    理由是：由于通配符選擇器是設置界面上所有的標簽的屬性，
    所以在設置之前會遍歷所有的標簽如果當前界面上的標簽比較多，那么性能就會比較差
    
    例：
    * {color: yellow}

View Code

(2) 標簽選擇器

(2) 標簽選擇器
    又稱元素選擇器
    最常見的 CSS 選擇器是元素選擇器,文檔的元素就是最基本的選擇器。
    如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
    
    作用：根據(jù)指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然后設置屬性。
    格式：
    標簽名稱 {
        屬性：值;
    }

    注意：
    1、只要是HTML的標簽都能當做標簽選擇器
    2、標簽選擇器選中的是當前界面中的所有標簽,而不能單獨選中某一標簽
    3、標簽選擇器，無論嵌套多少層都能選中
    
    例：
    html {color:black;}
    h1 {color:blue;}
    h2 {color:silver;}

View Code

(3) 類選擇器

(3) 類選擇器
    類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結(jié)合使用。
    匹配所有class屬性中包含info的元素。
    語法：.類名{樣式}（類名不能以數(shù)字開頭，類名要區(qū)分大小寫。）
           .ClassName ：.+Class類的名稱；類名是區(qū)分大小寫。
           
    作用：根據(jù)指定的類名稱，在當前界面中找到對應的標簽，然后設置屬性
    格式：
    .類名稱 {
        屬性：值;
    }

    注意：
    1、類名就是專門用來給某個特定的標簽設置樣式的
    2、每個標簽都可以設置一個或多個class（空格分隔），class就相當于人/標簽的名稱，因此同一界面內(nèi)class可以重復
    3、引用class一定要加點.
    4、類名的命名規(guī)則與id的命名規(guī)則相同

    
    例：
    .Mycolor {color: yellow}
    
    ID選擇器與class選擇器的區(qū)別：
    相同的class屬性值，可以在HTML中出現(xiàn)多次，ID屬性值在頁面中則只能出現(xiàn)一次。
    一個class的屬性可以有多個值，也就是說一個標簽可以有多個類。

View Code

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id選擇器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            color: green;
        }
        .p3 {
            color: blue;
        }
    </style>
</head>

<body>
<p class="p1">大多數(shù)人的帥，都是浮在表面的，是外表的帥</p>
<p class="p2">而EGON，不僅具備外表帥，內(nèi)心更是帥了一逼</p>
<p class="p3">EGON就是我，我就是EGON</p>
</body>

</html>



#練習
第一行與第三行的顏色都是紅色
第一行與第二行的字體大小都是50px
第二行與第三行內(nèi)容有個下劃線

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id選擇器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            font-size: 50px;
        }
        .p3 {
            text-decoration: underline;
        }

    </style>
</head>

<body>
<p class="p1 p2">第一行內(nèi)容</p>
<p class="p2 p3">第二行內(nèi)容</p>
<p class="p1 p3">第三行內(nèi)容</p>
</body>

</html>

示例

View Code

(4) ID選擇器

(4) ID選擇器
　　HTML標簽都有公共ID屬性，而且整個頁面唯一。
    ID選擇器使用“#”號進行標識，后面緊跟ID名字。
    
    語法：#ID名{樣式}（ID名不能以數(shù)字開頭）
    作用：根據(jù)指定的id名稱，在當前界面中找到對應的唯一一個的標簽，然后設置屬性
    格式：
        id名稱 {
            屬性：值;
        }

    注意：
        1、在企業(yè)開發(fā)中如果僅僅只是為了設置樣式，通常不會使用id，在前端開發(fā)中id通常是留給js使用的
        2、每個標簽都可以設置唯一一個id，id就相當于人/標簽的身份證，因此在同一界面內(nèi)id絕不能重復
        3、引用id一定要加#
        4、id的命名只能由字符、數(shù)字、下劃線組成，且不能以數(shù)字開頭，更不能是html關(guān)鍵字如p，a，img
    
    備注: ID選擇器的優(yōu)先級非常高，所以確定在整個頁面內(nèi)唯一出現(xiàn)時，才開一使用，否則因為優(yōu)先級問題在后續(xù)維護中不能很好進行修改和更新。
    　
    例：
    #Mycolor {color: yellow}
    
    ID選擇器命名規(guī)范：
    -只允許出現(xiàn)字母（大小寫均可，嚴格區(qū)分）、下劃線、數(shù)字。
    -只允許以字母開頭。
    -命名沒有長度限制，不過不建議過長。
    -不允許出現(xiàn)標簽名。

View Code

(5) 多元素選擇器

  多元素選擇器
  同時匹配h3,h4標簽，之間用逗號分隔。
  其右邊的樣式將應用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規(guī)則中包含兩個不同的選擇器。   
  例： h3,h4 {color: yellow;} <h3>Nick</h3> <h4>Jenny</h4>

(6) 復合選擇器

   標簽指定式選擇器

　 標簽指定式選擇器有兩個選擇器構(gòu)成，其中第一個為標記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格，如：h3.special, p#one等等。

    后代元素選擇器
　　 后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標記寫在前面，內(nèi)層標記寫在后面，中間用空格分隔。當標記發(fā)生嵌套時，內(nèi)層標記就曾為外層標記的后代。

#1、作用：找到指定標簽的所有后代（兒子，孫子，重孫子、、、）標簽，設置屬性

#2、格式：
標簽名1 xxx {
屬性：值;
}

　　#3、注意：
　　 1、后代選擇器必須用空格隔開
　　 2、后代不僅僅是兒子，也包括孫子、重孫子
　　 3、后代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器比如id或class
　　 4、后代選擇器可以通過空格一直延續(xù)下去

    并集選擇器
  
    并集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標記選擇器、class累選擇器、id選擇器等等），都可以作為并集選擇器的一部分。
    如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的css樣式。

    子元素選擇器

　　 子元素選擇器是讓css選擇器只能選擇兒子輩的元素，例如：h1>strong { color : red; }

　　 解讀為：選擇器 h1 > strong 可以理解為“選擇作為h1元素子元素的所有strong元素”，尖括號和選擇器之間可以有空格也可以沒有，沒有限制。

　　 #1、作用：找到制定標簽的所有特定的直接子元素，然后設置屬性

　　 #2、格式：
　　 標簽名1>標簽名2 {
屬性：值;
}
先找到名稱叫做"標簽名稱1"的標簽，然后在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素

　　 #3、注意：
　　1、子元素選擇器之間需要用>符號鏈接，并且不能有空格
　　 比如div >p會找div標簽的所有后代標簽，標簽名為">p"
　　 2、子元素選擇器只會查找兒子，不會查找其他嵌套的標簽
3、子元素選擇器不僅可以用標簽名稱，還可以使用其他選擇器,比如id或class
4、子元素選擇器可以通過>符號一直延續(xù)下去

(7) 屬性選擇器

屬性選擇器 
    語法：
　　元素選擇器[屬性名稱="屬性值"]

    說明
1) 可在其他選擇器上，再添加對屬性的匹配。
2) 若要元素同時滿足多個屬性，可在屬性選擇器后面進行追加：元素選擇器[屬性名稱1="屬性值"][屬性名稱2="屬性值"]


1.  [title] & P[title]

    設置所有具有title屬性的標簽元素；
    設置所有具有title屬性的P標簽元素。

    [title]
    {
        color: yellow;
    }
    p[title]
    {
        color: yellow;
    }
    <div title>Nick</div>
    <p title>Nick</p>

2.  title=Nick]

    設置所有title屬性等于“Nick”的標簽元素。 

    [title="Nick"]
    {
        color: yellow;
    } 
    <p title="Nick">Nick</p>
    

3.  [title~=Nick]

    設置所有title屬性具有多個空格分隔的值、其中一個值等于“Nick”的標簽元素。

    [title~="Nick"]
    {
        color: yellow;
    }
    <p title="Nick Jenny">Nick</p>
    <p title="Jenny Nick">Nick</p>

4.  [title|=Nick]

    設置所有title屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以"Nick"開頭的標簽元素。
    例：lang屬性："en"、"en-us"、"en-gb"等等

    [title|="Nick"]
    {
        color: yellow;
    }
    <p title="Nick-Jenny">Nick</p>

5.  [title^=Nick]

    設置屬性值以指定值開頭的每個標簽元素。
    [title^="Nick"]
    {
        color: yellow;
    }
    <p title="NickJenny">Nick</p>

6.  title$=Nick]

    設置屬性值以指定值結(jié)尾的每個標簽元素。

    [title$="Nick"]
    {
        color: yellow;
    }
    <p title="JennyNick">Nick</p>

7.  [title*=Nick]

    設置屬性值中包含指定值的每個元素

    [title*="Nick"]
    {
        color: yellow;
    }
    <p title="SNickJenny">Nick</p>

View Code

(8) 偽類選擇器

　　狀態(tài)是動態(tài)變化的，當一個元素到達一個特定狀態(tài)時，它可能得到一個樣式，當狀態(tài)改變時，又失去這個樣式。

　　它的功能和class有些類似，但它是基于文檔之外的抽象，所以叫偽類。

　　（1）CSS偽類

　　:link -> 該偽類將應用于未被訪問過的鏈接，IE6不兼容。一般不用此偽類，直接使用a標簽。

　　:hover -> 該偽類將應用于有鼠標指針懸停于其上的元素，在IE6只能應用于a標簽，IE7+所有元素都兼容。

　　:active -> 該偽類將應用于被激活的元素，例如被點擊的鏈接、被按下的按鈕登等。

　　:visited -> 該偽類將應用于已經(jīng)被訪問過的鏈接。

　　:focus -> 該偽類將應用于擁有鍵盤輸入焦點的元素。

偽類選擇器： 專用于控制鏈接的顯示效果，偽類選擇器：
    a:link（沒有接觸過的鏈接）,用于定義了鏈接的常規(guī)狀態(tài)。
    a:hover（鼠標放在鏈接上的狀態(tài)）,用于產(chǎn)生視覺效果。
    a:visited（訪問過的鏈接）,用于閱讀文章，能清楚的判斷已經(jīng)訪問過的鏈接。
    a:active（在鏈接上按下鼠標時的狀態(tài)）,用于表現(xiàn)鼠標按下時的鏈接狀態(tài)。
偽類選擇器 : 偽類指的是標簽的不同狀態(tài):
    a ==> 點過狀態(tài) 沒有點過的狀態(tài) 鼠標懸浮狀態(tài) 激活狀態(tài)
    a:link {color: #FF0000} /* 未訪問的鏈接 */
    a:visited {color: #00FF00} /* 已訪問的鏈接 */
    a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
    a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }

#1、作用：常用的幾種偽類選擇器。

#1.1 沒有訪問的超鏈接a標簽樣式：
    a:link {
      color: blue;
    }

#1.2 訪問過的超鏈接a標簽樣式：
    a:visited {
      color: gray;
    }

#1.3 鼠標懸浮在元素上應用樣式：
    a:hover {
      background-color: #eee; 
    }

#1.4 鼠標點擊瞬間的樣式：
    a:active {
      color: green;
    }

#1.5 input輸入框獲取焦點時樣式：
    input:focus {
      outline: none;
      background-color: #eee;
    }

#2 注意：
    1 a標簽的偽類選擇器可以單獨出現(xiàn)，也可以一起出現(xiàn)
    2 a標簽的偽類選擇器如果一起出現(xiàn)，有嚴格的順序要求，否則失效
        link，visited，hover，active
    3 hover是所有其他標簽都可以使用的
    4 focus只給input標簽使用

View Code

　　（2）CSS偽元素

#1、常用的偽元素。
#1.1 first-letter：雜志類文章首字母樣式調(diào)整
    例如：
    p:first-letter {
      font-size: 48px;
    }

#1.2 before
    用于在元素的內(nèi)容前面插入新內(nèi)容。
    例如：

    p:before {
      content: "*";
      color: red;
    }
    在所有p標簽的內(nèi)容前面加上一個紅色的*。

#1.3 after
    用于在元素的內(nèi)容后面插入新內(nèi)容。
    例如：

    p:after {
      content: "?";
      color: red;
    }
    在所有p標簽的內(nèi)容后面加上一個藍色的?。

View Code

　　偽元素是控制內(nèi)容，例如 :

　　:first-line與:first-letter，這兩個偽元素只能用于塊級元素。前者用于選擇第一行，后者用于選擇第一個字符。

p.artcle:first-line
{
    color:red;
}

p.artcle:first-letter
{
    color:green;
}

:first-child偽元素選擇屬于第一個子元素的元素。

span:first-child
{
    vertical-align: middle;
}

:before與:after偽元素則可以設置元素之前和之后的內(nèi)容，并且配合content設置相關(guān)內(nèi)容。

#demo:after,#demo:before
{
    content:"--";
    display: block;
}

2.3 CSS層疊性和繼承性　　

CSS層疊性和繼承性
　　
(1) 層疊性
    所謂層疊性是指多種css樣式的疊加，
    例如，當使用內(nèi)嵌css樣式表定義p標記字號大小為12像素，鏈入式定義p標記顏色為紅色，那么段落文本將顯示為12像素紅色，即這兩種樣式產(chǎn)生了疊加。

(2) 繼承性
　　所謂繼承性是指寫css樣式表時，子標記會繼承父標記的某些樣式，
    例如文本顏色和字號。想要設置一個可繼承的屬性，只需要將它應用于父元素即可。

　　恰當?shù)厥褂美^承可以簡化代碼，降低css樣式的復雜性。
    但是，如果在網(wǎng)頁中所有的元素都大量繼承樣式，那么判斷樣式的來源就會很困難，所以對于字體、文本屬性等網(wǎng)頁中通用的樣式可以使用繼承。
    例如，字體、字號、顏色、行距等可以在body元素中統(tǒng)一設置，然后通過繼承影響文檔中的所有文本。

    注意：并不是所有的css屬性都可以繼承，例如下面的屬性就不具有繼承性：

    邊框、外邊距、內(nèi)邊距、背景、定位、元素寬高屬性等。

    所有盒子相關(guān)的屬性都不能繼承。

2.4 CSS選擇器優(yōu)先級

(1) 選擇器優(yōu)先級概述

(1) 優(yōu)先級概覽
    
　　定義css樣式時，經(jīng)常出現(xiàn)兩個或多個規(guī)則應用在同一元素上，這時就會出現(xiàn)優(yōu)先級的問題。

    內(nèi)聯(lián)樣式最大->內(nèi)聯(lián)樣式的優(yōu)先級最高；
    ID選擇器優(yōu)先級僅次于內(nèi)聯(lián)樣式；
    類選擇器優(yōu)先級次于ID選擇器；
    標簽選擇器優(yōu)先級次于類選擇器
    通配符* 選擇器最低
    
(2)  繼承樣式權(quán)重為0
　　在嵌套結(jié)構(gòu)中，不管父元素樣式的權(quán)重多大，被子元素繼承時，它的權(quán)重都為0，也就是說，子元素定義的樣式會覆蓋繼承來的樣式。

(3) 行內(nèi)樣式權(quán)重最高
　　應用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高，可以理解為遠大于100?？傊鼡碛斜壬厦嫣岬降倪x擇器都大的優(yōu)先級。

(4) 權(quán)重相同則就近原則
    權(quán)重相同時，CSS遵循就近原則，即靠近元素的樣式具有最大的優(yōu)先級，或者說排在最后的樣式優(yōu)先級最高。

　　所有都相同時，聲明靠后的優(yōu)先級最大。　

(5) !important命令最大優(yōu)先級
　　CSS定義了一個!important命令，該命令被賦予最大的優(yōu)先級，也就是說不管權(quán)重如何以及樣式位置的遠近，!important都具有最大優(yōu)先級。

(6)綜述：

    行內(nèi)樣式>頁內(nèi)樣式>外部引用樣式>瀏覽器默認樣式
    important>內(nèi)聯(lián)>ID>偽類/類/屬性選擇>標簽>偽對象>通配符>繼承

View Code

(2)特指度

特指度
    要解決優(yōu)先級問題，我們需要引入一個概念——特指度（specificity）。
    特指度表示一個css選擇器表達式的重要程度，可以通過一個公式來計算出一個數(shù)值，數(shù)越大，越重要。

    這個計算叫做“I-C-E”計算公式，

    I——Id；
    C——Class；
    E——Element；
    
    針對一個css選擇器表達式，遇到一個id就往特指度數(shù)值中加100，遇到一個class就往特指度數(shù)值中加10，遇到一個element就往特指度數(shù)值中加1。

    注意：!important優(yōu)先級最高，高于上面一切。* 選擇器最低，低于一切。

View Code

2.5 CSS選擇器的擴展

    選擇器的擴展
    選擇器本來是css的一種規(guī)則，用于為css選擇html節(jié)點的。
    但是聰明的人類還是通過選擇器創(chuàng)造出了其他領域非常偉大的作品。

    jQuery
        jQuery被推廣流行的根本原因就是它的“Query”——基于css選擇器的“Query”。
        現(xiàn)在的瀏覽器都支持querySelectAll()方法了，其實這就是W3C“抄襲”的jQuery的設計。

    zen-Coding
        jquery可以通過一段css選擇器表達式從既有的html結(jié)構(gòu)中選擇符合表達式的dom組，但是zen-coding反其道而行之——可以根據(jù)css選擇器表達式創(chuàng)造出html節(jié)點。不得不佩服這幫人的創(chuàng)造力。

View Code

總結(jié)

以上是生活随笔為你收集整理的CSS基础语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。