iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
1
Modern Web

HTML 與 CSS 學習筆記系列 第 8

Day08 - CSS (3) - 選擇器、文字排版

選擇器

補充另外 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:對齊方式,如 leftcenter
    • 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),因此在不同地方呈現的大小都一樣

參考資料

次回

準備把 CSS 進一步用到 HTML 上


上一篇
Day07 - CSS (2) - 選擇器、隨機假文
下一篇
Day09 - CSS (4) - 線條、容器、重置 CSS
系列文
HTML 與 CSS 學習筆記31

尚未有邦友留言

立即登入留言