DIV+CSS架构教程,第二课

小兵

<p><font color="#f70938" size="7"><strong>一.文本</strong></font></p><p>你可以用大量的属性来改变文本的大小和形态，概括如下：</p><h2>字体族font-family</h2><p>这是字体本身的名称，如“Times News Roman”，“Arial”或者“Verdana”（又如“宋体”等中文字体名称--译者著）。</p><p>你指定的字体必须存在在用户的电脑上，所以在<acronym title="Cascading Style Sheets">CSS</acronym>使用字体会存在某种程度上的不确定性。有少量“<strong>安全</strong>”的字体（最常用的是Arial，Verdana和Times New Roman）。但你可以指定不止一种字体，只要用半角英文逗号<strong>,</strong>隔开就行。这样做的目的是如果用户的电脑上没有你指定的第一个字体，浏览器会逐遍寻找罗列的字体直到找到电脑上安装有的字体为止。这很有用因为不同的电脑有时侯有不同的安装字体。所以，例子<code>font-family: arial, helvetica</code>的目的就是用在PC（一般情况下有arial字体而没有helvetica字体）和Apple Mac上（一般有helvetica字体而没有arial字体）。</p><p>注意：如果一个字体的名称超过一个单词，它应该用英文双引号括起来，如：<code>font-family: "Times New Roman"</code>。</p><h2>字体尺寸font-size</h2><p>定义字体的尺寸。必须小心──像标题一样的文本不应该是段落中的大字体而已，你应该使用标题标签（<code>h1</code>，<code>h2</code> 等）。甚至，在练习中，你可以使段落文本字体尺寸大于标题（不推荐使用，如果你明智的话）。</p><h2>字体加粗font-weight</h2><p>这用来声明文本粗细与否。实际应用中一般只有两种形式：<strong><code>font-weight: bold</code></strong>（粗体）和<strong><code>font-weight: normal</code></strong>（普通）。在理论上，它们的值有<strong><code>bolder</code></strong>（更粗），<strong><code>lighter</code></strong>（更细），<strong><code>100</code></strong>，<strong><code>200</code></strong>，<strong><code>300</code></strong>，<strong><code>400</code></strong>，<strong><code>500</code></strong>，<strong><code>600</code></strong>，<strong><code>700</code></strong>，<strong><code>800</code></strong>或者<strong><code>900</code></strong>，但许多浏览器会摇摇头，说：“我不认为这样”，所以使用<code>bold</code>和<code>normal</code>是比较安全的。</p><h2>字体样式font-style</h2><p>这定义文本正<strong>斜</strong>与否。可以这样使用 <strong><code>font-style: italic</code></strong>（倾斜）或者<strong><code>font-style: normal</code></strong>（正常）。</p><h2>文本装饰text-decoration</h2><p>这用来声明文本是否有划线。可以这样使用：</p><ul><li><strong><code>text-decoration: overline</code></strong>──文本上面的划线。 </li><li><strong><code>text-decoration: line-through</code></strong>──穿过文本的删除线。 </li><li><strong><code>text-decoration: underline</code></strong>──<strong>这应该只使用在连接中</strong>，因为用户一般认为连接才有下划线。<br/>这个属性通常用来装饰连接，而 <strong><code>text-decoration: none</code></strong>则是表示没有任何划线。 </li></ul><h2>文本转换text-transform</h2><p>这可以转换文本的大小写。</p><p><strong><code>text-transform: capitalize</code></strong>把每个单词的首字母转换成大写。<br/><strong><code>text-transform: uppercase</code></strong>把所有的字母都转换成大写。<br/><strong><code>text-transform: lowercase</code></strong>把所有的字母都转换成小写。<br/><strong><code>text-transform: none</code></strong>？你自己试一试啦。</p><pre><code>body {</code>
                <code class="m1"><strong>font-family: arial, helvetica, serif;</strong></code>
                <code class="m1"><strong>font-size: 0.8em;</strong></code>
                <code>}</code>
                <code>h1 {</code>
                <code class="m1"><strong>font-size: 2em;</strong></code>
                <code>}</code>
                <code>h2 {</code>
                <code class="m1"><strong>font-size: 1.5em;</strong></code>
                <code>}</code>
                <code>a {</code>
                <code class="m1"><strong>text-decoration: none;</strong></code>
                <code>}</code>
                <code>strong {</code>
                <code class="m1"><strong>font-style: italic;</strong></code>
                <code class="m1"><strong>text-transform: uppercase;</strong></code>
                <code>}</code>
        </pre><h2>文本间距</h2><p>字母间隔<strong><code>letter-spacing</code></strong>和文本间隔 <strong><code>word-spacing</code></strong>属性分别用在字母间和单词间的距离。它们的值可以是长度或者默认的普通<strong><code>normal</code></strong>。</p><p><strong><code>line-height</code></strong>属性为比如段落等元素设置行高，它并不改变字体的尺寸。它的值可以是长度，百分比或者默认的<strong><code>normal</code></strong>。</p><p>文本水平对齐<strong><code>text-align</code></strong>属性将对元素里的文本向左、右、中间或者两端对齐，自然，它们的值分别<strong><code>left</code></strong>（左）、 <strong><code>right</code></strong>（右）、<strong><code>center</code></strong>（中间）或者 <strong><code>justify</code></strong>（两端）。</p><p>文本缩进<strong><code>text-indent</code></strong>属性依据你设置的长度或者百分比值对文本段落的第一行进行缩进。在印刷中经常会用到这样的格式，然而在像网页这样的电子媒体中并不常用。</p><pre><code>p {</code>
                <code class="m1"><strong>letter-spacing: 0.5em;</strong></code>
                <code class="m1"><strong>word-spacing: 2em;</strong></code>
                <code class="m1"><strong>line-height: 1.5em;</strong></code>
                <code class="m1"><strong>text-align: center;</strong></code>
                <code>}</code></pre><pre><code></code></pre><pre><code><font color="#ff0066" size="7"><strong>二.界和补白</strong></font></code></pre><pre><code><p>边界<strong><code>margin</code></strong>和补白<strong><code>padding</code></strong>（依据国内出版社的翻译惯例，margin被翻译成边界，padding被翻译成补白，译者依照习惯翻译。但译者认为，margin翻译成外边距，padding翻译成内边距更为直白和形象。你可以依据自己的习惯来适应这两种不同的译法。——译者注）是隔开元素最常用的两个属性。边界是元素外边的距离，而补白则是元素内部的距离。</p><p>为<code>h2</code>改进代码如下：</p><pre><code>h2 {</code>
                                <code class="m1">font-size: 1.5em;</code>
                                <code class="m1"><strong>background-color: #ccc;</strong></code>
                                <code class="m1"><strong>margin: 1em;</strong></code>
                                <code class="m1"><strong>padding: 3em;</strong></code>
                                <code>}</code>
                        </pre><p>你可以看到二级标题外围有一个字符的宽度，还很臃肿，因为在二级标题内部有3个字符宽度的补白。</p><p>元素的四边可以设置不同的值。<strong><code>margin-top</code></strong>、 <strong><code>margin-right</code></strong>、<strong><code>margin-bottom</code></strong>、 <strong><code>margin-left</code></strong>、<strong><code>padding-top</code></strong>、<strong><code>padding-right</code></strong>、<strong><code>padding-bottom</code></strong>和<strong><code>padding-left</code></strong>是无需解释的属性（看看英文字面意思啦）。</p><h2>盒状模型</h2><p>边界、补白和边框（见<a href="http://book.chinaz.com/CSS/CSS1/cssbeginner/margins/borders.php">下一页</a>）是人尽皆知的盒状模型的组成所有部分。盒状模型是这样工作的：中间是元素盒子（在脑海中想像一下情形），从里到外依次包围着补白盒子、边框盒子和边界盒子。很显然地，如下所示：</p><div style="ADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; MARGIN: 0px 2em 1em; PADDING-TOP: 0px; BACKGROUND-COLOR: #ccf;">Margin box（边界盒） <div style="ADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP: 0px; BACKGROUND-COLOR: #66f;">Border box（边框盒） <div style="ADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP: 0px; BACKGROUND-COLOR: #99f;">adding box（补白盒） <div style="BACKGROUND-COLOR: white;">Element box（元素盒） </div></div></div></div><p>没有必要全部使用上述三个外围的“盒子”，但如果你能记住盒状模型，你可以把它们应用到页面的每一个元素。</p></code></pre>

0409

我也一直在学DIV+css 一段时间了，最近一直没有空，也废了一段时间，有空可以一起交流