DIV+CSS架构教程,第三课

小兵

<p><strong>边框</strong>可以应用到在主体元素body中的绝大部分<abbr title="HyperText Markup Language">HTML</abbr>元素中。 </p><p>创建一个包围着元素的边框，你所需要的是边框样式<strong><code>border-style</code></strong>。它们的值可以是 <strong><code>solid</code></strong>、<strong><code>dotted</code></strong>、<strong><code>dashed</code></strong>、<strong><code>double</code></strong>、<strong><code>groove</code></strong>、<strong><code>ridge</code></strong>、 <strong><code>inset</code></strong>和<strong><code>outset</code></strong>。（你有必要每个值都试一试，看看效果如何——译者注）</p><p>边框宽度<strong><code>border-width</code></strong>为边框设置<strong>宽度</strong>，通常用像素来表示。当然，还可以单独设置四个方向的边框属性，它们是<strong><code>border-top-width</code></strong>、<strong><code>border-right-width</code></strong>、 <strong><code>border-bottom-width</code></strong>和<strong><code>border-left-width</code></strong>。</p><p>最后，边框颜色<strong><code>border-color</code></strong>设置颜色。</p><p>为下面的<acronym title="Cascading Style Sheets">CSS</acronym>文档添加如下代码：</p><pre><code>h2 {</code>
                <code class="m1"><strong>border-style: dashed;</strong></code>
                <code class="m1"><strong>border-width: 3px;</strong></code>
                <code class="m1"><strong>border-left-width: 10px;</strong></code>
                <code class="m1"><strong>border-right-width: 10px;</strong></code>
                <code class="m1"><strong>border-color: red;</strong></code>
                <code>}</code>
        </pre><p>这将会使所有的HTML二级标题（<code>h2</code>）产生红色的破折号（dashed）边框，上下各3像素宽，左右则各10像素宽（取代了3像素宽的全局设置）。</p><p></p><p>你应该已经在<abbr title="HyperText Markup Language">HTML</abbr>初级指南的综合中创作了一个HTML文档，而且在<acronym title="Cascading Style Sheets">CSS</acronym>初级指南的的开始中增加了一行，用以把HTML文档和CSS文档联系起来。</p><p>下面的代码包括了所有我们在初级指南中所学习的方法。只要你把下面的保存起来作为CSS文档，然后在浏览器中查看HTML文档，你就可以理解每一个CSS的属性的表现和怎么应用。<font color="#ff0033">最好的方法就是花费时间修改CSS文档和HTML文档上的代码，然后在浏览器中查看到底发生了什么。</font></p><pre>
                <code>body {</code>
                <code class="m1">font-family: arial, helvetica, sans-serif;</code>
                <code class="m1">font-size: 80%;</code>
                <code class="m1">color: black;</code>
                <code class="m1">background-color: #ffc;</code>
                <code class="m1">margin: 1em;</code>
                <code class="m1">padding: 0;</code>
                <code>}</code>
                <code>/* 顺便说一句，这是注释 */</code>
                <code>p {</code>
                <code class="m1">line-height: 1.5em;</code>
                <code>}</code>
                <code>h1 {</code>
                <code class="m1">color: #ffc;</code>
                <code class="m1">background-color: #900;</code>
                <code class="m1">font-size: 2em;</code>
                <code class="m1">margin: 0;</code>
                <code class="m1">margin-bottom: 0.5em;</code>
                <code class="m1">padding: 0.25em;</code>
                <code class="m1">font-style: italic;</code>
                <code class="m1">text-align: center;</code>
                <code class="m1">letter-spacing: 0.5em;</code>
                <code class="m1">border-bottom-style: solid;</code>
                <code class="m1">border-bottom-width: 0.5em;</code>
                <code class="m1">border-bottom-color: #c00;</code>
                <code>}</code>
                <code>h2 {</code>
                <code class="m1">color: white;</code>
                <code class="m1">background-color: #090;</code>
                <code class="m1">font-size: 1.5em;</code>
                <code class="m1">margin: 0;</code>
                <code class="m1">padding: 0.1em;</code>
                <code class="m1">padding-left: 1em;</code>
                <code>}</code>
                <code>h3 {</code>
                <code class="m1">color: #999;</code>
                <code class="m1">font-size: 1.25em;</code>
                <code>}</code>
                <code>img {</code>
                <code class="m1">border-style: dashed;</code>
                <code class="m1">border-width: 2px;</code>         <code class="m1">border-color: #ccc;</code>
<code>}</code>
<code>a {</code>
        <code class="m1">text-decoration: none;</code>
<code>}</code>
<code>strong {</code>
        <code class="m1">font-style: italic;</code>
        <code class="m1">text-transform: uppercase;</code>
<code>}</code>
<code>li {</code>
        <code class="m1">color: #900;</code>
        <code class="m1">font-style: italic;</code>
<code>}</code>
<code>table {</code>
        <code class="m1">background-color: #ccc;</code>
<code>}</code>
                                        </pre>

杰哥

最讨厌这个