CSS（層疊樣式表）

簡(jiǎn)介

• CSS是一種標(biāo)記語(yǔ)言

• CSS主要用于設(shè)置HTML網(wǎng)頁(yè)中的文本內(nèi)容（字體、大小、對(duì)齊方式等），圖片的外形（寬高、邊框樣、邊距等）以及版面的樣式和外觀顯示布局

• CSS可以美化HTML，讓HTML更漂亮，讓頁(yè)面布局更簡(jiǎn)單

• HTML主要做結(jié)構(gòu)，顯示網(wǎng)頁(yè)元素，CSS美化HTML，布局網(wǎng)頁(yè)

• CSS最大的價(jià)值：由HTML專注去做結(jié)構(gòu)呈現(xiàn)，樣式交給CSS，即結(jié)構(gòu)（HTML）與樣式（CSS）相分離

CSS語(yǔ)法規(guī)范

• CSS規(guī)則由兩個(gè)主要部分構(gòu)成：選擇器以及一條或多條聲明

• 選擇器用于指定CSS樣式的HTML標(biāo)簽，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式

• 屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)

• 屬性是指對(duì)指定的對(duì)象設(shè)置的樣式屬性，例如字體大小、文本顏色等

• 屬性和屬性值之間用英文“:”分開

• 多個(gè)鍵值對(duì)之間用英文“;”分開

• CSS代碼風(fēng)格

  1. 樣式格式屬性

     h3 {
        color: pink;
        font-size:20px;
     }
     

  2. 樣式大小寫：樣式選擇器，屬性名，屬性值關(guān)鍵字全部用小寫字母，特殊情況除外
  3. 空格規(guī)范
     • 屬性值的前面，冒號(hào)后面，保留一個(gè)空格
     • 選擇器和大括號(hào)中間保留空格

CSS基礎(chǔ)選擇器

• 基礎(chǔ)選擇器包括：標(biāo)簽選擇器，類選擇器，id選擇器和通配符選擇器

• 標(biāo)簽選擇器：用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱，為頁(yè)面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式

  把某一類標(biāo)簽全部選擇出來(lái)，快速設(shè)置樣式，不能差異化設(shè)置

• 類選擇器

  .類名 {
    屬性1： 屬性值1;
    ……
  }
  

  類選擇器使用"."（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名（自定義）
  可以理解為為標(biāo)簽起了名
  選擇器命名中可以使用"-"
  不要使用純數(shù)字、中文等命名，盡量使用英文字母
  命名要有意義，別人能看懂
  命名要規(guī)范

• 多類名

  <div class="red font">亞瑟</div>
  

  在標(biāo)簽class屬性中寫多個(gè)類名
  多個(gè)類名中間必須用空格分開
  這個(gè)標(biāo)簽可以分別具有這些類名的樣式
  使用場(chǎng)景：
  ? 把一些元素的相同的樣式（共同的部分）放到通用的類里
  ? 這些標(biāo)簽都可以調(diào)用這個(gè)公共的類，然后再調(diào)用自己的類
  ? 從而節(jié)省CSS代碼，修改也非常方便

• id選擇器

  #  id {
    屬性1： 屬性值1;
    ……
  }
  

  id選擇器與類選擇器的區(qū)別

  1. 類選擇器好比人的名字，一個(gè)人可以擁有多個(gè)名字，同一名字也可以被多人使用
  2. id選擇器好比人的身份證號(hào)，在全國(guó)是唯一的，不能重復(fù)
  3. id選擇器和類選擇器最大的區(qū)別在使用次數(shù)上
  4. 類選擇器在修改樣式中用的最多，id選擇器一般用于頁(yè)面唯一元素上，經(jīng)常與JavaScript搭配

• 通配符選擇器
  在css中通配符選擇器使用“*”定義，表示選取頁(yè)面中所有元素

  * {
    屬性1： 屬性值1;
    ……
  }
  

• 總結(jié)

  基礎(chǔ)選擇器	作用	特點(diǎn)	使用情況
  標(biāo)簽選擇器	可以選出所有相同的標(biāo)簽	不能差異化選擇	較多
  類選擇器	可以選出一個(gè)或多個(gè)標(biāo)簽	可以根據(jù)需求選擇	非常多
  id選擇器	一次只能選擇1個(gè)標(biāo)簽	id屬性只能在每個(gè)HTML文檔中出現(xiàn)1次	一般和JS搭配
  通配符選擇器	選擇所有標(biāo)簽	選擇的太多，有部分不需要	特殊情況使用

CSS字體屬性

? CSS Fonts（字體）屬性用于定義字體系列、大小、粗細(xì)和文字樣式（如斜體）

• 字體系列
  CSS使用font-family屬性定義文本的字體系列

  p { font-family： “微軟雅黑”，Arial}
  

  各個(gè)字體之間必須使用英文逗號(hào)隔開
  一般情況下，如果有空格隔開的多個(gè)單詞組成的字體，加引號(hào)
  盡量使用系統(tǒng)自帶字體，保證在任何瀏覽器都能顯示
  有多種字體時(shí)，從第一種字體開始，若有則以這種字體則顯示，沒有則找第二種字體，以此類推

• 字體大小

  CSS使用font-size屬性定義文本的字體系列

  p {
    font-size:20px;
  }
  

  • px（像素）大小是網(wǎng)頁(yè)中最常用的單位
  • 谷歌瀏覽器默認(rèn)文字大小為16px
  • 不同瀏覽器默認(rèn)字體大小不同，最好設(shè)置一個(gè)明確的大小
  • 可以給body指定整個(gè)頁(yè)面文字的大?。?biāo)題標(biāo)簽內(nèi)不生效）

• 字體粗細(xì)
  CSS使用font-weight屬性定義文字的字體粗細(xì)

  font-weight:normal, bold, bolde, lighter, number
  

  normal:正常字體
  bold：粗體（相當(dāng)于number為700）
  bolder：特粗體
  lighter：細(xì)體
  number: 100， 200， 300， 400， 500， 600， 700， 800， 900

  屬性值	描述
  normal	默認(rèn)值（不加粗）
  bold	加粗
  100-900	400等同于normal，700等同于bold，數(shù)字后面不加單位

• 文字樣式
  CSS使用font-style屬性設(shè)置文本的風(fēng)格

  p {
    font-style: normal;
  }
  

  屬性值	作用
  normal	默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)字體樣式
  italic	瀏覽器會(huì)顯示斜體字體樣式

  注意：通常使用斜體標(biāo)簽（em，i）使文字傾斜

• 字體復(fù)合屬性

  font: font-style font-weight font-size/font-height font-family;

  body {
    font:italic 700 16px 'Microsoft Hahei'
  }
  

  使用font屬性時(shí)，必須嚴(yán)格按照語(yǔ)法順序來(lái)寫，不能更換順序，并且各個(gè)屬性之間以空格隔開
  不需要設(shè)置的屬性可以省略（取默認(rèn)值）， font-size和font-family不能省略

• 字體屬性總結(jié)

  屬性	表示	注意點(diǎn)
  font-size	字號(hào)	通常用的單位是px，一定要跟上單位
  font-family	字體	實(shí)際工作中要求團(tuán)隊(duì)約定來(lái)寫
  font-weight	字體粗細(xì)	加粗：700或bold 不加粗：400或normal
  font-style	字體樣式	傾斜：italic 不傾斜：normal
  font	字體復(fù)合連寫	不能隨意更換位置；字體和字號(hào)不能省略

CSS文本屬性

CSS Text（文本）屬性可以定義文本的外觀，如，文本顏色、對(duì)齊文本、裝飾文本、文本縮進(jìn)、行間距等

• 文本顏色
  color屬性用于定義文本的演示

  div {
    color: red
  }
  

  表示	屬性值
  預(yù)定義顏色值	red,green,blue等
  十六進(jìn)制	#FF0000，#FF6600等
  RGB代碼	rgb（255,0,0）或rgb（100%,0%,0%）

  rgb: red green blue
  開發(fā)中最常用的是十六進(jìn)制

• 對(duì)齊文本

  text-align屬性用于設(shè)置元素內(nèi)文本內(nèi)容的水平對(duì)齊方式

  div {
    text-align: center
  }
  

  屬性值	解釋
  left	左對(duì)齊（默認(rèn)值）
  right	右對(duì)齊
  center	居中對(duì)齊

• 裝飾文本
  text-decoration屬性規(guī)定添加到文本的修飾?？梢越o文本添加下劃線、刪除線、上劃線等

  div {
    text-decoration: underline;
  }
  

  屬性值	描述
  none	默認(rèn)，沒有裝飾線（最常用）
  underline	下劃線（鏈接a自帶下劃線）（常用）
  overline	上劃線（幾乎不用）
  line-through	刪除線（不常用）

• 文本縮進(jìn)
  text-indent屬性用來(lái)指定文本第一行的縮進(jìn)，通常是將段落的首行縮進(jìn)

  p {
    text-indent: 20px;
    text-indent: 2em;
  }
  

  em是一個(gè)相對(duì)單位，就是當(dāng)前元素（font-size）1個(gè)文字的大小

• 行間距
  line-height屬性用于設(shè)置行間的距離（行高），可以控制文字行與行之間的距離

  p {
    line-height：26px
  }
  

  行間距：上邊距+文本高度+下間距
  測(cè)行高：；從第一行的最下沿到第二行的最下沿

• 文本屬性總結(jié)

CSS引入方式

按照CSS樣式書寫的位置（或引入的方式），可分為三大類：

• 內(nèi)部樣式表
  寫到HTML頁(yè)面內(nèi)部，將所有的CSS代碼抽取出來(lái)，單獨(dú)放到一個(gè)< style >標(biāo)簽中
  < style >標(biāo)簽理論上可以放到HTML文檔的任何地方，但一般放在< head>標(biāo)簽中
  此種方式，可以方便控制整個(gè)頁(yè)面的的元素樣式設(shè)置
  代碼結(jié)構(gòu)清晰，但并沒有實(shí)現(xiàn)結(jié)構(gòu)與樣式完全分離
  稱為嵌入式引入，練習(xí)時(shí)常用

• 行內(nèi)樣式
  在元素標(biāo)簽內(nèi)部的style屬性中設(shè)定CSS樣式，適合用于修改簡(jiǎn)單樣式

  <div style-"color:red; font-size:12px;"> </div>
  

  style其實(shí)就是標(biāo)簽的屬性
  在雙引號(hào)中間，寫法要復(fù)合CSS規(guī)范
  可以控制當(dāng)前的標(biāo)簽設(shè)置樣式（只修改當(dāng)前標(biāo)簽）
  書寫繁瑣，沒有體現(xiàn)結(jié)構(gòu)與樣式分離的思想，不推薦使用，只有對(duì)當(dāng)前元素添加簡(jiǎn)單樣式時(shí)，可以考慮

• 外部樣式表

  適用于樣式較多的情況，核心：樣式單獨(dú)放在CSS文件中，之后吧CSS文件引入到HTML頁(yè)面中
  引入外部樣式表分為兩步：

  1. 新建一個(gè)后綴為.css的樣式文件，把所有的CSS代碼都放在此文件中
  2. 在html頁(yè)面中，使用< link>標(biāo)簽引入這個(gè)文件

     <link rel="stylesheet" href="CSS文件路徑">
     

     rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這需要制定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件
     href：定義所鏈接文件的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑
     稱為外鏈?zhǔn)交蜴溄右胧?，是開發(fā)中最常用的方式

• CSS引入方式總結(jié)

  樣式表	優(yōu)點(diǎn)	缺點(diǎn)	使用情況	控制范圍
  行內(nèi)樣式表	書寫方便，權(quán)重高	結(jié)構(gòu)樣式混寫	較少	控制一個(gè)標(biāo)簽
  內(nèi)部樣式表	部分結(jié)構(gòu)和樣式相分離	沒有徹底分離	較多	控制一個(gè)頁(yè)面
  外部樣式表	完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離	需要引入	最多	控制多個(gè)頁(yè)面

Chrome調(diào)試工具

• 打開：F12或右鍵 ->檢查
• 使用調(diào)試工具：
  • Ctrl +滾輪可以放大開發(fā)中工具代碼大小
  • 左邊是html元素結(jié)構(gòu)，右邊是CSS樣式
  • 右邊CSS樣式可以改變數(shù)組（左右箭頭或直接輸入）和查看顏色
  • Ctrl+ 0 復(fù)原瀏覽器大小
  • 如果點(diǎn)擊元素，發(fā)現(xiàn)右側(cè)沒有樣式引入，既有可能是類名或者樣式引入錯(cuò)誤
  • 如果有樣式，但是樣式前面有黃色感嘆號(hào)，則是樣式屬性屬性錯(cuò)誤

Emmet語(yǔ)法

? 使用縮寫，來(lái)提高HTML/CSS 的編寫速度（VScode內(nèi)部已集成）

• 快速生成HTML語(yǔ)法結(jié)構(gòu)

  1. 生成標(biāo)簽: 直接輸入標(biāo)簽名按tab鍵即可
  2. 如果想要生成多個(gè)相同標(biāo)簽 加上*就可以了，如div *3
  3. 如果有父子級(jí)關(guān)系的標(biāo)簽，可以用 > 如：ul>li
  4. 如果有兄弟級(jí)關(guān)系的標(biāo)簽，用+就可以了。如div+p
  5. 如果生成帶有類名或id名字的，直接寫 .demo 或者 #two tab即可（默認(rèn)div，否則標(biāo)簽.demo）
  6. 如果生成的div類名是有順序的，可以用自增符號(hào) *5
  7. 如果想生成的標(biāo)簽內(nèi)存在內(nèi)容可以用{}表示，如div{$}*5

• 快速生成CSS 語(yǔ)法樣式

  簡(jiǎn)寫

CSS復(fù)合選擇器

? CSS中可以根據(jù)選擇器的類型將選擇器分為基礎(chǔ)選擇器和復(fù)合選擇器，復(fù)合選擇權(quán)是建立在基礎(chǔ)選擇器之上，對(duì)基本組合器進(jìn)行組合形成的
? 復(fù)合選擇器可以更準(zhǔn)確、更高效的選擇目標(biāo)元素（標(biāo)簽）
? 復(fù)合選擇器是有兩個(gè)或多個(gè)基礎(chǔ)選擇器通過(guò)不同的防止組合而成的

• 后代選擇器
  后代選擇器又稱為包含選擇器，可以選擇父元素中的子元素
  語(yǔ)法：外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分開

  父元素 子元素 {
    樣式聲明
  }
  例：
  ol li {
    color： red；
  }
  

  • 上述語(yǔ)法表示選擇父元素中所有子元素（后代元素）
  • 父元素和子元素中間用空格隔開
  • 子元素可以是兒子也可以是孫子，只要是父元素的后代即可
  • 父元素和子元素可以是任意基礎(chǔ)選擇器（標(biāo)簽、類、id、通配符選擇器）

• 子選擇器

  子元素選擇器只能選擇某元素最近一級(jí)的子元素（親兒子）

  父元素 > 子元素 {
    樣式聲明
  }
  例：
  ol > li {
    color： red；
  }
  

  • 上述語(yǔ)法表示選擇父元素中所有直接后代子元素
  • 父元素和子元素中間用大于號(hào)隔開
  • 子元素必須是最近一級(jí)，直接后代，親兒子

• 并集選擇器
  并集選擇器可以選擇多組標(biāo)簽，同時(shí)定義相同的樣式，通常用于集體聲明

  元素1,元素2 {
    樣式聲明
  }
  

  • 上述語(yǔ)法表示選擇元素1和元素2
  • 父元素和子元素中間用逗號(hào)隔開
  • 逗號(hào)可以理解為和的意思
  • 任何形式的選擇器都可以作為并集選擇器的一部分（復(fù)合選擇器也可以）
  • 約定語(yǔ)法規(guī)范：一行一個(gè)元素和逗號(hào)，最后一行不加逗號(hào)

• 偽類選擇器

  偽類選擇器用于向某些選擇器添加特殊效果，比如給鏈接添加特殊效果，或選擇第一個(gè)，第n個(gè)元素

  特點(diǎn)：用冒號(hào)（：）表示，比如：hover、：first-child

  • 鏈接偽類

  a:link                // 選擇所有未被訪問(wèn)的鏈接
  a:visited         // 選擇所有未已訪問(wèn)的鏈接
  a:hover               // 選擇鼠標(biāo)指針位于其上的鏈接
  a:active          // 選擇活動(dòng)鏈接（鼠標(biāo)按下未彈起的鏈接）
  

  ? 為確保生效，請(qǐng)按照l(shuí)vha的順序聲明：:link :visited :hover :active
  ? a鏈接在瀏覽器中具有默認(rèn)樣式，實(shí)際工作中需要給鏈接單獨(dú)指定樣式

  • :focus偽類選擇器
    :focus偽類選擇器用于選取獲得焦點(diǎn)的表單元素
    焦點(diǎn)就是光標(biāo)，一般情況< input>類表單元素才能獲取，因此這個(gè)選擇器主要針對(duì)表單元素

    input:focus {
    background-color:yellow;
    }
    

• 復(fù)合選擇器總結(jié)

CSS元素顯示模式

元素顯示模式就是元素（標(biāo)簽）以什么方式進(jìn)行顯示，如div獨(dú)占一行，span一行可以放多個(gè)
作用：了解標(biāo)簽特點(diǎn)可以更好的布局網(wǎng)頁(yè)
HTML元素一般分為塊元素和行內(nèi)元素兩種類型

• 塊元素

  常見塊元素：< h1>~< h6>,< p>, < div>, < ul>, < ol>, < li>
  特點(diǎn)：

  • 獨(dú)占一行
  • 高度、寬度、外邊距、內(nèi)邊距都可以控制
  • 寬度默認(rèn)是容器（父級(jí)寬度）的100%
  • 是一個(gè)容器及盒子，里面可以放行內(nèi)或塊級(jí)元素
    注意：
    • 文字類的元素內(nèi)不能使用塊級(jí)元素
    • < p>標(biāo)簽主要用于存放文字，因此不能放塊級(jí)元素，特別是< div>
    • 同理，< h1>~< h6>等都是文字類標(biāo)簽，里面不能放塊級(jí)元素

• 行內(nèi)元素

  常見行內(nèi)元素：< a>, < strong>, < b>,< em>, < i>, < span>等

  特點(diǎn)：

  • 相鄰行內(nèi)元素在一行上顯示，一行可以顯示多個(gè)
  • 高、寬直接設(shè)置是無(wú)效的
  • 默認(rèn)寬度是他本身內(nèi)容的寬度
  • 行內(nèi)元只能容納文本或其他行內(nèi)元素

  注意：

  • 鏈接里面不能再放鏈接
  • 特殊情況鏈接a里面可以放塊級(jí)元素，但是給a轉(zhuǎn)換一下塊級(jí)模式最安全

• 行內(nèi)塊元素

  行內(nèi)塊元素：< img /> , < input />, < td>，同時(shí)具有塊元素和行內(nèi)元的特點(diǎn)

  特點(diǎn)：

  • 和相鄰行內(nèi)元素（行內(nèi)塊）在一行上，但是元之間會(huì)有空白縫隙，一行可以顯示多個(gè)（行內(nèi)元素特點(diǎn)）
  • 默認(rèn)寬度是他本身內(nèi)容的寬度（行內(nèi)元素特點(diǎn)）
  • 高度、行高、外邊距以及內(nèi)邊距都可以控制（塊級(jí)元素特點(diǎn)）

• 元素顯示模式總結(jié)

  元素默認(rèn)	元素排列	設(shè)置樣式	默認(rèn)寬度	包含
  塊級(jí)元素	一行只能放一個(gè)塊級(jí)元素	可以設(shè)置高寬	父容器的100%	可以包含任何標(biāo)簽
  行內(nèi)元素	一行可以放多個(gè)行內(nèi)元素	不可以直接設(shè)置高寬	本身內(nèi)容的寬度	容納文本或其他行內(nèi)元素
  行內(nèi)塊元素	一行可以放多個(gè)行內(nèi)元素	可以設(shè)置高寬	本身內(nèi)容的寬度

• 元素顯示模式轉(zhuǎn)換

  一個(gè)模式的元素可能需要另外一種默認(rèn)的特性，所以需要元素顯示模式轉(zhuǎn)換

  • 轉(zhuǎn)換為塊元素： display: block;
  • 轉(zhuǎn)換為行內(nèi)元素： display: inline;
  • 轉(zhuǎn)換為行內(nèi)塊： display: inline-block;

• 單行文字居中

  讓文字的行高等于盒子的高度，就可以讓文字在當(dāng)前盒子內(nèi)垂直居中
  原理：行間距：上邊距+文本高度+下間距
  如果行高小于盒子高度，文字會(huì)偏上；如果行高大于盒子高度，文字會(huì)偏下。

CSS背景

CSS背景屬性，可以給頁(yè)面元素添加背景樣式

背景屬性可以設(shè)置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等

• 背景顏色

  background-color屬性定義了元素的背景顏色

  background-color:顏色值; 
  

  一般情況下元素背景顏色默認(rèn)值是 transparent（透明），也可以手動(dòng)指定背景顏色為透明色。

  background-color:transparent; 
  

• 背景圖片

  background-image 屬性描述了元素的背景圖像。實(shí)際開發(fā)常見于 logo 或者一些裝飾性的小圖片或者是超 大的背景圖片, 優(yōu)點(diǎn)是非常便于控制位置. (精靈圖也是一種運(yùn)用場(chǎng)景)

  background-image : none | url (url) 
  

  參數(shù)值	作用
  none	無(wú)背景圖（默認(rèn)）
  url	使用絕對(duì)或相對(duì)地址指定背景圖像

  注意：背景圖片后面的地址，千萬(wàn)不要忘記加 URL， 同時(shí)里面的路徑不要加引號(hào)。

• 背景平鋪

  如果需要在 HTML 頁(yè)面上對(duì)背景圖像進(jìn)行平鋪，可以使用 background-repeat 屬性。

  background-repeat: repeat | no-repeat | repeat-x | repeat-y 
  

  參數(shù)值	作用
  repeat	背景圖像在縱向和橫向上平鋪（默認(rèn)）
  no-repeat	背景圖像不平鋪
  repeat-x	背景圖像在橫向上平鋪
  repeat-y	背景圖像在縱向上平鋪

  頁(yè)面元素既可以添加背景顏色，也可以添加背景圖片，背景圖片會(huì)壓住背景顏色

• 背景圖片位置

  利用 background-position 屬性可以改變圖片在背景中的位置。

  background-position: x y; 
  

  參數(shù)代表的意思是：x 坐標(biāo)和 y 坐標(biāo)。 可以使用 方位名詞 或者 精確單位

  參數(shù)值	說(shuō)明
  length	百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度單位
  position	top,center,bottom,left,right

  1. 參數(shù)是方位名詞
     • 如果指定的兩個(gè)值都是方位名詞，則兩個(gè)值前后順序無(wú)關(guān)，比如 left top 和 top left 效果一致
     • 如果只指定了一個(gè)方位名詞，另一個(gè)值省略，則第二個(gè)值默認(rèn)居中對(duì)齊
  2. 參數(shù)是精確單位
     • 如果參數(shù)值是精確坐標(biāo)，那么第一個(gè)肯定是 x 坐標(biāo)，第二個(gè)一定是 y 坐標(biāo)
     • 如果只指定一個(gè)數(shù)值，那該數(shù)值一定是 x 坐標(biāo)，另一個(gè)默認(rèn)垂直居中
  3. 參數(shù)是混合單位
     • 如果指定的兩個(gè)值是精確單位和方位名詞混合使用，則第一個(gè)值是 x 坐標(biāo)，第二個(gè)值是 y 坐標(biāo)

• 背景圖像固定（背景附著）

  background-attachment 屬性設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。

  background-attachment 后期可以制作視差滾動(dòng)的效果。

  background-attachment : scroll | fixed 
  

  參數(shù)	作用
  scroll	背景圖像隨對(duì)象內(nèi)容滾動(dòng)
  fixed	背景圖像固定

• 背景復(fù)合寫法

  background: 背景顏色 背景圖片地址 背景平鋪 背景圖像滾動(dòng) 背景圖片位置

  background: transparent url(image.jpg) repeat-y fixed top ;
  

  實(shí)際開發(fā)中，更提倡這種寫法

• 背景色半透明

  CSS3 為我們提供了背景顏色半透明的效果。

  background: rgba(0, 0, 0, 0.3);
  

  • 最后一個(gè)參數(shù)是 alpha 透明度，取值范圍在 0~1之間
  • 我們習(xí)慣把 0.3 的 0 省略掉，寫為 background: rgba(0, 0, 0, .3);
  • 注意：背景半透明是指盒子背景半透明，盒子里面的內(nèi)容不受影響
  • CSS3 新增屬性，是 IE9+ 版本瀏覽器才支持的
  • 但是現(xiàn)在實(shí)際開發(fā),我們不太關(guān)注兼容性寫法了,可以放心使用

• 背景總結(jié)

  屬性	作用	值
  background-color	背景顏色	預(yù)定義的顏色值/十六進(jìn)制/RGB代碼
  background-image	背景圖片	url（圖片路徑）
  background-repeat	背景平鋪	repeat/no-repeat/repeat-x/repeat-y
  background-position	背景位置	length/position，分別是x和y坐標(biāo)
  background-attachment	背景附著	scroll(背景滾動(dòng))/fixed(背景固定)
  背景簡(jiǎn)寫（復(fù)合寫法）	書寫更簡(jiǎn)單	背景顏色 背景圖片地址 背景平鋪 背景圖像滾動(dòng) 背景圖片位置
  背景色半透明	背景顏色半透明	background: rgba(0, 0, 0, .3)后面必須是4個(gè)值

CSS的三大特性

• 層疊性
  給相同的選擇器設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)覆蓋（層疊）另一個(gè)樣式
  層疊性主要解決樣式?jīng)_突的問(wèn)題
  層疊性原則：

  • 樣式?jīng)_突，遵循就近原則，哪個(gè)樣式離結(jié)構(gòu)近，就執(zhí)行哪個(gè)樣式（執(zhí)行后面的樣式）
  • 樣式不沖突，不會(huì)層疊

• 繼承性
  子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)
  恰當(dāng)?shù)氖褂美^承可以簡(jiǎn)化代碼，降低CSS樣式的復(fù)雜性
  子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）

  • 行高的繼承性

    body {
        font: 12px/1.5 'Microsoft YaHei'
    }
    

    • 行高可以跟單位也可以不跟單位
    • 如果子元素沒有設(shè)置行高，則會(huì)繼承父元素的行高為1.5
    • 此時(shí)子元素的行高是：當(dāng)前子元素的文字大小*1.5
    • body行高1.5，這樣寫法最大的優(yōu)勢(shì)就是里面子元素可以根據(jù)自己文字大小自動(dòng)調(diào)整行高

• 優(yōu)先級(jí)
  當(dāng)一個(gè)元素指定多個(gè)選擇器，就會(huì)有優(yōu)先級(jí)的產(chǎn)生

  • 選擇器相同，則執(zhí)行層疊性

  • 選擇器不同，則根據(jù)選擇器權(quán)重執(zhí)行

    選擇器	選擇器權(quán)重
    繼承或*	0000
    元素選擇器	0001
    類選擇器，偽類選擇器	0010
    ID選擇器	0100
    行內(nèi)樣式 style=“”	1000
    ！important	無(wú)窮大

  • 優(yōu)先級(jí)注意點(diǎn)

    權(quán)重由4組數(shù)字組成，但是不會(huì)有進(jìn)位
    可以理解為類選擇器永遠(yuǎn)大于元素選擇器，以此類推
    從左向右判斷，如果某一位數(shù)值相同，則判斷下一位數(shù)值
    簡(jiǎn)單記憶：通配符和繼承權(quán)重0，標(biāo)簽選擇器：1，類（偽類）選擇器：10，id選擇器：100，行內(nèi)樣式表：1000，iimportant：無(wú)窮大
    繼承的權(quán)重是0，不管父元素權(quán)重多高，只要子元素沒有直接選中，得到的權(quán)重都是0

  • 權(quán)重疊加
    如果是復(fù)合選擇器，則會(huì)有權(quán)重疊加，需要計(jì)算權(quán)重

    • div ul li : 0003
    • .nav ul li : 0012
    • a:hover：0011
    • .nav a: 0011