排版技术教学大纲（精选6篇）
排版技术教学大纲 第1篇
网页排版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
百分比，以父元素字型大小为基准
预设值：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% } 同轴范例： text-align 设定文字对
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
center 对 中央
right 对 右边
left 对 左边
justify 左右对
预设值：视浏览器而定 继承性：有
一般范例：DIV { text-align : center } 同轴范例： vertical-align 设定垂直对
支 持：ＩＥ４ 适 用：同轴元素 可能值：
top 对 同列最高元素顶端
bottom 对 同列最低元素底端
baseline 对 底线 middle 对 中央
sub 将元素置于下标
super 将元素置于上标
text-top 对 文字顶端
text-bottom 对 文字底端
参照元素本身列高，以父元素底线为基准作位移
预设值：baseline 继承性：有
一般范例：SPAN { vertical-align : sub } 同轴范例： text-decoration 设定文字装饰
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： none 普通字
underline 文字加底线
overline 文字加顶线
line-through 文字加删除线
blink 设定文字闪烁
预设值：none 继承性：有
一般范例：SPAN { text-decoration : blink } 同轴范例： text-transform 设定文字转换
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： none 普通字
capitalize 将英文单字地一个字母转换为大写
uppercase 将所有文字转换为大写
lowercase 将所有文字转换为小写
预设值：none 继承性：有
一般范例：SPAN { text-transform : uppercase } 同轴范例： letter-spacing 设定字母间隔
支 持：ＩＥ４ 适 用：所有元素 可能值： normal 不改变字母间隔，使用浏览器预设值
预设值：normal 继承性：有
一般范例：SPAN { letter-spacing : 0.5pt } 同轴范例： text-indent 设定文字缩排
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
以父元素宽Ｑ291911320度为基准的百分比值
预设值：0 继承性：有
一般范例：DIV { text-indent : 3pt } 同轴范例：
排版技术教学大纲 第2篇
（三）第三章 ＣＳＳ的应用补充 挑 选 者 特 性 的 应 用
在讲挑选者的特性之前，要提一下的是ＣＳＳ继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式，而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。
接下来就要讲挑选者特性的应用！其实这部份应该算是声明的一种方式，但是在您看过第二章的基本的声明与应用後，到这边再讲挑选者您会比较有概念点。在ＣＳＳ应用或设计的时候，有几种依据元素的关系或性质来设定显示特定性质的方法，就是挑选者特性的应用，能让您在控制与应用上更加灵活。
一、前後文挑选者：依声明标签前後文关系显示特定性质的方法。
前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时，会考虑元素标签的前後关系，而去显示指定的样式声明。也就是说只要HTML原始码内的标签排列前後顺序符合时，该项声明便会发生作用了！
元素A(标签A)元素B(标签B)元素C(标签C)...{样式规则} 要注意的是，前後文挑选者的声明跟集体声明很像，但是集体声明的元素标签间要用逗号隔开，而用前後文挑选者声明时元素标签间要用空格隔开；而这两种声明方式您可以混合使用。
元素A 元素B, 元素C 元素D 元素E,...{样式规则} 这样您就可以用集体声明的方式，声明数组前後文挑选者的样式规则。
二、类别挑选者：让单一或数个标签使用同组样式规则的方法。
类别(class)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质，如下面范例所写即可。
.blue { color : BLUE }-->
...
...
...
...
... 要注意在声明时前面的小点，CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时，也可以应用类别特性来设定。