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