CSS文字控制與文本控制屬性介紹及應(yīng)用示例

發(fā)布時(shí)間：2014-04-18 15:27:58 作者：佚名

這篇文章主要介紹了CSS控制文字與控制文本的一些屬性，至于它們的使用，在本文有不錯(cuò)的示例，感興趣的朋友可以參考下

一、CSS控制文字屬性：

1、font-size:18px;:設(shè)置字號(hào)
2、color:#093:設(shè)置字色
3、font-family:'宋體';:設(shè)置字體（可以有多種字體，兩個(gè)字體之間有,分隔開(kāi)，表示如果系統(tǒng)中有第一個(gè)字體則顯示效果是第一個(gè)字體，如果沒(méi)有則顯示的是第二個(gè)字體的效果，以此類推）
4、line-height:150%;:設(shè)置行與行之間的距離(單位可用px或者em或者百分比)
5、font-weight:bold:設(shè)置字體的粗細(xì)（粗：bold 正常：normal）
6、font-variant : normal正常 | small-caps小型的大寫(xiě)字母字體
7、font—style:設(shè)置字體樣式(normal正常，italic,oblique斜體)
8、text-decoration:修飾文字(none正常，underline下劃線，overline上劃線，line-through刪除線 blink閃爍（只支持IE6,7,搜狐）)
9、letter-spacing:5px:字符間距（normal默認(rèn)，length長(zhǎng)度單位）
10、word-spacing:5px:單詞間距(normal默認(rèn)，length長(zhǎng)度單位

font屬性簡(jiǎn)化的寫(xiě)法：是否斜體是否同寬是否粗體大小字體

復(fù)制代碼

代碼如下:

注意：設(shè)置字體要盡量使用通用的字體，就是用大家電腦上一般都有的字體，常用的是中文字體是宋體,英文字體是Arial）設(shè)置字體的時(shí)候?qū)⒂⑽淖煮w設(shè)置在前，中文設(shè)置在后。如果想用比較特殊的字體，可以將其轉(zhuǎn)換為圖片

小技巧：

1. 如果是12px或14px的字體，行高一般1.5em-1.8em之間字號(hào)越大行高設(shè)置的越小一點(diǎn)

2.設(shè)置區(qū)塊中的內(nèi)容，垂直方向上居中，將區(qū)塊的行高設(shè)置與區(qū)塊的高度相同，前提是只能一行

復(fù)制代碼

代碼如下:

二、CSS控制文本屬性：

1、設(shè)置文本縮進(jìn)：text-indent:length(長(zhǎng)度單位)可以負(fù)值
2、文本水平對(duì)齊方式：text-align:left左，center居中，right右
3、空白處理:white-space:nowrap(nowrap強(qiáng)制在一行中顯示，pre換行和空格保留，normal自動(dòng)換行)
4、大小寫(xiě)控制：text-transform:(capitalize每個(gè)單詞的第一個(gè)字母大寫(xiě),uppercase每個(gè)字母都大寫(xiě)，loowercase每個(gè)字母都小寫(xiě)，none正常大?。?br />5、文本垂直對(duì)齊方式：vertical-align:(sub設(shè)置文本為下標(biāo)，super設(shè)置文本為上標(biāo) ， top與頂端對(duì)齊，text-bottom與低端對(duì)齊)

復(fù)制代碼

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS控制文本</title>
</head>
<style type="text/css">
#one{text-indent:2em;}
#two{text-align:center; white-space:pre; text-transform:uppercase;}
span{vertical-align:super;}
#t2{width:100px; vertical-align:middle;}
</style>
<body>
<p id="one">0.5秒三分絕殺!波特蘭上演波什時(shí)刻第N次拯救熱火</p>
<h1 id="two">玩命暴扣扳平+助攻絕殺三分 <span>熱火</span>太幸運(yùn)有這fkasfjklas fklasdj顆隊(duì)魂</h1>
<p>熱火今夜還一功臣必須贊 11分不多但卻分分是金!</p>
<p>詹波為小弟惡犯叫屈當(dāng)事人他都起飛了!肯定假摔</p>
<p>斯帥稱客戰(zhàn)開(kāi)拓者奧登不打波什：他很快就可復(fù)出</p>
<p>
<img src="../../imgs/95160924ab18972ba7fd1de8e7cd7b899f510ac8.jpg" id="t2"/>
斯帥稱客戰(zhàn)開(kāi)拓者奧登不打波什：他很快就可復(fù)出
</p>
</body>
</html>