第三章层叠样式表（ css ）技术

第三章层叠样式表（ CSS）技术基于 CSS,本章介绍网页的基本格式化和布局技术CSS 简介定义样式使用样式CSS 基本属性样式层叠性元素框模型

23/4/20 1

元素定位元素布局列表样式表格制作页面布局

如今网页排版格式越来越来复杂，如果要对多个网页的同样格式一一进行设计，那么就会给制作人员带来很多的工作量，所以解决办法是采用 CSS样式来一次性对若干个文档的格式进行控制。

3.1 CSS 简介

CSS （ Cascading Style Sheet ，层叠样式表）技术是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。

3.1 CSS 简介

CSS 样式存于样式表文件中，然后在多个网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。

3.1 CSS 简介

3.1 CSS 简介例 3.1 使用 CSS 将所有文字显示为“倾斜”

Dreamweaver8操作：菜单“文本 /CSS样式 / 新建”

23/4/20 5

23/4/20 6

23/4/20 7

23/4/20 8

生成的代码<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档 </title><style type="text/css"></style></head>

23/4/20 9

样式选择器

参看教材 P47

3.2 定义样式3.2.1 样式定义格式样式定义由样式规则组成，每条样式规则包括选择器和样式声明 , 如： selector {property:value; …}样式声明由一系列属性声明组成, 而属性声明又由属性名和属性值构成示例p { font-style: italic;

color: #FF0000;} /* 将普通 p 段落文字显示为斜体、红色 */h1,h2,h3 { color:red } /* 将 h1,h2,h3 标题文字显示为红色 */h2 { font-size: small; color:blue } /* 将 h2 标题文字指定为小的蓝色字 */

23/4/20 10

3.2.2 基本选择器最常用的选择器 : HTML 标签选择器、类选择器和 ID 选择器一、 HTML 标签选择器为 HTML 标签定义的样式将改变它的默认显示格式例 3.2 超链接没有下划线a {text-decoration: none; /* 去除超链接的下划线 */}

中山大学计算机科学系23/4/20 11

3.2.2 基本选择器二、类选择器形式 : 一个点号和一个类名： .classname { property:value;…}效果 : 使具有指定 class 属性的页面元素具有该类样式指定的显示格式例 3.3 所有大学名显示为“倾斜、加粗”.university_name { font-style: italic; font-weight: bold; } /* 文字倾斜、加粗 */


3.2.2 基本选择器三、 ID 选择器形式 : 一个井号（ # ）和一个 ID #IDname { property:value;…}效果 : 使具有指定 ID 属性的元素具有指定格式例 3.4 使术语“级联样式表 (CSS)”显示为“倾斜、加粗、大字体”#css_name { font-style: italic; font-weight: bold; font-size: large; }


3.3 使用样式CSS 样式的三种使用方式 :嵌入样式表（即在新建样式规则时选择：仅对该文档）链接外部样式表 ( 标准方法，实现网页结构和表现的完全分离，外部样式表是一个独立的 CSS文件 )内嵌样式（在 HTML标签中定义样式）优先程度：内嵌式 > 嵌入样式表 > 链接外部样式表23/4/20 14

3.3.1 嵌入样式表形式 : 使用 <style> 元素把 CSS 样式定义在 HTML 文档的 <head> 元素内效果 : 作用于当前页面的有关元素例 3.5 所有大学名显示为“加粗”，并且所有超链接没有下划线<style type="text/css">.university_name { font-weight: bold; }a { text-decoration: none; }</style>


3.3.2 链接外部样式表定义: 把 CSS 样式定义写入一个以 css 为扩展名的文本文件中，如 mystyle.css形式: 在 <head> 元素内加入代码： <link rel="stylesheet" type="text/css" href="mystyle.css" />

效果: 外部样式表中的样式作用于页面好处：一个外部样式表可以控制多个页面的显示外观，从而确保这些页面外观的一致性例 3.6 设计多个页面，要求这些页面中所有大学名称的显示样式为“加粗”，并且所有超链接没有下划线

23/4/20 16

3.3.3 内嵌样式定义 : 直接使用 HTML 标签的 style 属性定义的样式 , 如：<p style="font-size:large;color:red">Hello</p>

效果 : 只作用于这个元素例 3.7 使大学名显示为“加粗”，并且超链接没有下划线

23/4/20 17

3.4 CSS 基本格式化属性CSS 属性分类：

基本格式化属性：包括字体、文本和背景属性等布局性属性：包括框属性、定位属性、布局属性、列表属性和表格属性等。

可视化设置方法 :“样式”对话框、“ CSS 属性”窗格

23/4/20 18

显示所有样式显示当前样式

内部样式表

样式名称

样式及属性值

3.4.1 属性值与单位一、属性值分类单词。如 font-style: italic;数字值。通常带有单位，如 font-size:12px;颜色值。如 color: red;

23/4/20 20

3.4.1 属性值与单位二、数字值单位数字值用于定义各种元素的长度（包括高度、宽度和粗细等），可以使用下表单位


23/4/20 22

3.4.1 属性值与单位三、颜色值可以下表所列方式为 CSS 属性（如前景色、背景色）指定颜色值

23/4/20 23

3.4.2 字体属性字体属性用于控制文本中的字体格式，如文字的字体、大小、粗细、颜色和修饰等常用字体属性 :font-family、 font-size、 font-style、 font-weight、 font-variant、 font、 text-transform、 text-decoration、 color例 3.8 将文字“ JavaScript”设置为 Times New Roman 字体、加粗、倾斜、字体大小 36磅、红色字，并且小体大写

23/4/20 24

3.4.3 文本属性文本属性用于控制文本块的段落格式，如首行缩进、段落对齐方式等常用文本属性 :text-align、 vertical-align、 text-indent、 line-height、 letter-spacing、 word-spacing、white-space例 3.9 将标题居中，并使正文段落首行缩进 2个字符、行间距 150%、字间距 1 磅


SPAN

span 元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与 CSS 结合使用的话，span 可以对文档中的部分文本增添视觉效果。

举例 :<p> 早睡早起使人健康、富裕又聪颖。 </p>

假设我们想将健康 , 富裕 , 聪颖这三个词用红色显示 . 我们可以用 <span> 标签来标记 , 然后，我们将这几个 span 设置为相同的 class 。这样，我们稍后就可以在样式表里针对这个 class 定义特定的样式。

<p> 早睡早起使人 <span class="benefit">健康 </span> 、 <span class="benefit"> 富裕 </span> 和 <span class="benefit"> 聪颖</span> 。 </p>

相应的 CSS 代码如下：span.benefit { color:red; } 示例程序见 d:/test/span-exe.html

SPAN 与 DIV

span 的使用局限在一个块元素内，而 div可以被用来组织一个或多个块元素。

让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表：

<div id="democrats"> <ul> <li> 富兰克林 ·D· 罗斯福 </li> <li> 哈利 ·S· 杜鲁门 </li> <li> 约翰 ·F· 肯尼迪 </li> <li> 林登 ·B· 约翰逊 </li> <li> 吉米 · 卡特 </li><li> 比尔 · 克林顿 </li> </ul> </div>

• <div id="republicans"> <ul>

<li> 德怀特 ·D· 艾森豪威尔</li>

<li> 理查德 · 尼克松 </li> <li> 杰拉尔德 · 福特 </li> <li> 罗纳德 · 里根 </li> <li> 乔治 · 布什 </li> <li> 乔治 ·W· 布什 </li> </ul> </div>

可以定义样式如下 :#democrats { background:blue; } #republicans {

background:red; }

3.4.4 背景属性背景属性用于控制页面元素的背景颜色和背景图案常用背景属性 : background-color、 background-image、 background-position、 background-repeat、 background-attachment、 background例 3.10 一个小图像填充整个页面背景，并且程序代码设置为银灰色背景

23/4/20 32

3.5 样式层叠性3.5.1 文档结构HTML 文档的结构 : 是指 HTML 元素之间的嵌套关系，可以用文档结构树表示

节点表示 HTML 元素若一个元素直接包含另一个元素，则画一条连线


3.5.2 样式继承样式继承是指 HTML 元素可以继承父元素的 CSS 属性

有些属性被自动继承，如字体、文本等属性；但有些属性不被自动继承，如背景、边框等属性对于相对长度单位值（如百分比），继承的是相对值的实际计算值特殊的属性值 :inherit

例 3.11 定义样式，将页面的普通文字大小设置为 12pt，而将 h1 标题的文字大小设置为普通文字的 150% body { font-size: 12pt; } h1 { font-size: 150%; }

23/4/20 34

3.5.3 样式层叠样式层叠性：所有样式规则将按继承层次传递作用于相关 HTML 元素，并按层叠规则解决 CSS 属性的重复定义问题层叠规则：

规则 1 ： HTML 标签＜类＜ ID 优先级依次升高规则 2 ：外部样式表＜嵌入样式表＜内嵌样式。但是，当选择器更有针对性时，规则 1 优先于规则 2规则 3 ：定义的样式覆盖继承的样式

例 3.12 超链接的字体为“隶书”，没有下划线，但其中一个超链接有下划线

23/4/20 35

3.5.4 结构性选择器通配选择器 * * { padding: 0; margin: 0; } 清除所有元素的内边距和外边距后代选择器 address i { color:red; } 将位于 <address> 元素内的 <i> 元素设置为红色字子选择器 body > h1{ color:red;} 将 <body> 元素的 <h1> 子元素设置为红色字

23/4/20 36

3.5.4 结构性选择器相邻兄弟选择器 h1 + p { color:red;} 将与 <h1> 元素相邻的下一个 <p> 兄弟元素设置为红色字带类名的 HTML 标签选择器 span.term { color: red; } 将具有类名为“ term”的 <span> 元素设置为红色字带 id 的 HTML 标签选择器 span#id_name { color: red; } 将其 id 属性为“ id_name”的 <span> 元素设置为红色字

23/4/20 37

3.5.4 结构性选择器属性选择器: 为具有某个属性值的 HTML 元素定义样式⑴简易匹配属性选择器： li[class] { color: red;}

⑵精确匹配属性选择器： li[class="term"] { font-weight: bold; }

⑶部分匹配属性选择器： li[class~="att"] { font-style: italic; }

⑷前缀匹配属性选择器： li[class|="term"] { text-decoration: underline; }

23/4/20 38

3.5.5 伪类常用伪类

:link 未访问超链接:visited 已被访问超链接:active 激活状态:hover 鼠标悬停状态:focus 已获取焦点状态:first-child 第 1 个子元素

例 3.13


3.5.6 伪元素伪元素是指在 HTML 文档中没有用 HTML 标签明确标记的元素

:first-letter首字母:first-line 首行:before 在某元素内容之前插入内容:after 在某元素内容之后插入内容

例 3.14


3.6 元素框模型3.6.1 框模型概述元素框 : 可显示的页面元素都显示为一个矩形框，包括内容区、内边距、边框和外边距 4 个区域

例 3.15

23/4/20 41

3.6.2 框属性一、边框属性CSS 边框属性包括边框设置和方向的组合 :

边框设置 : 包括边框颜色（ color）、边框样式（ style）和边框宽度（ width）边框方向：上（ top）、右（ right）、下（ bottom）和左（ left）

例 3.16 为段落设置灰色边框，其中，上、下边框宽度分别为 thin 和 thick，而左、右边框宽度都为 medium


3.6.2 框属性二、内边距属性内边距属性 padding-top、 padding-right、padding-bottom 和 padding-left 分别设置上、右、下、左内边距的宽度例 3.17 为段落设置内边距，其中，上、下内边距宽度为 10px，而左、右内边距宽度为 20px

23/4/20 43

3.6.2 框属性三、外边距属性外边距属性 margin-top、 margin-right、margin-bottom 和 margin-left 分别设置上、右、下、左外边距的宽度例 3.18 为页面体设置外边距，其中，上、下外边距宽度为 1cm，而左、右外边距宽度为 2cm


3.6.3 外边距重叠当两个元素的垂直外边距相遇时，它们将重叠为一个外边距。重叠后的外边距高度等于两个发生重叠的外边距的高度中的较大者例 3.19 标题的下外边距高度为 1cm，列表项上、下外边距高度为 0.5 cm。易知：标题与第 1个列表项之间的外边距高度为 1cm


3.6.4 框大小一、替换元素与非替换元素替换元素：是指其元素内容来自 HTML 标签的属性值。如 img 元素非替换元素：是指其元素内容来自 HTML 标签自身或标签对之间的内容。如 p 、 h1、 h2、 hr 等二、大小属性自动计算大小width、 heightmax-width、 min-width、 max-height 和 min-height

23/4/20 46

3.6.4 框大小三、内容区大小与元素框大小内容区大小 : 是指元素内容区的宽度和高度，可以由属性 width 和 height 设置。元素框大小元素框宽度 =width+左右内边距 + 左右边框 + 左右外边距元素框高度 = height +上下内边距 + 上下边框 + 上下外边距例 3.20


定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。div 、 h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反， span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。23/4/20 48

3.7 元素定位3.7.1 定位概念

3.7 元素定位3.7.1 定位概念一、文档流每个可显示元素以元素框的形式，按照其 HTML 代码位置依次显示，从而构成一个文档流。即：块级框从上至下依次排列行内框在一行中水平布置二、定位属性position ：static、 relative、 absolute 、 fixedtop、 bottom、 left、 right和 z-index

23/4/20 49

3.7.1 定位概念三、包含块包含块是显示文档流的矩形区域，最基本的包含块是 body 元素框和浏览窗口自定义包含块：将一个元素的定位方式设置为非 static 方式“一个元素的包含块”是指该元素最近的按非 static 方式定位的祖先元素（注：不一定是父元素）的元素框，或者是 body 元素框（或浏览窗口）

23/4/20 50

3.7.2 四种定位方式静态定位（ static）：默认，使元素框处于文档流的常规位置相对定位（ relative）：将元素框从常规位置偏移指定距离绝对定位（ absolute）：元素框从文档流完全删除，并相对于其包含块定位固定定位（ fixed）：与绝对定位类似，但其包含块是浏览窗口

如下图所示的类型23/4/20 51

23/4/20 52

使用固定值设置图像的上边缘

23/4/20 53

<html><head><style type="text/css">img{position:absolute;top:0px}</style></head><body>

<h1>This is a Heading</h1><img class="normal" src="/i/eg_smile.gif" /><p> 一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。 </p></body></html>

http://www.w3school.com.cn/tiy/t.asp?f=csse_position_top

使用裁切剪切图像

23/4/20 54

<html><head><style type="text/css">img {position:absolute;clip:rect(0px 50px 200px 0px)}</style></head><body><p>clip 属性剪切了一幅图像： </p><p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p></body></html>


23/4/20 55

<html><head><style type="text/css">img.x{position:absolute;left:0px;top:0px;z-index:-1}</style></head>

<body><h1> 这是一个标题 </h1><img class="x" src="eg_mouse.jpg" /> <p> 默认的 z-index 是 0 。 Z-index -1 拥有更低的优先级。 </p></body></html>

使用Z-index显示图像与文本




3.7.2 四种定位方式例 3.21第 1 步 static 定位第 2 步 relative 定位第 3 步 absolute 定位第 4 步 fixed 定位

23/4/20 56

3.8 元素布局3.8.1 布局属性float：浮动方向clear：是否允许紧贴浮动元素display: 是否及如何显示元素visibility:是否可见overflow : 溢出处理clip: 裁剪cursor: 鼠标指针类型

23/4/20 57

3.8.2 浮动与清除浮动元素

定义：其 float 属性值为 left 或 right效果：浮动元素将脱离常规文档流，但仍然处于其包含块内，向左或右移动，直到外边缘碰到第1 个块级祖先元素（或包含块元素）的边框或另一个浮动元素的边框为止

清除浮动元素方法：设置 clear 属性（ left、 right 或 both）效果：阻止该元素向上移动到浮动元素旁边

用途：设置文本环绕图像效果创建多列布局

23/4/20 58

3.8.2 浮动与清除例 3.22

23/4/20 59

3.8.3 显示和隐藏控制元素显示和隐藏的方法

显示元素• 将 display 属性设置为 inline（或 block），从而将块级元素显示为行内元素（或相反）

隐藏元素• 将 display 属性设置为 none，不占用任何显示空间• 将 visibility 属性设置为 hidden，仍然保留原显示空间

例 3.23


3.8.4 溢出与剪裁溢出：是指元素内容区中的实际内容大小超出指定的元素内容区大小。处理方法

使用 overflow 属性指定溢出内容的显示方式使用 clip 属性剪裁元素的实际内容

例 3.24


3.8.5 鼠标形状cursor 属性：当鼠标移动到不同的元素对象时，鼠标将显示为指定的形状或图案。值为url、 default、 auto、 crosshair、 pointer、 move、 *-resize、 text、 wait、 help等例 3.25

23/4/20 62

3.9 列表样式3.9.1 CSS 列表属性作用：设置列表中列表项标记的显示格式列表属性

list-style-type 标记类型，取值为none、 disc、 circle、 square、 decimal、 lower-roman等list-style-position 标记位置，取值为outside、 insidelist-style-image 图像标记，取值为 url或 none

例 3.26


3.9.2 内容生成属性content 属性称为内容生成属性，必须与伪元素 :befor 或 :after 配合使用，其常用值形式：string、 url(URL)、 attr(X) 、计数器 counter

例 3.27

23/4/20 64

3.9.3 自定义编号通过配合使用 content、 counter-reset 和 counter-increment 属性，可以控制列表编号

counter-reset：计数器复位counter-increment：计数器增加

例 3.28

23/4/20 65

3.9.4 多级编号两种方法：

使用多计数器生成多级编号，常用于各级标题使用单计数器生成多级编号，常用于多级列表

例 3.29 多计数器


3.9.4 多级编号例 3.30 单计数器

23/4/20 67

3.10 表格制作3.10.1 制作常规表格表格标签 :<table>、 <caption>、 <tr>、 <td><table>标签属性：width、 border、 cellspacing、 cellpadding<tr>、 <td> 和 <th> 标签的常用属性 :abbr、 align、 valign、 colspan、 rowspan例 3.31

23/4/20 68

3.10.2 表格行分组分组标签，同时使用

<thead> ：页眉，即表头<tbody>：表体<tfoot> ：表脚

分组好处：打印时，的表头和表脚将出现在每页可以按分组方式设置表格行的显示格式

例 3.32


3.10.3 将其他元素显示为表格方法：在 CSS 样式定义中，为相关元素指定特殊的 display 属性值

table 类似 <table>table-row 类似 <tr>table-cell 类似 <td> 和 <th>

例 3.33

23/4/20 70

3.10.4 CSS 表格属性CSS 表格属性用于设置表格的布局，包括caption-side、 table-layout、 border-collapse、 border-spacing、 empty-cells例 3.34

例 3.35


3.11 页面布局CSS 页面布局技术表格布局技术框架布局技术

23/4/20 72

3.11.1 页面布局版式页面布局是对页面内容的总体排版格式。通常，分成 3 个区域：

页眉区主体区页脚区

多栏布局：将主体区分成多列，典型 3 种

23/4/20 73

3.11.2 CSS 页面布局技术一、概述定义：是指使用 CSS 样式对页面元素进行布局、定位的技术，也称 CSS-P、 DIV+CSS两种方法：

绝对定位布局：使用 position 属性浮动布局：使用 float 属性

步骤：1 、确定页面版式2 、使用 DIV 元素标记各个分栏3 、为各个分栏添加内容4 、对各个分栏进行定位、布局

23/4/20 74

3.11.2 CSS 页面布局技术二、 CSS 绝对定位布局示例例 3.36 制作 3 栏布局的页面

23/4/20 75

3.11.2 CSS 页面布局技术三、 CSS 浮动布局示例例 3.37 CSS 浮动布局

四、使用 CSS 模板CSS 布局好处：支持 Web 标准，容易实现网页结构和表现的分离提高 CSS 布局效率：使用或自己设计 CSS 模板

23/4/20 76

3.11.3 传统表格布局技术基本思想：使用表格将一个网页分隔成多个互不重叠的区域，而每个区域（即单元格）用于放置相对独立的任何网页对象优点：简单、易用缺点： 1、不符合 Web 标准； 2、当表格过多时，影响下载速度例 3.38 表格布局

23/4/20 77

练习：利用 DIV+CSS 实现

练习：

典型的版面实例该实例采用分栏结构，即页头、导航栏、内容、版

权四部分组成。

Div+CSS 排版结果图

网页预览效果

课后作业对上海凯泉生物科技有限公司主页 (http://

www.kaiquanbiotech.com/qyjs.htm) 的 CSS 样式导出为独立文件。

div+css参考网站 http://www.csscool.cn http://www.52css.comhttp://www.csszengarden.com/

http://www.csscool.cn/

http://www.52css.com/

第三章 层叠样式表（ css ）技术

Documents

第三章层叠样式表（ css ）技术