(4)CSS文本格式

本章主要講出了字體屬性外的其他一些用於文本格式化的屬性:



(1)color屬性:指定文本顏色

該值可以是顏色的16進制編碼或者顏色名。color:#ff0000;(紅色)


(2) text-align屬性:指定文本在其包含元素或瀏覽器中的水平對其方式

取值可以有:left(與包含元素左邊框對齊);right(右邊框對齊);center(中間對其);justify(兩邊對齊)


(3)vertical-align屬性:指定元素在其包含元素中的垂直位置。

該屬性常用於操作圖像和文本的某些部分,取值如下:

baseline:所有內容與父元素的基線對齊;

top:內容頂部與該行最高元素頂部對齊;

text-top:內容頂部與該行最高文本頂部對齊;

middle:元素垂直中點與父元素垂直中點對齊;

bottom:內容底部與該行最高元素底部對齊;

text-bottom:內容底部與該行最高文本底部對齊;

super:使元素成爲下標;

super:使元素成爲上標;


(4)text-deccoration屬性: 給文本添加線

underline:在內容下方加一條線;

overline:在內容頂部加一條線;

line-through:加一條刪除線;

blink:創建閃爍文本(不建議使用)


(5) text-indent屬性:縮進元素內文本的第一行

text-indent : 3em;(值爲長度)


(6)text-shadow屬性:用於創建陰影(常用於打印媒體)

text-shadow: #999999 10px 10px 3px

其值首先需要指定顏色,然後指定陰影偏移量(x和y),最後指定投影模糊效果


(7)text-transform:指定元素內容的大小寫,取值如下:

none:不做任何改變;capotalize:單次首字母大寫;

uppercase:使用大寫;lowercase:使用小寫。

(8)letter-spacing:指定字母間距,距離如下:

litter-spacing:3px 字母間距爲3px

litter-spacing:0.5em 字母間距爲0.5em

litter-spacing:-1px 字母間距標準上減少1像素


(9)word-spacing:指定單詞間距(內容同上)

(10)direction:指定文本排列方向,取值如下:

ltr:從左向右 rtl:從右向左 inhrtit:文本方向與父元素相同


(11)white-space:控制是否保留空白

由於瀏覽器會將相鄰的兩個或多個空格合併爲單個空格(回車也會被當作空格),該屬性用於控制空白是否保留。取值如下:

normal:遵循正常的空白摺疊規則。

pre:保留空白

nowrap:只有在顯示提供<br/>元素之後,文本纔會換行。


以上給出的圖片結果的代碼如下:

CSS:

p.c1_1 { color: #ff0000; }
p.c1_2 { color: red; }

p.c2_1 { text-align: left; }
p.c2_2 { text-align: right; }
p.c2_3 { text-align: center; }
p.c2_4 { text-align: justify; }

.c3_0 { vertical-align: super; }
.c3_1 { vertical-align: sub; }
.c3_2 { vertical-align: top; }
.c3_3 { vertical-align: middle; }
.c3_4 { vertical-align: bottom; }

.c4_1 { text-decoration: underline; }
.c4_2{ text-decoration: overline; }
.c4_3 { text-decoration: line-through; }

.c5_1 {  }
.c5_2 { text-indent: 3em; }
.c5_3 { text-indent: 20px; }

.c6_1 { text-shadow: #999999 10px 10px 3px; }

.c7_1 { text-transform: capitalize; letter-spacing: 3px;}
.c7_2 { text-transform: uppercase; letter-spacing: 0.5em;}
.c7_3 { text-transform: lowercase; letter-spacing: -1px}

.c8_1 { word-spacing: 10px; direction: ltr; }
.c8_2 { word-spacing: -1px; direction: rtl; }

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<base href="/testsmarty/templates/"></base>
		<title>文本格式</title>
		<link rel="stylesheet" type="text/css" href="text2.css">
	</head>
	
	<body>
		<fieldset>
			<legend>color:文字顏色</legend>
			<p class="c1_1">使用紅色</p>
			<p class="c1_2">使用紅色</p>
		</fieldset>
		<fieldset>
			<legend>text-align:水平對其方式</legend>
			<p class="c2_1">左對齊</p>
			<p class="c2_2">右對齊</p>
			<p class="c2_3">居中對齊</p>
			<p class="c2_4">兩邊對齊</p>
		</fieldset>
		<fieldset>
			<legend>vertical-align:垂直位置</legend>
			<table width="800" border="1">
				<tr>
					<td height="30">我是<b class="c3_1">下標</b></td>
					<td class="c3_2" rowspan="2">頂部</td>
					<td class="c3_3" rowspan="2">中部</td>
					<td class="c3_4" rowspan="2">底部</td>
				</tr>
				<tr>
					<td height="30">我是<b class="c3_0">上標</b></td>
				</tr>
			</table>
		</fieldset>
		<fieldset>
			<legend>text-decoration:添加各種線</legend>
			<p class="c4_1">下劃線</p>
			<p class="c4_2">頂部加線</p>
			<p class="c4_3">刪除線</p>
		</fieldset>
		<fieldset>
			<legend>text-indent:首行縮進</legend>
			<p class="c5_1">無縮進</p>
			<p class="c5_2">縮進3em</p>
			<p class="c5_3">縮進20px</p>
		</fieldset>	
		<fieldset>
			<legend>text-shadow:陰影</legend>
			<p class="c6_1">創建陰影</p>
		</fieldset>	
		<fieldset>
			<legend>text-transform:指定字母大小寫;letter-spacing:字母間距</legend>
			<p class="c7_1">the first letter of each word will be uppercase</p>
			<p class="c7_2">all of this text will be uppercase</p>
			<p class="c7_3">all of this text will be lowercase</p>
		</fieldset>
		<fieldset>
			<legend>direction:文本排列方向;word-spacing:單詞間距</legend>
			<p class="c8_1">there is a 10 pixel gap between each word</p>
			<p class="c8_2">there is a -1 pixel gap between each word</p>
		</fieldset>
		<fieldset>
			<legend>direction:文本排列方向;word-spacing:單詞間距</legend>
			<p class="c8_1">there is a 10 pixel gap between each word</p>
			<p class="c8_2">there is a -1 pixel gap between each word</p>
		</fieldset>
	</body>
</html>







發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章