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

第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


相关文章:
CSS(层叠样式表)基础知识【为了能在WSAD中使用,改动了...
Web信息系统设计基础 第... 45页 免费 第3章层叠样式表基础 74页 免费 PHP...CSS 基础知识 样式表 层叠样式表 连载 [推送到技术圈] 版权声明:原创作品,如...
CSS样式表教学设计(高中信息技术精品)_图文
是教育科学出版社出版的高中信息技术选修《网络技术应用》的第五章“动态 网页...学好 CSS 层叠样式表不仅可以使我们的网页多姿多彩,还可以避免逐个地修改网 页...
网页魔术师——CSS层叠样式表教学设计(高中信息技术精品)
教材分析: CSS 层叠样式表这部分内容取自中国地图出版社信息技术选修 3《网络技术应用》第四 单元第四节, 教材中对于样式表的功能特点进行了详细的介绍, 但对于...
CSS层叠样式表(基础篇)
CSS层叠样式表(基础篇)_IT/计算机_专业资料。css基本框架层叠样式表(基础篇) 第一章 CSS 层叠样式表(基础篇) 就是“层叠样式表”。将 CSS 引入到网页中是网页...
CSS样式表
CSS样式表_信息与通信_工程科技_专业资料。第 3 章 CSS 样式表本章概述 CSS 早在 1996 年就诞生了,近年来,由于得到浏览器的很好支持,CSS 技术已经成为 Web ...
网络技术 css
37页 2财富值 第3章网络技术 暂无评价 43页 2财富值喜欢此文档的还喜欢 ...CSS(Cascading Style Sheet)层叠样式表 概念见书本P112-P113 css样式表不仅可以...
CSS样式表
第3章 CSS样式表 30页 5财富值 第8章 CSS样式表...CSS教程 21页 免费 Css层叠样式表 36页 免费 CSS...在主页制作时采用 CSS 技术,可以有效地对页面的布局...
css层叠样式表简介
CSS 1.层叠样式表 1.层叠样式表 编辑本义项 CSS...微 软的托马斯·雷尔登)是这个项目的主要技术负责...到 2007 年为止,第三版还未完备。 使用 CSS 布局...
CSS基础
第3章 CSS基础 48页 免费 2 CSS基础 88页 免费 第5章 CSS技术基础 84页 ...CSS 概述 ? CSS层叠样式表 (Cascading Style Sheets) ? 样式定义如何显示 ...
第四章 样式表CSS
图 4-1 样式表示例 、涵盖知识点: 1.什么是 CSS CSS(Cascading Style Sheet,层叠样式表)技术上一种格式化网页的标准方式,它扩展了 HTML 的功能,使网页设计...
更多相关标签:
css3层叠样式表 | css层叠样式表 | css层叠样式表手册 | css层叠样式表实例 | css3技术介绍 | css3是什么技术 | css3技术 | css3 印章效果 |