CSS <small>(Cascading Style Sheets)</small>

CSS有何作用？

解決HTML頁面內(nèi)容與表現(xiàn)分離的問題
在"如何顯示"HTML元素方面，極大的提高了工作效率

CSS開發(fā)者的3種表現(xiàn)形式與優(yōu)先級

外部樣式表 <link rel="stylesheet" href="style.css">
內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）<head><style>...</style></head>
內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）<div style="..."></div>

上述四種css表現(xiàn)形式中，3的優(yōu)先級最高，依次往前優(yōu)先級越來越低。

CSS選擇器、優(yōu)先級、分組

CSS選擇器之間的優(yōu)先級

如果多于一個(gè)規(guī)則指定了相同的屬性值都應(yīng)用到一個(gè)元素上，CSS規(guī)定擁有更高確定度的選擇器優(yōu)先級更高。如：ID選擇器比類選擇器更具確定度, 而類選擇器比標(biāo)簽選擇器（tag selector）更具確定度，故ID選擇器優(yōu)先級比類選擇器高，類選擇器優(yōu)先級比標(biāo)簽選擇器高；再如：p.demo{}與.demo{}，前者確定度比后者高，故前者的優(yōu)先級比后者高。

一般情況下，如果你提高了某個(gè)選擇器的的確定度，你便提高它的優(yōu)先級。
使用這個(gè)技巧，可以避免為大量標(biāo)簽指定 class 或 id 屬性。CSS（引擎）會幫你做的。
在復(fù)雜設(shè)計(jì)中速度非常重要，避免使用復(fù)雜的依賴元素關(guān)系的規(guī)則可以使你的樣式更有效率。

CSS選擇器的確定度如何計(jì)算？

計(jì)算方式
1. 統(tǒng)計(jì)元素中是否存在style屬性，如果存在則標(biāo)記為a=1
2. 統(tǒng)計(jì)選擇器中id屬性的個(gè)數(shù)，標(biāo)記為b=id個(gè)數(shù)
3. 統(tǒng)計(jì)選擇器中其他屬性(如.class [attr]等)及偽類的個(gè)數(shù)，標(biāo)記為c=其他屬性與偽類的總個(gè)數(shù)
4. 統(tǒng)計(jì)選擇器中元素名稱及偽元素的個(gè)數(shù)，標(biāo)記為d=元素名稱與偽類元素的總數(shù)
舉例說明

        {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 /
li:hover {} / a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 :hover是偽類/
li:first-line {} / a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 :first-line是偽元素/
ul li {} / a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 /
ul ol+li {} / a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + [rel=up]{} / a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 /
ul ol li.red {} / a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 /
li.red.level {} / a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<head>
<style type="text/css">

x97z { color: red }

</style>
</head>
<body>
<p id=x97z style="color: green">
</body>


#####CSS選擇器類型
* **ID選擇器**(*#selector{}*)：
`<p id="demo"></p> <style>#demo{}</style>`
* **類選擇器**(*.selector{}*)：
`<p class="demo"></p> <style>.demo{}</style>`
* **元素(標(biāo)簽)選擇器**(*element{}*)：
`<p></p> <style>p{}</style>`
* **基于關(guān)系的選擇器**
  * **后代（派生）選擇器** *A E{}*：
元素A的任一后代元素E (后代節(jié)點(diǎn)指A的子節(jié)點(diǎn)，子節(jié)點(diǎn)的子節(jié)點(diǎn)，以此類推) `<div class="demo"><p><span></span></p></div> <style>.demo p{} div span{}</style>` p和span元素都是類為.demo的div元素后代
  * **子元素選擇器** *A > E{}*：
元素A的任一子元素E(也就是直系后代) `<div class="demo"><p><span></span></p></div> <style>.demo>p{} .demo>p>span{}</style>` p是類為.demo的div元素子元素，span是p的子元素
  * **偽元素(::)與偽類(:)選擇器**：
    * 偽類連同偽元素一起, 他們允許你不僅僅是根據(jù)文檔DOM樹中的內(nèi)容對元素應(yīng)用樣式,而且還允許你根據(jù)諸如像導(dǎo)航歷史這樣的外部因素來應(yīng)用樣式(:visited, 為例), 同樣的,可以根據(jù)內(nèi)容的狀態(tài) (例如 在一些表單元素上的 :checked ), 或者鼠標(biāo)的位置 (例如 :hover 讓你知道是否鼠標(biāo)在一個(gè)元素上懸浮)來應(yīng)用樣式.
    * 偽元素就像偽類一樣， 將偽元素添加到選擇器中允許在不添加額外聲明的情況下為文檔的某些部分添加樣式。
    * 偽元素兩個(gè)冒號 (::) 與偽類一個(gè)冒號 (:)是 CSS3 規(guī)范中的一部分要求,目的是為了區(qū)分偽類和偽元素 . 大多數(shù)瀏覽器都支持這兩種表示方式
    * 偽元素與偽類的區(qū)別: 
      * 偽元素的樣式改變元素中某部分內(nèi)容的樣式
      * 偽類的樣式改變元素不同狀態(tài)時(shí)的樣式或元素中子元素的樣式
    * **偽元素列表**：
      * ***E::first-letter***：E元素的第一個(gè)字符的樣式
      * ***E::first-line***：E元素的第一行的樣式
      * ***E::before***：E元素內(nèi)容區(qū)域內(nèi)<small>(盒子模型的內(nèi)容區(qū))</small>內(nèi)容前的內(nèi)容與樣式
      * ***E::after***：E元素內(nèi)容區(qū)域內(nèi)<small>(盒子模型的內(nèi)容區(qū))</small>內(nèi)容后的內(nèi)容與樣式
      * ***E::selection***：文檔中被用戶高亮的部分（比如使用鼠標(biāo)選中時(shí)應(yīng)用的樣式）
      * ***E::backdrop***：待了解，目前瀏覽器支持不太好
    * **偽類列表**：

      * ***E:link***：元素E為超鏈接狀態(tài)的樣式
      * ***E:visited***：元素E為被訪問后的狀態(tài)的樣式
      * ***E:active***：元素E為鼠標(biāo)按下未彈起的狀態(tài)的樣式
      * ***E:hover***：元素E為鼠標(biāo)經(jīng)過的狀態(tài)的樣式
      * ***E:focus***：元素E為獲得焦點(diǎn)的狀態(tài)的樣式
      * ***A:not(E)***：A元素下，除了E元素外的所有元素的樣式
      * ***:root***：
該屬性綁定文檔根元素，即html元素；存在該屬性的情況下，body元素樣式只針對內(nèi)容區(qū)域渲染
      * ***E:first-child***：父元素下的第一個(gè)子元素，若第一個(gè)子元素不是E元素，則無效
      * ***E:nth-child***：
父元素下的第n個(gè)子元素，n根據(jù)所有子元素(包含不是E的元素)計(jì)算；從上往下，n>=1
      * ***E:nth-last-child***：
父元素下的第n個(gè)子元素，n根據(jù)所有子元素(包含不是E的元素)計(jì)算；從下往上，n>=1
      * ***E:nth-of-type***：
父元素下的第n個(gè)"元素為E"的子元素，n根據(jù)子元素且"元素為E"計(jì)算；從上往下，n>=1
      * ***E:last-of-type***：
父元素下的第n個(gè)"元素為E"的子元素，n根據(jù)子元素且"元素為E"計(jì)算；從下往上，n>=1
      * ***E:first-of-type***：父元素下的第一個(gè)子元素E
      * ***E:empty***：元素E無內(nèi)容狀態(tài)，如`<td></td>`， 無內(nèi)容的td元素
      * ***E:target***：由跳轉(zhuǎn)到達(dá)的區(qū)域狀態(tài)
      * ***E:checked***：被選中的狀態(tài)
      * ***E:enabled***：元素可用狀態(tài)
      * ***E:disabled***：元素不可用狀態(tài)

    >關(guān)于偽類與偽元素選擇器，可以查看以下代碼示例
[偽類偽元素選擇器](https://coding.net/u/iolg/p/web-notes/git/blob/master/css3/pseudo-selector-1.html)
[偽類選擇器](https://coding.net/u/iolg/p/web-notes/git/blob/master/css3/pseudo-selector-2.html)
[基于狀態(tài)的偽類選擇器](https://coding.net/u/iolg/p/web-notes/git/blob/master/css3/pseudo-selector-uistatus.html)

  * **相鄰兄弟選擇器** *B + E{}*：元素B的下一個(gè)兄弟元素E(B、E元素的父元素相同)
  * **兄弟選擇器** *B ~ E{}*：B元素后面的擁有共同父元素的兄弟元素E
* **屬性選擇器**
  * *[attribute]{}*：元素存在attribute屬性，不管屬性值如何
  * *[attribute = value]{}*：元素存在attribute屬性，且屬性值`等于`value
  * *[attribute ~= value]*：元素存在attribute屬性，且`多個(gè)屬性值`中`存在`value；
  * *[attribute *= value]*：元素存在attribute屬性，且屬性值`包含`value；
  * *[attribute ^= value]*：元素存在attribute屬性，且屬性值以value`開頭`；
  * *[attribute $= value]*：元素存在attribute屬性，且屬性值以value`結(jié)尾`；

>更多選擇器知識可閱讀[W3C選擇器介紹](https://www.w3.org/TR/selectors/#selectors)

#####CSS選擇器分組
當(dāng)多個(gè)選擇器使用相同樣式時(shí)，可通過選擇器分組實(shí)現(xiàn)。只需在選擇器之間用`,`隔開即可。如：
  ```html
h1:before,h1:hover,h2:hover,div:hover { 
   content: ""; 
   padding-left: 10px;
   background-color: #f00;
}
h1,h2,div {background-color: #ff0;}

CSS的層疊與繼承

CSS的層疊與優(yōu)先級

一個(gè)HTML頁面中，可以添加多種表現(xiàn)形式及同種表現(xiàn)形式同時(shí)存在的CSS，當(dāng)多個(gè)CSS作用于一個(gè)HTML元素時(shí)，會出現(xiàn)層疊現(xiàn)象，瀏覽器會根據(jù)優(yōu)先級來決定應(yīng)用哪個(gè)CSS；當(dāng)層疊屬性權(quán)重相同時(shí)，后者優(yōu)先級高于前者。

以升序排序的優(yōu)先級(5的優(yōu)先級最高)如下：
1. 用戶代理聲明，即瀏覽器默認(rèn)樣式
2. 用戶樣式聲明，即瀏覽器設(shè)置中的用戶樣式表
3. 開發(fā)者樣式聲明 <small>(聲明的選擇器優(yōu)先級請看選擇器部分)</small>
4. 開發(fā)者樣式聲明，并使用了!important關(guān)鍵字
5. 用戶樣式聲明，并使用了!important關(guān)鍵字

什么是CSS繼承？

子元素會應(yīng)用父元素的CSS可繼承屬性；對繼承的元素來說，子元素自身的樣式優(yōu)先級高于從父級繼承來的樣式。如body元素樣式的color屬性，若其子元素p的css沒有color屬性時(shí)，元素p會應(yīng)用body樣式樣式的color屬性

!important關(guān)鍵字

在樣式屬性值中添加!important關(guān)鍵字，可以將該屬性的優(yōu)先級提升到最高；在層疊樣式中，該屬性將覆蓋應(yīng)用在該元素的相同CSS屬性；若遇到相同屬性都添加了!important關(guān)鍵字，則根據(jù)CSS選擇器及層疊的優(yōu)先級進(jìn)行處理。

代碼示例

<head>
  <meta charset="UTF-8">
  <title>CSS樣式的繼承與!important關(guān)鍵字</title>
  <style>

      body {
          /*改變?yōu)g覽器默認(rèn)字號*/
          font-size: 10px;
          color: #0000FF !important;
          color: red;
      }
      #important{
          /*都存在!important關(guān)鍵字，id選擇器比元素選擇器確定度更高，
          故id選擇器優(yōu)先級更好，即應(yīng)用該color屬性到該元素上*/
          color: #f00 !important;
      }

      h1 {
          color: #7FFF00 !important;
      }

      #default {
          /*h1標(biāo)簽的默認(rèn)字號是瀏覽器默認(rèn)字號(一般為16px)樣式的200%，即32px*/
          font-size: 32px;
          /*h1元素選擇器的color屬性存在!important關(guān)鍵字，故該color屬性無效*/
          color: red;
      }

      #bigger {
          font-size: 200%;
          width: 300px;
      }
  </style>
</head>
<body>
<p>p element</p>
<h1 id="important">h1 element 因繼承body的font-size屬性導(dǎo)致與default字號不同</h1>
<h1 id="default">h1 element(default)</h1>
<p id="bigger">
  h1默認(rèn)的字號是瀏覽器默認(rèn)字號(一般為16px)的200%,即32px；
  因body樣式中將字號修改為10，且font-size是繼承屬性，故h1元素
  繼承了body的font-size屬性之后，200%就變成了10x200%=20px
</p>
</body>

內(nèi)聯(lián)元素（inline）& 塊元素（block）

內(nèi)聯(lián)元素(inline)

內(nèi)聯(lián)元素，又稱行內(nèi)元素，只占據(jù)它對應(yīng)標(biāo)簽的邊框所包含的空間的元素。默認(rèn)情況下，行內(nèi)元素不會以新行開始，而塊級元素會新起一行。
inline元素舉例：<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, <code>等

塊元素(block)

塊級元素占據(jù)其父元素（容器）的整個(gè)空間，因此創(chuàng)建了一個(gè)“塊”；通常瀏覽器會在塊級元素前后另起一個(gè)新行。
block元素舉例：<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, <h1>等

重點(diǎn)知識：內(nèi)聯(lián)元素(inline)與塊元素(block)的區(qū)別

內(nèi)聯(lián)元素(inline)
- inline元素中只能包含內(nèi)容或其他inline元素
- 默認(rèn)情況下，多個(gè)inline元素之間不會換行
- 忽略margin-top與margin-bottom兩個(gè)屬性，margin-left與margin-right及padding所有屬性有效
- 忽略height與width屬性
- 設(shè)置為inline-block時(shí)，inline元素將擁有block部分屬性，如margin的所有屬性均有效（同時(shí)還能避免margin的折疊），height與width也有效。
- inline元素若設(shè)置float為left或right，則擁有所有block元素的特征
- inline元素可以設(shè)置vertical-align屬性，如inline-block元素根據(jù)vertical-align屬性處理元素之間的對齊方式
- 在超出容器范圍時(shí)，可以使用white-space設(shè)置其換行規(guī)則
- inline與inline-block代碼示例

<head>
    <meta charset="UTF-8">
    <title>inline元素與inline-block元素</title>
    <style>
        .inline p {
            border: 1px solid #cccccc;
        }

        /*給所有inline元素加上背景和邊框，更好的觀察效果*/
        .inline p *:nth-child(n) {
            background-color: #00ccff;
            border: 1px dashed #f00;
        }

        /*inline元素設(shè)置寬高無效*/
        .inline span {
            width: 100px;
            height: 100px;
        }

        /*inline元素設(shè)置margin；
        margin-left與margin-right有效，
        margin-top與margin-bottom無效*/
        .inline b {
            margin: 1em;
        }
        /*inline元素設(shè)置padding各屬性均有效，但不會改變父元素高度*/
        .inline cite {
            padding: 1em;
        }

        /*inline元素設(shè)置float屬性值為left或者right時(shí)，
        inline元素將獲得所有block元素特性*/
        .inline mark {
            /*因?yàn)槭歉樱圆粫淖兏冈爻叽?/
            float: left;
            /*以下三個(gè)值都有效*/
            width: 128px;
            height: 100px;
            margin: 1em;
            padding: 1em;
        }

        .inline-block {
            background-color: red;
            /*height: 200px;*/
            width: 50%;
        }

        .inline-block p span {
            font-weight: bold;
            color: #ff0;
            /*inline-block類型元素，擁有block部分特征的inline元素*/
            display: inline-block;
            /*設(shè)置width有效*/
            width: 100px;
            /*該屬性決定了inline-block類型元素之間的對齊方式*/
            vertical-align: middle;
            background-color: #0000FF;
            font-size: 16px;
        }
        .inline-block p.no_interval{
            /*父元素將字號設(shè)置為0，可解決inline-block類型子元素之間的默認(rèn)間隔*/
            /*font-size:0px;*/
            /*父元素設(shè)置單詞間距為-nPX(n需要測試得到具體值)，
            也可解決inline-block類型子元素之間的默認(rèn)間隔*/
            /*word-spacing: -8px;*/
            /*與子元素中的margin-left:-8px配合使用去掉間隔*/
            margin-left:8px;
        }
        .inline-block p.no_interval span{
            margin-left: -8px;
            width:150px;
            border:1px solid #00ff00;
        }
    </style>
</head>
<body>
<div class="inline">
    <h2>多個(gè)inline元素默認(rèn)狀態(tài)下的排版(默認(rèn)不會換行，且不會影響父元素的高度)</h2>
    <p>
        <span>設(shè)置width、height無效</span>
        <b>margin只有margin-left與margin-right有效，上下無效</b>
        <cite>所有padding屬性均有效，但不影響父元素高度</cite>
        <mark>float:left或right，inline元素獲得block元素所有特性；浮動元素不影響父元素尺寸</mark>
    </p>
</div>
<!--clear:left 清除左邊浮動-->
<h2 style="clear: left;">inline-block類型，擁有block類型部分特征的inline類型元素</h2>
<div class="inline-block">
    <p>
        <span>這是一個(gè)inline類型的block元素</span>
        <span>元素之間的對齊方式由vertical-align屬性決定</span>
        <span>如果不設(shè)置vertical-align屬性，多個(gè)inline-block元素排序可能會錯(cuò)亂</span>
        <span>inline-block作為inline元素同時(shí)又有了block元素的相關(guān)作用</span>
        <span>如block元素可以設(shè)置寬高與上下外邊距</span>
        <span style="white-space: nowrap;">white-space設(shè)置不換行</span>
    </p>
    <h3>解決inline-block元素之間的默認(rèn)間隔</h3>
    <p class="no_interval">
        <span>方法1：父元素font-size:0px 子元素重新設(shè)置font-size</span>
        <span>方法2：父元素word-spacing:-8px 設(shè)置單詞間距為負(fù)值，具體多少實(shí)際測試</span>
        <span>方法3：子元素設(shè)置margin-left:-8px，父元素margin-left:8px 具體多少實(shí)際測試</span>
        <span>以上三種是比較合適的方法，其他改變文檔結(jié)構(gòu)的方法不建議使用</span>
        <span>間隔引起的原因是標(biāo)簽代碼之間的空格或換行導(dǎo)致</span>
    </p>
</div>
</body>

  ![上述代碼示例效果圖](http://upload-images.jianshu.io/upload_images/1299322-fc993bb2ae00a3fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

塊元素(block)
- block元素中可以包含block元素、inline元素等所有元素
- 默認(rèn)情況下，block元素前后會另起一行（假設(shè)子元素沒有設(shè)置float及position屬性）
- margin和padding所有屬性均有效
- block元素在未設(shè)置width屬性時(shí)，默認(rèn)占據(jù)父元素100%的width
- block元素在未設(shè)置height屬性時(shí)，默認(rèn)高度根據(jù)子元素自適應(yīng)（假設(shè)子元素沒有設(shè)置float及position屬性）
- 忽略vertical-align屬性
- block代碼示例

<head>
    <meta charset="UTF-8">
    <title>block元素</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent {
            width: 300px;
            background-color: #7FFF00;
            /*防止子元素與父元素(自己)出現(xiàn)margin-top或margin-bottom的重疊*/
            overflow: auto;
        }
        .sub {
            padding: .5em;
            background-color: #ff00cc;
        }

        .sub span {
            background: #cceeee;
        }
        /*塊元素默認(rèn)占據(jù)單獨(dú)一行，寬度100%，高度根據(jù)內(nèi)容(數(shù)據(jù)或子元素)自適應(yīng)*/
        .line{
            /*應(yīng)用block元素默認(rèn)寬高*/
            height: auto;
            width: auto;
            /*margin、padding的所有屬性均有效*/
            margin:1em;
            padding:1em;
            background-color: #ff0000;
        }
    </style>
</head>
<body>
<div class="parent">
    <p class="sub">block元素(
        <mark>div</mark>
        )內(nèi)包含的block元素(
        <mark>p</mark>
        ),<span>block元素(<mark>p</mark>)內(nèi)包含的inline元素(<mark>span</mark>)</span></p>
    <p class="line">塊元素默認(rèn)占據(jù)單獨(dú)一行，未指定寬度時(shí)，占據(jù)父元素100%寬度，高度根據(jù)內(nèi)容(數(shù)據(jù)或子元素)自適應(yīng)</p>
</div>
</body>

上述代碼示例效果圖

替換元素與不可替換元素

什么是替換元素？

在CSS2.1中，只有替換元素可以帶有內(nèi)置尺寸；
替換元素的實(shí)際類型或者實(shí)際內(nèi)容與元素屬性有關(guān)，如img的實(shí)際內(nèi)容由其"src"屬性指定的圖像替換，input的實(shí)際類型由其"type"屬性決定
一部分（并非全部）可替換元素，本身具有尺寸和基線（baseline），會被像vertical-align之類的一些 CSS 屬性用到（類似inline-block類型元素）
常見的替換元素：<img>, <object>, <button>, <textarea>, <input>, <select>。

什么是不可替換元素？

元素的類型和實(shí)際內(nèi)容和元素內(nèi)部屬性無關(guān)，沒有內(nèi)置尺寸屬性；如<p>, <span>, <div>等，只能改變元素的樣式。

代碼示例

<head>
    <meta charset="UTF-8">
    <title>替換元素</title>
    <style>

        input {
            vertical-align: middle;
            border: 1px solid #ccc;
        }

        input:first-of-type {
            /*三個(gè)屬性均有效*/
            width: 200px;
            height: 200px;
            margin: 5px;
        }

        img {
            /*width:100px;*/
            border: 1px solid #cccccc;
        }

        td {
            background-color: #cceeff;
        }

    </style>
</head>
<body>
<!--元素實(shí)際類型由type屬性決定-->
<input type="text" value="替換元素">
<!--image類型的input有width height屬性-->
<input type="image" src="#" value="替換元素" height="200">
<input type="text" value="替換元素">
<img src="#1" alt="" width="100">
<img src="#2" alt="" height="200" width="100">
<img src="#3" alt="">
<!--rows cols 的內(nèi)置尺寸屬性-->
<textarea rows="3" cols="4"></textarea>
<!--屬性實(shí)際值由內(nèi)部option屬性決定-->
<select width="100px">select
    <option>option</option>
</select>
<table>
    <tr>
        <td width="100" height="100"></td>
        <td></td>
    </tr>
</table>
</body>

display更多類型的演示代碼可點(diǎn)此查看

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

(第八天)CSS：優(yōu)先級、選擇器、層疊與繼承、內(nèi)聯(lián)元素&塊元素、替換元素&非替換元素

(第八天)CSS：優(yōu)先級、選擇器、層疊與繼承、內(nèi)聯(lián)元素&塊元素、替換元素&非替換元素

CSS <small>(Cascading Style Sheets)</small>

CSS有何作用？

CSS開發(fā)者的3種表現(xiàn)形式與優(yōu)先級

CSS選擇器、優(yōu)先級、分組

CSS選擇器之間的優(yōu)先級

CSS選擇器的確定度如何計(jì)算？

x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

x97z { color: red }

CSS的層疊與繼承

CSS的層疊與優(yōu)先級

什么是CSS繼承？

!important關(guān)鍵字

代碼示例

內(nèi)聯(lián)元素（inline）& 塊元素（block）

內(nèi)聯(lián)元素(inline)

塊元素(block)

重點(diǎn)知識：內(nèi)聯(lián)元素(inline)與塊元素(block)的區(qū)別

替換元素與不可替換元素

什么是替換元素？

什么是不可替換元素？

代碼示例

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

(第八天)CSS：優(yōu)先級、選擇器、層疊與繼承、內(nèi)聯(lián)元素&塊元素、替換元素&非替換元素

CSS <small>(Cascading Style Sheets)</small>

CSS有何作用？

CSS開發(fā)者的3種表現(xiàn)形式與優(yōu)先級

CSS選擇器、優(yōu)先級、分組

CSS選擇器之間的優(yōu)先級

CSS選擇器的確定度如何計(jì)算？

x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

x97z { color: red }

CSS的層疊與繼承

CSS的層疊與優(yōu)先級

什么是CSS繼承？

!important關(guān)鍵字

代碼示例

內(nèi)聯(lián)元素（inline）& 塊元素（block）

內(nèi)聯(lián)元素(inline)

塊元素(block)

重點(diǎn)知識：內(nèi)聯(lián)元素(inline)與塊元素(block)的區(qū)別

替換元素與不可替換元素

什么是替換元素？

什么是不可替換元素？

代碼示例

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频