0028.htm

来自「新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编」· HTM 代码 · 共 296 行

HTM
296 行
字号 
<html>

<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1  {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
    <p align="center"><big><strong>CSS教程（五）</strong></big></p>
<div align="right">---《网猴》版权所有</div>
<p><font face="宋体" size="3">我们在第2天的教程中学习了字体及控制文字字符的方法.今天我们将学习这些字符、单词和每行的内容之间是如何定位的。我们将学会如何设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动要素等，列表如下： 
</font><font size="3">

<ul>
  <li> 字间距 </font></li>
  <li> 字母间距 </font></li>
  <li><font face="宋体">行高 </font></li>
  <li><font face="宋体">文字对齐方式 </font></li>
  <li> 垂直对齐方式 </font></li>
  <li><font face="宋体">文字缩位 </font></li>
  <li> 顶边距、左边距等 </font></li>
  <li> 空格填充－顶部、左边等等 </font></li>
  <li> 边框－宽度、颜色、样式等 </font></li>
  <li> 浮动 </font></li>
  <li><font face="宋体">清除 </font></li>
</ul>

<p> 很显然，今天我们要学很多东西，所以我们得抓紧时间。让我们开始吧！
<p><a href="css/dropshadow.html"><font size="3">先来看一年例子。</font></a></p>

<p><font size="3">下面要学习的属性可以使你做到<font face="宋体">HTML</font>标签做不到的事情：控制字间距及字母间距。 
</font></p>
<font size="3">

<p><b>字间距</b> </p>

<p>利用字间距属性，你可以在字之间加入更的距离： 

<ul>
  <p><font face="宋体">H3 { word-spacing: 1em }</font></p>
</ul>

<p>你所使用的参数值将加入任何浏览器的缺设置，你可以使用我们昨天谈到的任何种长度单位： 

<ul>
  <li><font face="宋体">in </font>（英寸） </li>
  <li><font face="宋体">cm </font>（厘米） </li>
  <li><font face="宋体">mm </font>（毫米） </li>
  <li><font face="宋体">pt </font>（点数） </li>
  <li><font face="宋体">pc </font>（打字机字间距） </li>
  <li><font face="宋体">em </font>（<font face="宋体">ems</font>） </li>
  <li><font face="宋体">ex (x-height) </font></li>
  <li><font face="宋体">px </font>（象素） </li>
</ul>

<p>以下为显示结果： 

<ul>
  <h3 style="word-spacing: 1em"><font face="宋体">Behold the power of cheese.</font></h3>
</ul>

<p><i>如果你的浏览器不支持这种<font face="宋体">CSS</font>属性，请点击<a
href="#" onClick="MM_openBrWindow('day3_2_page2.html','','width=300,height=300')">这里</a>查看显示效果。</i> 
</p>

<p>如果你看不到任何不同之处，则说明你的览器不支持这种属性，只有<font
face="宋体">MAC</font>机用的<font face="宋体">IE4</font>能支持这种字间距设置。 
</p>

<p><b>字母间距</b> </p>

<p>字母间距可以在<font face="宋体">IE 4</font>中应用，但<font face="宋体">Communicator</font>不行，唉<font
face="宋体">... </font>

<ul>
  <p><font face="宋体">H3 { letter-spacing: 10px }</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></font></h3>
</ul>

<p>对于这两种属性，你都可以使用<font face="宋体">normal</font>参数。从而使其按照浏览器的原有缺省设置显示。</p>

<p><font face="宋体" size="3">别沮丧，还有很多CSS属性可以在两种浏览器上都可使用。</font></p>

<p><font face="宋体" size="3">下文中就是一个例子。
<p align="center"><font face="宋体" size="3">行与行之间的距离最常用的称呼是行距，而当网页设计者们发现他们能够控制行距时最常用的称呼是<em>&quot;Weee!&quot;</em> 
</font></p>
<font size="3">

<p> <b>行高</b> <br>
<br>
行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间的垂直距离。 
</font>

<ul>
  <tt><p><font face="宋体">B { line-height: 16pt }</font></p>
  </tt>
</ul>

<p><font face="宋体">你所用的参数就是相邻两行的基准线（基准线就是英文小写字母如x,a的下阶线，但不包括诸如y,g等字母超过下阶线的部分）之间的垂直距离。注意你所设定的参数将完全代替浏览器的缺省参数。 
<br>
<br>
Netscape Communitor和Internet Explorer在行之前加入行高参数。所以如果你将参数设为10px，浏览器将把文字的第1行以10px的高度显示。<br>
<br>
有3种设定行高的方法： </font>

<ul>
  <li><font face="宋体">数字</font></li>
  <li> 长度单位 </font></li>
  <li> 比例 </font></li>
</ul>

<p> <b>用数字设行距</b> </font>

<ul>
  <p> <tt>B { font-size: 12pt; <br>
  line-height: 2 }</tt> </font></p>
</ul>

<p> 当你用数字设定行高的时候，浏览器将利用字号来确定行距：它将字号乘以设定的参数值。所以，在本例中，行高将是24点。显示效果如下： 
</font>

<ul>
  <b style="font-size: 12pt; line-height: 2"><p><font face="宋体">Four score and seven 
  years ago, <br>
  the Web wasn't yet a glimmer in <br>
  anyone's eye. No one needed it, <br>
  no one missed it. Eighty-seven <br>
  years from now, what will <br>
  people laugh at us for lacking?</font></p>
  </b>
</ul>

<p><font face="宋体">你还可以用小数设定参数值。 </font></p>

<p> （你应该知道IE 3 不支持数字参数值，在IE 3 
中使用数字参数将出现大片文字的互相重叠。） </font></p>

<p> <b>用长度单位设定行距</b> </font>

<ul>
  <tt><p><font face="宋体">B { font-size: 12pt; line-height: 11pt }</font></p>
  </tt>
</ul>

<p><font face="宋体">设定行高的另一种方法就是利用先前学过的长度单位（em及pt是最常用的单位），以下为显示效果： 
</font>

<ul>
  <b style="font-size: 12pt; line-height: 11pt"><p><font face="宋体">Four score and seven 
  years ago, <br>
  the Web wasn't yet a glimmer in<br>
  anyone's eye. No one needed <br>
  it, no one missed it. <br>
  Eighty-seven years from now, <br>
  what will people laugh at us <br>
  for lacking?</font></p>
  </b>
</ul>

<p><font face="宋体">你既可以轻松地将行距缩小也可以将行距放大。有了样式表，这一切都易如反掌！ 
</font></p>

<p> <b>用比例设定行距</b> </font>

<ul>
  <tt><p><font face="宋体">B { font-size: 10pt; line-height: 140% }</font></p>
  </tt>
</ul>

<p><font face="宋体">在本例中，行距是长度10points的140％，即14points。明白了吗？ 
</font></p>

<p> <b>让文字互相重叠!</b> </font></p>

<p><font face="宋体">你可能会问这样的问题：如果行距太小的话，文字岂不就重叠在一起了吗？是这样的。我们来看看这个例子： 
</font>

<ul>
  <tt><p><font face="宋体">B { font-size: 28pt; line-height: 2pt }</font></p>
  </tt>
</ul>

<p><font face="宋体">以下为显示效果: </font>

<ul>
  <p> <span style="font-size: 28pt">Whoa.</span><br>
  <b style="font-size: 28pt; line-height: 2pt">Cool.</b> </font></p>
</ul>

<p> &quot;Whoa&quot; 使用了浏览器的缺省行高设置。但&quot;Cool&quot;的行高很小所以它和第1行重叠了。&nbsp; 
</font></p>

<p> （Communicator和Internet Explorer对行高的诠释有所不同。 
Communicator将只是将文字的上半部分重叠一点，而IE则将其全部重叠。）</font></p>

<p><font face="宋体">如果你计划将你的网页中的某些内容重叠显示，行高设置还不是最佳的选择，因为不同的浏览器对其的支持有差别。在第5天的课程中我们将研究文字及图象布局的最佳方式。
<p><font size="3"><font face="宋体">现在我们谈谈段落及图象的对齐和加入段落缩行。</font> 
</font></p>

<p><font face="宋体" size="3"><b>文字对齐</b> </font></p>

<p><font face="宋体" size="3">利用文字对齐属性，你可以控制段落的水平对齐：</font> 

<ul>
  <p><font face="宋体" size="3">H4 { text-align: center }</font></p>
</ul>

<p><font face="宋体" size="3">这项属性只用于整块的内容，如&lt;P&gt;、 
&lt;H1&gt;-&lt;H6&gt;、<br>
&lt;BLOCKQUOTE&gt;和 &lt;UL&gt;。 </font></p>

<p><font face="宋体" size="3">以下为各种选项： </font></p>

<h4 style="text-align: left"><font face="宋体" size="3">left指将要素左对齐，如本段所示。</font></h4>

<h4 style="text-align: left"><font face="宋体" size="3">right指将要素右对齐，如本段所示。 
</font></h4>

<h4 style="text-align: center"><font face="宋体" size="3">center指将要素居中，如本段所示。</font></h4>

<h4 style="text-align: justify"><font face="宋体" size="3">justify指将要素左右对齐，如本段所示。justify 
<br>
属性可用于Communicator(两种操作平台)及IE 4 <br>
(Windows版), 但不能用<br>
于MAC机的IE 3或IE 4。</font></h4>

<p><font face="宋体" size="3">截止现在，我们所谈到的只是将CSS用于文字，但CSS 
的属性页可以用于其它替代要素（替代要素指用其它内容代替了的要素，图象是最常用的替代内容，还有Java 
applets,QuickTime movies和其它内容。） </font></p>

<p><font face="宋体" size="3">所以我们可以将图象右对齐，如下所示： </font></p>

<p><font size="3"><img src="css/test.gif" alt="day3_page4b.gif (1589 bytes)" align="right"
width="70" height="70"></font></p>

<p><font face="宋体" size="3">（如果你将样式表属性直接加到&lt;IMG&gt;之上，Communicator有时候可能会捣乱。为了安抚它的这种驴脾气，你可以将&lt;IMG&gt;包含在&lt;SPAN&gt;或&lt;DIV&gt;之内，然后将样式表加到&lt;SPAN&gt;或&lt;DIV&gt;上，最好是加在&lt;DIV&gt;上，因为IE 
4有时候对于联结到&lt;SPAN&gt;上的样式会闹一点小性子。</font></p>

<p><font face="宋体" size="3"><b>垂直对齐</b> </font></p>

<p><font face="宋体" size="3">目前浏览器根本还不能支持初衷对齐属性，但愿5.0版的浏览器能够做<br>
到这一点。 </font>

<ul>
  <p><font face="宋体" size="3">H4 { vertical-align: top }</font></p>
  <font face="宋体" size="3"><p>垂直对齐可以使你控制文字或替代要素（比如图象）相对于其母体要素的的垂直位置。例如，如果你将一个2x2象素的GIF图象同其母体要素文字的顶部垂直对齐，则该GIF图象将在该行文字的顶部显示。 
  </p>
  <p>以下为各项参数： </font></p>
  <li><font face="宋体" size="3">top将要素顶部同最高的母体要素对齐。 </font></li>
  <li><font face="宋体" size="3">bottom将要素的底部同最低的母体要素对齐。&nbsp; 
    </font></li>
  <li><font face="宋体" size="3">text-top将要素的顶部同母体要素文字的顶部对齐。 
    </font></li>
  <li><font face="宋体" size="3">text-bottom将要素的底部同母体要素文字的底部对齐。</font></li>
  <li><font face="宋体" size="3">baseline将要素的基准线同母体要素的基准线对齐。 
    </font></li>
  <li><font face="宋体" size="3">middle将要素的中点同母体要素的中点对齐。 </font></li>
  <li><font face="宋体" size="3">sub将要素以下标的形式显示。 </font></li>
  <li><font face="宋体" size="3">super将要素以 上标的形式显示。 </font></li>
  <p><font face="宋体" size="3">目前只有IE 4能支持这项属性，它支持最后的两项参数。 
  </font></p>
  <p><font face="宋体" size="3"><b>文字缩行</b> </font></p>
  <p><font face="宋体" size="3">你想使段落缩行吗？（在Internet上呆一段时间之后，你可能已经忘<br>
  了缩行是怎么一回事！） </font><ul>
    <p><font face="宋体" size="3">P { text-indent: 2em }</font></p>
    <p style="text-indent: 2em"><font face="宋体" size="3">在本段中你就可以看到缩行的应用。该属性只应用于整块的内容。你可以使用任何一种熟悉的长度单位设定缩行。</font></p>
    <p style="text-indent: 40%"><font face="宋体" size="3">你还可以使用比例参数。<br>
    例如，本段<br>
    的缩行为40％的比例，即本段的第1行的起始位置比其正常位置缩进<br>
    了40％。 </font></p>
    <p><font face="宋体" size="3">(Windows版的IE 4假定比例指相对于整个浏览器窗口。而不是指段落的宽度） 
    如果你将文字缩行赋予一个负值，则文字第1行的起始位置比其正常位置还偏左。 
    </font></p>
    <p><font face="宋体" size="3">本段的文字缩行赋值为－10象素。IE 4对这项属性不太适应，它有可能不显示最初的几个字母。 
    </font></p>
    <p><font face="宋体" size="3">充分运用你的缩行威力吧，年轻的杰地战士！</font> 

  </table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>

0028.htm - 源码说明

本页面展示了「新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑」中的 0028.htm 源码文件，采用 HTM 编程语言编写，共 296 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫下载站收录了大量与软件教程相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

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