基礎選擇器

• 萬用字元選擇器

  • * {
         width: 200px;
       height: 200px;
       
    }

• 標籤選擇器

  • div {
         width: 200px;
       height: 200px;
       
    }

• class選擇器

  • .box {
        
    }

  • 可以包含多個類選擇器，用空格分開

• id選擇器

  • #div1 {
        font-size:20px;
    }

  • 同一個文字唯一

• 優先順序

  • id選擇器>class選擇器>標籤選擇器>萬用字元選擇器*

文字字型屬性

• css字型屬性

  • font-size

    • 設定字型的大小，瀏覽器預設是16px, 最小設定不能小於12px (1px-11px跟12px的大小是一樣的)

  • font-family

    • 設定文字的字體系列，如果屬性值包含中文或者空格，要加引號，回退系統（備用字型），假如瀏覽器不支援第一個字型，第二個字型可以生效。

    • serif -- 襯線字型

      • 宋體（SimSun）

        • Windows 下大部分瀏覽器的預設中文字型，是為適應印刷術而出現的一種漢字字型。筆畫有粗細變化，是一種襯線字型，宋體在小字號下的顯示效果還可以接受，但是字號一大體驗就很差了，所以使用的時候要注意，不建議做標題字型使用。

      • Times New Roman

        • Mac 平臺 Safari 下預設的英文字型，是最常見且廣為人知的西文襯線字型之一，眾多網頁瀏覽器和文書處理軟體都是用它作為預設字型。

    • sans-serif -- 無襯線字型

      • 微軟雅黑（Microsoft Yahei）

        • 大名鼎鼎的微軟雅黑相信都不陌生，從 windows Vista 開始，微軟提供了這款新的字型，一款無襯線的黑體類字型，顯著提高了字型的顯示效果。現在這款字型已經成為 windows 瀏覽器最值得使用的中文字型。

      • 華文黑體（STHeiti）、華文細黑（STXihei）

        • 屬於同一字型家族系列，MAC OS X 10.6 之前的簡體中文系統介面的預設中文字型，正常粗細就是華文細黑，粗體下則是華文黑體。

      • 黑體-簡（Heiti SC）

        • 從 MAC OS X 10.6 開始，黑體-簡代替華文黑體用作簡體中文系統介面預設字型，蘋果生態最常用的字型之一，包括 iPhone、iPad 等裝置用的也是這款字型。

      • 冬青黑體（Hiragino Sans GB）

        • 又叫蘋果麗黑，Hiragino 是字遊工房設計的系列字型名稱。是一款清新的專業印刷字型，小字號時足夠清晰，Mac OS X 10.6 開始自帶有 W3 和 W6 。

      • Helvetica

        • 被廣泛用於全世界使用拉丁字母和西裡爾字母的國家。Helvetica 是蘋果電腦的預設字型，微軟常用的Arial 字型也來自於它。

      • Arial

        • Windows 平臺上預設的無襯線西文字型，有多種變體，比例及字重（weight）和 Helvetica 極為相近。

      • Verdana

        • 無襯線字型，優點在於它在小字上仍結構清晰端整、閱讀辨識容易。

      • Tahoma

        • 十分常見的無襯線字型，字型結構和 Verdana 很相似，其字元間距較小，而且對 Unicode 字集的支援範圍較大。許多不喜歡 Arial 字型的人常常會改用 Tahoma 來代替，除了是因為 Tahoma 很容易取得之外，也是因為 Tahoma 沒有一些 Arial 為人詬病的缺點，例如大寫“i”與小寫“L”難以分辨等。（這裡故意反過來寫）。

    • monospace -- 等寬字型

      • Consolas

    • fantasy(夢幻)

    • cursive(草體)

  • font-style

    • 設定文字字型樣式

      • normal 正常顯示

      • italic 斜體顯示

  • font-weight

    • 設定字型的粗細

      • lighter 細體 100

      • normal 預設，標準的字型 400

      • bold 粗體 700

      • bolder 粗體 900

      • 100-900

  • line-height

    • 設定行高

      • normal 預設，合理的行高

      • length 設定固定的行間距

      • number 設定數字，此數字與當前字型尺寸相乘的結果

    • 單行文字垂直居中

      • .box {
              width: 300px;
              height: 200px;
              background-color: red;
              font-size: 30px;
              /* 設定文字水平居中 */
              text-align: center;
              /* 設定行高和盒子高度一致，單行文字垂直居中 */
              line-height: 200px;
             }

  • font: font-style font-weight font-size/line-height font-family

    • 注意：只有同時具有font-size和font-family的值時，簡寫才生效

• css文字屬性

  • color

    • 設定文字的字型顏色

  • text-align

    • 設定文字的水平對齊方式，預設都是左對齊，相對於標籤本身的寬度來對齊的

      • left 預設 多對齊

      • center 居中對齊

      • right 右對齊

      • justify 設定文字兩端自動對齊

  • text-decoration

    • 設定文字的裝飾

      • none 預設，沒有裝飾

      • underline 定義文字下的一條線

      • overline 定義文字上的一條線

      • line-through 定義貫穿文字的一條線

  • text-indent

    • 設定文字的首行縮排

css長度單位和顏色表示

• css長度單位：

  • px

    • 畫素值，絕對長度單位

  • em

    • 相對長度單位，相對於當前元素本身的font-size

    • 如果作用於font-size, 那就相對於父標籤的font-size

  • %

    • 百分比，相對於父標籤

  • rem

    • 相對於根元素（html）的font-size, 一般作用於移動端

• css顏色表示 :

  • 英文單詞 (red blue green)

  • 六位的十六進位制數 #RRGGBB

    • 如果 #aabbcc 可以簡寫為 #abc

      • 可以設定為8位，最後兩位代表透明度 (00 - ff)

  • rgb(r,g,b)

    • 三種整數 0 - 255

    • 三個百分比

    • rgba(r,g,b,alpha)

      • alpha 可是設定 0 到 1的小數 ，代表透明度

盒模型的概念

• 概念：css盒模型本質是一個盒子，封裝周圍的html標籤，它包括：外邊距，邊框，填充（內邊距）和實際內容

• 內容 content :

  • width: 設定寬度

  • height: 設定高度

• 內邊距（填充區域）padding ：

  • 單邊內邊距：padding-top padding-bottom padding-left padding-right

  • 簡寫 :

    • 一個值：表示四個方向的內邊距值。

    • 兩個值：分別表示上下，左右的內邊距值

    • 三個值：分別表示上，左右，下的內邊距值

    • 四個值：分別表示上，右，下，左的內邊距值

• 邊框 border :

  • border-width

  • border-style :

    • none 定義無邊框

    • dotted 定義點狀邊框

    • dashed 定義虛線邊框

    • solid 定義實現邊框

    • double 定義雙線。雙線的高度等於border-width的值

  • border-color

• border: 1px solid red;

• 外邊距 margin :

  • 單邊外邊距 ： margin-top margin-bottom margin-left margin-right

  • 簡寫：

    • 一個值：表示四個方向的外邊距值。

    • 兩個值：分別表示上下，左右的外邊距值

    • 三個值：分別表示上，左右，下的外邊距值

    • 四個值：分別表示上，右，下，左的外邊距值

• 外邊距傳遞和塌陷

  • 給父級設定邊框或內邊距

  • 給父級設定溢位隱藏 overflow:hidden,實際上是觸發BFC

實用小技巧

    <style>
    .div1 {
      width: 100px;
      height: 100px;
      border-width: 50px;
      border-style: solid;
      border-color: red yellow green blue;
     }
    .div2 {
      width: 0;
      height: 0;
      border-width: 100px;
      border-style: solid;
      border-color: red yellow green blue;
     }
    .div3 {
      width: 0;
      height: 0;
      border-width: 200px 200px 0 0;
      border-style: solid;
      border-color: red yellow green;
     }
    .div4 {
      width: 0;
      height: 0;
      border-width: 100px;
      border-style: solid;
      border-color: red transparent transparent transparent;
     }
  </style>
    <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>