第一篇：【网页设计-最新经典技术文档】网页排版CSS教学(二)

网页排版CSS教学

（二）第二章 ＣＳＳ的应用方式

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

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

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%} 这样子的声明方式并不会互相抵触，因为所声明的性质是不同的。如果不小心对同样一个性质作了重复的声明，则只有後来声明的设定值才会发生作用。

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

Ｃ Ｓ Ｓ 的 应 用 方 法

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

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

<元件(标签)STYLE=“性质(属性)1: 设定值1;性质(属性)2: 设定值2;...} 例如：

这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。

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

例如：

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

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

假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入 即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的 部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

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

例如：

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

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

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

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

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

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

第二篇：【网页设计-最新经典技术文档】网页排版CSS教学(五)

网页排版CSS教学

（五）第五章 文字性质的ＣＳＳ

本 章 Ｃ Ｓ Ｓ 的 主 要 作 用

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

字 型 性 质 的 Ｃ font-family 设定文字字型

支 持：ＩＥ３、ＩＥ４ 适 用：所有元素 可能值：

字型名称

预设值：视浏览器而定 继承性：有

一般范例：SPAN { family-name : “标楷体” } 同轴范例： font-style 设定字体样式

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： normal 普通字

italic 斜体字

oblique 斜体字

预设值：normal 继承性：有

一般范例：SPAN { font-style : italic } 同轴范例： font-weight 设定字型份量

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： normal 普通字

bold 粗体字

bolder 相对于父元素稍粗

lighter 相对于父元素稍细

Ｓ 指 令

Ｓ100,200,300, 400,500,600, 700,800,900.数字由小到大代表笔画由细到粗 normal=400 bold=700 预设值：normal 继承性：有

一般范例：SPAN { font-weight : bolder } 同轴范例： font-size 设定文字大小

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值：

绝对大小，可用的参数由小到大分别有七项 xx-small, x-small, small, medium, large, x-large, xx-large 相对大小，可用的参数为larger, smaller两项 以父元素字型大小为基准

长度单位，请参考第一章基本单位的相关说明

百分比，以父元素字型大小为基准

预设值：medium 继承性：有

一般范例：SPAN { font-size : 12pt } 同轴范例： font-variant 设定文字转换

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： normal 普通字

small-caps 将小写文字转换为大写

预设值：normal 继承性：有

一般范例：SPAN { font-variant : small-caps } 同轴范例： font 综合设定字型性质

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值：

设定字体样式

设定文字转换

设定字型份量 设定文字大小与列高（请参考设定文字列高部份）

设定文字字型

预设值：无 继承性：有

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

文 字 性 质 的 Ｃ Ｓ Ｓ 指 令

line-height 设定列高

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值：

normal 普通列高，根据字体变化合理高度，视浏览器而定

以元素字型大小乘以该数即为列高

设定长度，请参考第一章基本单位的相关说明

百分比，相对于元素字型大小为比例

预设值：normal 继承性：有

一般范例：DIV { line-height : 120% } 同轴范例：