2019最新常宝宝北京大学信息技术学院 计算机网络和多媒体技术体育

计算机网络和多媒体技术
——层叠样式表(CSS)介绍
常宝宝 北京大学信息技术学院
chbb@
什么是层叠样式表(CSS)?
HTML语言提供了众多的元素定义超文本文档，但是在HTML语言中，面向内容和 面向形式的元素常常混淆在一起(如：<Hn>)，并且HTML对文档格式的支持有限， 不能满足用户对页面样式的更多需求，为了解决这个问题，引入CSS样式表技术。
参见 css06.html
选择符的优先级

不同的选择符定义相同的元素时，要考虑到不同的选择符之间的 优先级。
类选择符优先级高于HTML标记选择符。例如：
p { color: yellow }
.blue { color: blue}
则在<p class=“blue”>…</p>中起作用的是类选择
body {color: black}
选择符body是指页面主体部分，color是控制文字
颜色的属性，black是颜色的值，此例的效果是使
页面中的文字为黑色。
参见 css01.html
选择符组
具有相同属性和值的选择符可以组合起来书写，用 逗号将选择符分开，这样可以减少样式重复定义。 如： p, table{ font-size: 9pt } 效果完全等效于： p { font-size: 9pt } table { font-size: 9pt }
可以把所有的样式定义保存为一个样式表文件，然后在HTML文 档头部链入该样式表文件。
在HTML文档中链入外部样式表使用元素link，该元素必须位于 HTML文档的文档头部（即head区内），基本格式是：
类选择符
类选择符中的HTML元素名称可以省略，这样可以 把几个不同的元素定义成相同的样式。如： .center {text-align: center} 该类可以被应用到任何元素上 <h1 class=“center”> 这个标题是居中排列的 </h1> <p class=“center”> 这个段落也是居中排列的 </p>
参见 css02.html
类选择符
给同类元素定义不同类型的样式，可以使用类选择符。 类选择符的格式为：
HTML元素名.类名 如页面中希望定义两个不同的段落样式，一个段落向右对齐，一个段落居中， 可以先定义两个类：
p.right {text-align: right} p.center {text-align: center} 然后用在不同的段落里，只要在HTML标记里加入class属性： <p class=“right”> 这个段落向右对齐的 </p> <这p个c段las落s=是“居ce中nt排er列”>的 </p> 参见 css03.html
如何在网页中插入CSS
链入外部样式表 内部样式表 内嵌样式
一个外部样式表文件可 以应用于多个页面。对样式 表文件的改变,所有页面的样 式都随之而改变。在制作大 量相同样式页面的网站时， 非常有用，不仅减少了重复 的工作量，而且有利于以后 的修改、编辑，浏览时也减 少了重复下载代码。
链入外部样式表
伪类的语法为： 选择符:伪类名 {属性: 属性值}
伪类名和类名不同，是CSS已经定义好的，不能象 类选择符一样随意用别的名字，根据上面的语法可 以解释为对象（选择符）在某个特殊状态下（伪类） 的样式。
类选择符及其它选择符也同样可以和伪类混用： 选择符.类名:伪类名 {属性: 属性值}
链接元素的伪类
CSS是Cascading Style Sheets的词首缩写，中文翻译为“层叠样式表”，简称样式 表，它是一种改善网页外观的技术。
CSS可以用来精确控制HTML文档中每个元素的样式，包括字体、背景、排列方式、 区域尺寸、边框等。
CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果 需要更高版本的浏览器支持。
参见 css04.html
包含选择符
可以单独针对某种元素包含关系定义样式表， 元素1里包含元素2，这种方式是对在元素1里 的元素2的样式进行定义，对单独的元素1或元 素2无定义，例如：
table a { font-size: 12pt } 在表格内的链接改变了样式，文字大小为12pt， 而表格外的链接的文字仍为默认大小。
xml是可以脱离html的，人们希望它将来能够完全取代html。
CSS基本语法
CSS的定义由三个部分构成：选择符、属性和属性 值。
CSS定义的基本格式如下： 选择符 {属性: 属性值}

选择符可以是多种形式，一般是你要定义样式的 HTML元素标签，例如：body、p、table等；属
性和属性值之间用冒号隔开。如：
参见 css05.html
样式表的层叠性
层叠性就是继承性，样式表的继承规则是外部元素的样 式会保留下来继承给这个元素所包含的其它元素。事实 上，所有在元素中嵌套的元素都会继承外层元素指定的 属性值，有时会把很多层嵌套的样式叠加在一起，除非 另外更改。例如在div元素中嵌套p元素。
当样式表继承遇到冲突时，也就是内层对某个属性的属 性值作了和外层不同的规定，则总是以ortant提升样式表的优先权，如：
p { color: yellow } !important .blue { color: blue}
则在<p class=“blue”>…</p>中起作用的是HTML 标 记选择符。
参见 css07.html
伪类
伪类是一种特殊的类选择符，是能被浏览器自动识 别的特殊选择符。它的最大的用处是根据链接文字 的不同状态定义不同的样式效果。
最常用的伪类是关于链接元素4个伪类，分别表示链接 的4种不同状态：link、visited、active、hover（未访 问的链接、已访问的链接、激活链接和鼠标停留在链接 上）。通过伪类可以定义不同状态下链接文字效果，如： a:hover {font-size:20pt}
参见 css08.html