样式表教程.doc

CSS样式表基础知识第一章的基本认识 关於的概论 是Cascading Style Sheets的简称，中文翻为串接样式表，也有人只翻为样式表。用以作为网页的排版与风格设计，在所谓的新式网页里 ，不容置疑是相当重要的一环。是以既有的基础，用以弥补既存 规格里的不足，也让网页的设计更为灵活。 各章节的概略介绍第一章的基本认识：介绍一些基本概念与认识。第二章的应用方式：介绍的基本宣告、应用方法与特性介绍。第三章的应用补充：介绍的其它宣告方式、应用与特性介绍。第四章页面性质的：介绍页面性质的相关语法、参数与性质。第五章文字性质的：介绍文字性质的相关语法、参数与性质。第六章区块性质的：介绍区块性质的相关语法、参数与性质。 一、基本用语的认识： 元件(element)：亦即HTML基本语法中的标签(tag)。 属性(attribute)：用以描述标签特性的属性。 例如： 中，HR为标签，WIDTH为属性，而80%即为WIDTH属性的值。 性质(property)：用以描述元件的特性。相当於HTML基本 语法中的属性。 样式(style)：拥有一组或数组的性质，用以描述元件特性。 挑选者(selector)：套用样式的元件。 例如： H3 COLOR : BLUE 中，H3为挑选者，COLOR为性质，BLUE为COLOR性质的值。 二、基本单位的认识： 有相对单位与绝对单位两种单位 表达方式。 相对单位： em：相对於字母高度的比例因子。 en：相对於字型大小的比例因子。 %：相对於长度单位（通常是目前字型的大小）的百分比例。 绝对单位： in：英寸。 cm：公分。 mm：公厘。 px：像素（系统预设单位）。 pc：pica，印刷活字单位。 pt：像点。三、颜色使用的认识： 颜色的表示共有三种方式。 #RRGGBB： 以三个00到FF的十六进位值分别表示0到255十进位值的红、绿、蓝三原色数值。 #RGB： 简略表示法，只用三个0到F的十六进位值分别表示红、绿、蓝三原色数值。而事实上，浏览器会自动扩展为六个十六进位的值，如#ABC将变为#AABBCC。但是，显见这样的 表示法并不精确。Color_Name： 直接以颜色名称来表示颜色。 四、表示法的认识： 的表示共有五 种方式，且都为合法宣告，您可以自行选用。 URL( ) URL() URL() URL( ) URL( ) 第二章的应用方式 这章节将开始为您介绍的应用。当然一开始要介绍的是如何去建立个样式表 （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标签： 将样式规则写在.标签之中。 例如： 通常是将整个的 .结构写在网页的 部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。 三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以标签引入。 假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入 即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的 部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。 四、使用import引入： 跟LINK用法很像，但必放在. 中。 例如： 要注意的是，行末的分号是绝对不可少的！切记切记！很明显的，不管是LINK还是import的用法都可能可以直接套用他人现有的样式表。 而四种应用方法各有其优缺点，您可以综合地使用，并不会相互抵触。但是如果相同的性质属性遇上重复的声明的话，就要考量套用优先权的问题了！一般来讲，优先权的顺序有以下的几点原则： 网页设计者的样式设定 使用者的样式设定 浏览器的样式设定STYLE属性的样式设定 STYLE标签样式设定 链结进来的样式设定後面声明的样式设定 前面的样式设定所谓链结进来的样式设定指的就是用上面提到过的LINK标签与import引入这两种应用方式所链结进来的的样式设定。第三章的应用补充 挑选者特性的应用 在讲挑选者的特性之前，要提一下的是继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式，而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。接下来就要讲挑选者特性的应用！其实这部份应该算是声明的一种方式，但是在您看过第二章的基本的声明与应用後，到这边再讲挑选者您会比较有概念点。在应用或设计的时候，有几种依据元素的关系或性质来设定显示特定性质的方法，就是挑选者特性的应用，能让您在控制与应用上更加灵活。 一、前後文挑选者：依声明标签前後文关系显示特定性质的方法。 前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时，会考虑元素标签的前後关系，而去显示指定的样式声明。也就是说只要HTML原始码内的标签排列前後顺序符合时，该项声明便会发生作用了！ 元素A(标签A) 元素B(标签B) 元素C(标签C) . 样式规则 要注意的是，前後文挑选者的声明跟集体声明很像，但是集体声明的元素标签间要用逗号隔开，而用前後文挑选者声明时元素标签间要用空格隔开；而这两种声明方式您可以混合使用。 元素A 元素B, 元素C 元素D 元素E, . 样式规则 这样您就可以用集体声明的方式，声明数组前後文挑选者的样式规则。 二、类别挑选者：让单一或数个标签使用同组样式规则的方法。 类别(class)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质，如下面范例所写即可。 . . . . . 要注意在声明时前面的小点，CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时，也可以应用类别特性来设定。 . . . . . 要注意同样是在声明时的小点，CLASS名称可任取。灵活运用类别特性，可以让您的样式设定更具机动性唷！ 三、挑选者：与类别挑选者类似，不同的是在唯一性。 特性的使用与类别特性十分雷同，但是，文件里的各个都是唯一的。换句话说，类别特性可以重复套用在单一或数个元素标签之上，但是属性在一份文件里只能出现一次。如下面范例所写即可。 . . . 可以看到，声明的方式是利用井字号#。而的这种唯一性正是让JavaScript或 VBScript能够对元素进行控制的关键。透过以上的介绍的挑选者特性的声明与使用，可以让您的样式设定更具机动与变化。其实您可以先熟悉上一章为您介绍的基本的声明与应用方法，再应用本章所讲的挑选者特性，一步步地去熟悉样式表的使用。连结拟似特性的应用还记得在HTML的基本语法，在BODY标签中可以用link、alink、vlink属性去控制可连结或已连结的字体颜色吗？现在亦可用去控制这些性质，称为拟似类别（pseudo class）。您可以将其当作一般类别，声明其样式规则，而实际上，这些拟似类别并不用像上面讲的类别挑选者，在HTML原始码中再行设定指向的类别（CLASS）。下面介绍拟似类别的声明与应用。 一般的声明方式：拟似类别是以冒号来声明。 只要在.架构中加入下面的声明後，则页面中的连结文字就会依您设定的样式显式了！ A:link 样式规则 A:link用以设定未参观连结的样式规则。 A:active 样式规则 A:active用以设定作用中连结的样式规则。 A:visited 样式规则 A:visited用以设定已参观连结的样式规则。 A:hover 样式规则 A:hover用以设定滑鼠移到连结之上时的样式规则。其中hover并不被NC4所支援，其它三个特性两大浏览器都有支持。如果您用的是IE4以上的浏览器，从本站链接您就可以知道 hover作用的妙处，以简单的样式设定就可以达成以往要写好长一串设定的相同效果 。这个连结拟似类别也可以与上面说过的类别挑选者特性合并使用。和的区别虽然样式表可以套用在任何标签之上，但是 和元素的使用更是大大地扩展了HTML的应用层面。和这 两个元素在应用上十分类似，使用时都必加上结尾标签，也就是.和. 。两个可以应用的属性与事件处理也很类似，都可以配合前面提过的挑选者特性来编写。两者也都不强加显示功能于页面内容之上，可以说是使用上十分广泛的元素标签。而和的不同之处在于：元素定义为区块（block），在 .之间是一个很完整的段落区块。 而元素则是定义为同轴（in-line），.应用于于小范围内的设定。两者可以彼此混合，夹杂使用，因为彼此是相互独立的。也因此，您可以利用这两个元素，配合其它性质，灵活地调整您的网页 显示的内容。第四章颜色背景的 本章的主要作用 在前面的章节介绍完了声明与应用的方法及一些特性之後，从这章开始，便要正式进入的指令介绍了！本章有两个介绍的主题，第一个部份介绍的是颜色与背景性质的，其主要的作用在于设定元素的前景颜色、背景颜色与背景图形等样式设定的性质；而第二部份为您介绍的是用于控制摆放元素位置的的指令。颜色背景的指令 color设定前景颜色 支持：、适用：所有元素可能值： 设定颜色，请参考第一章颜色使用的相关说明预设值：视浏览器而定继承性：有一般范例：SPAN color : BLUE 同轴范例：background-color设定背景颜色 支持：、适用：所有元素可能值： 设定颜色，请参考第一章颜色使用的相关说明transparent将父元素（颜色或图案）的背景透明化预设值：transparent继承性：无一般范例：BODY background-color : BLUE 同轴范例：background-image设定背景图形 支持：、适用：所有元素可能值： 设定图档URL，请参考第一章URL表示的相关说明none不使用背景图案预设值：transparent继承性：无一般范例：BODY background-image : URL(http:/yourweb/path/file_name) 同轴范例： background-repeat设定背景重复 支持：、适用：所有元素可能值： repeat重复背景图形填满页面repeat-x水平方向重复背景图形repeat-y垂直方向重复背景图形no-repeat不重复显示背景图形预设值：repeat继承性：无一般范例：BODY background-repeat : repeat-x 同轴范例：background-attachment设定背景附著 支持：、适用：所有元素可能值： scroll背景图形随著卷轴卷动fixed背景图形随著卷轴卷动（浮水印）预设值：scrool继承性：无一般范例：BODY background-attachment : fixed 同轴范例：background-position设定背景位置 支持：、适用：区块元素 可能值： X% Y%图形上X% Y%的点对准元素的X% Y%位置 X Y将图形左上角置于元素左上角水平 X垂直 Y之处center背景图形置于中央left背景图形对左边right背景图形对右边top背景图形对顶部bottom背景图形对底部预设值：0% 0%继承性：无一般范例：BODY background- position : 100% 50% 同轴范例：background综合设定背景性质 支持：、适用：所有元素 可能值： background-color设定背景颜色background-image设定背景图形background-repeat设定背景重复background-attachment设定背景附著background-position设定背景位置预设值：无继承性：无一般范例：BODY BLUE url(image/gif) repeat-x fixed center 同轴范例： 位置摆放的指令float设定浮动性质（多用于文绕图的情形） 支持：、适用：区块元素或图形可能值： left元素靠左，文字围绕其右right元素靠右，文字围绕其左none以预设的方法显示预设值：none继承性：无一般范例：DIV float : right 同轴范例：clear设定清除性质（设定是否允许浮动元素之存在） 支持：适用：区块元素或图形可能值： both若两边有浮动元素，则该元素移至浮动元素下方left若左边有浮动元素，则该元素移至浮动元素下方right若右边有浮动元素，则该元素移至浮动元素下方none以预设的方法显示预设值：none继承性：无一般范例：DIV clear : right 同轴范例：width设定宽度 支持：、适用：区块元素或图形可能值： 长度单位，请参考第一章基本单位的相关说明百分比，以父元素宽度为基准auto以固定比例自动变化大小预设值：auto继承性：无一般范例：DIV width : 300pt 同轴范例：height设定高度 支持：、适用：区块元素或图形可能值： 长度单位，请参考第一章基本单位的相关说明百分比，以父元素宽度为基准auto以固定比例自动变化大小预设值：auto继承性：无一般范例：DIV height : 300pt 同轴范例：position设定位置 支持：、适用：区块元素可能值： absolute以父元素为基准，摆设在特定位置上relative以相邻元素为基准，摆设在特定位置上static预设位置，以该元素于原始码中位置而定预设值：absolute继承性：无一般范例：DIV position : static 同轴范例：top设定顶端位置 支持：、适用：区块元素可能值： 长度单位，请参考第一章基本单位的相关说明百分比，以父元素宽度为基准auto以正常方式显示预设值：auto继承性：无一般范例：DIV top : 30pt 同轴范例：left设定左端位置 支持：、适用：区块元素可能值： 长度单位，请参考第一章基本单位的相关说明百分比，以父元素宽度为基准auto以正常方式显示预设值：auto继承性：无一般范例：DIV left : 30pt 同轴范例：clip设定裁剪（设定某区域形状及大小，区域外通透） 支持：、适用：区块元素 可能值： rect(top,right,bottom,left)设定矩形之上右下左长度，会自动比对对边长度一般 写法为rect(0,长度,长度,0)不可以写为rect(0,0,长度,长度)四个数值皆可以auto代替auto以正常方式显示预设值：auto继承性：无一般范例：DIV clip : rect(0,100px,50px,0) 同轴范例：overflow设定溢位处理（控制当元素内容超过该元素大小时的显示方式） 支持：适用：区块元素 可能值： visible元素将不会依所设订大小显示，而能看见所有内容hidden超过元素所设订大小之部份将被隐藏不予显示scroll如有必要出现卷轴可让使用者看到全部的内容auto以预设的方式显示预设值：auto继承性：无一般范例：DIV overflow : scroll 同轴范例：visibility设定可视度 支持：、适用：所有元素可能值： visible设定该元素显示hidden设定该元素不显示，但仍占据空间inherit以父元素可视度决定预设值：inherit继承性：无一般范例：DIV visibility : hidden 同轴范例：z-index设定轴参数（三度空间） 支持：、适用：区块元素可能值： 十进位数值，数值大的元素会出现在数值小的元素的上方auto当元素位置重复时，原始码中写在後面元素会出现在写在前面元素的上方预设值：auto继承性：无一般范例：DIV z-index : 3 同轴范例： 第五章文字性质的 本章的主要作用本章要介绍的是文字相关的指令。通 常一个网站的内容最多的就是文字了，透过这些文字相关的指令，您可以将您的网页内容排版得美美的。本章将分两个部份为您介绍，第一部份是字型性质的指 令，用以控制文字字型的各种样式；第二部份介绍的是文字性质的指令，用以控制文字段落的外观及摆设方式。字型性质的指令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=400bold=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 同轴范例：文字性质的指令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设定文字缩排 支持：、适用：区块元素可能值： 长度单位，请参考第一章基本单位的相关说明以父元素宽度为基准的百分比值预设值：0继承性：有一般范例：DIV text-indent : 3pt 同轴范例： 第六章区块性质的 本章的主要作用本章介绍的是区块性质的指令以及它 们的应用与特性，可以设定与控制区块的位置，大小及边缘宽度等性质。本章也将分成 两个部份为您介绍，第一部份要讲的是区块各部份名称与概念的介绍，对于区块有一点 概念后，第二部份才再进入区块性质的指令的介绍。区块各部份名称与概念其实我们还可以把所谓的区块细分成如 下面图形所表示的几个部份。 由外而内为您作介绍：MARGIN： 边缘，虽然是通透的部份，但是可以藉由边缘宽度的调整来达到内容元素位置调整的目的。BORDER： 边框，就是外框的部份，经由指令您可以控制边框的宽度、颜色和样式，不再死板！PADDING： 补白，也就是内容元素与框架之间的这段距离与空间，也可以利用指令去控制大小。元素： 内容元素，也就是您放置于该区块内的内容，或为文字，或为图形，或为所有其它元素。附带一提的是，所谓的区块宽度是指整个包含边缘在内的宽度，而元素宽度指的只是内容元素的宽度。有了这些对区块各部份的基本概念与认识之后，接下来就要来介绍控制区块各部份分别的的指令了！区块性质的指令margin-top设定上边缘宽度margin-right 设定右边缘宽度margin-bottom设定下边缘宽度margin-left设定左边缘宽度支持：、适用：区块元素可能值： 长度单位，请参考第一章基本单位的相关说明百分比，相对于元素宽度大小auto使用浏览器预设值预设值：0继承性：无一般范例：DIV margin-top : 20pt 同轴范例：margin综合设定边缘宽度 支持：、适用：区块元素可能值：依序设定top,right,bottom,left的边缘宽度 1,4长度单位，请参考第一章基本单位的相关说明 1,4百分比，相对于元素宽度大小auto 1,4使用浏览器预设值预设值：无继承性：无一般范例：DIV margin : 20pt 15pt 10pt 5pt 同轴范例：要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边缘；如果只有指定一个合法设订值，则会统一套用于四个边持；若只有指定二或三个合法设定值，则未指定的边缘会套用对边的宽度设定值。 DIV margin: 20pt top=20pt;right=20pt;bottom=20pt;left=20ptDIV margin: 20pt 15pt top=20pt;right=15pt;bottom=20pt;left=15ptDIV margin: 20pt 15pt 10pt top=20pt;right=15pt;bottom=10pt;left=15ptborder-top-width设定上边框宽度border-right-width设定右边框宽度border-bottom-width设定下边框宽度border-left-width设定左边框宽度支持：、适用：区块元素可能值：thin medium thick thin统一的绝对单位，因浏览器而异medium统一的绝对单位，因浏览器而异thick统一的绝对单位，因浏览器而异长度单位，请参考第一章基本单位的相关说明预设值：medium继承性：无一般范例：DIV border-top-width : 2pt 同轴范例：border-width综合设定边框宽度 支持：、适用：区块元素可能值：依序设定top,right,bottom,left的边框宽度 thin 1,4统一的绝对单位，因浏览器而异medium 1,4统一的绝对单位，因浏览器而异thick 1,4统一的绝对单位，因浏览器而异 1,4长度单位，请参考第一章基本单位的相关说明预设值：无继承性：无一般范例：DIV border-width : 4pt 3pt 2pt 1pt 同轴范例：要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则 未指定的边框会套用对边的宽度设定值。 DIV border-width: 2pt top=2pt;right=2pt;bottom=2pt;left=2ptDIV border-width: 2pt 3pt top=2pt;right=3pt;bottom=2pt;left=3ptDIV border-width: 2pt 3pt 4pt top=2pt;right=3pt;bottom=4pt;left=3ptborder-top-color设定上边框颜色border-right-color设定右边框颜色border-bottom-color 设定下边框颜色border-left-color 设定左边框颜色支持：、适用：区块元素可能值： 设定颜色，请参考第一章颜色使用的相关说明预设值：color性质之值继承性：无一般范例：DIV border-top-color : BLUE 同轴范例：border-color综合设定边框颜色 支持：、适用：区块元素可能值：依序设定top,right,bottom,left的边框颜色 1,4设定颜色，请参考第一章颜色使用的相关说明预设值：无继承性：无一般范例：DIV border-color : RED GREEN BLUE YELLOW 同轴范例：要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则 未指定的边框会套用对