常宝宝北京大学信息技术学院chbb@pku.edu.n 计算机网络和多媒体技术

《常宝宝北京大学信息技术学院chbb@pku.edu.n 计算机网络和多媒体技术》由会员分享，可在线阅读，更多相关《常宝宝北京大学信息技术学院chbb@pku.edu.n 计算机网络和多媒体技术（28页珍藏版）》请在装配图网上搜索。

1、常宝宝北京大学信息技术学院计算机网络和多媒体技术层叠样式表(CSS)介绍什么是层叠样式表(CSS)?HTML语言提供了众多的元素定义超文本文档，但是在HTML语言中，面向内容和面向形式的元素常常混淆在一起(如：)，并且HTML对文档格式的支持有限，不能满足用户对页面样式的更多需求，为了解决这个问题，引入CSS样式表技术。CSS是Cascading Style Sheets的词首缩写，中文翻译为“层叠样式表”，简称样式表，它是一种改善网页外观的技术。CSS可以用来精确控制HTML文档中每个元素的样式，包括字体、背景、排列方式、区域尺寸、边框等。CSS需要IE4(Internet Explorer

2、 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版本的浏览器支持。xml是可以脱离html的，人们希望它将来能够完全取代html。CSS基本语法CSS的定义由三个部分构成：选择符、属性和属性值。CSS定义的基本格式如下：选择符可以是多种形式，一般是你要定义样式的HTML元素标签，例如：body、p、table等；属性和属性值之间用冒号隔开。如：body color:black选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。参见 css01.html选择符组具有相同属性和值的选择符可以组合起来

3、书写，用逗号将选择符分开，这样可以减少样式重复定义。如：p,table font-size:9pt 效果完全等效于：p font-size:9pt table font-size:9pt 参见 css02.html类选择符给同类元素定义不同类型的样式，可以使用类选择符类选择符。类选择符的格式为：如页面中希望定义两个不同的段落样式，一个段落向右对齐，一个段落居中，可以先定义两个类：p.right text-align:rightp.center text-align:center然后用在不同的段落里，只要在HTML标记里加入class属性：这个段落向右对齐的 这个段落是居中排列的参见 css03

4、.html类选择符类选择符中的HTML元素名称可以省略，这样可以把几个不同的元素定义成相同的样式。如：.center text-align:center该类可以被应用到任何元素上这个标题是居中排列的这个段落也是居中排列的参见 css04.html包含选择符可以单独针对某种元素包含关系定义样式表，元素1里包含元素2，这种方式是对在元素1里的元素2的样式进行定义，对单独的元素1或元素2无定义，例如：table a font-size:12pt 在表格内的链接改变了样式，文字大小为12pt，而表格外的链接的文字仍为默认大小。参见 css05.html样式表的层叠性层叠性就是继承性，样式表的继承规则是

5、外部元素的样式会保留下来继承给这个元素所包含的其它元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在div元素中嵌套p元素。当样式表继承遇到冲突时，也就是内层对某个属性的属性值作了和外层不同的规定，则总是以内层定义的样式为准。参见 css06.html选择符的优先级不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。类选择符优先级高于HTML标记选择符。例如：p color:yellow.blue color:blue则在中起作用的是类选择 符blue。但可以用!important提升样式表的优先权，如：p c

6、olor:yellow !important.blue color:blue则在中起作用的是HTML 标记选择符。参见 css07.html伪类伪类是一种特殊的类选择符，是能被浏览器自动识别的特殊选择符。它的最大的用处是根据链接文字的不同状态定义不同的样式效果。伪类的语法为：选择符:伪类名 属性:属性值伪类名和类名不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。类选择符及其它选择符也同样可以和伪类混用：选择符.类名:伪类名 属性:属性值链接元素的伪类最常用的伪类是关于链接元素4个伪类，分别表示链接的4种不同状态

7、：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。通过伪类可以定义不同状态下链接文字效果，如：a:hover font-size:20pt参见 css08.html如何在网页中插入CSS链入外部样式表内部样式表内嵌样式 一个外部样式表文件可以应用于多个页面。对样式表文件的改变,所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。链入外部样式表可以把所有的样式定义保存为一个样式表文件，然后在HTML文档头部链入该样式表文件。在HTML文档

8、中链入外部样式表使用元素link，该元素必须位于HTML文档的文档头部（即head区内），基本格式是：rel=”stylesheet”表示链入的文档是一个样式表文档。type=”text/css”是指文件的类型是CSS样式表文档。href=”mystyle.css”是CSS文件所在的位置以及文件名。参见 css10.html内部样式表直接在HTML文件head区内定义的样式表称为内部样式表。用于内部样式表定义的HTML元素是style，如：hr color:siennap margin-left:20pxbody background-image:url(images/back40.gif)内

9、嵌样式表样式定义也可以通过设定HTML元素的style属性的方式进行，通过这种方法定义的样式表称为内嵌样式表。用这种方法，可以很简单的对某个元素单独定义样式。如：这是一个段落（这个段落颜色为土黄，左边距为20象素）参见 css11.html多重样式表的叠加如果对同一个HTML元素既使用了外部样式表,又使用了内嵌样式表或内部样式表，其属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。例如：首先链入一个外部样式表，其中有：h3 color:red;text-align:left;font-size:8pt 然后在内部样式表里也定义了h3选择符：h3 text-align:right;fo

10、nt-size:20pt 那么这个页面叠加后的样式就是：h3 color:red;text-align:right;font-size:20pt 优先级最高的是内嵌样式表，内部样式表高于外部样式表。元素格式模型宽度边距边框填充距内容q 参见 yfz.html长度单位CSS中指定各种元素大小可用三种方式，分别是：绝对方式单位可以是点(pt=1/72英寸)、英寸(in)以及厘米(cm)等，如：p font-size:20pt b font-size:xx-large相对方式单位可以是(em)、像素(px)等，如：p line-height:1.5em百分比方式相对于某个其它长度的百分比，如：p f

11、ont-size:150%q 参见 size.htmlCSS字体属性参见 css12.html颜色和背景属性参见 css13.html cssbg.html间距属性参见 css14.html边距、填充距属性q 边距属性q 填充距属性项目符号和编号q 参见 css19.html边框属性q 参见 css15.html图文混排q 参见 css16.html鼠标属性q 参见 css17.html其它CSS属性定位属性 直接控制HTML元素在页面中的显示位置，包括平面位置和空间位置。滤镜属性 对HTML元素进行透明化、模糊化、颜色反相、阴影化等处理参见 position.html filter.html思考题（1）CSS的含义是什么？（2）为什么要引入CSS，它和HTML关系如何？（3）如何在HTML文档中使用CSS？（4）叙述样式表的层叠性，并举例说明。