css技术专贴（转）

最新推荐文章于 2024-10-04 22:03:04 发布

linlin_juejue

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量1.6k

点赞数

文章标签： css 浏览器 div ie 图形 dreamweaver

本文链接：https://blog.csdn.net/linlin_juejue/article/details/2282805

版权

css技术专贴（转）

为什么要使用 CSS?
CSS 锦囊
 网页排版CSS教学
 用CSS控制段落缩进
 CSS鼠标属性
 弹性设计

为什么要使用 CSS?

自从 Dreamweaver MX 2004 发布以来，我曾经无数次向 Dreamweaver 的新老用户演示它的新特征和新功能。每次进行产品演示，我很快就会极力称赞 Dreamweaver MX 2004 设计和呈现 CSS（或层叠样式表）的新功能。

然而最近某位新用户问了一个问题，说实话，这个问题一下子让我张口结舌。这位用户只是问：“我为什么要使用 CSS?”当时我意识到，尽管我们这些每天与 HTML 和 CSS 打交道的人非常了解 CSS 的优点，但仍有很多人并不了解。或者说并不完全了解 CSS 所能提供的所有优点。本文是我对上面那位新用户的书面回答。

CSS 起源

回顾 CSS 的优点之前，我要先介绍一下它的历史。Web 管理组织 W3C 在 1996 年 11 月推荐使用 CSS，并批准了 CSS 1 级规范。CSS 1 级规范说明了用于 HTML 页面的属性。这些属性代替了传统的字体标签和其他“样式”标记，例如颜色和边距。1998 年 5 月，W3C 批准了 CSS 2 级规范，将一些附加功能添加到 1 级规范，并引进了定位属性。这些属性代替了表格标签普遍（但是错误）的用法，用来设计页面元素的表示。CSS 规范的最新版本是 CSS 2.1，它改进了某些属性，并删除了在当前浏览器里没有作用或作用很小的属性。

不幸的是，就像很多新技术一样，CSS 经历了漫长的过程才被广泛采纳。其中的重要原因在于浏览器，以及为这些浏览器建立站点的 Web 设计者们。CSS 批准期间，Netscape Navigator (NN) 仍然是主导浏览器，而该浏览器基本上不支持 CSS。Microsoft 在其第 3 版浏览器中添加了对 CSS 非常有限的支持，但当时大多数的 Web 设计者（本人在内）仍然将 NN 作为首选平台进行页面编码。

很多年来，每发行一个新版本，浏览器制作者们都扩展了对 CSS 的支持。今天，Internet Explorer 6、Netscape Navigator 7、Mozilla、Opera 和 Safari 都全面支持 CSS。但这并不意味着我们作为 Web 设计者和开发者的生涯不存在问题。尽管上述所有浏览器都支持 CSS Level 2，它们的兼容程度仍然各不相同。而且在某些情况下，特定属性仍然会带给你很多麻烦。也就是说，您仍然需要遵守老的信条“测试再测试”。但如果您坚持使用 CSS 规范的核心属性，您将能够正确地呈现页面。

但是为什么 W3C 认为需要创建 CSS 规范呢？当我创建基于 HTML 的 Web 站点和应用程序时，这一切对我又意味着什么呢？我认为，我们需要使用 CSS 的理由以及它带来的优势可以分为以下三个主要方面：灵活性、呈现性和可访问性

灵活性

我确定几乎每个 Web 设计者和开发者都经历过这样的痛苦时刻：当您小心地布置好页面，完成所有嵌套的表格后，客户要求进行一点“小小的”更改。这小小的更改可能只是“能不能把那个图形稍稍往左移动一点？”，也可能非常富有戏剧性：“我不喜欢这些标题，能把它们的字体弄大一点吗？改字体的时候，顺便把颜色也改了，怎么样？”如果只需要处理有限的几个页面，您可以深吸一口气，花上大半个小时做那些让人恼火的改动。但如果涉及到较大的站点（而这已经很常见），一个简单的更改无论如何也简单不了。

这样的情形为什么会如此痛苦呢？因为定义页面外观的标记本身就是页面的一部分。要看到实例，您只需到任何站点的任何页面上去数一下 font 和 table 标签的数量。只要您能够从实际页面的流程（或代码）中删除这些标记，或者采用更好的办法，即将其外置，您就可以进行集中更改。而这就是 CSS 所能做的。

如果使用一个或多个外部样式表，通过修改样式表然后将修改后的版本上载，您就可以将更改应用到站点。

想象一下，在传统的基于表格的布局中，将站点浏览从页面左侧移到页面右侧将有多么困难。这需要几个小时重复而乏味的工作。但是，如果您选择使用 CSS 的定位属性（通常称作 CSS-P）来设计页面，只需更改外部样式表中的“浮动”或“位置”属性，即可更新页面。而且还有以下附加优势：您更新了站点中使用该样式的所有页面。

呈现性

由于宽带的广泛使用，很多开发者已经不再考虑在浏览器中呈现页面所花费的时间。但是，你们应该记住，很多目标用户仍然在使用拨号连接。传统的基于表格的布局是页面下载速度慢的主要原因。因为浏览器从服务器接收页面时，必须首先检查并“理解”一系列复杂的镶嵌式表格。它必须先找到镶嵌在最里面的内容，然后小心地逐步处理代码，直至到达最外层的容器，即 body 标签。完成以上所有过程后，浏览器才能开始在屏幕上呈现内容。

如果使用 CSS，浏览器从服务器接收内容后，立刻就可以开始呈现过程，因为页面中没有或只有很少的显示标记。

使用外部样式表还有一个潜在的呈现方面的好处。在传统的基于表格的方法中，浏览器必须检索、分析并单独呈现每个页面。也就是说，浏览器在您的站点上显示第 30 页时耗费的工作和显示第 1 页时一样多。

但是，如果使用外部样式表进行显示，站点的第一页将提示浏览器将页面使用的已链接样式表文件缓存起来。这意味着站点中所有使用上述样式表的后继页面下载速度会更快，因为浏览器已经缓存了样式表。

最后一个与呈现有关的优点让我想起电影《莫扎特》。电影中，莫扎特问国王对自己的歌剧有什么看法。国王说很好，但是很沉闷。莫扎特一再追问，国王解释说，问题就在于“音符太多”。Web 设计也可能有同样的问题，当然这里的音符指的是实际 HTML 代码。代码越多，浏览器理解页面所花的时间就越长。

大家也许都听说过有关官方应用程序的传言，它们编写了非常糟糕的代码，满是复杂的信息，然而文档页面却无法呈现。作为 Dreamweaver 的用户，你们不会遇到这样的问题，但是如果编写了太多代码，你们也会感到内疚。典型的基于表格的设计就是一个很好的例子。

在设计中使用 CSS 后，您将减少客户需要下载的代码的数量。仅仅减少某些页面中的字体标签就可以大大减少代码的数量。在很多情况下，如果完全使用 CSS-P 进行设计，代码的数量最多可以减少 50% 甚至更多。代码减少就意味着页面下载的速度加快。

可访问性

如今我经常听到人们谈论可访问性。大多数开发者知道自己必须考虑建立更多可访问站点的问题，但在更大的程度上，只有为政府或教育机构建立站点的开发人员才被迫真正做到了这一点。考虑到可访问性的问题时，大多数开发人员认为这仅仅意味着需要将 alt 属性添加到图形中。但实际上，提高可访问性有很多工作可做，CSS 使您可以轻松建立可访问站点。

可访问性的主要问题（也是使用 CSS 能够解决的问题）在于辅助技术（例如屏幕阅读器）怎样“阅读”页面。传统的基于表格的环境下，屏幕阅读器面临一个巨大的挑战，那就是决定怎样阅读页面。想想吧，当屏幕阅读器遇到镶嵌很深的表格时该有多么困惑，它应该阅读内容，还是跳过内容？跳过内容后，以后怎样返回内容？

当您点击页面时，您会很快看到页面中自己感兴趣的内容，而忽略页面顶部的导航和其他内容。视力不太好的人却做不到这一点。他必须等待屏幕阅读器分析完页面顶部和他感兴趣的内容之间所有复杂的信息。

当然，有的技术能够使屏幕阅读器跳过导航，但这需要在导航条或其他内容的图像中添加链接。这些技术的运行可能会造成混乱，而且访问站点的其他人也能够看到它们。使用 CSS，您能够在页面中完整定义不可视元素（对于其他站点访问人员和您的鼠标不可视）。屏幕阅读器可以使用这些元素快速导航，有效处理文档。

由于 CSS 没有显示标记，屏幕阅读器所遇到的唯一问题就是实际内容。另外，当您使用 CSS-P 进行设计时，您将专注于内容的实际“流”。您开始考虑它在页面上的逻辑顺序。

当您阅读本文档时，您理解了信息“流”。但在镶嵌型表格的示例中，如果您使用多栏布局，本段落将很可能位于页面的右上角。那样，屏幕阅读器无法知道它应该在文章末尾阅读本段落。

使用 CSS-P 后，浏览器可能仍将本段落显示在浏览器窗口的右上角，但当您查看文档的源代码时，段落在文档的 html 中仍然是您现在所看到的位置。这使页面更容易访问。

CSS 锦囊

在使用CSS建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。

有疑问，先验证
在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。

在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。
如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器中进行测试，看到显示结果“不正常”时，你会很沮丧的。相反，您应该先将您的代码完善，然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的，你不必再为支持其他浏览器而劳心费神。当然了，目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。

确保您想要的效果真的存在
许多特定的浏览器专有的CSS扩展在正式标准中并不存在。如果您对 filter(滤镜) 或滚动条指定样式，您用的就是私有代码，除了IE之外，在别的浏览器中毫无作用。如果验证器告诉您代码没有定义，极有可能您用了私有样式，别指望在不同的浏览器中得到一致的效果。

如果布局中一定要用浮动对象，别忘了适时使用清除（clear）属性。
浮动元素似易实难，而且难以驾驭。如果您发现浮动对象伸出了容器的边界，或者不像您所期望的那样显示，请检查您的期望是否正确。关于这个问题请看Eric Meyer 的教程

边距的合并：可用padding 或 border 来避免。
您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins，边距的合并可能就是问题的根源。 Andy Budd 对此的解释也许能为你解惑。

避免将 padding/border 和固定宽度同时应用到同一元素。
IE5 错误的区块模型是罪魁祸首，是它把事情弄得乱七八糟。虽然有补救方案，不过最好是绕过这个问题，当子元素的宽度固定时，为其父元素指定padding。

避免IE下未指定样式内容的闪烁。
如果您用 @import 来输入外部样式表，早晚会发现IE有“闪烁”的毛病。在应用CSS样式之前，未格式化的HTML文本会短暂地出现。这是可以避免的.

别指望 min-width 在IE中有用。
IE不支持它，但是它将 width 当作 min-width，所以通过一些 IE 的过滤技巧(filtering)，可以实现同样的最终效果。

走投无路时，试一试减少宽度
由于舍入误差，有时 50% 加上 50% 等于 100.1%，破坏某些浏览器中的布局。不妨试试将 50% 减到 49%，甚至 49.9%。

IE 中显示不正常？
可能是 Peekaboo 臭虫在作怪，尤其是当鼠标经过超链接时能显示正常。修补方法见Position is Everything。

如果使用了锚点，在应用超链接样式时要特别小心。
如果您在代码中使用了传统的锚点(<a name="anchor">)，您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形，你可以使用 id，或者使用鲜为人知的语法: :link:hover, :link:active

记住“LoVe/HAte”（爱/恨）链接规则
要以下面的顺序指定超链接伪类：Link, Visited, Hover, Acitve。任何其他顺序都不妥当。假如用了 :focus，次序应为 LVHFA(“Lord Vader's Handle Formerly Anakin”，Matt Haughey这样建议)。

请记住“TRouBLED”（麻烦的）边框。
边框(border)、边距(margin)和补白(padding)的简写次序为：顺时针方向从上开始，即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上边距为零，右边距为1px，依此类推。

非零值要指明单位。
在用CSS指定字体、边距或大小时，必须指明所用的单位（唯一的例外是 line-height，很奇怪，它不需要单位）。某些浏览器对未指明单位的处理方法不足为凭。零就是零，不管是 px 还是 em。其他的非零值都要明确指定单位。例如： padding: 0 2px 0 1em;

测试不同的字体大小。
像 Mozilla 和 Opera 这样的高级浏览器都允许你改变字体大小，不管你用什么字体单位。某些用户的默认字体大小肯定和你的不同，尽最大努力去满足他们。

测试时用嵌入式样式，发布时再改为外部输入。
将样式表嵌入在你的 HTML 源代码中，在测试时可以消除许多缓存引起的错误，尤其是某些 Mac 下的浏览器。但在发布前，一定要记住将样式表移到外部文件，用 @import 或 <link>引入。

加上明显的边框有助于布局调试。
像 div { border: solid 1px #f00; } 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的重叠或空白问题。

图片路径不要用单引号。
当设置背景图片时，要坚持用双引号。尽管看起来好像多此一举，但是如果不这么做，IE5/Mac 会噎住。

不要为将来的样式表（比如手持式设备或打印用样式表）“占位子”。
Mac IE5 对空的样式表比较感冒，会增加页面的装入时间。建议样式表中至少应该有一条规则（哪怕是注释也好），免得 MacIE噎住。

还有一些建议虽然不针对某些功能，但是在开发过程中值得注意：

好好组织您的CSS文件
恰当地成块注释CSS，将相似的CSS选择符编为一组，养成一致的命名习惯和空白格式（为跨平台考虑，建议用空白字符而不是tab。）以及适当的次序。

以功能（而不是外观）为类和ID命名
假如您创建了一个 .smallblue 类，后来打算将文字改大，颜色变为红色，这个类名就不再有任何意义了。相反，您可以用更有描述性的名字如 .copyright 和 .pullquote。

组合选择符
保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、利用继承(inheritance)以及使用简写(shorthand)来减少冗余。

使用图片替换技术时要考虑亲和力
已经发现传统的FIR在屏幕阅读器，以及关闭图片显示[的浏览器]中会出问题。对此有其他解决办法，要根据具体情况，慎重使用。

网页排版CSS教学

网页排版CSS教学（一）

第一章CSS的基本认识

CSS是『Cascading Style Sheets』的简称，中文翻为「串接样式表」，也有人只翻为「样式表」。CSS用以作为网页的排版与风格设计，在所谓的「新式网页」里，CSS不容置疑是相当重要的一环。CSS是以既有的基础，用以弥补既存ＨＴＭＬ规格里的不足，也让网页的设计更为灵活。

这份教学文件就要来为您介绍CSS的应用罗！在这边并不介绍CSS的所有规格，仅就您在网页写作上较常用到，较可能用到的语法部份及应用的方法来为您作介绍。也由於现在两浏览器的相容是渐行渐远，将贴心地为您注明支援该语法的浏览器。而ＩＥ从 3.0开始便支援部份语法了，这点也会为为您注明的。

各章节的概略介绍

为了您参考与学习上的方便，在这里先为您大略地说明一下这份教学文件各章节所包含的内容吧！让您在参考时有个方向与概念。基本上，前两章著重於概念与基本认知的建立，也就是一些为您做一些札根的工作；第三章则为您补充在应用与设定上的一些其它方式或特性的说明与介绍。而第四章到第六章则著重於语法、参数与性质的介绍，也就是真正建立在样式表里面的东东。

第一章 CSS的基本认识：
就是本章啦！就介绍您一些CSS基本概念与认识。

第二章 CSS的应用方式：
为您介绍CSS的基本宣告、应用方法与特性介绍。

第三章 CSS的应用补充：
为您介绍CSS的其它宣告方式、应用与特性介绍。

第四章页面性质的CSS：
为您介绍页面性质的CSS相关语法、参数与性质。

第五章文字性质的CSS：
为您介绍文字性质的CSS相关语法、参数与性质。

第六章区块性质的CSS：
为您介绍区块性质的CSS相关语法、参数与性质。

应用上的基本认识

应用CSS并不困难，但是请您先参考这里的基本认识，对一些用语有了一点基本概念後，对於您在看後面的教学会有助益，看起来也才不会太吃力！

一、基本用语的认识：

元件(element)：亦即HTML基本语法中的标签(tag)。
属性(attribute)：用以描述标签特性的属性。
例如：
<HR WIDTH="90%">中，HR为标签，WIDTH为属性，而80%即为WIDTH属性的值。
性质(property)：用以描述元件的特性。相当於HTML基本语法中的属性。
样式(style)：拥有一组或数组的性质，用以描述元件特性。
挑选者(selector)：套用样式的元件。
例如：
H3{ COLOR : BLUE }中，H3为挑选者，COLOR为性质，BLUE为COLOR性质的值。

二、基本单位的认识：

有相对单位与绝对单位两种单位表达方式。
相对单位：

『em』：相对於字母高度的比例因子。
『en』：相对於字型大小的比例因子。
『%』：相对於长度单位（通常是目前字型的大小）的百分比例。
绝对单位：
『in』：英寸。
『cm』：公分。
『mm』：公厘。
『px』：像素（系统预设单位）。
『pc』：pica，印刷活字单位。
『pt』：像点。
相对关系：1in= 6pc= 72pt= 2.54cm= 25.4mm

三、颜色使用的认识：

颜色的表示共有五种方式。
『#RRGGBB』：
以三个00到FF的十六进位值分别表示0到255十进位值的红、绿、蓝三原色数值。
『#RGB』：
简略表示法，只用三个0到F的十六进位值分别表示红、绿、蓝三原色数值。而事实上，浏览器会自动扩展为六个十六进位的值，如『#ABC』将变为『#AABBCC』。但是，显见这样的表示法并不精确。
『rgb(R,G,B)』：
以0到255十进位值的红、绿、蓝三原色数值来表示颜色。
『rgb(R%,G%,B%)』：
以红、绿、蓝彼此相对的数值比例来表示颜色，如『rgb(60%,100%,75%)』。
『Color_Name』：
直接以颜色名称来表示颜色，共有141种标准的颜色名称。

四、ＵＲＬ表示法的认识：

CSS的ＵＲＬ表示共有五种方式，且都为合法宣告，您可以自行选用。
URL(http://yourweb/path/file_name)
URL('http://yourweb/path/file_name')
URL("http://yourweb/path/file_name")
URL( 'http://yourweb/path/file_name' )
URL( "http://yourweb/path/file_name" )
有了这些基本认识与概念後，接下来就要来为您介绍CSS的应用方法罗！

网页排版CSS教学（二）

第二章 CSS的应用方式

这章节将开始为您介绍CSS的应用。当然一开始要介绍的是如何去建立个样式表（Style Sheets），包括了声明的方式和应用在网页上的方法，最後还会为您概述一下CSS的一些特性。概略来说，CSS的声明有三种方式：

一、基本声明：最典型的CSS声明方式。

element { property: value } 用中文来表示的话，也就是
元件(标签) { 性质(属性)名称: 设定值 }
例如：
H3 { COLOR: BLUE } 即为一组声明。

二、集体声明：同时声明某个或数个元件(标签)（各元件(标签)间以逗号分隔）的一组或数组样式规则(性质)（各组规则间以分号分隔）。

元件(标签) {
性质(属性)名称1: 设定值1;
性质(属性)名称2: 设定值2;
... }
或是
元件A(标签A), 元件B(标签B), 元件C(标签C), ... {
性质(属性)名称1: 设定值1;
性质(属性)名称2: 设定值2;
... }
例如：
TD {
COLOR: BLUE;
font-size: 9pt;
}
或是
TD,P,DIV {
COLOR: BLUE;
font-size: 9pt;
}

三、分项声明：将许多样式规则分组再分别声明。

元件A(标签A) { 性质(属性)名称1: 设定值1; 性质(属性)名称2: 设定值2; }
元件A(标签A) { 性质(属性)名称3: 设定值3; 性质(属性)名称4: 设定值4; }
例如：
TD { COLOR: BLUE; font-size: 9pt }
TD { font-family: "标楷体"; line-height: 150% }
这样子的声明方式并不会互相抵触，因为所声明的性质是不同的。如果不小心对同样一个性质作了重复的声明，则只有後来声明的设定值才会发生作用。

要附带提一下的是，在您的声明中，只要您的格式正确就会被接受，而不论是大小写、空白或换行都不会对显示的结果有影响的，您可依自己习惯来编写。

CSS 的应用方法

接下来要为您介绍的是将所建立的样式表应用在网页上的四种基本方法。

一、使用STYLE属性：将STYLE属性直接加在个别的元件标签里。

<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ... }
例如：
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>
这种用法的优点是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签：将样式规则写在<STYLE>...</STYLE>标签之中。

<STYLE TYPE="text/css">

</STYLE>
例如：
<STYLE TYPE="text/css">

</STYLE>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签：将样式规则写在.css的样式档案中，再以<LINK>标签引入。

假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入

<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

四、使用@import引入：跟LINK用法很像，但必放在<STYLE>...</STYLE> 中。

<STYLE TYPE="text/css">

</STYLE>
例如：
<STYLE TYPE="text/css">

</STYLE>
要注意的是，行末的分号是绝对不可少的！切记切记！

很明显的，不管是LINK还是@import的用法都可能可以直接套用他人现有的样式表。不过，基於网路的礼仪，这种事别做的好，至少也应该知会对方一声，要先取得人家的同意才行！

而四种应用方法各有其优缺点，您可以综合地使用，并不会相互抵触。但是如果相同的性质属性遇上重复的声明的话，就要考量套用优先权的问题了！一般来讲，优先权的顺序有以下的几点原则：

网页设计者的样式设定＞使用者的样式设定＞浏览器的样式设定
STYLE属性的样式设定＞ STYLE标签样式设定＞链结进来的样式设定
後面声明的样式设定＞前面的样式设定

所谓『链结进来的样式设定』指的就是用上面提到过的LINK标签与@import引入这两种应用方式所链结进来的的样式设定。

以上就是CSS最基本的声明与应用的方法介绍，有了这些基本的认识与方法，您已经可以开始建立您的样式表！除了上面提到的基本的声明与应用的方法之外，还有其它的声明与应用的方法，将为您在下一章中再作介绍。

网页排版CSS教学（三）

第三章 CSS的应用补充

挑选者特性的应用

在讲挑选者的特性之前，要提一下的是CSS继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式，而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。

接下来就要讲挑选者特性的应用！其实这部份应该算是声明的一种方式，但是在您看过第二章的基本的声明与应用後，到这边再讲挑选者您会比较有概念点。在CSS应用或设计的时候，有几种依据元素的关系或性质来设定显示特定性质的方法，就是挑选者特性的应用，能让您在控制与应用上更加灵活。

一、前後文挑选者：依声明标签前後文关系显示特定性质的方法。

前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时，会考虑元素标签的前後关系，而去显示指定的样式声明。也就是说只要HTML原始码内的标签排列前後顺序符合时，该项声明便会发生作用了！

元素A(标签A) 元素B(标签B) 元素C(标签C) ... { 样式规则 }
要注意的是，前後文挑选者的声明跟集体声明很像，但是集体声明的元素标签间要用逗号隔开，而用前後文挑选者声明时元素标签间要用空格隔开；而这两种声明方式您可以混合使用。
元素A 元素B, 元素C 元素D 元素E, ... { 样式规则 }
这样您就可以用集体声明的方式，声明数组前後文挑选者的样式规则。

二、类别挑选者：让单一或数个标签使用同组样式规则的方法。

类别(class)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质，如下面范例所写即可。
<HTML>
<HEAD>
<STYLE>
<--
.blue { color : BLUE }
-->
</STYLE>
</HEAD>
<BODY>
...
<H1 class="blue">...</H1>
...
<P class="blue">... </P>
...
</BODY>
要注意在声明时前面的小点，CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时，也可以应用类别特性来设定。
<HTML>
<HEAD>
<STYLE>
<--
P.blue { color : BLUE }
P.red { color : RED }
-->
</STYLE>
</HEAD>
<BODY>
...
<P class="blue">...</P>
...
<P class="red">...</P>
...
</BODY>
要注意同样是在声明时的小点，CLASS名称可任取。灵活运用类别特性，可以让您的样式设定更具机动性唷！

三、ID挑选者：与类别挑选者类似，不同的是在『唯一性』。

ID特性的使用与类别特性十分雷同，但是，文件里的各个ID都是唯一的。换句话说，类别特性可以重复套用在单一或数个元素标签之上，但是ID属性在一份文件里只能出现一次。如下面范例所写即可。
<HTML>
<HEAD>
<STYLE>
<--
#blue { color : BLUE }
-->
</STYLE>
</HEAD>
<BODY>
...
<P ID="blue">...</P>
...
</BODY>
可以看到，声明的方式是利用井字号『#』。而ID的这种『唯一性』正是让javascript或 VBScript能够对元素进行控制的关键。

透过以上的介绍的挑选者特性的声明与使用，可以让您的样式设定更具机动与变化。其实您可以先熟悉上一章为您介绍的基本的声明与应用方法，再应用本章所讲的挑选者特性，一步步地去熟悉样式表的使用。

连结拟似特性的应用

还记得在HTML的基本语法，在BODY标签中可以用link、alink、vlink属性去控制可连结或已连结的字体颜色吗？现在亦可用CSS去控制这些性质，称为『拟似类别』（pseudo class）。您可以将其当作一般类别，声明其样式规则，而实际上，这些拟似类别并不用像上面讲的类别挑选者，在HTML原始码中再行设定指向的类别（CLASS）。下面介绍拟似类别的声明与应用。

一般的声明方式：拟似类别是以冒号来声明。
只要在<STYLE>...</STYLE>架构中加入下面的声明後，则页面中的连结文字就会依您设定的样式显式了！

A:link { 样式规则 }
A:active { 样式规则 }
A:visited { 样式规则 }
A:hover { 样式规则 }

A:link用以设定未参观连结的样式规则。A:active用以设定作用中连结的样式规则。A:visited用以设定已参观连结的样式规则。A: hover用以设定滑鼠移到连结之上时的样式规则。而其中hover并不被NC4所支援，其它三个特性两大浏览器都有支持。

如果您用的是IE4以上的浏览器，从本站链接您就可以知道 hover作用的妙处，以简单的样式设定就可以达成以往要写好长一串设定的相同效果。这个连结拟似类别也可以与上面说过的类别挑选者特性合并使用。

DIV 与 SPAN 的比较

虽然样式表可以套用在任何标签之上，但是 DIV和SPAN元素的使用更是大大地扩展了HTML的应用层面。DIV和SPAN这两个元素在应用上十分类似，使用时都必加上结尾标签，也就是< DIV>...</DIV>和<SPAN>...</SPAN> 。两个可以应用的属性与事件处理也很类似，都可以配合前面提过的挑选者特性来编写。两者也都不强加显示功能于页面内容之上，可以说是使用上十分广泛的元素标签。

而DIV和SPAN的不同之处在于：DIV元素定义为区块（block），在 <DIV>...</DIV>之间是一个很完整的段落区块。而SPAN元素则是定义为同轴（in-line），<SPAN>...< /SPAN>应用于于小范围内的设定。两者可以彼此混合，夹杂使用，因为彼此是相互独立的。也因此，您可以利用这两个元素，配合其它性质，灵活地调整您的网页显示的内容。
网页排版CSS教学（四）

第四章颜色背景的CSS

本章 CSS 的主要作用

在前面的章节介绍完了声明与应用的方法及一些特性之後，从这章开始，便要正式进入CSS的指令介绍了！本章有两个介绍的主题，第一个部份介绍的是颜色与背景性质的CSS，其主要的作用在于设定元素的前景颜色、背景颜色与背景图形等样式设定的性质；而第二部份为您介绍的是用于控制摆放元素位置的CSS的指令。

颜色背景的 CSS 指令

color 设定前景颜色
支持：IE3、IE4、NC4
适用：所有元素
可能值：
<color> 设定颜色，请参考第一章颜色使用的相关说明
预设值：视浏览器而定
继承性：有

一般范例：SPAN { color : BLUE }
同轴范例：<SPAN style="color:BLUE">

background-color 设定背景颜色
支持：IE4、NC4
适用：所有元素
可能值：
<color> 设定颜色，请参考第一章颜色使用的相关说明
transparent 将父元素（颜色或图案）的背景透明化
预设值：transparent
继承性：无

一般范例：BODY { background-color : BLUE }
同轴范例：<BODY style="background-color:BLUE">

background-image 设定背景图形
支持：IE4、NC4
适用：所有元素
可能值：
<url> 设定图档URL，请参考第一章URL表示的相关说明
none 不使用背景图案
预设值：transparent
继承性：无

一般范例：
BODY { background-image : URL("http://yourweb/path/file_name") }
同轴范例：
<BODY style="background-image:URL('http://yourweb/path/file_name')">

background-repeat 设定背景重复
支持：IE4、NC4
适用：所有元素
可能值：
repeat 重复背景图形填满页面
repeat-x 水平方向重复背景图形
repeat-y 垂直方向重复背景图形
no-repeat 不重复显示背景图形
预设值：repeat
继承性：无

一般范例：BODY { background-repeat : repeat-x }
同轴范例：<BODY style="background-repeat: repeat-x">

background-attachment 设定背景附著
支持：IE4、NC4
适用：所有元素
可能值：
scroll 背景图形随著卷轴卷动
fixed 背景图形随著卷轴卷动（浮水印）
预设值：scrool
继承性：无

一般范例：BODY { background-attachment : fixed }
同轴范例：<BODY style="background-attachment:fixed">

background-position 设定背景位置
支持：IE4、NC4
适用：区块元素
可能值：
<percent> X% Y% 图形上X% Y%的点对准元素的X% Y%位置
<length> X Y 将图形左上角置于元素左上角水平 X垂直 Y之处
center 背景图形置于中央
left 背景图形对左边
right 背景图形对右边
top 背景图形对顶部
bottom 背景图形对底部
预设值：0% 0%
继承性：无

一般范例：BODY { background- position : 100% 50% }
同轴范例：<BODY style="background- position:100% 50%">

background 综合设定背景性质
支持：IE3、IE4、NC4
适用：所有元素
可能值：
background-color 设定背景颜色
background-image 设定背景图形
background-repeat 设定背景重复
background-attachment 设定背景附著
background-position 设定背景位置
预设值：无
继承性：无

一般范例：
BODY { BLUE url(image/gif) repeat-x fixed center }
同轴范例：
<BODY style="BLUE url(image/gif) repeat-x fixed center">

位置摆放的 CSS 指令

float 设定浮动性质（多用于文绕图的情形）
支持：IE4、NC4
适用：区块元素或图形
可能值：
left 元素靠左，文字围绕其右
right 元素靠右，文字围绕其左
none 以预设的方法显示
预设值：none
继承性：无

一般范例：DIV { float : right }
同轴范例：<DIV style="float:right">

clear 设定清除性质（设定是否允许浮动元素之存在）
支持：IE4
适用：区块元素或图形
可能值：
both 若两边有浮动元素，则该元素移至浮动元素下方
left 若左边有浮动元素，则该元素移至浮动元素下方
right 若右边有浮动元素，则该元素移至浮动元素下方
none 以预设的方法显示
预设值：none
继承性：无

一般范例：DIV { clear : right }
同轴范例：<DIV style="clear:right">

width 设定宽度
支持：IE4、NC4
适用：区块元素或图形
可能值：
<length> 长度单位，请参考第一章基本单位的相关说明
<percentage> 百分比，以父元素宽度为基准
auto 以固定比例自动变化大小
预设值：auto
继承性：无

一般范例：DIV { width : 300pt }
同轴范例：<DIV style="width:300pt">

height 设定高度
支持：IE4、NC4
适用：区块元素或图形
可能值：
<length> 长度单位，请参考第一章基本单位的相关说明
<percentage> 百分比，以父元素宽度为基准
auto 以固定比例自动变化大小
预设值：auto
继承性：无

一般范例：DIV { height : 300pt }
同轴范例：<DIV style="height:300pt">

position 设定位置
支持：IE4、NC4
适用：区块元素
可能值：
absolute 以父元素为基准，摆设在特定位置上
relative 以相邻元素为基准，摆设在特定位置上
static 预设位置，以该元素于原始码中位置而定
预设值：absolute
继承性：无

一般范例：DIV { position : static }
同轴范例：<DIV style="position:static">

top 设定顶端位置
支持：IE4、NC4
适用：区块元素
可能值：
<length> 长度单位，请参考第一章基本单位的相关说明
<percentage> 百分比，以父元素宽度为基准
auto 以正常方式显示
预设值：auto
继承性：无

一般范例：DIV { top : 30pt }
同轴范例：<DIV style="top:30pt">

left 设定左端位置
支持：IE4、NC4
适用：区块元素
可能值：
<length> 长度单位，请参考第一章基本单位的相关说明
<percentage> 百分比，以父元素宽度为基准
auto 以正常方式显示
预设值：auto
继承性：无

一般范例：DIV { left : 30pt }
同轴范例：<DIV style="left:30pt">

clip 设定裁剪（设定某区域形状及大小，区域外通透）
支持：IE4、NC4
适用：区块元素
可能值：
rect(top,right,bottom,left) 设定矩形之上右下左长度，会自动比对对边长度
一般写法为rect(0,长度,长度,0)
不可以写为rect(0,0,长度,长度)
四个数值皆可以"auto"代替
auto 以正常方式显示
预设值：auto
继承性：无

一般范例：DIV { clip : rect(0,100px,50px,0) }
同轴范例：<DIV style="clip:rect(0,100px,50px,0)">

overflow 设定溢位处理（控制当元素内容超过该元素大小时的显示方式）
支持：IE4
适用：区块元素
可能值：
visible 元素将不会依所设订大小显示，而能看见所有内容
hidden 超过元素所设订大小之部份将被隐藏不予显示
scroll 如有必要出现卷轴可让使用者看到全部的内容
auto 以预设的方式显示
预设值：auto
继承性：无

一般范例：DIV { overflow : scroll }
同轴范例：<DIV style="overflow:scroll">

visibility 设定可视度
支持：IE4、NC4
适用：所有元素
可能值：
visible 设定该元素显示
hidden 设定该元素不显示，但仍占据空间
inherit 以父元素可视度决定
预设值：inherit
继承性：无

一般范例：DIV { visibility : hidden }
同轴范例：<DIV style="visibility:hidden">

z-index 设定Ｚ轴参数（三度空间）
支持：IE4、NC4
适用：区块元素
可能值：
<number> 十进位数值，数值大的元素会出现在数值小的元素的上方
auto 当元素位置重复时，原始码中写在後面元素会出现在写在前面元素的上方
预设值：auto
继承性：无

一般范例：DIV { z-index : 3 }
同轴范例：<DIV style="z-index:3">

网页排版CSS教学（五）

第五章文字性质的CSS

本章 CSS 的主要作用

本章要介绍的是文字相关的CSS指令。通常一个网站的内容最多的就是文字了，透过这些文字相关的CSS指令，您可以将您的网页内容排版得美美的。本章将分两个部份为您介绍，第一部份是字型性质的CSS指令，用以控制文字字型的各种样式；第二部份介绍的是文字性质的CSS指令，用以控制文字段落的外观及摆设方式。

字型性质的 CSS 指令

font-family 设定文字字型
支持：IE3、IE4
适用：所有元素
可能值：
<family-name> 字型名称
预设值：视浏览器而定
继承性：有

一般范例：SPAN { family-name : "标楷体" }
同轴范例：<SPAN style="family-name:标楷体">

font-style 设定字体样式
支持：IE3、IE4、NC4
适用：所有元素
可能值：
normal 普通字
italic 斜体字
oblique 斜体字
预设值：normal
继承性：有

一般范例：SPAN { font-style : italic }
同轴范例：<SPAN style="font-style:italic">

font-weight 设定字型份量
支持：IE3、IE4、NC4
适用：所有元素
可能值：
normal 普通字
bold 粗体字
bolder 相对于父元素稍粗
lighter 相对于父元素稍细
100,200,300,
400,500,600,
700,800,900. 数字由小到大代表笔画由细到粗
normal=400 bold=700
预设值：normal
继承性：有

一般范例：SPAN { font-weight : bolder }
同轴范例：<SPAN style="font-weight:bolder">

font-size 设定文字大小
支持：IE3、IE4、NC4
适用：所有元素
可能值：
<absolute-size> 绝对大小，可用的参数由小到大分别有七项
xx-small, x-small, small, medium, large, x-large, xx-large
<relative-size> 相对大小，可用的参数为larger, smaller两项
以父元素字型大小为基准
<lenght> 长度单位，请参考第一章基本单位的相关说明
<percentage> 百分比，以父元素字型大小为基准
预设值：medium
继承性：有

一般范例：SPAN { font-size : 12pt }
同轴范例：<SPAN style="font-size:12pt">

font-variant 设定文字转换
支持：IE3、IE4、NC4
适用：所有元素
可能值：
normal 普通字
small-caps 将小写文字转换为大写
预设值：normal
继承性：有

一般范例：SPAN { font-variant : small-caps }
同轴范例：<SPAN style="font-variant:small-caps">

font 综合设定字型性质
支持：IE3、IE4、NC4
适用：所有元素
可能值：
<font-style> 设定字体样式
<font-variant> 设定文字转换
<font-weight> 设定字型份量
<font-size/line-height> 设定文字大小与列高（请参考设定文字列高部份）
<font-family> 设定文字字型
预设值：无
继承性：有

一般范例： SPAN { font : bolder small-caps 12pt/120% Arial }
同轴范例：< SPAN style="font : bolder small-caps 12pt/120% Arial">

文字性质的 CSS 指令

line-height 设定列高
支持：IE3、IE4、NC4
适用：所有元素
可能值：
normal 普通列高，根据字体变化合理高度，视浏览器而定
<number> 以元素字型大小乘以该数即为列高
<length> 设定长度，请参考第一章基本单位的相关说明
<percentage> 百分比，相对于元素字型大小为比例
预设值：normal
继承性：有

一般范例：DIV { line-height : 120% }
同轴范例：<DIV style="line-height:120%">

text-align 设定文字对
支持：IE3、IE4、NC4
适用：区块元素
可能值：
center 对中央
right 对右边
left 对左边
justify 左右对
预设值：视浏览器而定
继承性：有

一般范例：DIV { text-align : center }
同轴范例：<DIV style="text-align:center">

vertical-align 设定垂直对
支持：IE4
适用：同轴元素
可能值：
top 对同列最高元素顶端
bottom 对同列最低元素底端
baseline 对底线
middle 对中央
sub 将元素置于下标
super 将元素置于上标
text-top 对文字顶端
text-bottom 对文字底端
<percentage> 参照元素本身列高，以父元素底线为基准作位移
预设值：baseline
继承性：有

一般范例：SPAN { vertical-align : sub }
同轴范例：<SPAN style="vertical-align:sub">

text-decoration 设定文字装饰
支持：IE3、IE4、NC4
适用：所有元素
可能值：
none 普通字
underline 文字加底线
overline 文字加顶线
line-through 文字加删除线
blink 设定文字闪烁
预设值：none
继承性：有

一般范例：SPAN { text-decoration : blink }
同轴范例：<SPAN style="text-decoration:blink">

text-transform 设定文字转换
支持：IE3、IE4、NC4
适用：所有元素
可能值：
none 普通字
capitalize 将英文单字地一个字母转换为大写
uppercase 将所有文字转换为大写
lowercase 将所有文字转换为小写
预设值：none
继承性：有

一般范例：SPAN { text-transform : uppercase }
同轴范例：<SPAN style="text-transform:uppercase">

letter-spacing 设定字母间隔
支持：IE4
适用：所有元素
可能值：
normal 不改变字母间隔，使用浏览器预设值
<length> 要额外增加的间隔长度，可为负值
预设值：normal
继承性：有

一般范例：SPAN { letter-spacing : 0.5pt }
同轴范例：<SPAN style="letter-spacing : 0.5pt">

text-indent 设定文字缩排
支持：IE3、IE4、NC4
适用：区块元素
可能值：
<length> 长度单位，请参考第一章基本单位的相关说明
<percentage> 以父元素宽度为基准的百分比值
预设值：0
继承性：有

一般范例：DIV { text-indent : 3pt }
同轴范例：<DIV style="text-indent:3pt">

网页排版CSS教学（六）

第六章区块性质的CSS

本章 CSS 的主要作用

本章介绍的是区块性质的CSS指令以及它们的应用与特性，可以设定与控制区块的位置，大小及边缘宽度等性质。本章也将分成两个部份为您介绍，第一部份要讲的是区块各部份名称与概念的介绍，对于区块有一点概念后，第二部份才再进入区块性质的CSS指令的介绍。

区块各部份名称与概念

其实我们还可以把所谓的「区块」细分成如下面图形所表示的几个部份。
由外而内为您作介绍：

MARGIN：边缘，虽然是通透的部份，但是可以藉由边缘宽度的调整来达到内容元素位置调整的目的。
BORDER：边框，就是外框的部份，经由CSS指令您可以控制边框的宽度、颜色和样式，不再死板！
PADDING：补白，也就是内容元素与框架之间的这段距离与空间，也可以利用CSS指令去控制大小。
元素：内容元素，也就是您放置于该区块内的内容，或为文字，或为图形，或为所有其它元素。

附带一提的是，所谓的区块宽度是指整个包含边缘在内的宽度，而元素宽度指的只是内容元素的宽度。有了这些对区块各部份的基本概念与认识之后，接下来就要来介绍控制区块各部份分别的的CSS指令了！

区块性质的 CSS 指令

margin-top 设定上边缘宽度 margin-right 设定右边缘宽度
margin-bottom 设定下边缘宽度 margin-left 设定左边缘宽度

支持：IE3、IE4、NC4
适用：区块元素
可能值：
<length> 长度单位，请参考第一章基本单位的相关说明
<percentage> 百分比，相对于元素宽度大小
auto 使用浏览器预设值
预设值：0
继承性：无

一般范例：DIV { margin-top : 20pt }
同轴范例：<DIV style="margin-top:20pt">

margin 综合设定边缘宽度
支持：IE3、IE4、NC4
适用：区块元素
可能值：
依序设定top,right,bottom,left的边缘宽度 <length> { 1,4 } 长度单位，请参考第一章基本单位的相关说明
<percentage> { 1,4 } 百分比，相对于元素宽度大小
auto { 1,4 } 使用浏览器预设值
预设值：无
继承性：无

一般范例：DIV { margin : 20pt 15pt 10pt 5pt }
同轴范例：<DIV style="margin:20pt 15pt 10pt 5pt">
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边缘；如果只有指定一个合法设订值，则会统一套用于四个边持；若只有指定二或三个合法设定值，则未指定的边缘会套用对边的宽度设定值。
DIV { margin: 20pt } →top=20pt;right=20pt;bottom=20pt;left=20pt
DIV { margin: 20pt 15pt } →top=20pt;right=15pt;bottom=20pt;left=15pt
DIV { margin: 20pt 15pt 10pt } →top=20pt;right=15pt;bottom=10pt;left=15pt

border-top-width 设定上边框宽度 border-right-width 设定右边框宽度
border-bottom-width设定下边框宽度 border-left-width 设定左边框宽度

支持：IE4、NC4
适用：区块元素
可能值：
thin < medium < thick thin 统一的绝对单位，因浏览器而异
medium 统一的绝对单位，因浏览器而异
thick 统一的绝对单位，因浏览器而异
<length> 长度单位，请参考第一章基本单位的相关说明
预设值：medium
继承性：无

一般范例：DIV { border-top-width : 2pt }
同轴范例：<DIV style="border-top-width:2pt">

border-width 综合设定边框宽度
支持：IE4、NC4
适用：区块元素
可能值：
依序设定top,right,bottom,left的边框宽度 thin { 1,4 } 统一的绝对单位，因浏览器而异
medium { 1,4 } 统一的绝对单位，因浏览器而异
thick { 1,4 } 统一的绝对单位，因浏览器而异
<length> { 1,4 } 长度单位，请参考第一章基本单位的相关说明
预设值：无
继承性：无

一般范例：DIV { border-width : 4pt 3pt 2pt 1pt }
同轴范例：<DIV style="border-width:4pt 3pt 2pt 1pt">
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的宽度设定值。
DIV { border-width: 2pt } →top=2pt;right=2pt;bottom=2pt;left=2pt
DIV { border-width: 2pt 3pt } →top=2pt;right=3pt;bottom=2pt;left=3pt
DIV { border-width: 2pt 3pt 4pt } →top=2pt;right=3pt;bottom=4pt;left=3pt

border-top-color 设定上边框颜色 border-right-color 设定右边框颜色
border-bottom-color 设定下边框颜色 border-left-color 设定左边框颜色

支持：IE4、NC4
适用：区块元素
可能值：
<color> 设定颜色，请参考第一章颜色使用的相关说明
预设值：color性质之值
继承性：无

一般范例：DIV { border-top-color : BLUE }
同轴范例：<DIV style="border-top-color:BLUE">

border-color 综合设定边框颜色
支持：IE4、NC4
适用：区块元素
可能值：
依序设定top,right,bottom,left的边框颜色 <color> { 1,4 } 设定颜色，请参考第一章颜色使用的相关说明
预设值：无
继承性：无

一般范例：DIV { border-color : RED GREEN BLUE YELLOW }
同轴范例：<DIV style="border-color:RED GREEN BLUE YELLOW">
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的颜色设定值；若无指定此一性质，则套用color性质之设定值。
DIV{ border-color:RED } →top=RED;right=RED;bottom=RED;left=RED
DIV{ border-color:RED GREEN } →top=RED;right=GREEN;bottom=RED;left=GREEN
DIV{ border-color: RED GREEN BLUE } →top=RED;right=GREEN;bottom=BLUE;left=GREEN

border-top-style 设定上边框样式 border-right-style 设定右边框样式
border-bottom-style 设定下边框样式 border-left-style 设定左边框样式

支持：IE4、NC4
适用：区块元素
可能值：
none 不显示边框
dotted 虚线（IE4、NC4浏览器当作实线）
dashed 短直线（IE4、NC4浏览器当作实线）
solid 实线
double 双直线
ridge 3D凸线
groove 3D凹线
outset 3D隆起（IE4不显示）
inset 3D嵌入（IE4不显示）
预设值：none
继承性：无

一般范例：DIV { border-top-style : inset }
同轴范例：<DIV style="border-top-style:inset">

border-style 综合设定边框样式
支持：IE4、NC4
适用：区块元素
可能值：
依序设定top,right,bottom,left的边框样式 none { 1,4 } 不显示边框
dotted { 1,4 } 虚线（IE4、NC4浏览器当作实线）
dashed { 1,4 } 短直线（IE4、NC4浏览器当作实线）
solid { 1,4 } 实线
double { 1,4 } 双直线
ridge { 1,4 } 3D凸线
groove { 1,4 } 3D凹线
outset { 1,4 } 3D隆起（IE4不显示）
inset { 1,4 } 3D嵌入（IE4不显示）
预设值：无
继承性：无

一般范例：DIV { border-style : ridge groove outset inset }
同轴范例：<DIV style="border-style:ridge groove outset inset">
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的样式设定值。
DIV{ border-width:outset } →top=outset;right=outset;bottom=outset;left=outset
DIV{ border-width:outset inset } →top=outset;right=inset;bottom=outset;left=inset
DIV{ border-width:outset inset ridge } →top=outset;right=inset;bottom=ridge;left=inset

border-top 综合设定上边框性质 border-right 综合设定右边框性质
border-bottom 综合设定下边框性质 border-left 综合设定左边框性质

支持：IE4、NC4
适用：区块元素
可能值： <border-width> 设定该边框宽度，请参考上面的介绍与说明
<border-style> 设定该边框样式，请参考上面的介绍与说明
<border-color> 设定该边框颜色，请参考上面的介绍与说明
预设值：无
继承性：无

一般范例：DIV { border-top : 2pt solid BLUE }
同轴范例：<DIV style="border-top:2pt solid BLUE">

border 综合设定边框性质
支持：IE4、NC4
适用：区块元素
可能值： <border-width> 设定边框宽度，请参考上面的介绍与说明
<border-style> 设定边框样式，请参考上面的介绍与说明
<border-color> 设定边框颜色，请参考上面的介绍与说明
预设值：无
继承性：无

一般范例：DIV { border : 2pt solid BLUE }
同轴范例：<DIV style="border:2pt solid BLUE">
要附带说明的是，这个指令只能指定一组设定值，也就是说，上右下左四个边框都将套用同一组的设定值，而不能作个别边框的设定值变化。

padding-top 设定上方补白宽度 padding-right 设定右方补白宽度
padding-bottom 设定下方补白宽度 padding-left 设定左方补白宽度

支持：IE4、NC4
适用：区块元素
可能值： <length> 长度单位，请参考第一章基本单位的相关说明
<percentage> 百分比，相对于元素宽度大小
预设值：0
继承性：无

一般范例：DIV { padding-top : 5pt }
同轴范例：<DIV style="padding-top:5pt">

padding 综合设定补白宽度
支持：IE4、NC4
适用：区块元素
可能值：依序设定top,right,bottom,left的补白宽度 <length> { 1,4 } 长度单位，请参考第一章基本单位的相关说明
<percentage> { 1,4 } 百分比，相对于元素宽度大小
预设值：无
继承性：无

一般范例：DIV { padding : 2pt 5pt 2pt 5pt }
同轴范例：<DIV style="padding:2pt 5pt 2pt 5pt">
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个补白；如果只有指定一个合法设订值，则会统一套用于四个补白；若只有指定二或三个合法设定值，则未指定的补白会套用对边的宽度设定值。
DIV { padding: 1pt } →top=1pt;right=1pt;bottom=1pt;left=1pt
DIV { padding: 1pt 2pt } →top=1pt;right=2pt;bottom=1pt;left=2pt
DIV { padding: 1pt 2pt 3pt } →top=1pt;right=2pt;bottom=3pt;left=2pt

网页排版CSS教学［完］

用CSS控制段落缩进

有关CSS段落缩进的语法如下：
语法: text-indent: <值>
允许值: <长度> &line; <百分比>
初始值: 0

文本缩进属性可以应用于块级元素(P，H1，等.)，以定义该元素第一行可以接受的缩进的数量。该值必须是一个长度或一个百分比。若百分比则视上级元素的宽度而定。通用的文本缩进用法是用于段的缩进:

P { text-indent: 2em } 即表示段落缩进2个字符

我们可以作如下定义,并把代码放在<head>与</head>间：

这样，整篇文档的段落的首行都会自动缩进两个字符。另外我们还可以在需要缩进的地方加上以下代码即可：

style="text-indent:2em>

用CSS控制段落缩进的好处就是只要定义一次，所以显得很方便。

CSS鼠标属性

习惯于使用 Windows 的用户对各种各样的鼠标样式一定不会陌生，当鼠标移动到不同的地方时，当鼠标需要执行不同的功能时，当系统处于不同的状态时，都会使鼠标形状发生改变。
虽然在网络上有各种各样的鼠标可供下载，图形五花八门，但是就 Windows 的默认系统来说，这些图形是固定不变的。改变鼠标的属性，简单说就是当鼠标移动到不同的元
素对象上面时，让鼠标以不同的形状、图案显示。这种样式是通过改变“cursor”属性来完成的。下面的表格把鼠标的完部属性都列出来，可供参考：

关键字的解释和图例

关键字解释
auto 鼠标按照默认的状态根据页面上的元素自行改变样式.
crosshair 精确定位“十”字。
default 默认指针
pointer手形
move 移动
e-resize 箭头朝右方
ne-resize 箭头朝右上方
nw-resize 箭头朝左上方
n-resize 箭头朝上方
se-resize 箭头朝右下方
sw-resize 箭头朝左下方
s-resize 箭头朝下方
w-resize 箭头朝左方
text 文本“I”形
wait 等待
help 帮助

在动态的页面里恰当地种用这些鼠标有时可以起到意想不到的效果。例如，有一个链接的目标为帮助文件，于是可以使用帮助形式的鼠标。还有在一些需要使用鼠标事件的页面中，如果想告诉用户哪里可以点击鼠标，那么只要在页面上特定的位置让鼠标变成手形，用户就会辨认出页面上的活动区域。

弹性设计

要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。

像素是计算机屏幕上的不可缩放的点，而一个 em 就是一个字大小的方块。由于字体大小的变化， em 代表用户喜欢的文字大小的相对单位。

采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。

也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。

为了理解弹性设计，我们必须首先来看看一个似乎与此无关的问题 - 指定文字大小的几种方式。

弹性文本

显然文字是最容易实现的弹性设计的。能够设定喜欢的文字大小是用户最常见的要求，因此不可忽视。

亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。

如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。

em 存在的问题

Em 似乎是进行文字相对大小设定时的单位，浏览器默认的文字高度是16像素，对大多数设计者来说太大了，不合他们的口味。要使用 em，设计者一般将文字的初始大小设为小于 1em。

例如：

body {
font-size: 0.8em;
}

h1 {
font-size: 2em;
}

p {
font-size: 1em;
}

看起来似乎可行，但有一个问题 - 如果你在 IE 中将“文字大小”设为“较小”或“最小”，文字就会小得难以阅读。由于 IE 如此普及， em 似乎不是可行的选择。

Jeffrey Zeldman过去曾经对此表示质疑，他认为尽管有其不利之处，以像素指定文字大小还是比用 em 好。这个结论是根据 Owen Briggs 所作的深入研究得出的。 Owen Briggs 测试了264种不同的文字缩放方法并演示了 em 之类的相对单位行不通。许多设计人员现在都用像素为单位指定文字大小，不是出于精确控制网页外观的需要，而是似乎没有更为合理的其他选择。

如此看来，要么是难看的大字体，要么无法缩放，好像无法两全。别着急，接着读下去。

另一种“大字体”后备样式

在与无法缩放的像素所带来的亲和力问题的战斗中，许多作者在他们的网页上使用了一种后备样式表的技术，可通过网页上的一个链接进行切换。

这种方法固然不错，但是如果和相对文字大小的措施（比如Wired News所提到的）一起使用，效果会更好。不能指望用户熟悉你的特有界面，用户一般对浏览器的界面更为熟悉，如果他们想看大一点的字体，更倾向于用浏览器来达到而不是用你的界面。而且他们更期望这种方法在各个网站都管用，不想每访问一个网站都改变一次。，比如Wired News

CSS 关键词

Font-size 的关键词(xx-small, medium, x-large,等等)好像就是答案。在 IE 中，当用户选择“较大”或“最大”时文字会变大，选择“较小”或“最小”时文字会变小，一直到合适的大小。与其他的弹性设计方法不同，使用关键字的好处是当对文字进行缩放时，永远不会使文字实际像素大小低于某个值，所以无论用户如何选择文字大小，都应当有良好的可读性。

在 ALA 的其他地方对关键字有更详尽的解说，这种方法的最好的示例也许就是你正在阅读的这篇文章。（在最近一次的改版之前，ALA 使用了后备的“大字体”样式切换，一个样式表使用像素指定文字大小，另一个用的是基于关键字的相对大小方法。）

百分比使得 em 可行

Em 之所以可行是因为通过设定初始文字的百分比，可以很容易避免文字过小的问题。虽然其原理并非显而易见，但的确可行。当采用这种方案时，IE 文字大小各档设置之间的间隔就不会显得生硬，设计者可以精确设置初始文字大小，使得在“较小”和“最小”时仍然得到较好的可读性。这样有使 em 有了用武之地。（甚至于 Briggs 现在也更认同 em.）

例如：

body {
font-size: 80%;
}

h1 {
font-size: 2em;
}

p {
font-size: 1em;
}

不用关键字而采用 em 的好处是你可以用 em 来指定全部布局的尺寸，它可以随着文字的大小按比例缩放。

弹性布局

对设计者来说，比弹性字体更困难的是彻底的相对布局 - 如果用 em 来设定布局的尺寸事情就容易了。

让布局具有弹性，使之随着用户改变文字大小时自动适应，这好像有些多余甚至毫无必要。但是既然你让文字可以伸缩，那么让包容文字的布局也随之伸缩也是顺理成章的事。

另外，如果用户选择了较大的字体，则周围的空间应当会随之按比例增加，保持了“设计者”选择的比例，使文章容易阅读。

这种方案的另一个好处是可以避免不希望的文字换行。如果一个窄的栏目宽度以像素来定义，当其中的文字变大时，可能会打乱整个布局。采用文字大小比例来指定栏目宽度就可避免这个问题。

关于该方案的一个例子请看 CSS Zen Garden 上的作品 Elastic Lawn。

太宽了！

将网页的初始文字大小指定为 100% 以后，在 IE 的“中等”字体下，36em 的宽度应该是 576 个像素（作为参考，ALA 的宽度为600个像素），在“最大”的字体下，36em 应当增加到 768 个像素（Windows 下 IE 6 的测试结果）。如果再大一点，在 800 像素宽的屏幕、“最大”号字体下就可能会显得太宽了。

CSS 对这个问题的解决方案是 max-width 属性，它可以指定某个元素的最大宽度。不幸的是 Internet Explorer 不支持（不知有谁想过没有？）。

另一个解决方案就是采用流动式布局，也就是说根本不指定内容区域的宽度，让文字自然流动，充满屏幕宽度（HTML Dog采用了这种方案）。许多人不接受这种方案，因为在宽屏幕下的可读性不好，但对于移动设备这样的小屏幕非常合适。

如果你准备采用弹性布局方案，在指定边界或者位图之类的由像素构成的对象时，仍然要以像素为单位，这可能会和基于文字大小关系发生冲突；但这不应成为不采用弹性布局的理由。

使图形弹性化

用相对大小来设置位图的尺寸会导致灾难性的后果。对付这个问题可以这样做 - 维持图形原有的解析度不变，将它裁剪到合适的大小。

通过更换背景图片可以就可做到。这里是一个标题元素的例子，你也可以采用其他的图片替换技术：

h1 {
font-size: 1em;
width: 10em;
height: 100px;
text-indent: -1234em;
background-image: url(whatever.jpg);
}

或者（正如hebig.org 和 v-2.org所做的那样），你可以将图片包含在一个容器，比如一个有下面样式的 DIV 中:

div {
width: 10em;
overflow: hidden;
}