CSS基础知识详解.docx
《CSS基础知识详解.docx》由会员分享，可在线阅读，更多相关《CSS基础知识详解.docx（21页珍藏版）》请在冰豆网上搜索。
CSS基础知识详解
---CSS基础知识详解---
第一章 ＣＳＳ的基本认识
关於ＣＳＳ的概论
ＣＳＳ是『CascadingStyleSheets』的简称，中文翻为「串接样式表」，也有人只翻为「样式表」。
ＣＳＳ用以作为网页的排版与风格设计，在所谓的「新式网页」里，ＣＳＳ不容置疑是相当重要的一环。
ＣＳＳ是以既有的基础，用以弥补既存ＨＴＭＬ规格里的不足，也让网页的设计更为灵活。
这份教学文件就要来为您介绍ＣＳＳ的应用罗！
在这边并不介绍ＣＳＳ的所有规格，仅就您在网页写作上较常用到，较可能用到的语法部份及应用的方法来为您作介绍。
也由於现在两浏览器的相容是渐行渐远，将贴心地为您注明支援该语法的浏览器。
而ＩＥ从3.0开始便支援部份语法了，这点也会为为您注明的。
各章节的概略介绍
为了您参考与学习上的方便，在这里先为您大略地说明一下这份教学文件各章节所包含的内容吧！
让您在参考时有个方向与概念。
基本上，前两章著重於概念与基本认知的建立，也就是一些为您做一些札根的工作；第三章则为您补充在应用与设定上的一些其它方式或特性的说明与介绍。
而第四章到第六章则著重於语法、参数与性质的介绍，也就是真正建立在样式表里面的东东。
第一章 ＣＳＳ的基本认识：
就是本章啦！
就介绍您一些ＣＳＳ基本概念与认识。
第二章 ＣＳＳ的应用方式：
为您介绍ＣＳＳ的基本宣告、应用方法与特性介绍。
第三章 ＣＳＳ的应用补充：
为您介绍ＣＳＳ的其它宣告方式、应用与特性介绍。
第四章 页面性质的ＣＳＳ：
为您介绍页面性质的ＣＳＳ相关语法、参数与性质。
第五章 文字性质的ＣＳＳ：
为您介绍文字性质的ＣＳＳ相关语法、参数与性质。
第六章 区块性质的ＣＳＳ：
为您介绍区块性质的ＣＳＳ相关语法、参数与性质。
应用上的基本认识
应用ＣＳＳ并不困难，但是请您先参考这里的基本认识，对一些用语有了一点基本概念後，对於您在看後面的教学会有助益，看起来也才不会太吃力！
一、基本用语的认识：
元件（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』：
像点。
相对关系：
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（）
URL（''）
URL（""）
URL（""）
有了这些基本认识与概念後，接下来就要来为您介绍ＣＳＳ的应用方法罗！
第二章 ＣＳＳ的应用方式
这章节将开始为您介绍ＣＳＳ的应用。
当然一开始要介绍的是如何去建立个样式表（StyleSheets），包括了声明的方式和应用在网页上的方法，最後还会为您概述一下ＣＳＳ的一些特性。
概略来说，ＣＳＳ的声明有三种方式：
一、基本声明：
最典型的ＣＳＳ声明方式。
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;...>
例如：
BLUE;font-size:
9pt;font-family:
"标楷体";line-height:
150%>
这种用法的优点是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。
二、使用STYLE标签：
将样式规则写在标签之中。
--
样式规则表
-->
例如：
--
BODY{color:
BLUE;background:
#FFFFCC;font-size:
9pt}
TD,P{COLOR:
GREEN;font-size:
9pt}
-->
通常是将整个的结构写在网页的
部份之中。
这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。
缺点就是在个别元件的灵活度不足。
三、使用LINK标签：
将样式规则写在.css的样式档案中，再以标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入
即可套用该样式档案中所制定好的样式了。
通常是将LINK标签写在网页的
部份之中。
这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。
缺点也是在个别文件或元件的灵活度不足。
四、使用@import引入：
跟LINK用法很像，但必 放在中。
--
@importurl（引入的样式表的位址、路径与档名）;
-->
例如：
--
@importurl（http:
//yourweb/example.css）;
-->
要注意的是，行末的分号是绝对不可少的！
切记切记！
很明显的，不管是LINK还是@import的用法都可能可以直接套用他人现有的样式表。
不过，基於网路的礼仪，这种事别做的好，至少也应该知会对方一声，要先取得人家的同意才行！
而四种应用方法各有其优缺点，您可以综合地使用，并不会相互抵触。
但是如果相同的性质属性遇上重复的声明的话，就要考量套用优先权的问题了！
一般来讲，优先权的顺序有以下的几点原则：
网页设计者的样式设定＞使用者的样式设定＞浏览器的样式设定
STYLE属性的样式设定＞STYLE标签样式设定＞链结进来的样式设定
後面声明的样式设定＞前面的样式设定
所谓『链结进来的样式设定』指的就是用上面提到过的LINK标签与@import引入这两种应用方式所链结进来的的样式设定。
以上就是ＣＳＳ最基本的声明与应用的方法介绍，有了这些基本的认识与方法，您已经可以开始建立您的样式表！
除了上面提到的基本的声明与应用的方法之外，还有其它的声明与应用的方法，将为您在下一章中再作介绍。
育剑泉,2005-04-1219:
59:
53
第三章 ＣＳＳ的应用补充
挑选者特性的应用
在讲挑选者的特性之前，要提一下的是ＣＳＳ继承的特性。
所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。
继承的特性最典型的应用通常发挥在预设整份网页的样式，而要指定为其它样式的部份再依要设定在个别元素里即可。
这项特性可以提供网页设计者更理想的发挥空间。
接下来就要讲挑选者特性的应用！
其实这部份应该算是声明的一种方式，但是在您看过第二章的基本的声明与应用後，到这边再讲挑选者您会比较有概念点。
在ＣＳＳ应用或设计的时候，有几种依据元素的关系或性质来设定显示特定性质的方法，就是挑选者特性的应用，能让您在控制与应用上更加灵活。
一、前後文挑选者：
依声明标签前後文关系显示特定性质的方法。
前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时，会考虑元素标签的前後关系，而去显示指定的样式声明。
也就是说只要HTML原始码内的标签排列前後顺序符合时，该项声明便会发生作用了！
元素A（标签A）元素B（标签B）元素C（标签C）...{样式规则}
要注意的是，前後文挑选者的声明跟集体声明很像，但是集体声明的元素标签间要用逗号隔开，而用前後文挑选者声明时元素标签间要用空格隔开；而这两种声明方式您可以混合使用。
元素A元素B,元素C元素D元素E,...{样式规则}
这样您就可以用集体声明的方式，声明数组前後文挑选者的样式规则。
二、类别挑选者：
让单一或数个标签使用同组样式规则的方法。
类别（class）可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套用不同组的样式性质。
首先介绍的是如何让不同的元素套用同一组样式性质，如下面范例所写即可。
...
...
...
...
...
要注意在声明时前面的小点，CLASS名称可任取。
而要让相同的元素标签套用不同组的样式性质时，也可以应用类别特性来设定。
...
...
...
...
...
要注意同样是在声明时的小点，CLASS名称可任取。
灵活运用类别特性，可以让您的样式设定更具机动性唷！
三、ＩＤ挑选者：
与类别挑选者类似，不同的是在『唯一性』。
ＩＤ特性的使用与类别特性十分雷同，但是，文件里的各个ＩＤ都是唯一的。
换句话说，类别特性可以重复套用在单一或数个元素标签之上，但是ＩＤ属性在一份文件里只能出现一次。
如下面范例所写即可。
...
...
...
可以看到，声明的方式是利用井字号『#』。
而ＩＤ的这种『唯一性』正是让JavaScript或VBScript能够对元素进行控制的关键。
透过以上的介绍的挑选者特性的声明与使用，可以让您的样式设定更具机动与变化。
其实您可以先熟悉上一章为您介绍的基本的声明与应用方法，再应用本章所讲的挑选者特性，一步步地去熟悉样式表的使用。
连结拟似特性的应用
还记得在HTML的基本语法，在BODY标签中可以用link、alink、vlink属性去控制可连结或已连结的字体颜色吗？
现在亦可用ＣＳＳ去控制这些性质，称为『拟似类别』（pseudoclass）。
您可以将其当作一般类别，声明其样式规则，而实际上，这些拟似类别并不用像上面讲的类别挑选者，在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}
同轴范例：
BLUE">
background-color 设定背景颜色
支 持：
ＩＥ４、ＮＣ４
适 用：
所有元素
可能值：
设定颜色，请参考第一章颜色使用的相关说明
transparent将父元素（颜色或图案）的背景透明化
预设值：
transparent
继承性：
无
一般范例：
BODY{background-color:
BLUE}
同轴范例：
BLUE">
background-image 设定背景图形
支 持：
ＩＥ４、ＮＣ４
适 用：
所有元素
可能值：
设定图档URL，请参考第一章URL表示的相关说明
none不使用背景图案
预设值：
transparent
继承性：
无
一般范例：
BODY{background-image:
URL（"http:
//yourweb/path/file_name"）}
同轴范例：
URL（'http:
//yourweb/path/file_name'）">
background-repeat 设定背景重复
支 持：
ＩＥ４、ＮＣ４
适 用：
所有元素
可能值：
repeat重复背景图形填满页面
repeat-x水平方向重复背景图形
repeat-y垂直方向重复背景图形
no-repeat不重复显示背景图形
预设值：
repeat
继承性：
无
一般范例：
BODY{background-repeat:
repeat-x}
同轴范例：
repeat-x">
background-attachment 设定背景附著
支 持：
ＩＥ４、ＮＣ４
适 用：
所有元素
可能值：
scroll背景图形随著卷轴卷动
fixed背景图形随著卷轴卷动（浮水印）
预设值：
scrool
继承性：
无
一般范例：
BODY{background-attachment:
fixed}
同轴范例：
fixed">
background-position 设定背景位置
支 持：
ＩＥ４、ＮＣ４
适 用：
区块元素
可能值：
X%Y%图形上X%Y%的点对准元素的X%Y%位置
XY将图形左上角置于元素左上角水平X垂直Y之处
center背景图形置于中央
left背景图形对 左边
right背景图形对 右边
top背景图形对 顶部
bottom背景图形对 底部
预设值：
0%0%
继承性：
无
一般范例：
BODY{background-position:
100%50%}
同轴范例：
100%50%">
background 综合设定背景性质
支 持：
ＩＥ３、ＩＥ４、ＮＣ４
适 用：
所有元素
可能值：
background-color设定背景颜色
background-image设定背景图形
background-repeat设定背景重复
background-attachment设定背景附著
background-position设定背景位置
预设值：
无
继承性：
无
一般范例：
BODY{BLUEurl（image/gif）repeat-xfixedcenter}
同轴范例：
升级会员 