大綱

如圖

CSS 指層疊樣式表

• 樣式定義如何顯示HTML元素
• 樣式通常存儲在樣式表中
• 為了解決內(nèi)容和表現(xiàn)分離的問題
• 外部樣式表通常存儲在CSS文件中
• 多個樣式定義可層疊為一個

代碼寫在哪？

• 通過style屬性

  如圖

• 通過style標(biāo)簽
  放head里面 對整體div進(jìn)行修飾

  
  
  如圖

• 通過link標(biāo)簽外鏈
  <link>標(biāo)簽定義文檔與外部資源的關(guān)系，最常見用途是鏈接樣式表

  如圖
  如圖

CSS包含

* 選擇器

1. 元素選擇器
標(biāo)簽的名字

如圖

2. ID選擇器

如圖

<u>注意：在css表里要添加#a1, 符號#為id選擇器</u>

如圖

3.類選擇器
.a1為類(class)選擇器

如圖

注意：在CSS表里添加 .a1

如圖

4.父子選擇器（又稱層級選擇器）

如圖

讓兩個a1選擇器里的a11不同，就需要在選定選擇器之后再進(jìn)行分塊
如 #a1 a11 指的是id選擇器里的a11
.a1 a11 指的是類選擇器里的a11

如圖

* 樣式（CSS樣式手冊）

常用樣式

* 布局

1. 寬高 width，height
2. 內(nèi)外間距 margin，padding
3. 浮動 float
4. 清除浮動 clear
5. 處理溢出 overflow

* 效果

1. 文字顏色 color

2. 背景顏色 background

3. 文字大小 font-size
   布局效果圖

   如圖
   如圖

* 布局

• 單位
  1.顏色

  • 16進(jìn)制
  • RGB

  • 英文單詞

    
    
    如圖

  2.尺寸

  • px
  • em
  • mm
  如圖

• 使用float控制標(biāo)簽的位置

  如圖

• 使用clear overflow清楚浮動影響

  1. clear

     如圖

  2. overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情,如果元素中的內(nèi)容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為.

     
     
     如圖

實戰(zhàn)

如圖

如圖

附源碼圖

如圖

如圖

CSS源碼

如圖

如圖