计算机网络和多媒体技术.ppt

计算机网络和多媒体技术常宝宝北京大学信息技术学院******@pku.——层叠样式表(CSS)介绍什么是层叠样式表(CSS)?HTML语言提供了众多的元素定义超文本文档,但是在HTML语言中,面向内容和面向形式的元素常常混淆在一起(如:<Hn>),并且HTML对文档格式的支持有限,不能满足用户对页面样式的更多需求,为了解决这个问题,引入CSS样式表技术。CSS是CascadingStyleSheets的词首缩写,中文翻译为“层叠样式表”,简称样式表,它是一种改善网页外观的技术。CSS可以用来精确控制HTML文档中每个元素的样式,包括字体、背景、排列方式、区域尺寸、边框等。CSS需要IE4())以上的浏览器支持,有些效果需要更高版本的浏览器支持。CSS基本语法CSS的定义由三个部分构成:选择符、属性和属性值。CSS定义的基本格式如下: 选择符{属性:属性值}选择符可以是多种形式,一般是你要定义样式的HTML元素标签,例如:body、p、table等;属性和属性值之间用冒号隔开。如: body{color:black}选择符body是指页面主体部分,color是控制文字颜色的属性,black是颜色的值,此例的效果是使页面中的文字为黑色。,用逗号将选择符分开,这样可以减少样式重复定义。 如: p,table{font-size:9pt}效果完全等效于: p{font-size:9pt} table{font-size:9pt},可以使用类选择符。类选择符的格式为: ,一个段落向右对齐,一个段落居中,可以先定义两个类: {text-align:right} {text-align:center}然后用在不同的段落里,只要在HTML标记里加入class属性: <pclass=“right”> 这个段落向右对齐的 </p> <pclass=“center”> 这个段落是居中排列的 </p>,这样可以把几个不同的元素定义成相同的样式。如: .center{text-align:center}该类可以被应用到任何元素上<h1class=“center”> 这个标题是居中排列的 </h1> <pclass=“center”> 这个段落也是居中排列的 </p>,元素1里包含元素2,这种方式是对在元素1里的元素2的样式进行定义,对单独的元素1或元素2无定义,例如: tablea{font-size:12pt}在表格内的链接改变了样式,文字大小为12pt,而表格外的链接的文字仍为默认大小。,样式表的继承规则是外部元素的样式会保留下来继承给这个元素所包含的其它元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式叠加在一起,除非另外更改。例如在div元素中嵌套p元素。当样式表继承遇到冲突时,也就是内层对某个属性的属性值作了和外层不同的规定,则总是以内层定义的样式为准。,要考虑到不同的选择符之间的优先级。类选择符优先级高于HTML标记选择符。例如: p{color:yellow} .blue{color:blue} 则在<pclass=“blue”>…</p>中起作用的是类选择 符blue。但可以用!important提升样式表的优先权,如: p{color:yellow}!important .blue{color:blue} 则在<pclass=“blue”>…</p>中起作用的是HTML 标记选择符。,是能被浏览器自动识别的特殊选择符。它的最大的用处是根据链接文字的不同状态定义不同的样式效果。伪类的语法为: 选择符:伪类名{属性:属性值}伪类名和类名不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式。类选择符及其它选择符也同样可以和伪类混用: :伪类名{属性:属性值}