?? ◤css教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0040)http://www.rr365.net/edu-css/css104c.htm -->
<HTML><HEAD><TITLE>◤CSS教程.文本屬性--▃▄ 龍 人 網 絡 ▄▃</TITLE>
<META http-equiv=Content-Language content=zh-cn>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="CSS教程,CSS技巧 " name=keywords>
<META
content=網頁制作教程:asp教程,ASP.net教程,XML教程,PHP教程,FrontpageXP教程,DreamWeaverMX教程,JSP教程,JavaScript教程,VBScript教程,CSS教程,FrontpageXP,DreamWeaverMX,JSP,JavaScript,VBScript,CSS,asp,ASP.net,XML,PHP相關技巧及資源
name=description><LINK href="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/style.css"
type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.2604" name=GENERATOR></HEAD>
<BODY
onmouseover="window.status='歡迎光臨【龍人網站】www.rr365.net,專業服務全為您!!!';return true" ;>
<TABLE id=table1 width="100%">
<TBODY>
<TR>
<TD background="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/logo4.gif" colSpan=8
height=30> </TD></TR>
<TR>
<TD width=195 height=53><A href="http://www.rr365.net/index.htm"><IMG
height=53 alt=網站優化，網站排名 src="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/logo-up.gif"
width=195 border=0></A></TD>
<TD colSpan=7>
<H1 align=center>網頁制作教程：CSS教程</H1></TD></TR>
<TR>
<TD background="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/logo-bt.gif" height=31>
<P align=center><A
href="http://www.rr365.net/edu-webdesign/index.htm"><FONT
color=#000000>網頁制作教程</FONT></A></P></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/index.htm">首 頁</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/web-promotion.htm">網站推廣</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webrestruction.htm">網站優化</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/agent/emarketing.htm">輕松代理</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webhosting.htm">虛擬主機</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/vpp/domain.htm">域名注冊</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webdesign.htm">網站建設</A></B></TD></TR></TBODY></TABLE>
<TABLE id=table2 width="100%">
<TBODY>
<TR>
<TD bgColor=#00ccff colSpan=2 height=10> </TD></TR>
<TR>
<TD vAlign=top width="23%" bgColor=#e5ecf9 rowSpan=5>
<P><IMG height=25 src="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/logo6.gif"
width=25 border=0> <B><A href="http://www.rr365.net/edu-css/css.htm"><FONT
color=#ff0000>CSS教程</FONT></A></B></P>
<UL style="FONT-SIZE: 10pt; LINE-HEIGHT: 13pt">
<LI><A href="http://www.rr365.net/edu-css/css.htm">認識CSS</A>
<LI><A href="http://www.rr365.net/edu-css/css102.htm">語法</A>
<LI><A href="http://www.rr365.net/edu-css/css103.htm">偽類—動態鏈接</A>
<LI><A href="http://www.rr365.net/edu-css/css104.htm">CSS屬性</A>
<LI><A href="http://www.rr365.net/edu-css/css105.htm">CSS定位</A>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css106.htm">濾鏡</A> </P>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css107.htm">CSS結合JS的運用</A> </P>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css108.htm">如何在網頁中插入CSS</A>
</P></LI></UL>
<P><IMG height=25 src="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/logo411.gif"
width=25 border=0> <FONT color=#000000><B><A
href="http://www.rr365.net/edu-css/css2.htm"><FONT
color=#008080>CSS技巧</FONT></A></B></FONT></P>
<P><IMG height=25 src="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/logo411.gif"
width=25 border=0> <FONT color=#008080><B>CSS相關網站</B></FONT></P>
<UL style="FONT-SIZE: 10pt; LINE-HEIGHT: 13pt">
<LI><A href="http://www.w3.org/Style/CSS/" target=_blank>W3C之CSS規范</A>
<LI><A href="http://www.w3schools.com/css/default.asp" target=_blank>CSS
Tutorial</A> </LI></UL>
<P><IMG height=25 src="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/logo411.gif"
width=25 border=0> <B><FONT color=#000000><A
href="http://www.rr365.net/edu-css/css4.htm"><FONT
color=#008080>CSS相關軟件</FONT></A></FONT></B></P>
<P> </P> </TD>
<TD width="77%">
<UL type=square>
<LI>
<P align=left><U><B><FONT size=4>CSS教程.CSS屬性 </FONT></B></U></P>
<P align=center><FONT size=4><B> </B></FONT><SPAN
style="FONT-SIZE: 11pt"> </SPAN></P>
<DIV align=center>
<TABLE id=table4 cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=p2 vAlign=top>
<P class=p2 style="LINE-HEIGHT: 17pt"><FONT
color=#336633><B>3、文本屬性</B></FONT> </P>
<P class=p2 style="LINE-HEIGHT: 17pt"> <FONT
color=#cc3399>※定義間距</FONT></P>
<P class=p2
style="LINE-HEIGHT: 17pt"> 前面說了如何用CSS定義字體、顏色和背景屬性，那么定義好的文本我們怎么對它進行排版呢？</P>
<P class=p2
style="LINE-HEIGHT: 17pt"> 下面我們講述一下CSS的文本屬性，還是先來看一下文本屬性的詳細列表：</P>
<P align=center><IMG height=278 alt=文本屬性
src="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/css058.gif" width=536
border=0 orig_onmouseout="null" orig_onmouseover="null"></P>
<P class=p2
style="LINE-HEIGHT: 17pt"> 我們可以從表中看到在這里可以定義文本的文字間距、字母間距、裝飾、對齊方式、縮進方式和行高等屬性。
舉個例子來看看吧。比如下面這<A href="http://www.rr365.net/edu-css/css.htm"><FONT
color=#000000>段</FONT></A>文字（如左下圖）： </P>
<P align=center><IMG height=210 alt=未排版的頁面
src="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/css008.gif" width=227
border=0 orig_onmouseout="null" orig_onmouseover="null"> <IMG
height=211 alt=排版后的頁面
src="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/css009.gif" width=228
border=0 orig_onmouseout="null" orig_onmouseover="null"></P>
<P class=p2
style="LINE-HEIGHT: 17pt"> 我們對這段文字加上文本屬性重新排版，排版后的效果如右上圖所示。<BR> 我們看到經過文本屬性處理的文本字與字之間多了間距，行與行之間多了行高，對齊方式變成了兩端對齊，并且段首又多縮進了兩格。這是怎樣實現的呢？很簡單，只是在html中加了如下的代碼：</P>
<P class=p2 style="LINE-HEIGHT: 17pt"> <FONT color=#006666><p
style=“letter-spacing：1em；text-align：justify；text-indent：<BR> 4em；line-height：17pt”>……</p></FONT>
</P>
<P class=p2 style="LINE-HEIGHT: 17pt"> <FONT
color=#cc33cc>//*letter-spacing設置了字間距為1em，其中1em為一個長度單位；text-align設<BR> 置了對齊方式為兩端對齊；indent設置了縮進格為4em；line-height設置了行高為<BR> 17pt*//
</FONT></P>
<P class=p2
style="LINE-HEIGHT: 17pt"> 從上面的例子，我們可以看出利用CSS的文本屬性可以方便的對頁面中的文本進行排版。下一節我將向您介紹文本的Text-decoration屬性的一個小應用。</P></TD></TR></TBODY></TABLE></DIV><BR><BR></LI></UL></TD></TR>
<TR>
<TD>
<P
align=center>
<A href="http://www.rr365.net/edu-css/css104b.htm">上一節</A>|<A
href="http://www.rr365.net/edu-css/css104d.htm">下一節</A></P></TD></TR>
<TR>
<TD>
<HR width="75%" color=#e5ecf9>
<P align=center>網頁教程: <A
href="http://www.rr365.net/edu-asp/index.htm">ASP</A>| <A
href="http://www.rr365.net/edu-asp-net/asp-net.htm">ASP.net</A>| <A
href="http://www.rr365.net/edu-xml/xml.htm">XML</A>| <A
href="http://www.rr365.net/edu-php/php.htm">PHP4</A> | <A
<A
href="http://www.rr365.net/edu-dreamweaver/dreamweaver.htm">DreamWeaverMX</A></P>
<P
align=center>
<A href="http://www.rr365.net/edu-cplus/c.htm">C#</A>| <A
href="http://www.rr365.net/edu-jsp/jsp.htm">JSP</A> | <A
href="http://www.rr365.net/edu-javascript/javascript.htm">JavaScript</A> |
<A href="http://www.rr365.net/edu-vbscript/vbscript.htm">VBScript</A> | <A
href="http://www.rr365.net/edu-css/css.htm">CSS</A></P></TD></TR>
<TR>
<TD>
<HR width="50%" color=#e5ecf9>
<P> </P></TD></TR>
<TR>
<TD>
<FORM name=query0 action=http://www1.baidu.com/baidu method=get
target=_blank>
<DIV align=center><INPUT type=hidden value=baidu name=tn0> <A
href="http://www.baidu.com/"><IMG alt=Baidu
src="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/baidu_logo.gif" align=bottom
border=0></A> <INPUT size=15 name=word0> <IFRAME border=0 name=I1
marginWidth=0 marginHeight=0
src="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/help1.htm" frameBorder=no width=0
scrolling=no height=0></IFRAME><INPUT type=submit value=百度搜索>
</DIV></FORM> </TD></TR></TBODY></TABLE>
<TABLE id=table3 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: 1px solid" borderColor=#00ccff height=21> </TD></TR>
<TR>
<TD background="◤CSS教程_文本屬性--▃▄ 龍 人 網 絡 ▄▃.files/tdbg.gif"
bgColor=#e5ecf9><P align=center><B><A
href="http://www.rr365.net/summary/aboutus.htm">關于我們</A>-<A
href="http://www.rr365.net/summary/paymethod.htm">付款方式</A>-<A
href="http://www.rr365.net/helpcenter/helpcenter.htm">幫助中心</A>-<A
href="http://www.rr365.net/agent/agent.htm">輕松代理</A>-<A
href="http://www.rr365.net/sitemap.htm">網站地圖</A>-<A
href="mailto:support@rr365.net">聯系我們</A></B></P></TD></TR></TBODY></TABLE></BODY></HTML>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -