《CSS层叠样式表二》word版

1、.CSS 层叠样式表二CSS-层叠款式表二2020-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-rig

4、ht-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初始值：颜色属性的值适用于：所有对象向下兼容：否边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。假设四个值都给出了，它们分别应用于上、右、下和左边框的式样。假设给出一个值，它将被运用到各边上。假设两个或三个值给出了，省略了的值与对边相等。也可以使用略写的边框属性。边框款式语法：bord

7、er-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中I

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

14、：block|inline|list-item|none初始值：block适用于：所有对象向下兼容：否显示属性允许使用四个值中的一个来定义一个元素：block在元素的前和后都会有换行inline在元素的前和后都不会有换行list-item与block一样,但增加了目录项标记none没有显示每个元素都典型地由阅读器基于HTML规格建议的展示形式给出一个缺省的显示值。显示属性可能并不平安，因为它使用另外的不适宜的格式显示元素。使用值none将关闭指定元素及其子元素的显示！空白语法：white-space：值允许值：normal|pre|nowrap初始值：normal适用于：块级元素向下兼容：是空

15、白属性将决定如何处理元素内的空格.该属性的值取以下三个中的一个：normal将多个空格折叠成一个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.plain

16、list-style-type：noneOLlist-style-type：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-styl

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

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

19、st-style：lower-roman insideCSS单位长度单位一个长度的值由可选的正号"+"或负号"-"、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如，1.3 em就不是一个有效的长度的值，但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。无论是相对值还是绝对值长度，CSS1都支持。相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位：emem，元素的字体的高度exx-height，字母"x"的高度px像素，相对于屏幕的

20、分辨率绝对长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位：in英寸，1英寸=2.54厘米cm厘米，1厘米=10毫米mm米pt点，1点=1/72英寸pc帕，1帕=12点百分比单位一个百分比值由可选的正号"+"或负号"-"、接着的一个数字，还有百分号"%"。在一个百分比值之中是没有空格的。百分比值是相对于其它数值，同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。颜色单位颜色值是一个关键字或一个RGB格式的数字。Windows VGA视频图像阵列形成了16各关键字：aqua，black，blue，fuc

21、hsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，and yellow。RGB颜色可以有四种形式：#rrggbb如，#00cc00#rgb如，#0c0rgbx,x,xx是一个介乎0到255之间的整数如，rgb0,204,0rgby%,y%,y%y是一个介乎0.0到100.0之间的整数如，rgb0%,80%,0%上述的例子指定同一颜色。Douglas R.Jacobson先生还开发了速查手册RGB Color Chart61 kB。统一资源管理URLs一个URL值的格式为：urlfoo，foo是一个URL统一资

22、源管理，因特网的地址。URL可以选择用单引号'或者双引号"，并且，在URL之前或之后可以包含空格。在URL中的括弧，逗号，空格，单引号，或双引号必须避开反斜杠。不完好的URLs被理解为款式表的源代码，而不是HTML源代码。注意：Netscape Navigator 4.x会错误地将不完好的URLs理解为相关的HTML源代码。注意到这个错误后，网页制作者应该在可能的地方使用完好的URLs。例如：BODYbackground：urlstripe.gifBODYbackground：url/pe2005/UploadFiles_8243/200504/200504291205068

23、10.gifBODYbackground：urlstripe.gifBODYbackground：url"stripe.gif"BODYbackground：url"Ulalume".png/*quotes in URL escaped*/将款式表参加到HTML中有很多方法将款式表参加到HTML中，每个都带有自己的优点和缺点。新的HTML元素和属性已被参加以允许款式表与HTML文档更简易地组合起来。连接到一个外部的款式表嵌入一个款式表输入一个款式表内联款式CLASS属性ID属性SPAN元素DIV元素关于认证的备注连接到一个外部的款式表一个外部的款式表可以

24、通过HTML的LINK元素连接到HTML文档中：标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型-text/css是一个层叠款式表-允许阅读器忽略它们不支持的款式表类型。为CSS文件配置效劳器而将text/css当作Content-type内容发送出去也是一个好注意。外部款式表不能含有任何像或STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型，LINK元素也一样。同样地，TITLE和MEDIA属性也可以用STYLE指定。旧版本的阅读器，并不能识别STYLE元素，会将其当作BODY的一部分照常展示其内容，从而使这些款式表对用户是可见的。要防止这样做，STY

25、LE元素的内容要包含一个SGML注解在里面，像上述例子那样。嵌入的款式表可用于当一个文档具有独一无二的款式的时候。假设多个文档都使用同一款式表，那么外部款式表会更适用。输入一个款式表一个款式表可以使用CSS的import声明被输入。这个声明用于一个CSS文件或内部的STYLE元素：注意其它的CSS规那么应该仍然包括在STYLE元素中，但所有的import声明必须放在款式表的开场部分。任意在款式表中指定了的规那么，其自身超越在输入款式表中对立的规那么。例如上例，即使一个输入的款式表包含DTbackground：aqua，定义项definition terms仍然会是黄色的背景。被输入的款式表的顺

26、序对于它们怎样层叠是很重要的。在上述的例子中，假设style.css输入的款式表指定了STRONG元素会显示为红色而punk.css款式表指定了STRONG元素显示为黄色的话，那么后面的规那么会获胜，而STRONG元素会显示为黄色。输入的款式表对于模块性效果很有用处。例如，一个网站可以通过使用了的选择符分类款式表。一个simple.css款式表给出公共的元素像BODY、P、H1和H2。此外，一个extra.css款式表给出较少共通的元素像CODE、BLOCKQUOTE和DFN。一个tables.css款式表可以用于定义变革元素的规那么。这三个款式表在需要的时候可以使用import声明包括在HT

27、ML中。三个款式表也可以通过LINK元素组合。内联款式款式可以使用STYLE属性内联。STYLE属性可以应用于任意BODY元素包括BODY本身，除了BASEFONT、PARAM和SCRIPT。这个属性将任何数量的CSS声明当作自己的值，而每个声明用分号隔开。以下是一个例子：这段的款式是红色的New Century Schoolbook字，假设字体可用的话。注意在STYLE中New Century Schoolbook包含在单引号中，因为双引号被用作包含款式声明。内联的款式比其他方法更加灵敏。要使用内联款式，必须使用Content-Style-Type 页眉扩展对整个文档进展单独的款式表语言声明

28、。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type 页眉，或在HEAD部分包括以下标记：因为和需要展示的内容混合在一起，内联款式会失去一些款式表的优点。同样地，内联款式默认地承受所有媒体，因为没有任何的为内联款式指定明确的媒体的语句。这种方法应该尽量少用，如当一个款式会应用在所有媒体到一个元素的个别情况。假设款式会被应用到单一元素的场合，但只能使用确认的媒体的话，使用ID属性代替STYLE属性。CLASS属性CLASS属性用于指定元素属于何种款式的类。例如，款式表可以参加punk和warning类：.punkcolor：lime；background：#

29、ff80c0P.warningfont-weight：bolder；color：red；background：white这些类可以使用CLASS属性在HTML中引用：属性扩展一些属性扩展会有负值的边效果，产生于支持和不支持的阅读器上.在这个例子中，punk类可以用于任何BODY元素因为它在款式表中没有HTML元素关联。而在这个例子的款式表，warning类只能用于P元素。一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的warning类也可以命名为red，但假设网页制作者决定改变这个类的款式为别的颜色，或希望为那些使用PC喇叭的人定义为aural听觉款式的话，那么

30、这个名字就变得毫无意义了。类会是应用款式到HTML文档中在构造上一样的部分的有效的方法。例如，本页使用类给CSS源代码和HTML源代码使用不同的款式。ID属性ID属性用于定义一个元素的独特的款式。一个CSS规那么如#wdg97font-size：larger可以通过ID属性应用到HTML中：欢送访问Web Design Group及TV water 168！整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、识字或连字符。字母限于A-Z和a-z。注意HTML 4.0允许在ID属性中有句号，但CSS1不允许在ID选择符中有句号。也要注意CSS1允许Unicode字符1

31、61-255而且忽略Unicode字符为一个数字代码，但HTML 4.0不允许这些字符在一个ID属性值当中。当一个款式只需要在任何文档中应用一次时，使用ID是很适宜的。ID与STYLE属性相比，在于ID允许指定媒体的款式，而且也可以被应用于多个文档虽然每个文档只用一次。SPAN元素SPAN元素被参加到HTML中以允许网页制作者给出款式但无须附加在一个HTML的构造元素上。SPAN在款式表中作为一个选择符使用，而且它也能承受STYLE、CLASS和ID属性。SPAN是一个内联元素，所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差异在于虽然EM和STRONG带有构造的意义，但SP

32、AN就没有这样的意义。它的存在纯粹是应用款式，所以当款式表失效时它就没有任何的作用。一些SPAN例子如下：STYLE type=text/css media="screen,print,projection"！-.firstwordsfont-variant：small-caps-/STYLE SPAN class=firstwords The first few words/SPAN The first few words前面是段落中少数的文字，会是小型大写字母。款式也可以内联，如改变文字的款式为Arial.DIV元素DIV元素在功能上与SPAN元素相似，最主要的差异在于

33、DIV"division"，"部分"的简称是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。例如：Divisions/部分DIV元素在HTML 3.2中有定义，但HTML 3.2中只有ALIGN属性能兼容。HTML 4.0在属性中参加CLASS、STYLE、和ID属性。因为DIV可以包含其他块级集成，在用于建立文档的大型章节例如本备注是很有用的。要求关闭标记。关于认证的备注少数使用了CSS款式的文档能在HTML3.2Wilbur层在WDG网站，译者注得到认证。HTML3.2不会解释SPAN元素

34、，也不解释CLASS、STYLE或ID属性，而且在LINK和STYLE元素中也很少支持TYPE和MEDIA属性。这些有关的款式元素和属性对不支持的阅读器不会有害，因为它们能平安地忽略。文档使用这些元素和属性可以被认证防御于HTML 4.0。依赖款式表层叠款式表还没有开场广泛使用，但CSS的滥用已经开场。款式表，当使用得当时，可以是一个提供独特和有吸引力的展示的有力工具，当时也允许一个网页被所有用户轻易处理。然而，一旦网页的信息变得依赖款式表时，网页就变成了Web上的失败者。款式表的设计在于允许网页制作者去改变网页的展示，而不是控制展示。款式表会被可能选择-或需要-他们自己的款式表的用户所超越。因为这些原因，依赖一些款式的网页制作者会发现他们的网页对于部分重要的用户来说难以承受。款式表