📄 css1_7.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}
H3 {color: #cc6600}
TABLE.pad {padding: 5mm; background-color: #CCEFCC}
P.width5 {border-width: 1px}
P.colorred {border-width: 2px; border-color: red}
P.inset {border-width: 5px; border-color: red; border-style: inset}
P.outset {border-width: 5px; border-color: red; border-style: outset}
P.double {border-width: 5px; border-color: red; border-style: double}
P.groove {border-width: 5px; border-color: red; border-style: groove}
P.ridge {border-width: 5px; border-color: red; border-style: ridge}
</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
来控制四周的空格以及边框的设定 <h3>元素周边的空格 margin</h3>
<p>性质 margin 可被用来决定周边的空格，
假如我们想让整个网页在左边有 5em 但让标题没有任何空格 </p>
<pre>
BODY {margin: 5em}
H3 {margin: -5em}
</pre>
<p>H3 的负值 -5em 抵销了 BODY 5em 的空格。[<a tppabs="http://www.nease.net/~haidian/dhtml_t/example_margin.html" href="example_margin.htm">例子</a>] </p>
<p>另外我们还可以分别用 margin-left, margin-right, margin-top, 和 margin-bottom
来设定 左，右，上，下的空格 </p>
<h3>元素内部周边的空格 padding</h3>
<p>初看起来这个性质跟 margin 好象一样。
其实它们之间有很大的区别。margin
的空格是相对于其他的元素所空的，而 padding
是在元素的周边和内部的内容所空的空格。在下面的例子，我们用有背景颜色的
TABLE 来让你注意这个性质 </p>
<pre>
TABLE.pad {padding: 5mm; background-color: #CCEFCC}
</pre>
<table class="pad">
<tr>
<td>Petersen was arrested in a modest apartment building in Studio City, Calif., which he
had been sharing with three other people. The Marshals entered the apartment using a key
provided by the building's manager. When they entered, the Marshals said, they found
Petersen alone -- sitting on his bed and using his laptop computer. </td>
</tr>
</table>
<p>我们同样可以用 padding-left, padding-right, padding-top, 和padding-bottom
来分别控制左，右，上，下的元素内部<br>
的周边空格。 </p>
<h3>元素边框的宽度</h3>
<p>我们可以用 border-width 性质来调节边框的宽度。 比如 </p>
<pre>
P.width5 {border-width: 1px}
</pre>
<p class="width5">这个 P 元素的边框宽度是 1 px </p>
<p>你可以用 border-left-width, border-right-width, border-top-width, 和
border-bottom-width 来分别决定左，右，上，下边的宽度 </p>
<h3>元素边框的颜色</h3>
<p>我们可以用 border-color 性质来调节边框的颜色。 比如 </p>
<pre>
P.colorred {border-color: red}
</pre>
<p class="colorred">这个 P 元素的边框的颜色是红色的 </p>
<h3>元素边框的形态</h3>
<p>我们可以用 border-style 性质来调节边框的形态。 比如 </p>
<pre>
P.inset {border-style: inset, border-width: 5px}
</pre>
<p class="inset">这个 P 元素的边框的形态是 inset </p>
<p class="outset">这个 P 元素的边框的形态是 outset </p>
<p class="double">这个 P 元素的边框的形态是 double </p>
<p class="groove">这个 P 元素的边框的形态是 groove </p>
<p class="ridge">这个 P 元素的边框的形态是 ridge </td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%"></td>
</tr>
</table>
<hr>
<p align="right"><a href="css1_6.htm"><img src="../images/back-button-off.gif" alt="上一页--颜色与背景" border="0" WIDTH="31" HEIGHT="31"></a><a href="css1_8.htm"><img src="../images/forward-button-off.gif" alt="下一页--CSS与HTML的结合方式" 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>
<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 + -