CSS字體屬性與文本屬性

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;/*不加粗*/
}

屬性值	描述
normal	默認值（不加粗）
bold	粗體
100~900	normal=400，bold=700，注意數字後不用帶單位

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

1.4 文字樣式font-style

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

屬性值	做用
normal	默認值，標準的字體樣式
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的屬性值有下列表示形式。

表示形式	屬性值
預約義的顏色值	red、yellow、blue等
十六進制	#FFFFFF、#FF6600等
RGB代碼	rgb(255,0,255)或rgb(100%,0%,100%)

十六進制形式：

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

RGB代碼：

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

從最小值0到最大值255，當全部顏色都以最小值0顯示時，顏色爲黑色，當全部顏色都以最大值255顯示時，顏色爲白色。

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

2.2 對齊文本text-align

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

div {
    text-align: center;
}

屬性值	做用
left	左對齊（默認）
right	右對齊
center	居中對齊

2.3 裝飾文本text-decoration

用於規定添加到文本的修飾。

div {
    text-decoration: none;
}

屬性值	做用
none	沒有裝飾線，默認值。（最經常使用）
underline	下劃線，連接a自帶下劃線。（經常使用）
overline	上劃線（幾乎不用）
line-through	刪除線（不經常使用）

一般用在取消連接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元素的高度便可。