CSS字體樣式屬性

?

目錄

CSS字體樣式屬性

一、font屬性

二、color屬性

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

四、text-align 水平對(duì)齊方式

五、text-indent 首行縮進(jìn)

六、text-decoration 文本的裝飾

---

?

一、font屬性

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

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

?

二、color屬性

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

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

[樣例代碼]

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

?

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

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

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

四、text-align 水平對(duì)齊方式

text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊，相對(duì)于html中的align對(duì)齊屬性。

• left：左對(duì)齊（默認(rèn)）
• right：右對(duì)齊
• center：居中對(duì)齊

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

五、text-indent 首行縮進(jìn)

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

[樣例代碼]

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

?

六、text-decoration 文本的裝飾

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

• none ? ? ? ? ? ? ? ?無(wú)裝飾（默認(rèn)）-取消裝飾的時(shí)候使用
• underline ? ? ? ? 下劃線 - 常用
• blink ? ? ? ? ? ? ? ? 閃爍
• overline ? ? ? ? ? ?上劃線
• line-through ? ? 貫穿線（刪除線）

[樣例代碼]

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

【助記總結(jié)】

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

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

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

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

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。