slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
第三章 层叠样式表( CSS )技术 PowerPoint Presentation
Download Presentation
第三章 层叠样式表( CSS )技术

Loading in 2 Seconds...

play fullscreen
1 / 78

第三章 层叠样式表( CSS )技术 - PowerPoint PPT Presentation


  • 118 Views
  • Uploaded on

第三章 层叠样式表( CSS )技术. 元素定位 元素布局 列表样式 表格制作 页面布局. 基于 CSS, 本章介绍网页的基本格式化和布局技术 CSS 简介 定义样式 使用样式 CSS 基本属性 样式层叠性 元素框模型. 如今网页排版格式越来越来复杂,如果要对多个网页的同样格式一一进行设计,那么就会给制作人员带来很多的工作量,所以解决办法是采用 CSS 样式来一次性对若干个文档的格式进行控制。. 3.1 CSS 简介.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '第三章 层叠样式表( CSS )技术' - mia-saunders


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
第三章 层叠样式表(CSS)技术
  • 元素定位
  • 元素布局
  • 列表样式
  • 表格制作
  • 页面布局

基于 CSS,本章介绍网页的基本格式化和布局技术

CSS 简介

定义样式

使用样式

CSS 基本属性

样式层叠性

元素框模型

3 1 css
如今网页排版格式越来越来复杂,如果要对多个网页的同样格式一一进行设计,那么就会给制作人员带来很多的工作量,所以解决办法是采用CSS样式来一次性对若干个文档的格式进行控制。如今网页排版格式越来越来复杂,如果要对多个网页的同样格式一一进行设计,那么就会给制作人员带来很多的工作量,所以解决办法是采用CSS样式来一次性对若干个文档的格式进行控制。3.1 CSS 简介
3 1 css1
CSS(Cascading Style Sheet,层叠样式表 )技术是一种格式化网页的标准方式,它扩展了HTML的功能,使网页设计者能够以更有效的方式设置网页格式。3.1 CSS 简介
3 1 css2
CSS样式存于样式表文件中,然后在多个网页中同时应用该样式表中的样式 ,就能确保多个网页具有一致的格式,并且能够随时更新(只要更改样式表文件就可以使所有网页自动更新),从而大大降低了网站的开发和维护工作量。3.1 CSS 简介
3 1 css3
3.1 CSS 简介
  • 例3.1 使用 CSS 将所有文字显示为“倾斜”
    • Dreamweaver8操作:菜单“文本/CSS样式/新建”
slide9
生成的代码

参看教材P47

样式选择器

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

p {

font-style: italic;

}

-->

</style>

</head>

3 2 3 2 1
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 标题文字指定为小的蓝色字 */

3 2 2
3.2.2 基本选择器

最常用的选择器:HTML 标签选择器、类选择器和 ID 选择器

一、HTML 标签选择器

为 HTML 标签定义的样式将改变它的默认显示格式

例3.2 超链接没有下划线

a {text-decoration: none; /* 去除超链接的下划线 */}

中山大学计算机科学系

3 2 21
3.2.2 基本选择器

二、类选择器

形式:一个点号和一个类名:

.classname { property:value;…}

效果:使具有指定 class 属性的页面元素具有该类样式指定的显示格式

例3.3 所有大学名显示为“倾斜、加粗”

.university_name { font-style: italic; font-weight: bold; } /* 文字倾斜、加粗 */

中山大学计算机科学系

3 2 22
3.2.2 基本选择器

三、ID 选择器

形式:一个井号(#)和一个 ID

#IDname { property:value;…}

效果:使具有指定 ID 属性的元素具有指定格式

例3.4 使术语“级联样式表(CSS)”显示为“倾斜、加粗、大字体”

#css_name { font-style: italic; font-weight: bold; font-size: large; }

中山大学计算机科学系

slide14
3.3 使用样式

CSS 样式的三种使用方式:

嵌入样式表(即在新建样式规则时选择:仅对该文档)

链接外部样式表(标准方法,实现网页结构和表现的完全分离,外部样式表是一个独立的CSS文件)

内嵌样式(在HTML标签中定义样式)

优先程度:内嵌式>嵌入样式表>链接外部样式表

3 3 1
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
3.3.2 链接外部样式表

定义:把 CSS 样式定义写入一个以 css 为扩展名的文本文件中,如 mystyle.css

形式:在 <head> 元素内加入代码:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

效果:外部样式表中的样式作用于页面

好处:一个外部样式表可以控制多个页面的显示外观,从而确保这些页面外观的一致性

例3.6 设计多个页面,要求这些页面中所有大学名称的显示样式为“加粗”,并且所有超链接没有下划线

3 3 3
3.3.3 内嵌样式

定义:直接使用 HTML 标签的 style 属性定义的样式,如:

<p style="font-size:large;color:red">Hello</p>

效果:只作用于这个元素

例3.7 使大学名显示为“加粗”,并且超链接没有下划线

3 4 css
3.4 CSS 基本格式化属性
  • CSS 属性分类:
    • 基本格式化属性:包括字体、文本和背景属性等
    • 布局性属性:包括框属性、定位属性、布局属性、列表属性和表格属性等。
  • 可视化设置方法:“样式”对话框、“CSS 属性”窗格
slide19

显示当前样式

显示所有样式

内部样式表

样式名称

样式及属性值

3 4 1
3.4.1 属性值与单位

一、属性值分类

单词。如

font-style: italic;

数字值。通常带有单位,如

font-size:12px;

颜色值。如

color: red;

3 4 11
3.4.1 属性值与单位

二、数字值单位

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

中山大学计算机科学系

3 4 12
3.4.1 属性值与单位

三、颜色值

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

3 4 2
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磅、红色字,并且小体大写

3 4 3
3.4.3 文本属性

文本属性用于控制文本块的段落格式,如首行缩进、段落对齐方式等

常用文本属性:text-align、vertical-align、text-indent、line-height、letter-spacing、word-spacing、white-space

例3.9 将标题居中,并使正文段落首行缩进2个字符、行间距150%、字间距1磅

中山大学计算机科学系

slide26
SPAN

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

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

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

slide27
<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

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

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

slide29
<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>

slide30
可以定义样式如下:

#democrats { background:blue; } #republicans { background:red; }

3 4 4
3.4.4 背景属性

背景属性用于控制页面元素的背景颜色和背景图案

常用背景属性: background-color、background-image、background-position、background-repeat、background-attachment、background

例3.10 一个小图像填充整个页面背景,并且程序代码设置为银灰色背景

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

中山大学计算机科学系

3 5 2
3.5.2 样式继承
  • 样式继承是指 HTML 元素可以继承父元素的 CSS 属性
    • 有些属性被自动继承,如字体、文本等属性;但有些属性不被自动继承,如背景、边框等属性
    • 对于相对长度单位值(如百分比),继承的是相对值的实际计算值
    • 特殊的属性值:inherit
  • 例3.11 定义样式,将页面的普通文字大小设置为 12pt,而将 h1 标题的文字大小设置为普通文字的 150%

body { font-size: 12pt; }

h1 { font-size: 150%; }

3 5 3
3.5.3 样式层叠
  • 样式层叠性:所有样式规则将按继承层次传递作用于相关 HTML 元素,并按层叠规则解决 CSS 属性的重复定义问题
  • 层叠规则:
    • 规则1:HTML 标签 < 类 < ID 优先级依次升高
    • 规则2:外部样式表 < 嵌入样式表 < 内嵌样式。但是,当选择器更有针对性时,规则1优先于规则2
    • 规则3:定义的样式覆盖继承的样式
  • 例3.12 超链接的字体为“隶书”,没有下划线,但其中一个超链接有下划线
3 5 4
3.5.4 结构性选择器

通配选择器 *

* { padding: 0; margin: 0; }

清除所有元素的内边距和外边距

后代选择器

address i { color:red; }

将位于 <address> 元素内的 <i> 元素设置为红色字

子选择器

body > h1{ color:red;}

将 <body> 元素的 <h1> 子元素设置为红色字

3 5 41
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> 元素设置为红色字

3 5 42
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; }

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

中山大学计算机科学系

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

中山大学计算机科学系

3 6 3 6 1
3.6 元素框模型3.6.1 框模型概述

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

例3.15

3 6 2
3.6.2 框属性

一、边框属性

  • CSS 边框属性包括边框设置和方向的组合:
    • 边框设置:包括边框颜色(color)、边框样式(style)和边框宽度(width)
    • 边框方向:上(top)、右(right)、下(bottom)和左(left)
  • 例3.16 为段落设置灰色边框,其中,上、下边框宽度分别为 thin 和 thick,而左、右边框宽度都为 medium

中山大学计算机科学系

3 6 21
3.6.2 框属性

二、内边距属性

内边距属性 padding-top、padding-right、padding-bottom 和 padding-left 分别设置上、右、下、左内边距的宽度

例3.17 为段落设置内边距,其中,上、下内边距宽度为 10px,而左、右内边距宽度为 20px

3 6 22
3.6.2 框属性

三、外边距属性

外边距属性 margin-top、margin-right、margin-bottom 和 margin-left 分别设置上、右、下、左外边距的宽度

例3.18 为页面体设置外边距,其中,上、下外边距宽度为 1cm,而左、右外边距宽度为 2cm

中山大学计算机科学系

3 6 3
3.6.3 外边距重叠

当两个元素的垂直外边距相遇时,它们将重叠为一个外边距。重叠后的外边距高度等于两个发生重叠的外边距的高度中的较大者

例3.19 标题的下外边距高度为 1cm,列表项上、下外边距高度为 0.5 cm。易知:标题与第1个列表项之间的外边距高度为 1cm

中山大学计算机科学系

3 6 4
3.6.4 框大小

一、替换元素与非替换元素

替换元素:是指其元素内容来自 HTML 标签的属性值。如 img 元素

非替换元素:是指其元素内容来自 HTML 标签自身或标签对之间的内容。如 p、h1、h2、hr 等

二、大小属性

自动计算大小

width、height

max-width、min-width、max-height 和 min-height

3 6 41
3.6.4 框大小

三、内容区大小与元素框大小

内容区大小:是指元素内容区的宽度和高度,可以由属性 width 和 height 设置。

元素框大小

元素框宽度=width+左右内边距+左右边框+左右外边距

元素框高度= height +上下内边距+上下边框+上下外边距

例3.20

中山大学计算机科学系

3 7 3 7 1
3.7 元素定位3.7.1 定位概念

一、文档流

每个可显示元素以元素框的形式,按照其 HTML 代码位置依次显示,从而构成一个文档流。即:

块级框从上至下依次排列

行内框在一行中水平布置

二、定位属性

position :static、relative、absolute 、 fixed

top、bottom、left、right和z-index

3 7 1
3.7.1 定位概念

三、包含块

包含块是显示文档流的矩形区域,最基本的包含块是 body 元素框和浏览窗口

自定义包含块:将一个元素的定位方式设置为非 static 方式

“一个元素的包含块”是指该元素最近的按非 static 方式定位的祖先元素(注:不一定是父元素)的元素框,或者是 body 元素框(或浏览窗口)

3 7 2
3.7.2 四种定位方式

静态定位(static):默认,使元素框处于文档流的常规位置

相对定位(relative):将元素框从常规位置偏移指定距离

绝对定位(absolute):元素框从文档流完全删除,并相对于其包含块定位

固定定位(fixed):与绝对定位类似,但其包含块是浏览窗口

3 7 21
3.7.2 四种定位方式

例3.21

第1步 static 定位

第2步 relative 定位

第3步 absolute 定位

第4步 fixed 定位

3 8 3 8 1
3.8 元素布局3.8.1 布局属性

float:浮动方向

clear:是否允许紧贴浮动元素

display: 是否及如何显示元素

visibility:是否可见

overflow : 溢出处理

clip: 裁剪

cursor: 鼠标指针类型

3 8 2
3.8.2 浮动与清除
  • 浮动元素
    • 定义:其 float 属性值为 left 或 right
    • 效果:浮动元素将脱离常规文档流,但仍然处于其包含块内,向左或右移动,直到外边缘碰到第1个块级祖先元素(或包含块元素)的边框或另一个浮动元素的边框为止
  • 清除浮动元素
    • 方法:设置 clear 属性(left、right 或 both)
    • 效果:阻止该元素向上移动到浮动元素旁边
  • 用途:
    • 设置文本环绕图像效果
    • 创建多列布局
3 8 3
3.8.3 显示和隐藏
  • 控制元素显示和隐藏的方法
    • 显示元素
      • 将 display 属性设置为 inline(或 block),从而将块级元素显示为行内元素(或相反)
    • 隐藏元素
      • 将 display 属性设置为 none,不占用任何显示空间
      • 将 visibility 属性设置为 hidden,仍然保留原显示空间
  • 例3.23

中山大学计算机科学系

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

中山大学计算机科学系

3 8 5
3.8.5 鼠标形状

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

例3.25

3 9 3 9 1 css
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

中山大学计算机科学系

3 9 2
3.9.2 内容生成属性

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

例3.27

3 9 3
3.9.3 自定义编号
  • 通过配合使用 content、counter-reset 和 counter-increment 属性,可以控制列表编号
    • counter-reset:计数器复位
    • counter-increment: 计数器增加
  • 例3.28
3 9 4
3.9.4 多级编号
  • 两种方法:
    • 使用多计数器生成多级编号,常用于各级标题
    • 使用单计数器生成多级编号,常用于多级列表
  • 例3.29 多计数器

中山大学计算机科学系

3 9 41
3.9.4 多级编号

例3.30 单计数器

3 10 3 10 1
3.10 表格制作3.10.1 制作常规表格

表格标签:<table>、<caption>、<tr>、<td>

<table>标签属性:width、border、cellspacing、cellpadding

<tr>、<td> 和 <th> 标签的常用属性:abbr、align、valign、colspan、rowspan

例3.31

中山大学计算机科学系

3 10 2
3.10.2 表格行分组
  • 分组标签,同时使用
    • <thead> :页眉,即表头
    • <tbody>:表体
    • <tfoot> :表脚
  • 分组好处:
    • 打印时,的表头和表脚将出现在每页
    • 可以按分组方式设置表格行的显示格式
  • 例3.32

中山大学计算机科学系

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

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

例3.34

例3.35

中山大学计算机科学系

slide67
3.11 页面布局

CSS 页面布局技术

表格布局技术

框架布局技术

3 11 1
3.11.1 页面布局版式
  • 页面布局是对页面内容的总体排版格式。通常,分成3个区域:
    • 页眉区
    • 主体区
    • 页脚区
  • 多栏布局:将主体区分成多列,典型3种
3 11 2 css
3.11.2 CSS 页面布局技术

一、概述

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

1、确定页面版式

2、使用 DIV 元素标记各个分栏

3、为各个分栏添加内容

4、对各个分栏进行定位、布局

3 11 2 css1
3.11.2 CSS 页面布局技术

二、CSS 绝对定位布局示例

例3.36 制作3栏布局的页面

3 11 2 css2
3.11.2 CSS 页面布局技术

三、CSS 浮动布局示例

例3.37 CSS 浮动布局

四、使用 CSS 模板

CSS 布局好处:支持 Web 标准,容易实现网页结构和表现的分离

提高 CSS 布局效率:使用或自己设计 CSS 模板

3 11 3
3.11.3 传统表格布局技术

基本思想:使用表格将一个网页分隔成多个互不重叠的区域,而每个区域(即单元格)用于放置相对独立的任何网页对象

优点:简单、易用

缺点:1、不符合 Web 标准;2、当表格过多时,影响下载速度

例3.38 表格布局

slide74
练习:

典型的版面实例

该实例采用分栏结构,即页头、导航栏、内容、版权四部分组成。

Div+CSS排版结果图

slide77
课后作业

对上海凯泉生物科技有限公司主页(http://www.kaiquanbiotech.com/qyjs.htm)的CSS样式导出为独立文件。

slide78
div+css参考网站

http://www.csscool.cn

http://www.52css.com

http://www.csszengarden.com/