CSS字體樣式屬性

?

目錄

CSS字體樣式屬性

一、font屬性

二、color屬性

三、line-height 行間距（行高）

四、text-align 水平對齊方式

五、text-indent 首行縮進

六、text-decoration 文本的裝飾

---

?

一、font屬性

font屬性用于對字體樣式進行綜合設置。
基本語法:
選擇器{font: font-style ?font-weight ?font-size/line-height ?font-family;}
字體連寫是有順序的，不能更換順序，各個屬性之間用空格分隔。
font-size和font-family是不能省略的（其他可以省略），否則不起作用。

[樣例代碼]
?? ?<style>
?? ??? ?h1{
?? ??? ??? ?font:12px "微軟雅黑";
?? ??? ?}
?? ?</style>

?

二、color屬性

color屬性用于定義文本的顏色，其取值方式有如下三種：

• 1、預定義的顏色值，如red、green、blue等；
• 2、十六進制，如#FF0000（或者#F00）、#FF6600（或者#F60）、#29D794等，“#”開頭，要是兩兩相同的話可以縮寫（必須三組兩兩相同）；
• 3、RGB代碼，如紅色可以表示為rgb(255,0,0)或者rgb(100%,0%,0%)；

[樣例代碼]

?? ?<style>
?? ??? ?span{
?? ??? ??? ?color: #ff0000;
?? ??? ?}
?? ?</style>

?

三、line-height 行間距（行高）

line-height 屬性用于設置行間距，就是行和行之間的距離，俗稱行高。
常用的屬性值單位是像素px、相對值em和百分比%，實際工作中最常用的同樣是px像素。
一般情況下，行距比字號大7/8像素左右即可。

[樣例代碼]
?? ?<style>
?? ??? ?p{
?? ??? ??? ?font-size: 16px;
?? ??? ??? ?line-height: 24px;
?? ??? ?}
?? ?</style>

四、text-align 水平對齊方式

text-align屬性用于設置文本內容的水平對齊，相對于html中的align對齊屬性。

• left：左對齊（默認）
• right：右對齊
• center：居中對齊

[樣例代碼]
?? ?<style>
?? ??? ?h1{
?? ??? ??? ?font:12px "微軟雅黑";
?? ??? ??? ?text-align: center; /* 讓h1里面的文字居中對齊 */
?? ??? ?}
?? ?</style>

五、text-indent 首行縮進

text-indent 屬性用于設置文本的縮進，其屬性值可以是不同單位的數值、em字符寬度的倍數或者相對于瀏覽器窗口寬度的百分比%，允許使用負值，一般建議用em。
1em就是一個字的寬度，正常漢字段落，1em就等于1個漢字。

[樣例代碼]

?? ?<style>
?? ??? ?p{
?? ??? ??? ?font-size: 16px;
?? ??? ??? ?line-height: 24px;
?? ??? ??? ?text-indent: 2em; /* 段落首行縮進兩個字 */
?? ??? ?}
?? ?</style>

?

六、text-decoration 文本的裝飾

text-decoration通常用于給鏈接修改裝飾效果。

• none ? ? ? ? ? ? ? ?無裝飾（默認）-取消裝飾的時候使用
• underline ? ? ? ? 下劃線 - 常用
• blink ? ? ? ? ? ? ? ? 閃爍
• overline ? ? ? ? ? ?上劃線
• line-through ? ? 貫穿線（刪除線）

[樣例代碼]

?? ?<style>
?? ??? ?div{
?? ??? ??? ?font-size: 40px;
?? ??? ??? ?text-decoration: underline;
?? ??? ?}
?? ?</style>

【助記總結】

傾斜：em和i標簽→取消傾斜 font-style:normal;? 添加傾斜 font-style:italic;

加粗：strong和b標簽→取消加粗font-weight:normal; 或者 font-weight:400; ?添加加粗 font-weight:bold; 或者 font-weight:700;

下劃線：u和ins標簽→取消下劃線 text-decoration:none;? 添加下劃線 text-decoration:underline;

刪除線：s和del標簽→取消刪除線 text-decoration:none;? 添加刪除線 text-decoration:line-through;

?

總結

以上是生活随笔為你收集整理的【温故知新】CSS学习笔记（字体样式属性）附加篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。