⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 css1_4.htm

📁 CSS学习简明教程
💻 HTM
字号:
🔍 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="StyleSheet" href="../chn.css" type="text/css">
<style>
    BODY {margin-left: 2em}
    P.double {line-height: 2}
    P.right {text-align: right}
    P.center {text-align: center}
    P.justify {text-align: justify}
    P.indent {text-indent: 1cm}
    P.capitalize {text-transform: capitalize}
    P.up {text-transform: uppercase}
    P.low {text-transform: lowercase}
    P.underline {text-decoration: underline}
    P.line-through {text-decoration: line-through}
    H3 {color: #cc6600}
  </style>
<title>文字间的空间和文字修饰</title>
</head>

<body background="../images/background.gif" bgcolor="#FFFFFF">
<!-- Spidersoft WebZIP Ad Banner Insert -->
<TABLE width=100% border="0" cellpadding="0" cellspacing="0">
<TR>
<TD>
<ILAYER id=ad1 visibility=hidden height=60></ILAYER>
<NOLAYER>
<IFRAME SRC="http://www.spidersoft.com/ads/bwz468_60.htm" width="100%" height="60" marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></IFRAME>
</NOLAYER>
</TD>
</TR>
</TABLE>
<!-- End of Spidersoft WebZIP Ad Banner Insert-->


<p align="center"><a href="../index.htm"><img src="../images/title.gif" alt="title.gif (2221 bytes)" border="0" WIDTH="380" HEIGHT="56"></a></p>

<p align="center"><font color="#FF0000">CSS入门</font></p>

<table border="0" width="100%">
  <tr>
    <td width="11%" align="right"><img src="../images/blue-rect.jpg" alt="blue-rect.jpg (3374 bytes)" WIDTH="20" HEIGHT="20"></td>
    <td width="89%" bgcolor="#D5F8CD">文字间的空间和文字修饰</td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">这一节我们将讨论如何用 CSS 来控制网页中文字定位, 
    这些性质是 <ul>
      <li>word-spacing:字间距</li>
      <li>letter-spacing:字母间距</li>
      <li>line-height: 行距 </li>
      <li>text-align: 向那个方向看齐 </li>
      <li>vertical-align: 向上还是向下看齐 </li>
      <li>text-indent: 段落第一行空格 </li>
      <li>text-transform: 文字变形--字母的大小写 </li>
      <li>text-decoration: 给文字加装饰, 比如下滑线 </li>
    </ul>
    </td>
  </tr>
  <tr>
    <td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
    <td width="89%"><font color="#FF0080">字间距</font></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">利用字间距属性，你可以在字之间加入更多的距离： <ul>
      <tt><p><font face="宋体">H3 { word-spacing: 1em }</tt> </font></p>
    </ul>
    <p>你所使用的参数值将加入任何浏览器的缺省设置，你可以使用任何一种长度单位： 
    <ul>
      <li><font face="宋体"><tt>in</tt> </font>（英寸） </li>
      <li><font face="宋体"><tt>cm</tt> </font>（厘米） </li>
      <li><font face="宋体"><tt>mm</tt> </font>（毫米） </li>
      <li><font face="宋体"><tt>pt</tt> </font>（点数） </li>
      <li><font face="宋体"><tt>pc</tt> </font>（打字机字间距） </li>
      <li><font face="宋体"><tt>em</tt> </font>（<font face="宋体">ems</font>） </li>
      <li><font face="宋体"><tt>ex</tt> (x-height) </font></li>
      <li><font face="宋体"><tt>px</tt> </font>（象素） </li>
    </ul>
    </td>
  </tr>
  <tr>
    <td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
    <td width="89%"><font color="#FF0080">字母间距</font></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">字母间距可以在<font face="宋体">IE 4</font>中应用，但<font face="宋体">Communicator</font>不行，唉<font face="宋体">... </font><ul>
      <tt><p><font face="宋体">H3 { letter-spacing: 10px }</tt> </font></p>
    </ul>
    <p>字母间距的功能和字间距的很类似：其参数值将被加入到浏览器的缺省设置中，你可以使用上述任何一种长度单位。 
    </p>
    <p>如果你用的是<font face="宋体">IE 4</font>，这里是一个例子： <ul>
      <h3 style="LETTER-SPACING: 10px"><font face="宋体">Behold the power of cheese.</font></h3>
    </ul>
    </td>
  </tr>
  <tr>
    <td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
    <td width="89%"><font color="#FF0080">行距</font></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">我们有时候可能会想把行距加大点使得文字看的清楚一些. 
    CSS 中的 line-height 可以取得这种调节 <pre>
  P.double {line-height: 2}
</pre>
    <p>请看下面的比较. </p>
    <table width="659">
      <tr>
        <td bgcolor="#FFFFCC" width="655">这 一 段 的 行 距 是 正常 的. 这 一 段 的 
        行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 
        是 正常 的. <p class="double">这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 
        行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 
        是 双 倍 的. </td>
      </tr>
    </table>
    <p>你要让 line-height 等于 3 的话, 那行距就更大了. </td>
  </tr>
  <tr>
    <td width="11%" align="right">　<img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
    <td width="89%"><font color="#FF0080">看齐</font></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">一般来说我们都是向左边看齐. 
    但有的时候也有其他的选择, 比如说向右边看齐. <pre>
  P.right {text-align: right}
</pre>
    <p>请看下面的比较. </p>
    <table width="400">
      <tr>
        <td bgcolor="#FFFFCC">这 一 行 左 边 看 齐 <p class="right">这 一 行 右 边 看 
        齐 </p>
        <p class="center">这 一 行 在 中 间 </td>
      </tr>
    </table>
    <p>text-align 可以有 left, right, center, 和 justify </td>
  </tr>
  <tr>
    <td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
    <td width="89%"><font color="#FF0080">段落的首行空格</font></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">如果我们想让第一行的开头空几格, 可以用 text-indent, 
    比如 <pre>
  P {text-indent: 1cm}
</pre>
    <p>请看下面的例子. </p>
    <table width="400">
      <tr>
        <td bgcolor="#FFFFCC"><p class="indent">这 一 段 开 头 空 了 1 厘 米. 这 一 段 
        开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 
        了 1 厘 米. </td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
    <td width="89%"><font color="#FF0080">文字变形--字母的大小写</font></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">这个性质显然跟中文没关系, 但如果我们要处理英文, 
    你可以用 text-transform 来改变英文的大小写. 比如, 让每个字的<br>
    第一个字母大写 <pre>
  P {text-transform: capitalize}
</pre>
    <ul>
      <p>以下为所有可用的参数： </p>
    </ul>
    <ul>
      <li><font face="宋体"><tt>uppercase</tt> </font>使所有字母大写显示，<br>
        例： <br>
        <font color="#008000"><font face="宋体"><b style="TEXT-TRANSFORM: uppercase">This 
        sentence serves as an example.</b></font> </font></li>
      <li><font face="宋体"><tt>lowercase</tt></font>使所有字母小写显示，<br>
        例： <br>
        <font color="#008000"><font face="宋体"><b style="TEXT-TRANSFORM: lowercase">This 
        sentence serves as an example.</b></font> </font></li>
      <li><font face="宋体"><tt>capitalize</tt> </font>使每个单词的第<font face="宋体">1</font>个字母大写显示，例：<br>
        <font color="#008000"><font face="宋体"><b style="TEXT-TRANSFORM: capitalize">This 
        sentence serves as an example.</b></font> </font></li>
      <li><font face="宋体"><tt>none</tt> </font>使所有继承的文字变形参数被忽略，文字将以正常形式显示。<br>
        例：<br>
        <font face="宋体" color="#008000"><b style="TEXT-TRANSFORM: none">This sentence serves 
        as an example.</b> </font></li>
    </ul>
    <p>（注意：<font face="宋体">IE 3</font>不支持文字变形）</td>
  </tr>
  <tr>
    <td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
    <td width="89%"><font color="#FF0080">文字的装饰</font></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">就是在文字上加下滑线, 或中间加条线的.<p>其基本语法如下： 
    <ul>
      <tt><p><font face="宋体">B { text-decoration: underline }</tt> </font></p>
    </ul>
    <p>大部分的选项使得文字变得难以阅读： <ul>
      <li><font face="宋体"><tt>underline</tt> </font>给文字下划线，例：<br>
        <font face="宋体"><b style="TEXT-DECORATION: underline">these words</b>.</font> </li>
      <li><font face="宋体"><tt>overline</tt></font>给文字上划线，例：<br>
        <font face="宋体"><b style="TEXT-DECORATION: overline">these words</b>.</font> </li>
      <li><font face="宋体"><tt>line-through</tt></font>给文字划出删除线，<br>
        例：<font face="宋体"><b style="TEXT-DECORATION: line-through">these words</b>.</font> 
      </li>
      <li><font face="宋体"><tt>blink</tt></font>是你在恶梦中常常看到的－－<br>
        文字在闪烁，例：<br>
        <font face="宋体"><b style="TEXT-DECORATION: blink">these words</b>.</font> </li>
      <li><font face="宋体"><tt>none</tt></font>使得上述效果都不会发生，常用与去掉超链接的下划线。 
      </li>
    </ul>
    <p>（注意：<font face="宋体">Communicator</font>不支持上划线，<font face="宋体">IE 4</font>不支持文字闪烁，<font face="宋体">IE 3</font>对这些都不支持。）</td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%"></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%"></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%"></td>
  </tr>
</table>

<hr>

<p align="right"><a href="css1_3.htm"><img src="../images/back-button-off.gif" alt="上一页--字体" border="0" WIDTH="31" HEIGHT="31"></a><a href="css1_5.htm"><img src="../images/forward-button-off.gif" alt="下一页--列表" border="0" WIDTH="31" HEIGHT="31"></a></p>

<p align="center"><a href="index.htm">返回CSS教程目录</a></p>

<p align="center"><a href="../index.htm"><img src="../images/home.gif" alt="home.gif (267 bytes)" border="0" WIDTH="32" HEIGHT="32"><br>
返回主页</a></p>

<p>　</p>

<layer src="http://www.spidersoft.com/ads/bwz468_60.htm" visibility=hidden id=a1 width=600 onload="moveToAbsolute(ad1.pageX,ad1.pageY); a1.clip.height=60;visibility='show';"></layer>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -