CSS(2)---css字體、文本樣式屬性


css字體、文本樣式屬性

這篇主要講CSS文本屬性中的:字體樣式屬性文本樣式屬性

一、字體樣式屬性

CSS 字體屬性主要包括:字體設置(font-family)字號大小(font-size)字體粗細(font-weight)字體風格(font-style)字體顏色(color)

1、字體設置(font-family)

網頁中常用的字體有 宋體、微軟雅黑、黑體 等,例如將網頁中 所有p標簽的字體設置為微軟雅黑,可以使用如下CSS樣式代碼:

p { font-family:"微軟雅黑";}

可以同時指定多個字體,中間以逗號隔開,表示如果瀏覽器不支持第一個字體,則會嘗試下一個,直到找到合適的字體。

p {font-family:"微軟雅黑",“宋體”,arial;}

注意

1、英文字體不需要加雙引號,如:選擇器{font-family:arial;}

2、如字體中包含特殊符號必須用雙引號括起來,如:選擇器{font-family:"Microsoft yahei";}

3、盡量使用系統默認字體,保證在任何用戶的瀏覽器中都能正確顯示。

2、字號大小(font-size)

p {font-size:15px;}

該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。較常用,推薦使用相對長度像素單位px。

建議

1、網頁一般使用14px以上的字體大小字體大小

2、盡量使用雙數,因為單數情況下ie6等老式瀏覽器可能會出bug

3、字體粗細(font-weight)

 p {font-weight:bold;}

字體加粗除了用 b 和 strong 標簽之外,可以使用CSS 來實現,但是CSS 是沒有語義的。

屬性值

bold:字體加粗 ( 700:等於bold,如果還想更粗就加大數值)
normal:字體正常  ( 400:等於normal,如果還想更細就減小數值)

4、字體風格(font-style)

p {font-style:normal;}

字體傾斜除了用 i 和 em 標簽之外,可以使用CSS 來實現,但是CSS 是沒有語義的。

屬性值

normal:默認值,瀏覽器會顯示標准的字體樣式。
italic:瀏覽器會顯示斜體的字體樣式。

平時我們很少給文字加斜體,反而喜歡給斜體標簽(em,i)改為普通模式。

5、文本顏色(color)

color屬性用於定義文本的顏色,其取值方式有如下3種:

1.預定義的顏色值: 如red,green,blue等。
2.十六進制: 如#FF0000,#FF6600,#29D794等。(常用)。
3.RGB代碼: 如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。

6、綜合設置字體樣式(fort)

學過了上面的幾個屬性之后我們發現如果一個標簽這些樣式都要設置的話寫起來會很繁瑣,代碼冗余性太強,下面我們來學習一下簡單的設置方式。

基本語法

選擇器{font: font-style  font-weight  font-size/line-height  font-family;}

注意

1、使用font屬性時,必須按上面語法格式中的順序書寫,不能更換順序,各個屬性以空格隔開。

2、其中不需要設置的屬性可以省略(取默認值),但必須保留 font-sizefont-family 屬性,否則font屬性將不起作用。

示例

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<style>
	p {
		font: italic  20px "微軟雅黑";
	}
	</style>
</head>
<body>
	<p>字體連寫是有順序的</p> <!-- 字體分格傾斜 大小20px 微軟雅黑 -->
</body>
</html>

二、文本樣式屬性

CSS外觀屬性包含:行間距(line-height)水平對齊方式(text-align)首行縮進(text-indent)文本的裝飾(text-decoration)

1、行間距(line-height)

p {line-height: 15px;}

line-height屬性用於設置行間距,就是行與行之間的距離,即字符的垂直間距,一般稱為行高。一般情況下,行距比字號大7.8像素左右就可以了。

2、text-align:水平對齊方式

p {text-align: center;}

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

屬性值

left:左對齊(默認值)
right:右對齊
center:居中對齊

提示:這個標簽只會對塊級元素或表元素居中,要通過在這些元素上適當地設置左、右外邊距來實現。

3、text-indent:首行縮進

p {text-indent: 2em;}

text-indent屬性用於設置首行文本的縮進,1em 就是一個字的寬度 如果是漢字的段落, 1em 就是一個漢字的寬度

4、text-decoration 文本的裝飾

text-decoration 通常我們用於給鏈接修改裝飾效果

5、總結

這里針對這里所講的做一個總結


參考

更多的可以看w3school官方文檔: w3school-CSS 教程



``` 你如果願意有所作為,就必須有始有終。(4) ```


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM