|
ＣＳＳ是『Cascading Style Sheets』的简称，中文翻为「串接样式表」，也有人只翻为「样式表」。ＣＳＳ用以作为网页的排版与风格设计，在所谓的「新式网页」里 ，ＣＳＳ不容置疑是相当重要的一环。ＣＳＳ是以既有的基础，用以弥补既存ＨＴＭＬ 规格里的不足，也让网页的设计更为灵活。
这份教学文件就要来为您介绍ＣＳＳ的应用罗！在这边并不介绍ＣＳＳ的所有规格 ，仅就您在网页写作上较常用到，较可能用到的语法部份及应用的方法来为您作介绍。也 由於现在两浏览器的相容是渐行渐远，将贴心地为您注明支援该语法的浏览器。而ＩＥ从 3.0开始便支援部份语法了，这点也会为为您注明的。 | |
|
各 章 节 的 概 略 介 绍 |
为了您参考与学习上的方便，在这里先为您大略地说明一下这份教学文件各章节所包含的内容吧！让您在参考时有个方向与概念。基本上，前两章著重於概念与基本认知的建立，也就是一些为您做一些札根的工作；第三章则为您补充在应用与设定上的一些其它方式或特性的说明与介绍。而第四章到第六章则著重於语法、参数与性质的介绍，也 就是真正建立在样式表里面的东东。
第一章 ＣＳＳ的基本认识：
就是本章啦！就介绍您一些ＣＳＳ基本概念与认识。 第二章 ＣＳＳ的应用方式：
为您介绍ＣＳＳ的基本宣告、应用方法与特性介绍。 第三章 ＣＳＳ的应用补充：
为您介绍ＣＳＳ的其它宣告方式、应用与特性介绍。 第四章 页面性质的ＣＳＳ：
为您介绍页面性质的ＣＳＳ相关语法、参数与性质。 第五章 文字性质的ＣＳＳ：
为您介绍文字性质的ＣＳＳ相关语法、参数与性质。 第六章 区块性质的ＣＳＳ：
为您介绍区块性质的ＣＳＳ相关语法、参数与性质。 | |
|
应 用 上 的 基 本 认 识 |
应用ＣＳＳ并不困难，但是请您先参考这里的基本认识，对一些用语有了一点基本概念後，对於您在看後面的教学会有助益，看起来也才不会太吃力！
一、基本用语的认识：
元件 (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种标准的颜色名称。
四、ＵＲＬ表示法的认识：
ＣＳＳ的ＵＲＬ表示共有五 种方式，且都为合法宣告，您可以自行选用。
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" )
有了这些基本认识与概念後，接下来就要来为您介绍ＣＳＳ的应用方法罗！ | |
|
Ｃ Ｓ Ｓ 的 声 明 方 式 |
这章节将开始为您介绍ＣＳＳ的应用。当然一开始要介绍的是如何去建立个样式表 （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; ...} 例如：
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%> 这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。
二、使用STYLE标签： 将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">
<!--
样式规则表
-->
</STYLE>例如：
<STYLE TYPE="text/css">
<!--
BODY {
color: BLUE;
background: #FFFFCC;
font-size: 9pt}
TD, P {
COLOR: GREEN;
font-size: 9pt}
-->
</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">
<!--
@import url(引入的样式表的位址、路径与档名);
-->
</STYLE> 例如：
<STYLE TYPE="text/css">
<!--
@import url(http://yourweb/ example.css);
-->
</STYLE> 要注意的是，行末的分号是绝对不可少的！切记切记！
很明显的，不管是LINK还是@import的用法都可能可以 直接套用他人现有的样式表。不过，基於网路的礼仪，这种事别做的好，至少也应该知会 对方一声，要先取得人家的同意才行！
而四种应用方法各有其优缺点，您可以综合地使用，并不会相互抵触。但是如果相同的性质属性遇上重复的声明的话，就要考量套用优先权的问题了！一般来讲，优先权的顺序有以下的几点原则：
网页设计者的样式设定 ＞ 使用者的样式设定 ＞ 浏览器的样式设定
STYLE属性的样式设定 ＞ STYLE标签样式设定 ＞ 链结进来的样式设定
後面声明的样式设定 ＞ 前面的样式设定
所谓『链结进来的样式设定』指的就是用上面提到过的LINK标签与@import引入这两种应用方式所链结进来的的样式设定。
以上就是ＣＳＳ最基本的声明与应用的方法介绍，有了这些基本的认识与方法，您已经可以开始建立您的样式表！除了上面提到的基本的声明与应用的方法之外，还有其它的声明与应用的方法，将为您在下一章中再作介绍。 | |
|
挑 选 者 特 性 的 应 用 |
在讲挑选者的特性之前，要提一下的是ＣＳＳ继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式，而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。
接下来就要讲挑选者特性的应用！其实这部份应该算是声明的一种方式，但是在您看过第二章的基本的声明与应用後，到这边再讲挑选者您会比较有概念点。在ＣＳＳ应用或设计的时候，有几种依据元素的关系或性质来设定显示特定性质的方法，就是挑选者特性的应用，能让您在控制与应用上更加灵活。
一、前後文挑选者：依声明标签前後文关系显示特定性质的方法。
前後文挑选者便是当浏览器在显示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名称可任取。灵活运用类别特性，可以让您的样式设定更具机动性唷！
三、ＩＤ挑选者：与类别挑选者类似，不同的是在『唯一性』。
ＩＤ特性的使用与类别特性十分雷同，但是，文件里的各个ＩＤ都是唯一的。换句话 说，类别特性可以重复套用在单一或数个元素标签之上，但是ＩＤ属性在一份文件里只能出现一次。如下面范例所写即可。
<HTML>
<HEAD>
<STYLE>
<--
#blue { color : BLUE }
-->
</STYLE>
</HEAD>
<BODY>
...
<P ID="blue">...</P>
...
</BODY> 可以看到，声明的方式是利用井字号『#』。而ＩＤ的这种『唯一性』正是让JavaScript或 VBScript能够对元素进行控制的关键。
透过以上的介绍的挑选者特性的声明与使用，可以让您的样式设定更具机动与变化 。其实您可以先熟悉上一章为您介绍的基本的声明与应用方法，再应用本章所讲的挑选者特性，一步步地去熟悉样式表的使用。
| |
|
连 结 拟 似 特 性 的 应 用 |
还记得在HTML的基本语法，在BODY标签中可 以用link、alink、vlink属性去控制可连结或已连结的字体颜色吗？现在亦可用ＣＳＳ去控制这些性质，称为『拟似类别』（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作用的妙处，以简单的样式设定就可以达成以往要写好长一串设定的相同效果 。这个连结拟似类别也可以与上面说过的类别挑选者特性合并使用。
| |
|
Ｄ Ｉ Ｖ 与 Ｓ Ｐ Ａ Ｎ 的 比 较 |
虽然样式表可以套用在任何标签之上，但是 ＤＩＶ和ＳＰＡＮ元素的使用更是大大地扩展了HTML的应用层面。ＤＩＶ和ＳＰＡＮ这 两个元素在应用上十分类似，使用时都必加上结尾标签，也就是< DIV>...</DIV>和<SPAN>...</SPAN> 。两个可以应用的属性与事件处理也很类似，都可以配合前面提过的挑选者特性来编写。两者也都不强加显示功能于页面内容之上，可以说是使用上十分广泛的元素标签。
而ＤＩＶ和ＳＰＡＮ的不同之处在于：ＤＩＶ元素定义为区块（block），在 <DIV>...</DIV>之间是一个很完整的段落区块。 而ＳＰＡＮ元素则是定义为同轴（in-line），<SPAN>...< /SPAN>应用于于小范围内的设定。两者可以彼此混合，夹杂使用，因为彼此是相互独立的。也因此，您可以利用这两个元素，配合其它性质，灵活地调整您的网页 显示的内容。
| | 第四章 颜色背景的ＣＳＳ
太平洋网络学院
|
本 章 Ｃ Ｓ Ｓ 的 主 要 作 用 |
在前面的章节介绍完了声明与应用的方法及 一些特性之後，从这章开始，便要正式进入ＣＳＳ的指令介绍了！本章有两个介绍的主 题，第一个部份介绍的是颜色与背景性质的ＣＳＳ，其主要的作用在于设定元素的前景 颜色、背景颜色与背景图形等样式设定的性质；而第二部份为您介绍的是用于控制摆放 元素位置的ＣＳＳ的指令。
| |
|
颜 色 背 景 的 Ｃ Ｓ Ｓ 指 令 |
color 设定前景颜色
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：所有元素可能值：
| <color> |
设定颜色，请参考第一章颜色使用的相关说明 | 预设值：视浏览器而定继承性：有
一般范例：SPAN { color : BLUE }
同轴范例：<SPAN style="color:BLUE">
background-color 设定背景颜色
支 持：ＩＥ４、ＮＣ４适 用：所有元素可能值：
| <color> |
设定颜色，请参考第一章颜色使用的相关说明 |
| transparent |
将父元素（颜色或图案）的背景透明化 | 预设值：transparent继承性：无
一般范例：BODY { background-color : BLUE }
同轴范例：<BODY style="background-color:BLUE">
background-image 设定背景图形
支 持：ＩＥ４、ＮＣ４适 用：所有元素可能值：
| <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 设定背景重复
支 持：ＩＥ４、ＮＣ４适 用：所有元素可能值：
| repeat |
重复背景图形填满页面 |
| repeat-x |
水平方向重复背景图形 |
| repeat-y |
垂直方向重复背景图形 |
| no-repeat |
不重复显示背景图形 | 预设值：repeat继承性：无
一般范例：BODY { background-repeat : repeat-x }
同轴范例：<BODY style="background-repeat: repeat-x">
background-attachment 设定背景附著
支 持：ＩＥ４、ＮＣ４适 用：所有元素可能值：
| scroll |
背景图形随著卷轴卷动 |
| fixed |
背景图形随著卷轴卷动（浮水印） | 预设值：scrool继承性：无
一般范例：BODY { background-attachment : fixed }
同轴范例：<BODY style="background-attachment:fixed">
background-position 设定背景位置
支 持：ＩＥ４、ＮＣ４适 用：区块元素 可能值：
| <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 综合设定背景性质
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：所有元素 可能值：
| 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">
| |
|
位 置 摆 放 的 Ｃ Ｓ Ｓ 指 令 |
float 设定浮动性质（多用于文绕图的情形）
支 持：ＩＥ４、ＮＣ４适 用：区块元素或图形可能值：
| left |
元素靠左，文字围绕其右 |
| right |
元素靠右，文字围绕其左 |
| none |
以预设的方法显示 | 预设值：none继承性：无
一般范例：DIV { float : right } 同轴范例：<DIV style="float:right">
clear 设定清除性质（设定是否允许浮动元素之存在）
支 持：ＩＥ４适 用：区块元素或图形可能值：
| both |
若两边有浮动元素，则该元素移至浮动元素下方 |
| left |
若左边有浮动元素，则该元素移至浮动元素下方 |
| right |
若右边有浮动元素，则该元素移至浮动元素下方 |
| none |
以预设的方法显示 | 预设值：none继承性：无
一般范例：DIV { clear : right } 同轴范例：<DIV style="clear:right">
width 设定宽度
支 持：ＩＥ４、ＮＣ４适 用：区块元素或图形可能值：
| <length> |
长度单位，请参考第一章基本单位的相关说明 |
| <percentage> |
百分比，以父元素宽度为基准 |
| auto |
以固定比例自动变化大小 | 预设值：auto继承性：无
一般范例：DIV { width : 300pt } 同轴范例：<DIV style="width:300pt">
height 设定高度
支 持：ＩＥ４、ＮＣ４适 用：区块元素或图形可能值：
| <length> |
长度单位，请参考第一章基本单位的相关说明 |
| <percentage> |
百分比，以父元素宽度为基准 |
| auto |
以固定比例自动变化大小 | 预设值：auto继承性：无
一般范例：DIV { height : 300pt } 同轴范例：<DIV style="height:300pt">
position 设定位置
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：
| absolute |
以父元素为基准，摆设在特定位置上 |
| relative |
以相邻元素为基准，摆设在特定位置上 |
| static |
预设位置，以该元素于原始码中位置而定 | 预设值：absolute继承性：无
一般范例：DIV { position : static } 同轴范例：<DIV style="position:static">
top 设定顶端位置
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：
| <length> |
长度单位，请参考第一章基本单位的相关说明 |
| <percentage> |
百分比，以父元素宽度为基准 |
| auto |
以正常方式显示 | 预设值：auto继承性：无
一般范例：DIV { top : 30pt } 同轴范例：<DIV style="top:30pt">
left 设定左端位置
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：
| <length> |
长度单位，请参考第一章基本单位的相关说明 |
| <percentage> |
百分比，以父元素宽度为基准 |
| auto |
以正常方式显示 | 预设值：auto继承性：无
一般范例：DIV { left : 30pt } 同轴范例：<DIV style="left:30pt">
clip 设定裁剪（设定某区域形状及大小，区域外通透）
支 持：ＩＥ４、ＮＣ４适 用：区块元素 可能值：
| 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 设定溢位处理（控制当元素内容超过该元素大小时的显示方式）
支 持：ＩＥ４适 用：区块元素 可能值：
| visible |
元素将不会依所设订大小显示，而能看见所有内容 |
| hidden |
超过元素所设订大小之部份将被隐藏不予显示 |
| scroll |
如有必要出现卷轴可让使用者看到全部的内容 |
| auto |
以预设的方式显示 | 预设值：auto继承性：无
一般范例：DIV { overflow : scroll } 同轴范例：<DIV style="overflow:scroll">
visibility 设定可视度
支 持：ＩＥ４、ＮＣ４适 用：所有元素可能值：
| visible |
设定该元素显示 |
| hidden |
设定该元素不显示，但仍占据空间 |
| inherit |
以父元素可视度决定 | 预设值：inherit继承性：无
一般范例：DIV { visibility : hidden } 同轴范例：<DIV style="visibility:hidden">
z-index 设定Ｚ轴参数（三度空间）
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：
| <number> |
十进位数值，数值大的元素会出现在数值小的元素的上方 |
| auto |
当元素位置重复时，原始码中写在後面元素会出现在写在前面元素的上方 | 预设值：auto继承性：无
一般范例：DIV { z-index : 3 } 同轴范例：<DIV style="z-index:3"> | | 第五章 文字性质的ＣＳＳ
太平洋网络学院
|
本 章 Ｃ Ｓ Ｓ 的 主 要 作 用 |
本章要介绍的是文字相关的ＣＳＳ指令。通 常一个网站的内容最多的就是文字了，透过这些文字相关的ＣＳＳ指令，您可以将您的 网页内容排版得美美的。本章将分两个部份为您介绍，第一部份是字型性质的ＣＳＳ指 令，用以控制文字字型的各种样式；第二部份介绍的是文字性质的ＣＳＳ指令，用以控 制文字段落的外观及摆设方式。 | |
|
字 型 性 质 的 Ｃ Ｓ Ｓ 指 令 |
font-family 设定文字字型
支 持：ＩＥ３、ＩＥ４适 用：所有元素可能值：
预设值：视浏览器而定继承性：有
一般范例：SPAN { family-name : "标楷体" }
同轴范例：<SPAN style="family-name:标楷体">
font-style 设定字体样式
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：所有元素可能值：
| normal |
普通字 |
| italic |
斜体字 |
| oblique |
斜体字 | 预设值：normal继承性：有
一般范例：SPAN { font-style : italic }
同轴范例：<SPAN style="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 }
同轴范例：<SPAN style="font-weight:bolder">
font-size 设定文字大小
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：所有元素可能值：
| <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 设定文字转换
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：所有元素可能值：
| normal |
普通字 |
| small-caps |
将小写文字转换为大写 | 预设值：normal继承性：有
一般范例：SPAN { font-variant : small-caps }
同轴范例：<SPAN style="font-variant:small-caps">
font 综合设定字型性质
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：所有元素可能值：
| <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"> | |
|
文 字 性 质 的 Ｃ Ｓ Ｓ 指 令 |
line-height 设定列高
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：所有元素可能值：
| normal |
普通列高，根据字体变化合理高度，视浏览器而定 |
| <number> |
以元素字型大小乘以该数即为列高 |
| <length> |
设定长度，请参考第一章基本单位的相关说明 |
| <percentage> |
百分比，相对于元素字型大小为比例 | 预设值：normal继承性：有
一般范例：DIV { line-height : 120% } 同轴范例：<DIV style="line-height:120%">
text-align 设定文字对
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：区块元素可能值：
| center |
对 中央 |
| right |
对 右边 |
| left |
对 左边 |
| justify |
左右对 | 预设值：视浏览器而定继承性：有
一般范例：DIV { text-align : center } 同轴范例：<DIV style="text-align:center">
vertical-align 设定垂直对
支 持：ＩＥ４适 用：同轴元素可能值：
| top |
对 同列最高元素顶端 |
| bottom |
对 同列最低元素底端 |
| baseline |
对 底线 |
| middle |
对 中央 |
| sub |
将元素置于下标 |
| super |
将元素置于上标 |
| text-top |
对 文字顶端 |
| text-bottom |
对 文字底端 |
| <percentage> |
参照元素本身列高，以父元素底线为基准作位移 | 预设值：baseline继承性：有
一般范例：SPAN { vertical-align : sub }
同轴范例：<SPAN style="vertical-align:sub">
text-decoration 设定文字装饰
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：所有元素可能值：
| none |
普通字 |
| underline |
文字加底线 |
| overline |
文字加顶线 |
| line-through |
文字加删除线 |
| blink |
设定文字闪烁 | 预设值：none继承性：有
一般范例：SPAN { text-decoration : blink }
同轴范例：<SPAN style="text-decoration:blink">
text-transform 设定文字转换
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：所有元素可能值：
| none |
普通字 |
| capitalize |
将英文单字地一个字母转换为大写 |
| uppercase |
将所有文字转换为大写 |
| lowercase |
将所有文字转换为小写 | 预设值：none继承性：有
一般范例：SPAN { text-transform : uppercase }
同轴范例：<SPAN style="text-transform:uppercase">
letter-spacing 设定字母间隔
支 持：ＩＥ４适 用：所有元素可能值：
| normal |
不改变字母间隔，使用浏览器预设值 |
| <length> |
要额外增加的间隔长度，可为负值 | 预设值：normal继承性：有
一般范例：SPAN { letter-spacing : 0.5pt }
同轴范例：<SPAN style="letter-spacing : 0.5pt">
text-indent 设定文字缩排
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：区块元素可能值：
| <length> |
长度单位，请参考第一章基本单位的相关说明 |
| <percentage> |
以父元素宽度为基准的百分比值 | 预设值：0继承性：有
一般范例：DIV { text-indent : 3pt } 同轴范例：<DIV style="text-indent:3pt"> | |
|
|
|
区 块 性 质 的 Ｃ Ｓ Ｓ 指 令 |
| margin-top 设定上边缘宽度 |
margin-right 设定右边缘宽度 |
| margin-bottom 设定下边缘宽度 |
margin-left 设定左边缘宽度 |
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：区块元素可能值：
| <length> |
长度单位，请参考第一章基本单位的相关说明 |
| <percentage> |
百分比，相对于元素宽度大小 |
| auto |
使用浏览器预设值 | 预设值：0继承性：无
一般范例：DIV { margin-top : 20pt } 同轴范例：<DIV style="margin-top:20pt">
margin 综合设定边缘宽度
支 持：ＩＥ３、ＩＥ４、ＮＣ４适 用：区块元素可能值：依序设定top,right,bottom,left的边缘宽度
| <length> |
长度单位，请参考第一章基本单位的相关说明 |
| <percentage> |
百分比，相对于元素宽度大小 |
| auto |
使用浏览器预设值 | 预设值：无继承性：无
一般范例：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 设定左边框宽度 |
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：thin < medium < thick
| thin |
统一的绝对单位，因浏览器而异 |
| medium |
统一的绝对单位，因浏览器而异 |
| thick |
统一的绝对单位，因浏览器而异 |
| <length> |
长度单位，请参考第一章基本单位的相关说明 | 预设值：medium继承性：无
一般范例：DIV { border-top-width : 2pt } 同轴范例：<DIV style="border-top-width:2pt">
border-width 综合设定边框宽度
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：依序设定top,right,bottom,left的边框宽度
| thin |
统一的绝对单位，因浏览器而异 |
| medium |
统一的绝对单位，因浏览器而异 |
| thick |
统一的绝对单位，因浏览器而异 |
| <length> |
长度单位，请参考第一章基本单位的相关说明 | 预设值：无继承性：无
一般范例：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 设定左边框颜色 |
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：
| <color> |
设定颜色，请参考第一章颜色使用的相关说明 | 预设值：color性质之值继承性：无
一般范例：DIV { border-top-color : BLUE } 同轴范例：<DIV style="border-top-color:BLUE">
border-color 综合设定边框颜色
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：依序设定top,right,bottom,left的边框颜色
| <color> |
设定颜色，请参考第一章颜色使用的相关说明 | 预设值：无继承性：无
一般范例：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 设定左边框样式 |
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：
| none |
不显示边框 |
| dotted |
虚线（ＩＥ４、ＮＣ４浏览器当作实线） |
| dashed |
短直线（ＩＥ４、ＮＣ４浏览器当作实线） |
| solid |
实线 |
| double |
双直线 |
| ridge |
３Ｄ凸线 |
| groove |
３Ｄ凹线 |
| outset |
３Ｄ隆起（ＩＥ４不显示） |
| inset |
３Ｄ嵌入（ＩＥ４不显示） | 预设值：none继承性：无
一般范例：DIV { border-top-style : inset } 同轴范例：<DIV style="border-top-style:inset">
border-style 综合设定边框样式
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：依序设定top,right,bottom,left的边框样式
| none |
不显示边框 |
| dotted |
虚线（ＩＥ４、ＮＣ４浏览器当作实线） |
| dashed |
短直线（ＩＥ４、ＮＣ４浏览器当作实线） |
| solid |
实线 |
| double |
双直线 |
| ridge |
３Ｄ凸线 |
| groove |
３Ｄ凹线 |
| outset |
３Ｄ隆起（ＩＥ４不显示） |
| inset |
３Ｄ嵌入（ＩＥ４不显示） | 预设值：无继承性：无
一般范例：DIV { border-style : ridge groove outset inset } 同轴范例：<DIV style="border-style:ridge groove outset inset"> 要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则 未指定的边框会套用对边的样式设定值。
| DIV |
→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 综合设定左边框性质 |
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：
| <border-width> |
设定该边框宽度，请参考上面的介绍与说明 |
| <border-style> |
设定该边框样式，请参考上面的介绍与说明 |
| <border-color> |
设定该边框颜色，请参考上面的介绍与说明 | 预设值：无继承性：无
一般范例：DIV { border-top : 2pt solid BLUE } 同轴范例：<DIV style="border-top:2pt solid BLUE">
border 综合设定边框性质
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：
| <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 设定左方补白宽度 |
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：
| <length> |
长度单位，请参考第一章基本单位的相关说明 |
| <percentage> |
百分比，相对于元素宽度大小 | 预设值：0继承性：无
一般范例：DIV { padding-top : 5pt } 同轴范例：<DIV style="padding-top:5pt">
padding 综合设定补白宽度
支 持：ＩＥ４、ＮＣ４适 用：区块元素可能值：依序设定top,right,bottom,left的补白宽度
| <length> |
长度单位，请参考第一章基本单位的相关说明 |
| <percentage> |
百分比，相对于元素宽度大小 | 预设值：无继承性：无
一般范例：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 | | |
| |
