CSS字型屬性與文字屬性

1. 字型屬性

1.1 字體系列font-family

p {
    font-family: "Microsoft Yahei";/*微軟雅黑*/
}
/*當然也可以寫成中文，建議寫成英文*/
p {
    font-family: "Microsoft Yahei","宋體";
}

注：

• 各種字型之間用英文逗號隔開
• 如果有空格隔開的多個單片語成的字型，加引號（單引號雙引號都行）
• 儘量使用預設系統自帶字型

/*最常見的幾個字型*/
body {
    font-family: "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";
}
 

1.2 字型大小font-size

p {
    font-size: 18px;
}

注：

• chrome預設的文字大小為16px
• 不同瀏覽器可能預設顯示的字號大小不一致，儘量給一個明確值大小，不用預設大小
• 可以給body指定整個頁面文字的大小

1.3 字型粗細font-weight

p {
    font-weight: 400;/*不加粗*/
}

實際開發中更喜歡用數字表示粗細。

1.4 文字樣式font-style

p {
    font-style: italic;/*斜體*/
}
 

平時很少給文字加斜體，反而要給斜體標籤（em、i）改為不傾斜字型。

1.5 字型複合屬性

把上面的各個屬性綜合來寫成一行程式碼。

body {
    font: font-style font-weight font-size/line-height font-family;
}

注：

• 上述順序不能更換，且各個屬性之間用空格隔開
• 必須保留font-size和font-family，剩餘屬性可以省略

2. 文字屬性

2.1 文字顏色color

p {
    color: blue;
}

color的屬性值有下列表示形式。

十六進位制形式：

十六進位制顏色程式碼以#號開頭，三組16進位制數字表示red,green,blue三色，每組數字從0到FF。

RGB程式碼：

在RGB顏色模式中，顏色由三個值表示，表示元件的強度，紅色、綠色和藍色。

從最小值0到最大值255，當所有顏色都以最小值0顯示時，顏色為黑色，當所有顏色都以最大值255顯示時，顏色為白色。

開發中最常用的是十六進位制形式。

2.2 對齊文字text-align

用於設定元素內文字內容的水平對齊方式。

div {
    text-align: center;
}

2.3 裝飾文字text-decoration

用於規定新增到文字的修飾。

div {
    text-decoration: none;
}

通常用在取消連結a預設的下劃線，如下。

a {
    text-decoration: none;
}

2.4 文字縮排text-indent

用於指定文字第一行的縮排，通常是將段落的首行縮排。

p {
    text-indent: 10px;/*也可以是負值，效果為第一行向前突出*/
}

通常的段落首行縮排兩個字可以寫成如下。

p {
    text-indent: 2em;
}

em就是當前元素font-size的一個文字的大小。如果當前元素沒有設定大小，則會按照父元素的一個文字大小。

2.5 行間距line-height

用於設定行間的距離（行高）。

p {
    line-height: 26px;
}

所以行間距=上間距+文字高度+下間距。

要想實現文字在一個HTML元素中上下居中對齊，則讓行間距=HTML元素的高度即可。