搜索
第3章CSS技术HTML标记的不足之处•代码繁琐•格式的一致性差•可维护性差•网页现实效果缺乏动态性与交互性层叠样式表CSS（CascadingStyleSheet）一.CSS的基础知识CSS是为了简化Web页面的更新工作而诞生的，它的功能非常强大，它将让网页变得更加美观，维护更加方便。CSS跟HTML一样，也是一种标记语言，甚至很多属性都来源于HTML，它也需要通过浏览器解释执行。任何懂得HTML的人都可以掌握，非常容易。CSS（CascadingStyleSheet，层叠样式表）技术是一种格式化网页的标准方式，它是HTML功能的扩展，使网页设计者能够以更有效的方式设计出更具表现力的网页效果。1.样式表和HTML的关系样式表(StyleSheets)技术诞生于1996年，全称是层叠样式表(CascadingStyleSheets，简称CSS)。那什么是样式呢？样式其实就是格式，对网页来说，像文字的大小、颜色以及图片位置等，都是网页显示信息的样式。那层叠又是什么意思？意思是当我们在HTML文件中引用数个定义样式文件（CSS文件）时，若数个样式文件间所定义的样式发生冲突，将依据层次处理。样式表是HTML的表兄弟。样式表的产生是由于最初的HTML标准还不尽人意，用HTML制作网页就像是用画笔绘制一幅图画，只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果。正是在这种情况下，样式表技术诞生了，样式表的目的是为了“对布局、字体、背景和其他图文效果实现更加精确的控制”。HTML4.0版本已经包括了样式表的内容。样式表正在逐渐改变设计、制作网页的方法，为网页创新奠定了基础。样式表的宗旨就是将结构和格式分离。样式表将定义结构和定义格式的两部分相互分离，从而使网页设计人员能够对网页的布局施加更多的控制。HTML仍可以保持简单明了的初衷，而样式表代码独立出来后则从另一角度控制网页外观。利用样式表，可以将站点上所有的网页都指向某个CSS文件，用户只需要修改CSS文件中的某一行，那么整个站点都会随之发生改变。这样，通过样式表就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。样式表的基本结构是怎样的？下面通过一个简单的样式表实例，让你获得对样式表整体性的感性认识。首先建立一个简单的HTML文件。2.样式表的基本结构htmlheadtitle简单的样式表/title/headbodybgcolor=lightbluecenterh1样式表/h1p这是一个简单的样式表/p/center/body/html现在，给这个HTML文件加一些样式表。只需在body标签之前插入以下代码：styletype=text/css!--h1{color:red;font-size:35px;font-family:黑体}p{background:yellow;color:blue;font-size:25px;font-family:隶书}--/style这样就已经制作出了使用样式表的网页。从浏览器中打开网页（当然首先要保证浏览器支持样式表），网页显示效果如下图所示。简单样式表效果由这个简单的样式表实例，可以看出：一个样式表由许多样式规则组成的，用以告诉浏览器怎样去显示一个网页文档。样式表的核心是规则，样式表的规则如下：选择符{属性1:值1;属性2:值2}如，h1{color:green}这个规则就是告诉浏览器所有标签h1和/h1之间的文字以绿色显示。其中h1就是选择符，它是一个附带样式功能的HTML标签。花括号中所包含的就是属性，它用于定义实际的样式，每个属性包括两部分：属性名（如color）和属性值（如green）。我们可以使用四种方法将样式表加入到网页中，每种方法都有其不同的优点：(1)．将样式表加入到HTML文件行中(2)．将样式表嵌入到HTML文件的文档头中(3)．将一个外部样式表链接到HTML文件上(4)．将一个外部样式表输入到HTML文件中以上四种方法，可分成内部样式表（前两者）及外部样式表（后两者）两类。3.如何在网页中加入css(1)在行内直接加入样式可以直接在HTML代码行中加入样式规则，这种方法适用于指定网页内的某一小段文字的显示风格。不过，利用这种方法定义样式时，效果只可以控制该标签，其语法如下：标签名称style=样式属性:属性值；样式属性:属性值...(2)把样式表嵌入到文档头在标签中，用设置style属性的方法，一次只能控制一个标签的样式，实在让人看不出CSS对网页设计有什么特别的效果。在这一节，我们将讲述在文档头嵌入样式表规则的方法，浏览器在整个HTML网页中都执行该规则。如果想对网页一次性加入样式表，就可采用该方法。这种方法就是将所有的样式表信息都列于HTML文档的头部，基本语法如：htmlheadstyletype=text/css!--选择符1{样式属性:属性值；样式属性:属性值；...}选择符2{样式属性:属性值；样式属性:属性值；...}......选择符n{样式属性:属性值；样式属性:属性值；...}--/style/headbody.../body/html说明：⑴style标签是用来说明所要定义的样式。type属性是指定style标签以CSS的语法定义。⑵样式表基本格式中的type=text/css用于说明这是一段CSS规则代码。⑶为了防止不支持CSS的浏览器将style…/style标签间的CSS规则当成普通字符串，而显示在网页上，应将CSS的规则代码插入!--和--标签之间。⑷选择符1......选择符n：选择符就是样式的名称，在这里选择符可以使用HTML标签的名称，所有HTML标签都可以作为CSS选择符。⑸样式属性：定义样式的属性名称前面，我们介绍了在文档头嵌入样式表规则的方法。这种方式定义出的样式，将只限于在该HTML文件中，效益并不大。如果想要达到集中管理网站网页样式的目标时，就必须将样式定义在独立的CSS文件中，并将该文件链接或输入到要运用样式的HTML文件。这种方法就是将多个HTML文件都链接到一个样式表文件。这个外部的样式表将设定所有网页的规则。如果改变样式表文件中的某一个细节，所有网页都会随之改变。如果维护的站点很大，则这种方式绝对会有其用武之地。它的使用方法是：创建一个普通的网页，但不使用style规则，而是在HTML文档头部使用link标签。(3)链接到样式表基本语法如下：headtitle.../titlelinkRel=stylesheethref=*.csstype=text/css/head说明：⑴*.css为预先编写好的样式表文件。⑵外部样式表文件中不能含有任何像head或style这样的HTML标签。样式表仅仅由样式表规则或声明组成。⑶在href属性中可以使用绝对URL或者相对URL。⑷外部样式表文件中，无须使用注释标签。⑸如同发布HTML文件那样，将这个CSS文件发布到服务器中。在网页被打开时，浏览器将依照链接标签将含有链接外部样式表文件的HTML网页按照样式表规则显示。17单一的样式可以通过多个样式表给出，例如：linkrel=stylesheethref=*basics.csstitle=contemporarylinkrel=stylesheethref=*tables.csstitle=contemporarylinkrel=stylesheethref=*forms.csstitle=contemporary在这个例子中，3个样式表组合成一个contemporary样式，要将多个样式表组合成一个单一样式，必须在每个样式表中使用相同的title。当样式被应用到很多的网页时，采用链接到外部样式表的方式是理想的。网页制作者使用外部样式表可以仅仅通过改变一个文件而改变整个网站的外观；同样，大多数浏览器会保存外部样式表文件到缓冲区，从而提高了显示网页时的速度。18输入样式表的方法同链接到外部样式表文件类似。其语法如下：styletype=text/css!—@importurl(外部样式表的文件名称);--/style说明：⑴import语句后的“；”号是必须的。⑵要输入的样式表文件的扩展名为.css。(4)输入样式表19我们介绍了四种样式表的使用方法，这四种方法在使用上各有其特色，但当这四种方法同时出现时，浏览器会以哪种方法为优先使用呢？答案是在行内直接加入样式顺序为最高。至于其他三种的顺序则是一样的，如果其他三种方法同时出现，且各方法定义的样式又都不同时，浏览会选择较后定义的样式来显示。20(1)class类选择符class类选择符用于指定标签属于何种样式类。class类选择符的使用语法如下:4.class与id类选择符class、id类选择符能给网页制作者带来极大的便利。21styletype=text/css!--*.a1{样式属性:属性值;样式属性:属性值;......}*.a2{样式属性:属性值;样式属性:属性值;......}......*.an{样式属性:属性值;样式属性:属性值;......}--/style或者styletype=text/css!--标签1.a1{样式属性:属性值;样式属性:属性值;......}标签2.a2{样式属性:属性值;样式属性:属性值;......}......标签n.an{样式属性:属性值;样式属性:属性值;......}--/style22下面是语法各部分的说明：⑴*.a1...*.an：为定义的类选择符名称，通常在定义样式时指定给样式的名称。其适用范围是整个HTML文件中所有由class类选择符所引用的设置。*符号也可以用HTML内的标签替代（即标签1...标签n），此外*符号，在设置可以省略。⑵标签1.a1...标签n.an：为HTML的标签名称，即前面提过的*符号，也可以用HTML内的标签替代。不同点在于，若在定义class类选择符前加上HTML的标签时，其适用范围将只限于该标签所包含的内容。23例如，在样式表中可以定义这样的类，代码如下：.pp{color:lime;font-family:黑体}p.pt{color:blue;font-family:仿宋}这些类可以使用class属性在HTML中引用：h1class=pp这是我们定义的PP类/h1pclass=pt这是我们定义的PT类/p在这个例子中，pp类可以用于任何HTML标签，因为它在样式表中没有与特定的HTML标签关联。而这个例子中pt类只能用于p标签。对于HTML文档中在结构上相同的部分，类是应用样式的有效办法。24(2).id类选择符id类选择符与class两者最大的差别在于定义样式名称前的符号,用class定义时为“*.样式名称”；若用id定义时为“#样式名称”。id与class虽然在style标签内的定义写法不太一样，但基本上其显示在网页上的效果是一样的。id类选择符的使用语法如下:styletype=text/css!--#a1{样式属性:属性值;样式属性:属性值;......}#a2{样式属性:属性值;样式属性:属性值;......}......#an{样式属性:属性值;样式属性:属性值;......}--/style25或者styletype=text/css!--标签1#a1{样式属性:属性值;样式属性:属性值;......}标签2#a2{样式属性:属性值;样式属性:属性值;......}......标签n#an{样式属性:属性值;样式属性:属性值;......}--/style下面是语法各部分的说明：(1)#a1...#an：为定义的类选择符名称，通常在定义样式时指定给样式的名称。其适用范围是整个HTML文件中所有由class类选择符所引用的设