下载此文档

Web程序设计第4章.ppt

文档分类：IT计算机 | 页数：约48页举报非法文档有奖

1/48

下载提示

1.该资料是网友上传的，本站提供全文预览，预览什么样，下载就什么样。
2.下载该文档所得收入归上传者、原创者。
3.下载的文档，不会出现我们的网址水印。

同意并开始全文预览

(约 1-6 秒)

1/48 下载此文档

文档列表 文档介绍

网络程序设计
1
第四章
目录
第 1 章 Web编程基础知识
第 2 章 Web应用程序开发与运行环境
第 3 章 HTML与XML
第 4 章层叠样式表CSS
第 5 章 Web客户端程序设计
第 6 章 Web服务器端程序设计
第 7 章 Web数据库程序设计
第 8 章综合应用实例
2
第 4 章层叠样式表
样式表的定义和引用
相关标记和属性
样式的继承和作用顺序
CSS属性
CSS+DIV页面布局
应用实例——设计个人主页
3
层叠样式表简介
层叠样式表(CSS)
CSS(Cascading Style Sheets)是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。
它扩充了HTML标记的属性设定,称为CSS样式,通过脚本程序控制,可以使页面的表现方式更为灵活,更具动态特性。CSS可提供多种样式,以减少GIF动画的使用,从而能设计出规模更小、下载更快的网页。
CSS是一套开放性标准,不仅可用于HTML语言,也可用于其他网页设计语言,如XML语言。
目前CSS的版本包括CSS1、CSS2和CSS3。有关CSS的详情,可访问le/。
4
CSS标准中重新定义了HTML语言中原来的文字显示样式,并增加了一些新概念,如类、层等,可以对文字重叠、定位等提供更为丰富多彩的样式;同时CSS可进行集中样式管理。CSS还允许将样式定义单独存储于样式文件中,这样把要显示的内容和显示样式的定义分离开,便于多个HTML文件共享样式定义。另外,一个HTML文件也可以引用多个CSS样式文件中的样式定义。
所谓“层叠”,实际上就是将显示样式独立于显示的内容,进行分类管理,如分为字体样式、颜色样式等,需要使用样式的HTML文件进行套用即可。
层叠样式表简介
5
4. 1 样式表的定义和引用
样式表的定义
样式表的作用是通知浏览器如何呈现文档,样式表的定义是CSS的基础。
【例4-1】一个使用CSS对文字显示特性进行控制的HTML文件。
<html><head><title>CSS示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
h1 {font-family:"隶书", "宋体";color:#ff8800}
.text {font-family: "宋体"; font-size: 14pt; color: red}
</style></head>
<body topmargin=4><h1>这是一个CSS示例!<h1>
<span class="text">这行文字应是红色的。</span></body> </html>
6
样式表的定义
CSS样式表定义的基本语法为:
选择符(Selector){ 规则(Rule)表}
其中:
(1)选择符是指要引用样式的对象,它可以是一个或多个HTML标记(各个标记之间以逗号分开),如例5-2中的h1;也可以是类选择符(如例5-)、ID选择符或上下文选择符。
(2)规则表是由一个或多个样式属性组成的样式规则,各个样式属性间由分号隔开,每个样式属性的定义格式为:
样式名:值
样式定义中可以加入注解,格式为:
/*字符串*/
4. 1 样式表的定义和引用
7
样式表的定义
样式表定义
样式定义表的例子:
① p {
font-family: "宋体";
color:darkblue;
background-color:yellow;
font-size:9pt; /*字体大小*/
}
② h1,h2 {
font-family:"隶书", "宋体";
color:#ff8800;
text-align:center;
}
例①定义了一个样式表供HTML文件的<p>标记使用.
例②定义了一个样式表供HTML文件的<h1>和<h2>标记使用。
在例②中,选择符由两个HTML标记组成,表示两种对象均遵循该样式定义。
4. 1 样式表的定义和引用
8
样式表的引用
样式引用的方式主要有以下4种:
(1)链接到外部样式表
(2)引入外部样式表
(3)嵌入样式表
(4)内联样式
4. 1 样式表的定义和引用
9
样式表的引用
(1)链接到外部样式表
如果多个HTML文件要共享样式表(这些页面的显示特性相同或十分接近),则可将样式表定义为一个独立的CSS样式文件,使用该样式表的HTML文件在头部用<link>标

Web程序设计第4章来自淘豆网www.taodocs.com转载请标明出处.