0029.htm
来自「新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编」· HTM 代码 · 共 297 行
HTM
297 行
<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 size="3">我们都知道可以用<font face="宋体">HTML</font>设定边距，但你必须使用表格，别无它法。而样式表则<font
face="宋体">......<br>
<b><br>
</b></font><strong>快速定义边距</strong> </font></p>
<font size="3">
<p>首先，我们应该了解样式表语言的术语，便我们理解正在谈什么。每一个整块的要素或替代要素都包含在样式表生成器称为<font
face="宋体">box</font>的容器之内。 <strong>box</strong></font>包括：
<ul>
<li>要素本身 </li>
<li>围绕要素的空格填充（<font face="宋体">padding</font>） </li>
<li>围绕空格填充的边框（<font face="宋体">border</font>） </li>
<li>围绕边框的边距（空白－<font face="宋体">margin</font>） </li>
</ul>
<p>你可以分别控制空格填充、边框和边距，如我们即将做的。</p>
<p><b>顶边距、底边距、左边距和右边距</b><br>
<br>
这<font face="宋体">4</font>项属性可以使你控制一个要素的四周的边距。如下：
<ul>
<tt><p><font face="宋体">H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px;
margin-right: 55px }</font></p>
</tt>
</ul>
<p>你可以看到，每一个边距都可以有不同的置。或者你可以设置一个边距，然后让览器用缺省设置设定其它的几个边距。可以将边距应用于文字和替代要素（如象）。
</p>
<p>设定边距参数值最明显的方法是利用长度位：<font face="宋体">px(</font>象素）、<font
face="宋体">pt</font>（点数）等。你也可以用比例值设定边距。<br>
<br>
将边距值设为负值，你就可以将两个要素叠在一起，例：</p>
<p style="font-size: 30pt; font-family: times, serif"><font face="宋体">Books</font></p>
<p
style="margin-top: -55px; margin-left: 60px; color: green; font-size: 24pt; font-weight: bold; font-family: arial, sans-serif"><font
face="宋体">are mind food</font></p>
<p>上例中， "are mind food" </font>的底边距为－<font
face="宋体">55</font>象素，右边距为<font face="宋体">60</font>象素。 </p>
<p>使用负值使要素重叠的的缺陷是不同的浏器对其处理方式不同。比如，在显示上例子时，不同的<font
face="宋体">4</font>种主要浏览器（<font face="宋体">Communicator for PC,
Communicator for Mac, IE for PC, IE for Mac</font>）对文字重叠的程度不同。 </p>
<p>另一个缺陷是你不能完全控制位于底部的内容，而且不同的浏览器对其显示也不同。例如，
<font face="宋体">Communicator</font>总是将图象显示在文字的上部。 <font
face="宋体">IE</font>似乎是将个要素按照其载入浏览器窗口的顺序显示各要素。
</p>
<p>换句话说，如果你打算将几个要素叠放在一起，就不要对边距使用负值。今天的教程将教你如何叠放个要素。
</p>
<p>浏览器对该属性的支持方面还应注意以下几点：
<ul>
<li>当你在<font face="宋体">IE 3</font>中使用标尺单位 (</font>如英寸和厘米）时，<font
face="宋体">IE 3</font>有时会加大底边距。同样，有些<font face="宋体">HTML</font>标签可以适用<br>
底边距，有些则不能，</li>
<li><font face="宋体">IE 4</font>有时在对替代要素（如图象）设定左边距时会出现问题，你可以将图象包在一个<font
face="宋体"><DIV></font>中，然后给<font face="宋体"><DIV></font>设定样式。
</li>
</ul>
<p><b>顶空格填充，底空格填充，左空格填充和<br>
右空格填充</b></p>
<p>空格填充的作用类似于边距控制，你可以设定一个要素的前后左右的空格填充的尺寸。
<ul>
<tt><p><font face="宋体">H4 { padding-top: 20px; padding-bottom: 5px; padding-left:
100px; padding-right: 55px }</font></p>
</tt>
</ul>
<p>你可以使用任何一种长度单位或比例值设定空格填充。其使用方法同边距的属性。
</p>
<p>但是空格填充不能使用负值（而且，<font face="宋体">IE 3</font>不支持空格填充属性）。
</p>
</font>
<p><font size="3">下面我们将探讨位于边距和空格填充之间的边框。
<p><font size="3">有几种样式表属性可以将网页要素周围加上s2es@#边框。<br>
<br>
（注意：<font face="宋体">IE 3</font>和<font face="宋体">IE 4</font>不支持任何边框属性。）
</font></p>
<font size="3">
<p><b>顶边框宽度，底边框宽度，左边框宽度和右边框宽度</b></p>
<p>你可以控制整个边框的宽度，也可以分别控制每一边的边框宽度：
<ul>
<tt><p><font face="宋体">H4 { border-top-width: 2px; border-bottom-width: 5px;
border-left-width: 1px; border-right-width: 1px }</font></p>
</tt>
</ul>
<p>以下是上述<font face="宋体">CSS</font>规则的显示结果： </p>
<h4
style="border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px">你还可以给替代要素加上边框，很好玩，是吧？</h4>
<p style="border-left-width: 10px">你无须给一个要素的每一边都加上边框。</p>
<p>你可以使用上述任何一种长度单位设定边框宽度，也可以使用内置关键字设定宽度：
</p>
<p style="border-top-width: thin">本段文字的顶边框宽度参数值为<font
face="宋体">thin</font>。</p>
<p style="border-top-width: medium">本段文字的顶边框宽度参数值为<tt><font
face="宋体">medium</font>。</tt></p>
<p style="border-top-width: thick">本段文字的顶边框宽度参数值为<tt><font
face="宋体">thick</font>。</tt></p>
<p>如果你想使边框四面应用相同的宽度，很简单，使用<font
face="宋体"><tt>border-width</tt></font>标签就可一次完成，例：
<ul>
<tt><p><font face="宋体">IMG { border-width: 1in }</font></p>
</tt>
</ul>
<p><b><tt>边框颜色</tt></b> </p>
<p>例：
<ul>
<tt><p><font face="宋体">P { border-color: green; border-width: 3px }</font></p>
</tt>
</ul>
<p style="border-color: green; border-width: 3px">本段文字显示上述代码的执行效果。</p>
<p>你可以使用浏览器认可的颜色或者直接使用<font face="宋体">RGB</font>参数值，例：
<ul>
<tt><p><font face="宋体">H4 { border-color: #FF0033; border-width: thick }</font></p>
</tt>
</ul>
<p>如果你想使边框的四边显示不同的颜色，你可以在设置中分别列出各种颜色：
<ul>
<tt><p><font face="宋体">P { border-color: #666699 #FF0033 #000000 #FFFF99;
border-width: 3px }</font></p>
</tt>
</ul>
<p>浏览器将第<font face="宋体">1</font>种颜色理解为顶边框的颜色参数值，第<font
face="宋体">2</font>种颜色为右边框，然后是底边框，然后是左边框。 </p>
<p style="border-color: #666699 #FF0033 #000000 #FFFF99; border-width: 3px">本段文字显示上述代码的执行效果。</p>
<p>注意： <font face="宋体">Communicator </font>不能识别多色彩，在<font
face="宋体">Communicator</font>中，你只能使用一种颜色。（如果你使用多色彩，<font
face="宋体">Communicator</font>很有可能用蓝色显示整个边框。我们也对此感到莫名其妙）</p>
<p>如果不使用边框颜色属性，则边框将以要素自身的颜色显示边框颜色。
</p>
<p><b>边框样式</b></p>
<p>你还可以设定边框线的样式，例： </p>
<p> <tt>P { border-style: double; border-width: 3px }</tt> </font></p>
<p>可以使用的关键字参数值如下： </font>
<ul>
<li><font style="border-style: solid; border-width: 4px; border-color: green"
color="#990033" face="宋体" size="3">solid<br>
</font></li>
<li><font style="border-style: double; border-width: 4px; border-color: green"
color="#990033" face="宋体" size="3">double<br>
</font></li>
<li><font style="border-style: dotted; border-width: 4px; border-color: green"
color="#990033" face="宋体" size="3">dotted<br>
</font></li>
<li><font style="border-style: dashed; border-width: 4px; border-color: green"
color="#990033" face="宋体" size="3">dashed<br>
</font></li>
<li><font style="border-style: groove; border-width: 4px; border-color: green"
color="#990033" face="宋体" size="3">groove<br>
</font></li>
<li><font style="border-style: ridge; border-width: 4px; border-color: green"
color="#990033" face="宋体" size="3">ridge<br>
</font></li>
<li><font style="border-style: inset; border-width: 4px; border-color: green"
color="#990033" face="宋体" size="3">inset<br>
</font></li>
<font size="3">
<li> <font
style="border-style: outset; border-width: 4px; border-color: green" color="#990033">outset</font>
</font></li>
</font>
</ul>
<p>注意：<font face="宋体">Communiactor</font>只支持其中的几种关键字属性。
<p><font size="3">我们在网页中经常看到浮动的图象和表格，只需对一个<font
face="宋体"><IMG></font>标签使用<font face="宋体">ALIGN=left</font>属性，文字就会绕到浮动图象的右边继续显示。样式表对于浮动要素有一个更为灵活的语法，也就是本篇中将要谈到的主题。
</font></p>
<font size="3">
<p>（<font face="宋体">IE3</font>和<font face="宋体">IE 4</font>不支持本页中谈到的任何功能。如果你使用<font
face="宋体">IE 4</font>，你将会看到一些奇怪的格式。） </p>
<p><b>浮动</b></p>
<p>浮动属性使你能将一个要素周围用文字包裹，不仅仅是包裹图象，而且能包裹整块的文字。
<ul>
<tt><p><font face="宋体">H4 { float: left }</font></p>
</tt>
</ul>
<h4 style="float: left">本标题文字为向左浮动。</h4>
<p>你可以看到这项<font face="宋体">CSS</font>规则应用于<font face="宋体"><H4></font>的文字。而本段内容则包裹在标题文字的右下边，就象是用文字包裹图象时的效果那样。你也可以使用向右浮动的参数值。
</p>
<p>如果浮动要素周围的边距太小，你可以使用之前学过的空格填充属性给它加大四周的空间（但似乎使用边距会造成问题）。
</p>
<p><b><tt>清除</tt></b> </p>
<p>如果你想使一段文字包裹某一要素，而下一段文字不包裹，你可以使用<font
face="宋体">clear</font>属性，很象<font face="宋体">HTML</font>的<font
face="宋体">CLEAR</font>属性的用法（例： <tt>CLEAR=right</tt></font>）。
<ul>
<tt><p><font face="宋体">P { clear: left }</font></p>
</tt>
</ul>
<p>例： </p>
<p><img src="css/test.gif" alt="day3_7b.gif (12436 bytes)" width="70" height="70"> </p>
<p>第<font face="宋体">1</font>、<font face="宋体">2</font>段文字包裹了向左浮动的第<font
face="宋体">1</font>幅图象。 </p>
<p>而使用了清除（<font face="宋体">clear</font>）属性后，第<font
face="宋体">4</font>、<font face="宋体">5</font>段文字中只有第<font
face="宋体">4</font>段包裹了图象，而第<font face="宋体">5</font>段文字没有包裹。
<p><font size="3">小问题：如何只使用<font face="宋体">CSS</font>和<font
face="宋体">HTML</font>而无须<font face="宋体">gif</font>就制造出下落阴影的效果？答案见明天的课程。
<p><font size="3">今天是个好天气。我们扩展了串接样式表等方面的学习，将文字和图象都置于我们的自由控制之下。它使我们可以做到普通的<font
face="宋体">HTML</font>标签不能做到的事情。 </font></p>
<font size="3">
<p>以下是我们今天学习内容的总结：
<ul>
<li>字间距设定字与字之间的距离。</li>
<li>字母间距设定每个字母之间的距离。</li>
<li>行高设定每行文字之间的垂直距离。</li>
<li>文字对齐用于设定段落的左、右对齐、居中和左右两边对齐。</li>
<li>垂直对齐用于垂直对齐文字。</li>
<li>文字缩行可以使段落缩行。</li>
<li>各种边距属性设定围绕文字块、图等的边距。</li>
<li>空格填充属性用于设定空格填充的性。</li>
<li>边框属性用于设定边框的宽度、颜和样式。</li>
<li>浮动和清除用于控制各要素之间的包裹。</li>
</ul>
</font>
<p><font size="3">明天我们将继续探索串接样式表的神奇魅力。 </font>
</table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?