当前位置:首页 >> 其它课程 >>

第3章 层叠样式表(CSS)技术


第三章 层叠样式表(CSS)技术
基于 CSS,本章介绍网页的基本格式化和布局 技术 ?CSS 简介 ? 元素定位 ?定义样式 ? 元素布局 ?使用样式 ? 列表样式 ?CSS 基本属性 ? 表格制作 ?样式层叠性 ? 页面布局 ?元素框模型
2015/9/17 中山大学计算机科学系 1

3.1 CSS 简介
?CSS 是层叠

样式表(Cascading Style Sheets, 或称级联样式表)的简称,是格式化网页的标准技 术 ?例3.1 使用 CSS 将所有文字显示为“倾斜”
?SharePoint Designer 2007操作

2015/9/17

中山大学计算机科学系

2

3.2 定义样式 3.2.1 样式定义格式
?样式定义由样式规则组成,每条样式规则包括选 择器和样式声明,如: selector {property:value; …} ?样式声明由一系列属性声明组成,而属性声明又由 属性名和属性值构成 ?示例
p {color:red} /* 将普通 p 段落文字显示为红色 */ h1,h2,h3 { color:red } /* 将 h1,h2,h3 标题文字显示 为红色 */ h2 { font-size: small; color:blue } /* 将 h2 标题文 字指定为小的蓝色字 */ 中山大学计算机科学系 2015/9/17 3

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

2015/9/17

中山大学计算机科学系

4

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

2015/9/17

中山大学计算机科学系

5

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

2015/9/17

中山大学计算机科学系

6

3.3 使用样式
CSS 样式的三种使用方式: ?嵌入样式表 ?链接外部样式表(标准方法,实现网页结构和表现 的完全分离) ?内嵌样式

2015/9/17

中山大学计算机科学系

7

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

2015/9/17

中山大学计算机科学系

8

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

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

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

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

2015/9/17

中山大学计算机科学系

10

3.4 CSS 基本格式化属性
?CSS 属性分类:
?基本格式化属性:包括字体、文本和背景属性等 ?布局性属性:包括框属性、定位属性、布局属性、列表 属性和表格属性等。

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

2015/9/17

中山大学计算机科学系

11

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

2015/9/17

中山大学计算机科学系

12

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

2015/9/17

中山大学计算机科学系

13

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

2015/9/17

中山大学计算机科学系

14

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

2015/9/17

中山大学计算机科学系

15

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

2015/9/17

中山大学计算机科学系

16

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

2015/9/17

中山大学计算机科学系

17

3.5 样式层叠性 3.5.1 文档结构
?HTML 文档的结构:是指 HTML 元素之间的嵌套关 系,可以用文档结构树表示
?节点表示 HTML 元素 ?若一个元素直接包含另一个元素,则画一条连线

2015/9/17

中山大学计算机科学系

18

3.5.2 样式继承
?样式继承是指 HTML 元素可以继承父元素的 CSS 属性
?有些属性被自动继承,如字体、文本等属性;但有些属 性不被自动继承,如背景、边框等属性 ?对于相对长度单位值(如百分比),继承的是相对值的 实际计算值 ?特殊的属性值:inherit ?例3.11 定义样式,将页面的普通文字大小设置为 12pt, 而将 h1 标题的文字大小设置为普通文字的 150% body { font-size: 12pt; } h1 { font-size: 150%; }
2015/9/17 中山大学计算机科学系 19

3.5.3 样式层叠
?样式层叠性:所有样式规则将按继承层次传递作 用于相关 HTML 元素,并按层叠规则解决 CSS 属性 的重复定义问题 ?层叠规则:
?规则1:HTML 标签 < 类 < ID 优先级依次升高 ?规则2:外部样式表 < 嵌入样式表 < 内嵌样式。但 是,当选择器更有针对性时,规则1优先于规则2 ?规则3:定义的样式覆盖继承的样式

?例3.12 超链接的字体为“隶书”,没有下划线, 但其中一个超链接有下划线
2015/9/17 中山大学计算机科学系 20

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

?子选择器 body > h1{ color:red;} 将 <body> 元素的 <h1> 子元素设置为红色字
2015/9/17 中山大学计算机科学系 21

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> 元素设置为红色字
2015/9/17 中山大学计算机科学系 22

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; }
2015/9/17 中山大学计算机科学系 23

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

?例3.13

2015/9/17

中山大学计算机科学系

24

3.5.6 伪元素
?伪元素是指在 HTML 文档中没有用 HTML 标签明 确标记的元素
?:first-letter 首字母 ?:first-line 首行 ?:before 在某元素内容之前插入内容 ?:after 在某元素内容之后插入内容

?例3.14

2015/9/17

中山大学计算机科学系

25

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

?例3.15

2015/9/17

中山大学计算机科学系

26

3.6.2 框属性
一、边框属性 ?CSS 边框属性包括边框设置和方向的组合:
?边框设置:包括边框颜色(color)、边框样式(style) 和边框宽度(width) ?边框方向:上(top)、右(right)、下(bottom) 和左(left)

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

2015/9/17

中山大学计算机科学系

27

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

2015/9/17

中山大学计算机科学系

28

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

2015/9/17

中山大学计算机科学系

29

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

2015/9/17

中山大学计算机科学系

30

3.6.4 框大小
一、替换元素与非替换元素 ?替换元素:是指其元素内容来自 HTML 标签的属 性值。如 img 元素 ?非替换元素:是指其元素内容来自 HTML 标签自 身或标签对之间的内容。如 p、h1、h2、hr 等 二、大小属性 ?自动计算大小 ?width、height ?max-width、min-width、max-height 和 minheight
2015/9/17 中山大学计算机科学系 31

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

?例3.20

2015/9/17

中山大学计算机科学系

32

3.7 元素定位 3.7.1 定位概念
一、文档流 每个可显示元素以元素框的形式,按照其 HTML 代 码位置依次显示,从而构成一个文档流。即: ?块级框从上至下依次排列 ?行内框在一行中水平布置 二、定位属性 ?position :static、relative、absolute 、 fixed ?top、bottom、left、right和z-index
2015/9/17 中山大学计算机科学系 33

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

2015/9/17

中山大学计算机科学系

34

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

2015/9/17

中山大学计算机科学系

35

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

2015/9/17

中山大学计算机科学系

36

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

2015/9/17

中山大学计算机科学系

37

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

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

?用途:
?设置文本环绕图像效果 ?创建多列布局
2015/9/17 中山大学计算机科学系 38

3.8.2 浮动与清除
?例3.22

2015/9/17

中山大学计算机科学系

39

3.8.3 显示和隐藏
?控制元素显示和隐藏的方法
?显示元素
? 将 display 属性设置为 inline(或 block),从而将块级 元素显示为行内元素(或相反)

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

?例3.23

2015/9/17

中山大学计算机科学系

40

3.8.4 溢出与剪裁
?溢出:是指元素内容区中的实际内容大小超出指 定的元素内容区大小。 ?处理方法
?使用 overflow 属性指定溢出内容的显示方式 ?使用 clip 属性剪裁元素的实际内容

?例3.24

2015/9/17

中山大学计算机科学系

41

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

2015/9/17

中山大学计算机科学系

42

3.9 列表样式 3.9.1 CSS 列表属性
?作用:设置列表中列表项标记的显示格式 ?列表属性
?list-style-type 标记类型,取值为none、disc、 circle、square、decimal、lower-roman等 ?list-style-position 标记位置,取值为outside、 inside ?list-style-image 图像标记,取值为 url或 none

?例3.26

2015/9/17

中山大学计算机科学系

43

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

?例3.27

2015/9/17

中山大学计算机科学系

44

3.9.3 自定义编号
?通过配合使用 content、counter-reset 和 counter-increment 属性,可以控制列表编号
?counter-reset:计数器复位 ?counter-increment: 计数器增加

?例3.28

2015/9/17

中山大学计算机科学系

45

3.9.4 多级编号
?两种方法:
?使用多计数器生成多级编号,常用于各级标题 ?使用单计数器生成多级编号,常用于多级列表

?例3.29 多计数器

2015/9/17

中山大学计算机科学系

46

3.9.4 多级编号
?例3.30 单计数器

2015/9/17

中山大学计算机科学系

47

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

2015/9/17

中山大学计算机科学系

48

3.10.2 表格行分组
?分组标签,同时使用
?<thead> :页眉,即表头 ?<tbody>:表体 ?<tfoot> :表脚

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

?例3.32

2015/9/17

中山大学计算机科学系

49

3.10.3 将其他元素显示为表格
?方法:在 CSS 样式定义中,为相关元素指定特殊 的 display 属性值
?table 类似 <table> ?table-row 类似 <tr> ?table-cell 类似 <td> 和 <th>

?例3.33

2015/9/17

中山大学计算机科学系

50

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

?例3.35

2015/9/17

中山大学计算机科学系

51

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

2015/9/17

中山大学计算机科学系

52

3.11.1 页面布局版式
?页面布局是对页面内容的总体排版格式。通常, 分成3个区域:
?页眉区 ?主体区 ?页脚区

?多栏布局:将主体区分成多列,典型3种

2015/9/17

中山大学计算机科学系

53

3.11.2 CSS 页面布局技术
一、概述 ?定义:是指使用 CSS 样式对页面元素进行布局、 定位的技术,也称 CSS-P、DIV+CSS ?两种方法:
?绝对定位布局:使用 position 属性 ?浮动布局:使用 float 属性

?步骤:
1、确定页面版式 2、使用 DIV 元素标记各个分栏 3、为各个分栏添加内容 2015/9/17 中山大学计算机科学系 4、对各个分栏进行定位、布局

54

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

2015/9/17

中山大学计算机科学系

55

3.11.2 CSS 页面布局技术
三、CSS 浮动布局示例 ?例3.37 CSS 浮动布局 四、使用 CSS 模板 ?CSS 布局好处:支持 Web 标准,容易实现网页结 构和表现的分离 ?提高 CSS 布局效率:使用或自己设计 CSS 模板

2015/9/17

中山大学计算机科学系

56

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

2015/9/17

中山大学计算机科学系

57


相关文章:
第三章 层叠样式表
第3章层叠样式表基础 74页 免费 第3章 层叠样式表(CSS)技术... 57页 1财富...层叠样式表(CSS) 第三章 层叠样式表功能: 使网页具有动态感。 功能:用来控制...
第三章 CSS技术
第三章 CSS 技术一.CSS 的基础知识 ?CSS 是为了简化 Web 页面的更新工作而...? CSS(Cascading Style Sheet,层叠样式表)技术是一种格式化网页的标准方式, 它...
第3章 CSS样式表
第3章 CSS样式表 一、CSS概述 ? ? ? ? ? ? ? ? ? CSS:Cascading Style Sheets,“层叠样式表”,简称样式表,它 是一种制作网页的新技术。 1997年W3C(The...
第三章 CSS样式表基础
CSS 属于较新技术,故 IE3.0 版本以上支持,Netscapt Navigator 4.0 版以上支持...</BODY> </HTML> 第 4 页共 6 页 二、如何定义层叠样式表: 我们先来...
CSS层叠样式表(基础篇)
CSS层叠样式表(基础篇)_IT/计算机_专业资料。css基本框架层叠样式表(基础篇) 第一章 CSS 层叠样式表(基础篇) 就是“层叠样式表”。将 CSS 引入到网页中是网页...
CSS(层叠样式表)基础知识【为了能在WSAD中使用,改动了部分内容】
Web信息系统设计基础 第... 45页 免费 第3章层叠样式表基础 74页 免费 PHP...CSS 基础知识 样式表 层叠样式表 连载 [推送到技术圈] 版权声明:原创作品,如...
css样式表
CSS样式表 16页 免费 第3章 CSS样式表 30页 5财富...W3C 组织 推出了 CSS2,使得这项技术在世界范围内...使用层叠样式表可以减少表格标签及其他加大 HTML 体积...
CSS样式表
第3 章 CSS 样式表本章概述 CSS 早在 1996 年就...最近几年流行的 DIV+CSS 布局模式和 AJAX 技术,将...是 Cascading Style Sheet,翻译成中文叫层叠样式表。...
CSS样式表 层叠样式表
第6章层叠样式表 42页 免费 html标签属性大全 16页...CSS就是一种叫做样式表(stylesheet)的技术。也有的人...1 2 3 4 5 分享到: X 分享到: 使用一键...
更多相关标签:
css层叠样式表 | css层叠样式表手册 | css层叠样式表实例 | css3是什么技术 | css3新技术 | css3技术 | css3 印章效果 | html5 css3 文章列表 |