我們可以使用css樣式為網(wǎng)頁中的文字設(shè)置字體、字號、顏色等樣式屬性。下面我們來看一個例子，下面代碼實現(xiàn)：為網(wǎng)頁中的文字設(shè)置字體為宋體。
body{font-family:"宋體";}1這里注意不要設(shè)置不常用的字體，因為如果用戶本地電腦上如果沒有安裝你設(shè)置的字體，就會顯示瀏覽器默認(rèn)的字體。（因為用戶是否可以看到你設(shè)置的字體樣式取決于用戶本地電腦上是否安裝你設(shè)置的字體。）
現(xiàn)在一般網(wǎng)頁喜歡設(shè)置“微軟雅黑”，如下代碼：
body{font-family:"Microsoft Yahei";}1或
body{font-family:"微軟雅黑";}1注意：第一種方法比第二種方法兼容性更好一些。
因為這種字體即美觀又可以在客戶端安全的顯示出來（用戶本地一般都是默認(rèn)安裝的）。
示例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>認(rèn)識html標(biāo)簽</title><style type="text/css">body{ font-family:"Microsoft Yahei";}span{ font-family:"宋體";}</style></head><body> <h1>三年級</h1> <p>三年級<span id="stress">三年級</span>三年級</p> <p>三年級</p></body></html>1234567891011121314151617181920可以使用下面代碼設(shè)置網(wǎng)頁中文字的字號為12像素，并把字體顏色設(shè)置為#666(灰色)：
body{font-size:12px;color:#666}1示例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字號、顏色</title><style type="text/css">body{font-size:12px;color:#666;}.stress{font-size:20px;color:red;}</style></head><body> <h1>三年級</h1> <p>三年級<span class="stress">三年級</span>三年級</p> <p>三年級<span>三年級</span>三年級</p></body></html>12345678910111213141516我們還可以使用css樣式來改變文字的樣式：粗體、斜體、下劃線、刪除線，可以使用下面代碼實現(xiàn)設(shè)置文字以粗體樣式顯示出來。
p span{font-weight:bold;}1在這里大家可以看到，如果想為文字設(shè)置粗體是有單獨的css樣式來實現(xiàn)的，再不用為了實現(xiàn)粗體樣式而使用h1-h6或strong標(biāo)簽了。
示例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>粗體簽</title><style type="text/css">p span{font-weight:bold;}a{font-weight:bold;}</style></head><body> <h1>三年級時</h1> <p>三年級時<span class="stress">三年級時</span>三年級時<a href="http://www.imooc.com">三年級時</a>三年級時</p> <p>三年級時</p></body></html>12345678910111213141516以下代碼可以實現(xiàn)文字以斜體樣式在瀏覽器中顯示：
p a{font-style:italic;}<p> 三年級 <a> 四年級 </a> 五年級 </p>12示例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>斜體樣式</title><style type="text/css">p{ font-style:italic;
}a{ font-weight: bold; color: red; font-style: normal;}</style></head><body><p>三年級<a>三年級</a>三年級</p> </body></html>1234567891011121314151617181920有些情況下想為文字設(shè)置為下劃線樣式，這樣可以在視覺上強(qiáng)調(diào)文字，可以使用下面代碼來實現(xiàn)：
p a{text-decoration:underline;}<p> 三年級 <a> 四年級 </a> 五年級 </p>12示例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>下劃線樣式</title><style type="text/css">a { text-decoration:underline;
}span { text-decoration:underline;}</style></head><body><p><span>三年級</span><a> 四年級 </a> 五年級 </p></body></html>123456789101112131415161718如果想在網(wǎng)頁上設(shè)置刪除線怎么辦，這個樣式在電商網(wǎng)站上常會見到：
上圖中的原價上的刪除線使用下面代碼就可以實現(xiàn)：
.oldPrice{text-decoration:line-through;}1示例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>刪除樣式</title><style type="text/css">.oldPrice{text-decoration:line-through;}</style></head><body><p>原價：<span class="oldPrice">300</span>元 現(xiàn)價：230 元</p> </body></html>12345678910111213中文文字中的段前習(xí)慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現(xiàn)：
p{text-indent:2em;}<p>1922年的春天，一個想要成名名叫尼克卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>12注意：2em的意思就是文字的2倍大小。
示例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>縮進(jìn)樣式</title><style type="text/css">p{text-indent:2em;};</style></head><body> <h1>尼克?卡拉威</h1> <p>1922年的春天，一個想要成名名叫尼克?卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>
<p>菲茨杰拉德，二十世紀(jì)美國文學(xué)巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌，其詩人和夢想家的氣質(zhì)亦為那個奢靡年代的不二注解。</p></body></html>123456789101112131415這一小節(jié)我們來學(xué)習(xí)一下另一個在段落排版中起重要作用的行間距（行高）屬性（line-height），如下代碼實現(xiàn)設(shè)置段落行間距為1.5倍。
p{line-height:1.5em;}<p>菲茨杰拉德，二十世紀(jì)美國文學(xué)巨擘之一。</p>12示例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>行間距</title><style type="text/css">p{line-height:2em;}</style></head><body><p>菲茨杰拉德，二十世紀(jì)美國文學(xué)巨擘之一。</p></body></html>12345678910111213中文字間隔、字母間隔設(shè)置：
如果想在網(wǎng)頁排版中設(shè)置 文字間隔 或者 字母間隔 就可以使用 letter-spacing 來實現(xiàn)，如下面代碼：
h1{
letter-spacing:50px;
}...<h1>了不起的喬布斯</h1>12345注意：這個樣式使用在英文單詞時，是設(shè)置字母與字母之間的間距。
單詞間距設(shè)置：
如果我想設(shè)置英文單詞之間的間距呢？可以使用 word-spacing 來實現(xiàn)。如下代碼：
h1{
word-spacing:50px;
}...<h1>welcome to iOS!</h1>12345示例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字間距</title><style type="text/css">h1{ letter-spacing:20px;}</style></head><body><h1>hello world!你好！</h1></body></html>123456789101112131415注意
當(dāng)設(shè)置元素為英文時，letter-spacing 設(shè)置不是英文單詞的間隔，而是字母間的間隔。
想為 塊狀元素 中的文本、圖片設(shè)置居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實現(xiàn)文本居中顯示。
h1{
text-align:center/left/right;
}<h1>了不起的喬布斯</h1>1234示例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>對齊</title><style type="text/css">div{ text-align:center;}</style></head><body><div><img src="http://img.com/2000200.jpg" ></div></body></html>123456789101112131415聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
