CSS基础知识详解

---CSS基础知识详解---第一章ＣＳＳ的基本认识关於ＣＳＳ的概论ＣＳＳ是『CascadingStyleSheets』的简称，中文翻为「串接样式表」，也有人只翻为「样式表」。ＣＳＳ用以作为网页的排版与风格设计，在所谓的「新式网页」里，ＣＳＳ不容置疑是相当重要的一环。ＣＳＳ是以既有的基础，用以弥补既存ＨＴＭＬ规格里的不足，也让网页的设计更为灵活。这份教学文件就要来为您介绍ＣＳＳ的应用罗！在这边并不介绍ＣＳＳ的所有规格，仅就您在网页写作上较常用到，较可能用到的语法部份及应用的方法来为您作介绍。也由於现在两浏览器的相容是渐行渐远，将贴心地为您注明支援该语法的浏览器。而ＩＥ从3.0开始便支援部份语法了，这点也会为为您注明的。各章节的概略介绍为了您参考与学习上的方便，在这里先为您大略地说明一下这份教学文件各章节所包含的内容吧！让您在参考时有个方向与概念。基本上，前两章著重於概念与基本认知的建立，也就是一些为您做一些札根的工作；第三章则为您补充在应用与设定上的一些其它方式或特性的说明与介绍。而第四章到第六章则著重於语法、参数与性质的介绍，也就是真正建立在样式表里面的东东。第一章ＣＳＳ的基本认识：就是本章啦！就介绍您一些ＣＳＳ基本概念与认识。第二章ＣＳＳ的应用方式：为您介绍ＣＳＳ的基本宣告、应用方法与特性介绍。第三章ＣＳＳ的应用补充：为您介绍ＣＳＳ的其它宣告方式、应用与特性介绍。第四章页面性质的ＣＳＳ：为您介绍页面性质的ＣＳＳ相关语法、参数与性质。第五章文字性质的ＣＳＳ：为您介绍文字性质的ＣＳＳ相关语法、参数与性质。第六章区块性质的ＣＳＳ：为您介绍区块性质的ＣＳＳ相关语法、参数与性质。应用上的基本认识应用ＣＳＳ并不困难，但是请您先参考这里的基本认识，对一些用语有了一点基本概念後，对於您在看後面的教学会有助益，看起来也才不会太吃力！一、基本用语的认识：元件(element)：亦即HTML基本语法中的标签(tag)。属性(attribute)：用以描述标签特性的属性。例如：HRWIDTH=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(')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;...例如：TDSTYLE=COLOR:BLUE;font-size:9pt;font-family:标楷体;line-height:150%这种用法的优点是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。二、使用STYLE标签：将样式规则写在STYLE.../STYLE标签之中。STYLETYPE=text/css!--样式规则表--/STYLE例如：STYLETYPE=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的档案，我们只要在网页中加入LINKREL=STYLESHEETTYPE=text/cssHREF=example.css即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的HEAD/HEAD部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。四、使用@import引入：跟LINK用法很像，但必放在STYLE.../STYLE中。STYLETYPE=text/css!--@importurl(引入的样式表的位址、路径与档名);--/STYLE例如：STYLETYPE=text/css!--@importurl();--/STYLE要注意的是，行末的分号是绝对不可少的！切记切记！很明显的，不管是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)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质，如下面范例所写即可。HTMLHEADSTYLE--.blue{color:BLUE}--/STYLE/HEADBODY...H1class=blue.../H1...Pclass=blue.../P.../BODY要注意在声明时前面的小点，CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时，也可以应用类别特性来设定。HTMLHEADSTYLE--P.blue{color:BLUE}P.red{color:RED}--/STYLE/HEADBODY...Pclass=blue.../P...Pclass=red.../P.../BODY要注意同样是在声明时的小点，CLASS名称可任取。灵活运用类别特性，可以让您的样式设定更具机动性唷！三、Ｉ