商务网站设计与开发温浩宇西安电子科技大学第3章 层叠样式表内容 CSS简介 选择 符3.1 CSS的层叠性与优先次序3.2 常用属性及其应用实例3.3 CSS盒子模型和网页布局方 式3.4 思考题3.53.63.1 CSS简介层叠样式表（Cascaing Style Sheet，简称为CSS）是W3C组 织所拟定出的一套标准的样式语言规范。 随着CSS技术技术的使用，HTML页面真正“活动”了起来。而 在HTML 5中，一些纯粹用作显示效果的元素将取消，因为它们 显示效果的工作更适合由CSS来担当。 作为一种用于网页展示的样式语言，CSS增加了更多的样式定 义方式来辅助HTML语言。通过CSS样式表的定义，只要设定某 种元素（如：表格、背景、连结、文字、按钮、滚动条等）的 样式，则各网页相同种类的元素将会呈现出相同的风格。这种 方式不仅加快了网站开发的进度，而且便于建立一个风格统一 的网站。3.1 CSS简介CSS的定义可以直接放在HTML元素中，称为内联样式。形式如下： This is a paragraph. CSS的定义可以放在HTML文件的元素中，称为内部样式表。形式如下：body background-color: yellow; CSS的定义也可以独立保存在一个扩展名为.css的文件中，通过链接的方式包含 入网页中，称为外部样式表。形式如下：3.2 选择符一条CSS规则中包括两个部分：一个选择符（selector）和一个或多个描述（ declaration），描述之间用分号隔开。每一个描述中又包含属性名（property ）和属性值（value）。语法如下： selector property:value; property:value; 下面的CSS规则中声明了段落元素的显式方式，包括文本居中、黑色、arial 字体。CSS中的注释在“/*”和“*/”之间。 p text-align: center;color: black;font-family: arial; 在这个例子中，p是选择符，text-align、color和font-family是属性，并为这些 属性设置了相应的属性值。3.2 选择符（1）类选择符 选择符可以是一种HTML元素，例如“p”、“table”等，这些 可以看作是HTML预定义的类。例如下面的CSS规则：body background: #fff; margin: 0; padding: 0; p color: #ff0000; 应用了上述CSS的HTML文档中所有的元素（虽然只可 能有一个）和所有的元素都将无需声明而自动遵守上述的 CSS规则。3.2 选择符（2）子类选择符 选择符可以是一种HTML元素的一部分实例，可以理解为基于该类元素（ 基类）的一个子类。例如下面的CSS规则： td.fancy background: #666; p.rchild text-align: right 在HTML应用上述CSS规则时，必须声明元素的class为某个子类。例如下 面代码： ABC p标记中的内容 如果在定义子类时没有给出基类的名称，则可认为它是任何基类的子 类。例如下面的CSS规则： .cchild text-align: center3.2 选择符（3）嵌套类选择符 选择符可以是根据元素之间的嵌套关系而确定的类，嵌套关系也可以理解为上下 文关系。例如下面的CSS规则和相应的HTML代码： td a text-align: center;File AFile BFile C 上述CSS规则意味着：只有在单元格中的超链接才会应用文字居中的样式，而其 它的超链接则会忽略这一规则。3.2 选择符（4）id选择符 选择符可以是HTML文档中的一个特定元素，例如用“id”属性标识的 某一个段落。这些可以看作是HTML元素类的实例对象。例如下面的 CSS规则和相应的HTML代码： #red color:red; #green color:green;这个段落是红色。 这个段落是绿色。 id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元 素显示为绿色。3.2 选择符（5）伪类与伪元素选择符 CSS 伪类（Pseudo-class）用于向某些选择器添加特殊的效果。使用 伪类选择符的语法如下： selector:pseudo-class property:value;伪类描述:active向被激活的元素添加样式。:hover当鼠标悬 浮在元素上方时，向元素添加样式。:link向未被访问 的链接添加样式。:visited向已被访问 的链接添加样式。3.2 选择符下面代码给出了伪类用于超链接的显式效果，在不同的状态下超链接的颜色不同：a:link color: #FF0000; /* 未访问的超链接 */a:visited color: #00FF00; /* 已访问的超链接*/a:hover color: #FF00FF; /* 鼠标位于超链接之上 */a:active color: #0000FF; /* 鼠标在超链接上按键 */这是一个由伪类装饰的超链接3.2 选择符（6）选择符分组 如果需要将多个类或id设置成相同的样式，我们可以对多 个选择符进行分组设置。被分组的选择符用逗号隔开，共 享相同的声明。下面的例子中所有的标题元素都会以绿色 进行显示，而段落和表格中的字体也被一起设定为9pt大 小。h1,h2,h3,h4,h5,h6 color: green; p, table font-size: 9pt 3.3 CSS的层叠性与优先次序CSS允许以多种方式规定样式信息，包括内联样式、内部样式表、外 部样式表等。 如果在同一个HTML文档内部以不同的方式应用了多个CSS的定义，且 对同一个HTML元素存在不止一次样式定义时，浏览器会使用哪个样 式呢？通常，这些来源不同的样式将根据一定的优先规则层叠于一个 虚拟样式表中，且其优先顺序从高到低为： n 内联样式（在 HTML 元素内部定义样式） n 内部样式表（在HTML文档头部元素中定义样式） n 外部样式表（在HTML文档头部元素中链接CSS文件） n 浏览器默认设置（每个浏览器都对各种元素有默认的显示样式）3.3 CSS的层叠性与优先次序CSS文本属性 n 在CSS中，文本属性可定义文本的外观，如，改变文本的颜色、对齐文 本、装饰文本、对文本进行缩进等。属性描述 color设置文本的颜色 text-indent规定文本块首行的缩进 text-align对齐元素中的文本 word-spacing设置字间距 letter-spacing设置字符间距 text-transform控制元素中的字母 text-decoration向文本添加修饰 white-space设置元素中空白的处理方式 direction设置文本方向3.4 常用属性及其应用实例p line-height: 0.5; text-indent: 1cm; h1 text-decoration: overline; h2 text-decoration: line-through; h3 text-decoration: underline; h4 text-decoration: blink; h5 letter-spacing: 20px; 清明 作者：杜牧 清明时节雨纷纷，路上行人欲断魂。 借问酒家何处有，牧童遥指杏花村。3.4 常用属性及其应用实例CSS表格属性 n CSS样式表中允许设置表格的属性，以确定表格的布局。属性描述border-collapse设置是否把表格边框合并为单 一的边框border-spacing设置分隔单元格边框的距离caption-side设置表格标题 的位置empty-cells设置是否现实 表格中的空单元格table-layout设置显示单元，行和列的算法3.5 CSS盒子模型和网页布局方式盒子模型对于CSS控制页面起着举足轻 重的作用。熟练掌握盒子模型，以及 盒子模型各个属性的含义和应用方法 后，就可以轻松地控制页面中每个元 素的位置。下面将介绍盒子模型的概 念及其属性的含义和使用方法。 CSS中盒子模型用于描述一个为HTML 元素形成的矩形盒子。盒子模型是由 margin（边界）、border（边框）、 padding（空白）和content（内容 ）4个属性组成。3.5 CSS盒子模型和网页布局方式CSS的定位功能 n 在网页设计中，能否控制到各个模块在页面中的位置非常关键。这些模 块只有放置在正确的位置，网页的布局看起来才够美观。网页中的各种 元素都必须有自己合理的位置，才能搭建出整个页面的结构。 n 使用CSS的定位功能，可以相对地、绝对地或者固定地对任何一个元素进 行定位。在文本流中，任何一个元素都被文本流设置了其自身的位置， 但通过CSS的定位就可以改变这些元素的位置。可以通过某个元素的上、 下、左、右移动对其进行相对定位。进行相对定位后，虽然元素的表现 区脱离了文本流，但在文本流内却为该元素保留一块空间位置，这个位 置不能随着文本流的移动而移动。3.5 CSS盒子模型和网页布局方式CSS的定位方式 l 在CSS中对元素的定位，可以通过position属性设置。是所有元素定位的默认值 ，无特殊定位，对象遵循HTML定位规则 ，不能通过z- index进行层次分级。相对定位。对象不可层叠，可以通过left、right、bottom、top等属性指定该元素在 正常文档流中的偏移位置，可以通过z-index进行层次分级。static参数绝对 定位。脱离文档流，通过left、right、bottom、top等属性进行定位。选取其最 近的父级定位元素，当父级元素的position为static时，该元素将以body坐标原点 进行定位，可以通过z-index进行层次分级。relative参数固定定位。该参数固定的对象是可视窗口，而并非body或父级元素，可通过z- index进行层次分级。absolute参数fixed参数3.5 CSS盒子模型和网页布局方式将元素的top属性设置为 20px，则元素将移动到原位 置顶部下方20像素的地方； 同时，将该元素的left设置为 30px，则该元素将向右移动 30像素，效果如图3-5所示。 #box_relative position: relative;left: 30px;top: 20px; 3.5 CSS盒子模型和网页布局方式绝对定位使元素的位置与文 档流无关，因此不占据空 间。这一点与相对定位不同 ，文本流中其它元素的布局 就像绝对定位的元素不存在 一样。 #box_relative position: absolute;left: 30px;top: 20px; 3.5 CSS盒子模型和网页布局方式常见的网页排版模块图3.6 思考题（1）CSS文本属性可以设置文字的样式，HTML中的文本元素也可以对文字样式进行设置。试比 较这两种方式的主要不同之处。（2）CSS的层叠性是如何体现的，试举例说明。（3）从软件工程的角度来分析，用CSS进行网页显示样式的设计有何优点。（4）简述CSS盒子模型的主要思路。