選擇器

補充另外 2 個選擇器

• type selector (標籤選擇器)：Day07
• Pseudo-classes (擬態選擇器)：Day07
• descendant selector (後代選擇器)：Day11

類別選擇器

• class selector：在標籤內定義類別名稱，利用定義的類別來顯示想要呈現的效果
  • 以 .classname 呈現，常用
  • 優先度 > 標籤選擇器
  • 如整個 <p> 段落為一個樣式，針對某個段落定義特別的類別標籤

<p class="doc">測試</p>

p {
    color:blue;
}
.doc {
    color: red;
}

以此例來說，測試的字體會呈現紅色 (red)

ID 選擇器

• id selector：在標籤內定義類別名稱，利用定義的類別來顯示想要呈現的效果
  • 以 #idname 呈現，具有唯一性
  • 優先度 > 類別選擇器
  • 如整個 <p> 段落為一個樣式，針對某個段落定義特別的 ID 標籤

<p class="doc" id="doc">測試</p>

p {
    color:blue;
}
.doc {
    color: red;
}
#doc {
    color: pink;
}

以此例來說，測試的字體會呈現粉紅色 (pink)

調整文字排版

• 針對文字的呈現做一個設定
  • font-family：可以設定多個，以 , 區分，從第一個開始套用，因此後面會是通用字體
  • font-size：設定字型大小，如 16px
  • line-hight：設定行高，如 1.5 表示 font-size 的 1.5 倍
  • text-align：對齊方式，如 left 或 center
  • text-indent：開頭空格大小，如 32px
  • text-decoration：底線如 underline 或是刪除線 line-through
  • letter-spacing：字元間距，字與字之間的距離，如 2px

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    text-indent: 32px;
    /* text-decoration: underline;
    letter-spacing: 2px; */
}

• px：是絕對單位，代表螢幕中的每個「點」(pixel)，因此在不同地方呈現的大小都一樣

參考資料

• font-family要怎麼玩
• CSS font-family 詳細介紹
• 一次搞懂 CSS 字體單位：px、em、rem 和 %

次回

準備把 CSS 進一步用到 HTML 上