CSS

（層疊樣式表）

語法

選擇符（選擇器） {屬性:屬性值;屬性:屬性值}

• 例如：div{
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 20px;
  }

選擇器

• 1、元素選擇器（標記選擇器）

  • 在html檔案中叫做標籤，在css檔案中叫做元素

    • 例如html、div、p、ul、li、等等

• 2、id選擇器

  • 給元素（標籤）新增一個id屬性，方便對不同的元素進行操作（對號入座）

• 3、class選擇器

  • 給元素（標籤）新增一個id屬性，方便對不同的元素進行操作（對號入座）

• 4、父子選擇器和後代選擇器

  • 父子選擇器

    • 特點：通過爸爸選擇兒子,只能選擇一層
    • 格式：
      父元素 > 子元素{
      屬性：屬性值；
      屬性：屬性值；
      ......
      }

  • 後代選擇器

    • 特點：只要有包含關係就算後代，可以是一層也可以是多層
    • 格式：
      祖先元素 後代元素{
      屬性：屬性值；
      屬性：屬性值；
      ......
      }

• 5、群組選擇器

  • 作用：當多個不同的元素具有相同的屬性時，利用群組選擇器同時給多個元素設定共同的樣式
  • 格式：
    元素1，元素2，元素3，......{
    屬性：屬性值；
    屬性：屬性值；
    ......
    }

• 6、萬用字元選擇器

  • 作用：選擇網頁所有的元素
  • 格式：

• {
  margin: 0;
  /* 清除所有標籤的外邊距 /
  padding: 0;
  /
  清除所有標籤內邊距 */
  }

常用屬性

font-size

• 文字大小

  • 單位

    • px

      • 瀏覽器預設大小：16px

    • em

      • 先相對於自己的font-size值大小，如果沒有，就相對於父元素font-size值

    • rem

      • rem 只找根元素（html）的font-size值

font-family

• 文字種類

  • 1、 中文字型需要引號包裹
  • 2、英文字型多個單片語成需要設定引號

font-weight

• 加粗文字

  • bold 加粗
  • bolder 更粗
  • normal 取消加粗
  • 屬性值：100-900
  • 400/500正常粗細

font-style

• 傾斜文字

  • italic 斜體字
  • oblique 文字傾斜（推薦）
  • normal 取消傾斜

width

• 寬度

height

• 高度

background

• 填充顏色

  • rgb

  • rgba

  • 用16進製表示各種顏色

    • 可以用photoshop獲取各種顏色的十六進位制表示式

margin

• 外邊距

  • margin:auto;
    表示元素居中

padding

• 內邊距

border

• 邊框

  • 補充：
    格式：border: solid 5px black;
    solid表示邊框為實線

CSS元素

塊元素

• div，p，h1~h6，ol，ul，li，dl，dt，dd，hr

  • 特點

    • 1、”自動換行，獨佔一行，上下顯示“的元素
    • 2、可以設定寬高,可以設定4個方向的外邊距margin和內邊距padding
    • 3、一般情況塊元素可以巢狀任何內容
    • 特殊情況： p/h1~h6/dt ,只能巢狀行內或者行內塊元素

行內元素

• span，i，em，b，strong，s，u，sub，sup，a，br

  • 特點

    • 1、”水平排列，一行顯示多個，不會自動換行“的元素

    • 2、行內元素的寬高由內容撐開，width和height不識別，只能設定水平方向的margin和padding

    • 3、可以巢狀同類型，也可以巢狀行內塊元素

      • 可以用a巢狀img，用來給圖片新增超連結

    • 特殊： a ，可能a巢狀塊元素

行內塊元素

• img

  • 特點

    • 1、”水平排列，一行顯示多個，不會自動換行“的元素
    • 2、可以設定寬高 ,設定4個方向的外邊距margin和內邊距padding
    • 3、同類型巢狀