CSS层叠样式表二

1、CSS 层叠样式表二CSS-层叠样式表二2010-12-18 10：24上补白属性描述上边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。右补白语法：padding-right：值允许值：长度|百分比初始值：0适用于：所有对象向下兼容：否右补白属性描述右边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。下补白语法：padding-bottom：值允许值：长度|百分比初始值：0适用于：所有对象向下兼容：否下补白属性描述下边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分

2、比的值参考上级元素的宽度。不能使用负值。左补白语法：padding-left：值允许值：长度|百分比初始值：0适用于：所有对象向下兼容：否左补白属性描述左边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。补白语法：padding：值允许值：长度|百分比1,4初始值：0适用于：所有对象向下兼容：否补白属性是上补白、右补白、下补白和左补白属性的略写。一个元素的补白是边框和元素的内容之间的间隔的数值。可以给出从一到四的值，每个值可以是长度或百分比。百分比值参考上级元素的宽度。不能使用负值。如果四个值都给出了，它们分别应用于上、右、下和左补白。如

3、果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。例如，以下的规则设置上补白为2em，右补白为4em，下补白为5em，左补白为4em：BLOCKQUOTEpadding：2em 4em 5em上边框宽度语法：border-top-width：值允许值：thin|medium|thick|长度初始值：medium适用于：所有对象向下兼容：否上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在上边框、边框的宽度或边框的属性略写。右边框宽度语法：border-right

4、-width：值允许值：thin|medium|thick|长度初始值：medium适用于：所有对象向下兼容：否右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在右边框、边框的宽度或边框的属性略写。下边框宽度语法：border-bottom-width：值允许值：thin|medium|thick|长度初始值：medium适用于：所有对象向下兼容：否下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可

5、以用在下边框、边框的宽度或边框的属性略写。左边框宽度语法：border-left-width：值允许值：thin|medium|thick|长度初始值：medium适用于：所有对象向下兼容：否左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在左边框、边框的宽度或边框的属性略写。边框宽度语法：border-width：值允许值：thin|medium|thick|长度1,4初始值：未定义适用于：所有对象向下兼容：否边框宽度属性用一到四个值来设置元素的边界，值是一个关键字或长度。不允许使用负值长度

6、。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。也可以使用略写的边框属性。边框颜色语法：border-color：值允许值：颜色1,4初始值：颜色属性的值适用于：所有对象向下兼容：否边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。也可以使用略写的边框属性。边框样式语法：border

7、-style：值允许值：none|dotted|dashed|solid|double|groove|ridge|inset|outset1,4初始值：none适用于：所有对象向下兼容：否边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。也可以使用略写的边框属性。上边框语法：border-top：值允许值：上边框宽度|边框式样|颜色初始值：未定义适用于：所有对象向下兼容：否上边框属性是一个用于设置一个元素上边

8、框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。右边框语法：border-right：值允许值：右边框宽度|边框式样|颜色初始值：未定义适用于：所有对象向下兼容：否右边框属性是一个用于设置一个元素右边框的宽度、式样、和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。下边框语法：border-bottom：值允许值：下边框宽度|边框式样|颜色初始值：未定义适用于：所有对象向下兼容：否下边框属性是一个用于设置一个元素的下边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。左边框语法：border-left：值允许值：左边

9、框宽度|边框式样|颜色初始值：未定义适用于：所有对象向下兼容：否左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。边框语法：border：值允许值：边框宽度|R边框式样|颜色初始值：未定义适用于：所有对象向下兼容：否边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。边框声明的例子包括：H2border：groove 3emA：linkborder：solid blueA：visitedborder：thin dotted#800080A：activeborder：thick double red边框属性只能设置四种边框

10、；只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。宽度语法：width：值允许值：长度|百分比|auto初始值：auto适用于：块级和替换元素向下兼容：否每个块级或替换元素都可以用一个长度或auto值来指定其宽度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括IMG,INPUT,TEXTAREA,SELECT,和OBJECT.)宽度属性的初始值为auto，即为该元素的原有宽度(有就是元素自己的宽度，例如一个图象的宽度

11、)。百分比参考上级元素的宽度。不允许使用负的长度值。这个属性能用作给出一些INPUT元素的公共长度，好象SUBMIT和RESET按钮：INPUT.buttonwidth：10em高度语法：height：值允许值：长度|auto初始值：auto适用于：块级和替换元素向下兼容：否每个块级或替换元素都可以用一个长度或auto值来指定其高度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括IMG,INPUT,TEXTAREA,SELECT,和OBJECT.)高度属性的初始值为auto，即为该元素的原有高度(有就是元素自己的高度，例如一个图象的高度)。不允许使用负的长度值。与宽度属性一样，高度

12、可以应用于设定图象的比例：IMG.foowidth：40px；height：40px在大多数情况下，我们都建议网页制作者使用图象编辑软件按比例伸缩图象，因为浏览器不可能高质量地伸缩图象，也因为使用这个属性缩小图象会导致用户下载了一个不必要的庞大文件。虽然如此，通过宽度和高度属性伸缩图象依然是用户-定义样式表中一个有用的用作克服视觉问题的选择。漂浮语法：float：值允许值：left|right|none初始值：none适用于：所有元素向下兼容：否漂浮属性允许网页制作者将文本环绕在一个元素的周围.这同HTML 3.2中IMG元素的ALIGN=left和ALIGN=right一样，但CSS1允许所

13、有对象漂浮，而不像HTML 3.2那样仅仅允许图象和表格。清除语法：clear：值允许值：none|left|right|both初始值：none适用于：所有元素向下兼容：否清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面；同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值，和移动元素到其两边的漂浮的元素的下面的none值。这个属性类似于HTML 3.2的函数，但它能应用于所有元素。分类属性显示语法：display：值允许值：block|inline|list-item|none初始值：block适用于：所有对象向下兼容：

14、否显示属性允许使用四个值中的一个来定义一个元素：block(在元素的前和后都会有换行)inline(在元素的前和后都不会有换行)list-item(与block相同,但增加了目录项标记)none(没有显示)每个元素都典型地由浏览器基于HTML规格建议的展示形式给出一个缺省的显示值。显示属性可能并不安全，因为它使用另外的不合适的格式显示元素。使用值none将关闭指定元素及其子元素的显示！空白语法：white-space：值允许值：normal|pre|nowrap初始值：normal适用于：块级元素向下兼容：是空白属性将决定如何处理元素内的空格.该属性的值取以下三个中的一个：normal(将多个

15、空格折叠成一个)pre(不折叠空格)nowrap(不允许换行，除非遇到标记)目录样式类型语法：list-style-type：值允许值：disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none初始值：disc适用于：带有显示值的目录项元素向下兼容：是目录样式项属性指定目录项标记的类型，当目录样式图象值为none或当图象载入选项被关闭时使用。例如：LI.squarelist-style-type：squareUL.plainlist-style-type：noneOLlist-style-typ

16、e：upper-alpha/*A BC DE etc.*/OL OLlist-style-type：decimal/*1 23 45 etc.*/OL OL OLlist-style-type：lower-roman/*i ii iii iv vetc.*/目录样式图象语法：list-style-image：值允许值：|none初始值：none适用于：带有显示值的目录项元素向下兼容：是当图象载入选项打开时，目录样式图象属性在指定目录项标记使用哪个图象代替由目录样式类型属性指定的标记。例如：UL.checklist-style-image：url(/LI-markers/checkmark.gi

17、f)UL LI.xlist-style-image：url(x.png)目录样式位置语法：list-style-position：值允许值：inside|outside初始值：outside适用于：带有显示值的目录项元素向下兼容：是目录样式位置属性可以取值inside(内部)or outside(外部)，其中outside是缺省值。整个属性决定关于目录项的标记应放在那里。如果使用inside值，换行会移到标记下，而不是缩进。应用的例子如下：Outside rendering：*List item 1second line of list item Inside rendering：*List

18、item 1second line of list item目录样式语法：list-style：值允许值：目录样式类型|目录样式位置|初始值：未定义适用于：带有显示值的目录项元素向下兼容：是目录样式属性是目录样式类型、目录样式位置，和目录样式图象属性的略写。例如：LI.squarelist-style：square insideUL.plainlist-style：noneUL.checklist-style：url(/LI-markers/checkmark.gif)circleOLlist-style：upper-alphaOL OLlist-style：lower-roman insid

19、eCSS单位长度单位一个长度的值由可选的正号+或负号-、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如，1.3 em就不是一个有效的长度的值，但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。无论是相对值还是绝对值长度，CSS1都支持。相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位：em(em，元素的字体的高度)ex(x-height，字母x的高度)px(像素，相对于屏幕的分辨率)绝对长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位：in(英寸，1英寸=2.54厘米)c

20、m(厘米，1厘米=10毫米)mm(米)pt(点，1点=1/72英寸)pc(帕，1帕=12点)百分比单位一个百分比值由可选的正号+或负号-、接着的一个数字，还有百分号%。在一个百分比值之中是没有空格的。百分比值是相对于其它数值，同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。颜色单位颜色值是一个关键字或一个RGB格式的数字。Windows VGA(视频图像阵列)形成了16各关键字：aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，and yellow。R

21、GB颜色可以有四种形式：#rrggbb(如，#00cc00)#rgb(如，#0c0)rgb(x,x,x)x是一个介乎0到255之间的整数(如，rgb(0,204,0)rgb(y%,y%,y%)y是一个介乎0.0到100.0之间的整数(如，rgb(0%,80%,0%)上述的例子指定同一颜色。Douglas R.Jacobson先生还开发了速查手册RGB Color Chart(61 kB)。统一资源管理URLs一个URL值的格式为：url(foo)，foo是一个URL(统一资源管理，因特网的地址)。URL可以选择用单引号()或者双引号()，并且，在URL之前或之后可以包含空格。在URL中的括弧，

22、逗号，空格，单引号，或双引号必须避开反斜杠。不完整的URLs被理解为样式表的源代码，而不是HTML源代码。注意：Netscape Navigator 4.x会错误地将不完整的URLs理解为相关的HTML源代码。注意到这个错误后，网页制作者应该在可能的地方使用完整的URLs。例如：BODYbackground：url(stripe.gif)BODYbackground：url(/pe2005/Upload)BODYbackground：url(stripe.gif)BODYbackground：url(stripe.gif)BODYbackground：url(Ulalume.png)/*quo

23、tes in URL escaped*/将样式表加入到HTML中有很多方法将样式表加入到HTML中，每个都带有自己的优点和缺点。新的HTML元素和属性已被加入以允许样式表与HTML文档更简易地组合起来。连接到一个外部的样式表嵌入一个样式表输入一个样式表内联样式CLASS属性ID属性SPAN元素DIV元素关于认证的备注连接到一个外部的样式表一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中：标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型-text/css是一个层叠样式表-允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Con

24、tent-type内容发送出去也是一个好注意。外部样式表不能含有任何像或STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型，LINK元素也一样。同样地，TITLE和MEDIA属性也可以用STYLE指定。旧版本的浏览器，并不能识别STYLE元素，会将其当作BODY的一部分照常展示其内容，从而使这些样式表对用户是可见的。要防止这样做，STYLE元素的内容要包含一个SGML注解()在里面，像上述例子那样。嵌入的样式表可用于当一个文档具有独一无二的样式的时候。如果多个文档都使用同一样式表，那么外部样式表会更适用。输入一个样式表一个样式表可以使用CSS的import声明被输入。这个

25、声明用于一个CSS文件或内部的STYLE元素：注意其它的CSS规则应该仍然包括在STYLE元素中，但所有的import声明必须放在样式表的开始部分。任意在样式表中指定了的规则，其自身超越在输入样式表中对立的规则。例如上例，即使一个输入的样式表包含DTbackground：aqua，定义项(definition terms)依然会是黄色的背景。被输入的样式表的顺序对于它们怎样层叠是很重要的。在上述的例子中，如果style.css输入的样式表指定了STRONG元素会显示为红色而punk.css样式表指定了STRONG元素显示为黄色的话，那么后面的规则会获胜，而STRONG元素会显示为黄色。输入的样

26、式表对于模块性效果很有用处。例如，一个网站可以通过使用了的选择符分类样式表。一个simple.css样式表给出公共的元素像BODY、P、H1和H2。此外，一个extra.css样式表给出较少共通的元素像CODE、BLOCKQUOTE和DFN。一个tables.css样式表可以用于定义变革元素的规则。这三个样式表在需要的时候可以使用import声明包括在HTML中。三个样式表也可以通过LINK元素组合。内联样式样式可以使用STYLE属性内联。STYLE属性可以应用于任意BODY元素(包括BODY本身)，除了BASEFONT、PARAM和SCRIPT。这个属性将任何数量的CSS声明当作自己的值，而

27、每个声明用分号隔开。以下是一个例子：这段的样式是红色的New Century Schoolbook字，如果字体可用的话。注意在STYLE中New Century Schoolbook包含在单引号中，因为双引号被用作包含样式声明。内联的样式比其他方法更加灵活。要使用内联样式，必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉，或在HEAD部分包括以下标记：因为和需要展示的内容混合在一起，内联样式会失去一些样式表的优点。同样地，内联样式默认地接受所有

28、媒体，因为没有任何的为内联样式指定明确的媒体的语句。这种方法应该尽量少用，如当一个样式会应用在所有媒体到一个元素的个别情况。如果样式会被应用到单一元素的场合，但只能使用确认的媒体的话，使用ID属性代替STYLE属性。CLASS属性CLASS属性用于指定元素属于何种样式的类。例如，样式表可以加入punk和warning类：.punkcolor：lime；background：#ff80c0P.warningfont-weight：bolder；color：red；background：white这些类可以使用CLASS属性在HTML中引用：属性扩展一些属性扩展会有负值的边效果，产生于支持和不支持

29、的浏览器上.在这个例子中，punk类可以用于任何BODY元素因为它在样式表中没有HTML元素关联。而在这个例子的样式表，warning类只能用于P元素。一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的warning类也可以命名为red，但如果网页制作者决定改变这个类的样式为别的颜色，或希望为那些使用PC喇叭的人定义为aural(听觉)样式的话，那么这个名字就变得毫无意义了。类会是应用样式到HTML文档中在结构上一样的部分的有效的办法。例如，本页使用类给CSS源代码和HTML源代码使用不同的样式。ID属性ID属性用于定义一个元素的独特的样式。一个CSS规则如#wd

30、g97font-size：larger可以通过ID属性应用到HTML中：欢迎访问Web Design Group及TV water 168！整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、识字或连字符。字母限于A-Z和a-z。注意HTML 4.0允许在ID属性中有句号，但CSS1不允许在ID选择符中有句号。也要注意CSS1允许Unicode字符161-255而且忽略Unicode字符为一个数字代码，但HTML 4.0不允许这些字符在一个ID属性值当中。当一个样式只需要在任何文档中应用一次时，使用ID是很适合的。ID与STYLE属性相比，在于ID允许指定媒体的样式

31、，而且也可以被应用于多个文档(虽然每个文档只用一次)。SPAN元素SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。SPAN是一个内联元素，所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义，但SPAN就没有这样的意义。它的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用。一些SPAN例子如下：STYLE type=text/css media=screen,print,projection！-.fir

32、stwordsfont-variant：small-caps-/STYLE SPAN class=firstwords The first few words/SPAN The first few words前面是段落中少数的文字，会是小型大写字母。样式也可以内联，如改变文字的样式为Arial.DIV元素DIV元素在功能上与SPAN元素相似，最主要的差别在于DIV(division，部分的简称)是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。例如：Divisions/部分DIV元素在HTML 3.2中有定义，但HTML 3.2中只

33、有ALIGN属性能兼容。HTML 4.0在属性中加入CLASS、STYLE、和ID属性。因为DIV可以包含其他块级集成，在用于建立文档的大型章节例如本备注是很有用的。要求关闭标记。关于认证的备注少数使用了CSS样式的文档能在HTML3.2(Wilbur)层(在WDG网站，译者注)得到认证。HTML3.2不会解释SPAN元素，也不解释CLASS、STYLE或ID属性，而且在LINK和STYLE元素中也很少支持TYPE和MEDIA属性。这些有关的样式元素和属性对不支持的浏览器不会有害，因为它们能安全地忽略。文档使用这些元素和属性可以被认证防御于HTML 4.0。依赖样式表层叠样式表还没有开始广泛使用，但CSS的滥用已经开始。样式表，当使用得当时，可以是一个提供独特和有吸引力的展示的有力工具，当时也允许一个网页被所有用户轻易处理。然而，一旦网页的信息变得依赖样式表时，网页就变成了Web上的失败者。样式表的设计在于允许网页制作者去改变网页的展示，而不是控制展示。样式表会被可能选择-或需要-他们自己的样式表的用户所超越。因为这些原因，依赖一些样式的网页制