第四章 CSS层叠样式表.docx
《第四章 CSS层叠样式表.docx》由会员分享,可在线阅读,更多相关《第四章 CSS层叠样式表.docx(29页珍藏版)》请在冰豆网上搜索。
第四章CSS层叠样式表
第四章CSS层叠样式表
4.1CSS的概述
CSS是CascadingStyleSheets(层叠样式表)的缩写,其作用是提供为Web文
档添加样式的简单机制。
这里的“样式(Style)”,指的是Web文档字体的大小、颜色、边框、背景等显示属性;而“层叠(Cascading)”二字,指的是一个Web文档的样式可以从其它样式表中继承而来。
关于这一点,我们会在本章的4.3节进行详细的说明。
那么,为什么我们需要学习CSS呢?
或者说,CSS能够为我们创建Web文档带来什么好处?
第二章我们学习HTML语言基础时,我们知道HTML标签被设计为定义Web文档的布局和内容。
通过使用
、
、
这样的标签,HTML的含义是表达“这是标题”、“这是段落”、“这是表格”之类的信息。然而对于Web文档的设计师来说,这还不够全面。
Web文档的设计者不仅仅希望通过HTML这样的标记语言来设计Web文档的布局和内容,还希望通过某种方式设计Web文档的显示属性,通过控制Web文档的视觉效果(通常就是字体的大小,颜色的搭配,背景的选择等)来表达自己独特的、个性化的设计理念。
于是HTML也提供了诸如这样的标签以及与标签搭配的显示属性(如”background,bgcolor”等)来实现这一功能,但这样做存在两个问题:
1.不同的浏览器对显示属性的解释不同,不同的浏览器提供不同的视觉标签,并且同一属性在不同的浏览器里还可能表达不同的视觉效果。
2.使用相对独立的HTML所提供的显示属性,不利于整体效果的统一,修改起来也会比较麻烦。
例如,假设我们要使某个
的第一列的所有表格单元()的背景色显示为暗红色,那么或许我们可以使用第二章学习的方法,使用这样的标签来标记所有第一列的表格单元来达到这样的目的。 那么,如果有一天我们厌烦了这样的视觉效果,而想将其背景色改为纯蓝色,我们就不得不使用这样的标签对所有第一列的单元进行替换。 假如这个 有20行或者更多……好吧,你可以想象一下,这是一件多么让人厌烦的工作。因此,我们需要一种能独立于浏览器之外的、能够统一设计并管理所有(不仅仅局限于一个Web文档,而是在同一站点内的所有Web文档)相同类型的Web文档内容的视觉样式的简单机制,这就是CSS。 通过这一章的学习,我们要学会CSS的基本语法,CSS的单位和属性,以及CSS的“层叠”规则,并通过一些实例掌握CSS在Web页面设计中的应用。 4.2CSS基础 4.2.1CSS基本语法 CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行,属于浏览器解释型语言。 通常,解释型语言的语法都比较简单,CSS也正是如此。 一般而言,我们可以先定义一个样式(Style),然后再在html代码中使用这个样式。 一个典型的样式的定义由三部分组成,分别是: 1.选择符(Selector): 选择符可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE等。 你也可以简单的理解为该样式的名字。 我们通过它定义一个样式,也通过它使用该样式。 2.属性(Property): 需要定义的显示属性,一个样式中可定义多个显示属性。 3.属性值(Value): 各属性的取值,包括单位。 以下是一个样式一般的语法格式: selector{property: value;} 例如: p{color: blue;} 其中,p就是选择符,它对应HTML中的 标签;color是属性,表示需要 设置 标签中的内容颜色;blue是属性值,表示 标签中的内容颜色为纯蓝色。 最后以一个分号“;”作为一个“属性: 值对”的结尾,一个选择符可以包含多条属性,属性间以分号“;”间隔,例如: P{color: blue;font-size: 12px;} 定义了一个样式之后,就可以在html代码中使用这一样式。 样式的使用(引用)共有三种方式,分别是: 内联引用、内部引用(嵌入)与外部引用。 1.CSS的内联引用 内联,即把CSS样式直接作用在html标签中,例如: 12px;color: blue;"> (该段落的文字大小为12个像素,其颜色为纯蓝色)
除了、和
相关搜索
| |