3.2、文本屬性
3.2.1、字母間隔
3.2.2、文字修飾
3.2.3、文字排列
3.2.4、文本縮進
3.2.5、行間距
| 文本屬性 |
描述 |
| letter-spacing |
定義一個附加在字符之間的間隔數量 |
| text-decoration |
文本修飾屬性允許通過五個屬性中的一個來修飾文本 |
| text-align |
設置文本的水平對齊方式，包括左對齊、右對齊、居中、兩端對齊 |
| text-indent |
文字的首行縮進 |
| line-height |
行高屬性接受一個控制文本基線之間的間隔的值 |
3.2.1、 字母間隔
letter-spacing 屬性定義一個附加在字符之間的間隔數量，改值必須符合長度格式，允許使用負值。一個設為0的值會阻止文字的調整。
文件范例：13-8.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-8.htm -->
<!-- 文件說明：CSS字母間隔 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS字母間隔</TITLE>
<Style Type="text/css">
<!--
H1{
letter-spacing: -10px
}
.text {
letter-spacing: 5px
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網頁設計軟件</H1>
<p class=text>目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
</BODY>
</HTML>
顯示結果：
3.2.2、文字修飾
| 文字修飾屬性值 |
描述 |
| underline |
下劃線 |
| overline |
上劃線 |
| line-through |
刪除線 |
| blink |
閃爍，只適用 NetScape 瀏覽器 |
| none |
無任何修飾 |
文件范例：13-9.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-9.htm -->
<!-- 文件說明：CSS文字修飾 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS文字修飾</TITLE>
<Style Type="text/css">
<!--
a:link {
font-family: "宋體";
text-decoration: none
}
a:visited {
font-family: "宋體";
text-decoration: none
}
a:hover{
font-family:"宋體";
text-decoration: underline
}
.text {
text-decoration: underline
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網頁設計軟件</H1>
<p class="text">目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、FIireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
<A href=mailto:husong@elong.com>給我來信</A>
</BODY>
</HTML>
顯示結果：
3.2.3、文本排列
| 文字排列屬性值 |
描述 |
| left |
左對齊 |
| center |
居中對齊 |
| right |
右對齊 |
| justify |
兩端對齊 |
文件范例：13-10.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-10.htm -->
<!-- 文件說明：CSS文本排列 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS文本排列</TITLE>
<Style Type="text/css">
<!--
H1 {
text-align:center
}
.text {
text-align:justify
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網頁設計軟件</H1>
<p class=text>目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
<A href=mailto:husong@elong.com>給我來信</A>
</BODY>
</HTML>
顯示結果：
3.2.4、文本縮進
文本縮進 text-indent 屬性可以應用于塊級元素（P，H1等），定義該元素第1行可以接受的縮進的數量。改值必須是一個長度或一個百分比，若為百分比，則視上級元素的寬度而定。通用的文本縮進用法是用于段縮進。
文件范例：13-11.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-11.htm -->
<!-- 文件說明：CSS文本縮進 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS文本縮進</TITLE>
<Style Type="text/css">
<!--
H1 {
text-indent:100pt
}
.text {
text-indent:24pt
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網頁設計軟件</H1>
<p class="text">目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
<A href=mailto:husong@elong.com>給我來信</A>
</BODY>
</HTML>
顯示結果：
3.2.5、行間距
行間距 line-height 屬性可以接受一個控制文本基線之間的間隔的值。當值為百分比數字時，行高由元素字體大小的量與該數字相乘所得，百分比的值相對于元素字體的大小而定，不允許使用負值。
文件范例：13-12.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-12.htm -->
<!-- 文件說明：CSS行間距 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS行間距</TITLE>
<Style Type="text/css">
<!--
.text {
line-height:24pt
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網頁設計軟件</H1>
<p class="text">目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
<A href=mailto:husong@elong.com>給我來信</A>
</BODY>
</HTML>
顯示結果：
posted on 2007-10-08 14:14
CoderDream 閱讀(1156)
評論(0) 編輯 收藏 所屬分類:
CSS