第四章CSS层叠样式表分析
第章CSS层叠样式表CSS的” ” color=” ”>这样的标签以及与标签搭配的显示属性(如”background, bgcolor”等)来实现这一功能,但这样做存在两个问题:
1.不同的浏览器对显示属性的解释不同,不同的浏览器提供不同的视觉标签,并且同一属性在不同的浏览器里还可能表达不同的视觉效果。
2.使用相对独立的HTML所提供的显示属性,不利于整体效果的统一,修改起来也会比较麻烦。
例如,假设我们要使某个
因此,我们需要一种能独立于浏览器之外的、能够统一设计并管理所有(不仅仅局限于一个Web文档,而是在同一站点内的所有Web文档)相同类型的Web文档内容的视觉样式的简单机制,这就是CSS。
通过这一章的学习,我们要学会CSS的基本语法,CSS的单位和属性,以及CSS的“层叠”规则,并通过一些实例掌握CSS在Web页面设计中的应用。
CSS基础
4.2.1 CSS基本语法
CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行,属于浏览器解释型语言。通常,解释型语言的语法都比较简单,CSS也正是如此。一般而言,我们可以先定义一个样式(Style),然后再在html代码中使用这个样式。
一个典型的样式的定义由三部分组成,分别是:
选择符(Selector):选择符可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE等。你也可以简单的理解为该样式的名字。我们通过它定义一个样式,也通过它使用该样式。
属性(Property):需要定义的显示属性,一个样式中可定义多个显示属性。
属性值(Value):各属性的取值,包括单位。
以下是一个样式一般的语法格式:
selector {property: value;}
例如:
p {color:blue;}
其中,p就是选择符,它对应HTML中的
标签;color是属性,表示需要
设置
标签中的内容颜色;blue是属性值,表示
标签中的内容颜色为纯蓝色。最后以一个分号“;”作为一个“属性:值对”的结尾,一个选择符可以包含多条属性,属性间以分号“;”间隔,例如:
P { color:blue; font-size:12px;}
定义了一个样式之后,就可以在html代码中使用这一样式。样式的使用(引用)共有三种方式,分别是:内联引用、内部引用(嵌入)与外部引用。
1.CSS的内联引用
内联,即把CSS样式直接作用在html标签中,例如:
(该段落的文字大小为12个像素,其颜色为纯蓝色)
除了
使用内联CSS的网页制作者必须将标签里的CONTENT属性设置为text/css,而HTTP-EQUIV属性设置为Content-Style-Type,例如:
注意: 中文网页的标记为:
因为和需要展示的内容混合在一起,内联样式会失去一些样式表的优点。一般情况下,应当尽量避免使用。
需要注意的是,使用内联方式时,其样式只在使用了style属性的这一标签中有效,在其它的标签中是无效的。例如:
(该段落的文字大小为12个像素,其颜色为纯蓝色)
(该段落的文字的显示属性为默认)
2.CSS的内部引用(嵌入)
可以使用
/* ----------文字样式开始----