《【精品】web编程基础－css、javascript、jquery第一部分 网页基础（可编辑.ppt》由会员分享，可在线阅读，更多相关《【精品】web编程基础－css、javascript、jquery第一部分 网页基础（可编辑.ppt（114页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Web编程基础CSS、JavaScript、jQuery第一部分 网页基础WEB编程基础教学目标教学目标通过这一部分的学习让学生了解通过这一部分的学习让学生了解Web标准。标准。进一步熟悉巩固进一步熟悉巩固DIV+CSS相关知识，能够熟练相关知识，能够熟练对网页进行布局和样式设置。对网页进行布局和样式设置。Web 标准标准电子信息工程学院网页布局电子信息工程学院网页布局网页页面布局（网页页面布局（DIV）网页样式设置（网页样式设置（CSS）WEB编程基础教学内容教学内容重点：重点：1、理解、理解Web标准的内涵标准的内涵 2、掌握、掌握CSS样式的使用样式的使用 3、掌握、掌握DIV布局布局难
2、点：难点：使用使用DIV+CSS模式进行网页布局并进行样式设置模式进行网页布局并进行样式设置WEB编程基础教学重难点教学重难点 Web标准标准WEB编程基础1、什么是Web标准？Web标准，即网站标准。目前通常所说的Web标准一般指进行网站建设所采用的基本XHTML语言的网站设计语言。Web标准中典型的应用模式就是DIV+CSS。实际上，Web标准并不是一个标准，而是一些列标准的集合。Web标准由一系列的规范组成。由于Web设计越来越趋向于整体与结构化，对于网页设计者来说，理解Web标准首先要理解结构和表现分离的意义。一、了解一、了解Web Web 标准标准 Web标准标准WEB编程基础3、W
3、3C发布的标准（1）HTML 超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。一、了解一、了解Web Web 标准标准 Web标准标准WEB编程基础3、W3C发布的标准（2）XHTML XHTML是（The Extensible Hyper Text Markup Language，可扩展超文本标识语言）的缩写。X
4、HTML是当前HTML版的继承者。HTML语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。一、了解一、了解Web Web 标准标准 Web标准标准WEB编程基础3、W3C发布的标准（3）XML XML（Extensible Markup Language）即可扩展标记语言。它与HTML一样，都是标准通用语言。Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。扩展标记语言XML是一种简单的数据存储语言，使用一系列
5、简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。一、了解一、了解Web Web 标准标准 Web标准标准WEB编程基础3、W3C发布的标准（4）CSS CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。通过CSS可以控制HTML或者XML标签的表现形式。W3C推荐使用CSS布局方法，似的Web更加简单，结构更加清晰。一、了解一、了解Web Web 标准标准 Web标准标准WEB编程基础3、W3C发布的标准（5）DO
6、M DOM是Document Object Model（文档对象模型）的缩写。DOM是W3C组织推荐的处理可扩展置标语言的标准编程接口。它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。W3C DOM被设计成适合多个平台，可使用任意编程语言实现的方法。DOM给了脚本语言（类似ECMAScript）无限发挥的能力。一、了解一、了解Web Web 标准标准 Web标准标准WEB编程基础3、W3C发布的标准（6）ECMAScript ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）通过ECMA-262标
7、准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或Jscript。一、了解一、了解Web Web 标准标准 Web标准标准WEB编程基础 由于存在不同的浏览器版本，Web 开发者常常需要为耗时的多版本开发而艰苦工作。当新的硬件（比如移动电话）和软件（比如微浏览器）开始浏览 Web 时，这种情况开始会变得更加严重。为了 Web 更好地发展，对于开发人员和最终用户而言非常重要的事情是，在开发新的应用程序时，浏览器开发商和站点开发商共同遵守标准。Web 标准可确保每个人都有权利访问相同的信息。二、为什么使用二、为什么使用 Web Web 标准？标准？Web标准标准
8、WEB编程基础一旦 web 开发人员遵守了 web 标准，由于开发人员可以更容易地理解彼此的编码，web 开发的团队协作将得到简化。只有使用 web 标准，才能确保在不频繁和费时地重写代码的情况下，所有的浏览器，无论新的或老式的，都可以正确地显示您的站点。标准的 web 文档更易被搜索引擎访问，也更易被准确地索引。标准的 web 文档更易被转换为其他格式。标准的 web 文档更易被程序代码访问（比如 JavaScript 和 DOM）。二、其他的考虑二、其他的考虑 Web标准标准WEB编程基础1、易用性易用性是 HTML 标准的一个重要部分。标准使得残疾人士更容易地使用 web。盲人可使用计算
9、机为他们读出网页。而弱视的人士可重新排列并放大网页。简单的 web 标准，比如 HTML 和 CSS，将使您的网页更容易被语音阅读器和其他不常见的输出设备理解。二、其他的考虑二、其他的考虑 Web标准标准WEB编程基础2、易于维护多年以来，Web标准团队一直推荐保持视觉设计和内容相分离的优点。这意味着HTML变得非常的简单，大部分的HTML页面只有一些和标签，以及一个指向强大的CSS文件的链接。这种完全的分离使得你的页面开发和维护变得简单，开发团队之间能够更好的协调。二、其他的考虑二、其他的考虑图图1 1 电子信息工程学院网站首页效果图电子信息工程学院网站首页效果图电子信息工程学院网页布局电子
10、信息工程学院网页布局WEB编程基础一、网页效果一、网页效果（任务提出）（任务提出）电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术1、CSS（Cascading Style Sheets）l样式定义如何显示 HTML 元素l样式通常存储在样式表中l把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题l外部样式表可以极大提高工作效率l外部样式表通常存储在 CSS 文件中l多个样式定义可层叠为一电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术1、CSS基础语法CSS 规则由两个主要的部分构成：选择器，以及一条
11、或多条声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。selector declaration1;declaration2;.declarationN selector property:value电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术1、CSS基础语法下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个例子中，h1 是选择器，color 和 fo
12、nt-size 是属性，red 和 14px 是值。h1 color:red;font-size:14px;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术1、CSS基础语法下面的示意图为您展示了上面这段代码的结构：图图2 CSS2 CSS语法结构图语法结构图电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术1、CSS基础语法 值的不同写法和单位除了英文单词 red，我们还可以使用十六进制的颜色值#ff0000：为了节约字节，我们可以使用 CSS 的缩写形式：p color:#ff0000;p color:#f00;电子
13、信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术1、CSS基础语法 记得写引号如果值为若干单词，则要给值加引号：多重声明如果要定义不止一个声明，则需要用分号将每个声明分开。p font-family:sans serif;p text-align:center;color:red;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术2、CSS高级语法 选择器的分组你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色
14、的。h1,h2,h3,h4,h5,h6 color:green;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术2、CSS高级语法 继承及其问题根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：body font-family:Verdana,sans-serif;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术2、CSS高级语法 继承及其问题根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。通过 CSS 继承，子元素将继承最高级
15、元素（在本例中是 body）所拥有的属性（这些子元素诸如 p,td,ul,ol,ul,li,dl,dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术2、CSS高级语法 继承及其问题但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到
16、IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术2、CSS高级语法 继承及其问题如果你不希望 Verdana,sans-serif 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：body font-family:Verdana,sans-serif;td,ul,ol,ul,li,dl,dt,dd font-family:Verdana,sans-serif;p font-family:T
17、imes,Times New Roman,serif;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术3、CSS id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以#来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red color:red;#green color:green;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术3、CSS id 选择器下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 i
18、d 属性为 green 的 p 元素显示为绿色。这个段落是红色。这个段落是绿色。注意：注意：id 属性只能在每个 HTML 文档中出现一次。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术3、CSS id 选择器 id 选择器和派生选择器在现代布局中，id 选择器常常用于建立派生选择器。#sidebar p font-style:italic;text-align:right;margin-top:0.5em;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术3、CSS id 选择器 id 选择器和派生选择器上面的样式只
19、会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如 或者，不过这样的用法是非法的，因为不可以在内联元素 中嵌入 。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术3、CSS id 选择器 id 选择器和派生选择器一个选择器，多种用法：即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：#sidebar p font-style:italic;text-align:right;mar
20、gin-top:0.5em;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术3、CSS id 选择器 id 选择器和派生选择器一个选择器，多种用法：在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。#sidebar h2 font-size:1em;font-weight:normal;font-style:italic;margin:0;line-height:1.5;text-align:right;电子信
21、息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术3、CSS id 选择器 单独的选择器id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：#sidebar border:1px dotted#000;padding:10px;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术3、CSS id 选择器 单独的选择器根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非
22、你特别地定义这个选择器所属的元素：div#sidebar border:1px dotted#000;padding:10px;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术4、CSS 类选择器 在 CSS 中，类选择器以一个点号显示：在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守“.center”选择器中的规则。.center text-align:center电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关
23、键技术4、CSS 类选择器 This heading will be center-alignedThis paragraph will also be center-aligned.注意：注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术4、CSS 类选择器和 id 一样，class 也可被用作派生选择器：在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。元素也可以基于它们的类而被选择：在上面的例子中，类名为 fancy 的
24、表格单元将是带有灰色背景的橙色。.fancy td color:#f60;background:#666;td.fancy color:#f60;background:#666;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术4、CSS 类选择器 你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意，class 为 fancy 的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为 fancy 的元素也不会受
25、这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术5、CSS 属性选择器CSS 属性选择器对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。（1）属性选择器下面的例子为带有 title 属性的所有元素设置样式：titlecolor:red;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术5、CSS 属性
26、选择器（2）属性和值选择器下面的例子为 title=“Hello world”的所有元素设置样式：（3）属性和值选择器-多个值下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：title=Hello world border:5px solid blue;title=hello color:red;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术5、CSS 属性选择器（4）设置表单的样式 属性选择器在为不带有 class 或 id 的表单设 置样式时特别有用！inputtype=text width:150px;dis
27、play:block;margin-bottom:10px;background-color:yellow;font-family:Verdana,Arial;inputtype=button width:120px;margin-left:35px;display:block;font-family:Verdana,Arial;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术6、创建CSS（1）外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样
28、式表。标签在（文档的）头部：电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术6、创建CSS（1）外部样式表 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以.css 扩展名进行保存。下面是一个样式表文件的例子：hr color:sienna;p margin-left:20px;body background-image:url(images/back40.gif);注意：不要在属性值与单位之间留有空格。电子信息工程学院网页布局电子信息工程
29、学院网页布局WEB编程基础二、关键技术二、关键技术6、创建CSS（2）内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 标签在文档头部定义内部样式表，就像这样:hr color:sienna;p margin-left:20px;body background-image:url(images/back40.gif);电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术6、创建CSS（3）内联样式 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需
30、要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：This is a paragraph电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（1）CSS背景 CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。1）背景色 可以使用 background-color background-color 属性属性 为元素设置背景色。这个属性接受任何合法的颜色值。这条规则把元素的背景设置为灰色：p background
31、-color:gray;如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（1）CSS背景 1）背景色 如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：p background-color:gray;padding:20px;可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景
32、就是透明的。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（1）CSS背景 2）背景图像 要把图像放入背景，需要使用 background-image background-image 属性属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：body background-image:url(/i/eg_bg_04.gif);电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（1）CSS背
33、景 2）背景图像 大多数背景都应用到 body 元素，不过并不仅限于此。下面例子为一个段落应用了背景，而不会对文档的其他部分应用背景：p.flower background-image:url(/i/eg_bg_03.gif);你甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：a.radio background-image:url(/i/eg_bg_07.gif);电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（1）CSS背景 3）背景重复 如果需要在页面上对背景图像进行平铺，可以使用 background-repea
34、t background-repeat 属性属性。属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（1）CSS背景 3）背景重复 默认地，背景图像将从一个元素的左上角开始。请看下面的例子：body background-image:url(/i/eg_bg_03.gif);background-repeat:repeat-y;电子信
35、息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（1）CSS背景 4）背景定位 可以利用 background-position background-position 属性属性 改变图像在背景中的位置。下面的例子在 body 元素中将一个背景图像居中放置：body background-image:url(/i/eg_bg_03.gif);background-repeat:no-repeat;background-position:center;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式
36、（1）CSS背景 4）背景定位 为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm。最后也可以使用百分数值，如background-position:66%33%;这里，background-position 的默认值是 0%0%，在功能上相当于 top left。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（2）CSS文本 CSS 文本属性可定义
37、文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等 1）缩进文本 CSS 提供了 text-indent text-indent 属性属性 ，该属性可以方便地实现文本缩进。下面的规则会使所有段落的首行缩进 5 em：p text-indent:5em;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（2）CSS文本 2）文本对齐 text-aligntext-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。值 left、right、center 和justify会导致
38、元素中的文本分别左对齐、右对齐、居中和两端对齐。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（2）CSS文本 3）文本装饰 text-decoration text-decoration 属性属性，设置文本样式。text-decoration 有 5 个值：None：关闭原本应用到一个元素上的所有装饰Underline：会对元素加下划线Overline：会在文本的顶端画一个上划线line-through：在文本中间画一个贯穿线Blink：会让文本闪烁电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、
39、CSS样式（3）CSS字体 1）CSS字体系列 在 CSS 中，有两种不同类型的字体系列名称：通用字体系列-拥有相似外观的字体系统组合（比如 Serif 或 Monospace）特定字体系列-具体的字体系列（比如 Times 或 Courier）可以通过 font-family 属性设置更具体的字体：h1 font-family:Georgia;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（3）CSS字体 2）字体风格 font-style font-style 属性最常用于规定斜体文本。该属性有三个值：normal-文本正常显示ital
40、ic-文本斜体显示oblique-文本倾斜显示说明：说明：斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（3）CSS字体 3）字体加粗 font-weight font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。关键字 100-900 为字体指定了 9 级加粗度。1
41、00 对应最细的字体，900 对应最粗的字体。数字 400 等价于 normal，而 700 等价于 bold。p.normal font-weight:normal;p.thick font-weight:bold;p.thicker font-weight:900;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（3）CSS字体 4）字体大小 font-size font-size 属性属性设置文本的大小。使用像素来设置字体大小：p font-size:60px;使用 em 来设置字体大小：p font-size:0.875em;/*14
42、px/16=0.875em*/电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（4）CSS列表 CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。1）列表类型 要修改用于列表项的标志类型，可以使用属性 list-style-typelist-style-type。例如：把无序列表中的列表项标志设置为方块。ul list-style-type:square电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（4）CSS列表 2）列表项图像 有时，常规的标志是不够的。你可能想对各
43、标志使用一个图像，这可以利用 list-style-imagelist-style-image 属性做到：ul li list-style-image:url(xxx.gif)只需要简单地使用一个 url()值，就可以使用图像作为标志。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（4）CSS列表 3）列表标志位置 CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-positionlist-style-position 完成的。规定列表中列表项目标记的位置：ul list-style-positio
44、n:inside;值描述描述inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。inherit规定应该从父元素继承 list-style-position 属性的值。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（5）CSS表格 1）表格边框 如需在 CSS 中设置表格边框，请使用 border 属性。下面的例子为 table、th 以及 td 设置了蓝色边框：table,th,td border:1px solid blue;电
45、子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（5）CSS表格 2）表格宽度和高度 通过 width 和 height 属性定义表格的宽度和高度。下面的例子将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px：table width:100%;th height:50px;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（5）CSS表格 3）表格文本对齐 text-align 和 vertical-align 属性设置表格中文本的对齐方式。text-align 属性设置水平对
46、齐方式，比如左对齐、右对齐或者居中：td text-align:right;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（5）CSS表格 3）表格文本对齐 vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：td height:50px;vertical-align:bottom;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（5）CSS表格 4）表格内边距 如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：td p
47、adding:15px;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术7、CSS样式（5）CSS表格 5）表格颜色 下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：table,td,th border:1px solid green;th background-color:green;color:white;电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术8、DIV+CSS DIV+CSS DIV+CSS 是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（tab
48、le）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。用div盒模型结构给各部分内容划分到不同的区块，然后用css来定义盒模型的位置、大小、边框、内外边距、排列方式等。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术8、DIV+CSS （1）DIV元素 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。电子
49、信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术8、DIV+CSS （2）页面布局与规划 页面的布局，大致分为以下几个部分：1）顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2）内容部分又可分为侧边栏、主体内容；3）底部，包括一些版权信息。电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术8、DIV+CSS （3）DIV结构 图图2 DIV2 DIV结构图结构图电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术8、DIV+CSS （3）DIV结构body/*这是一个HTM
50、L元素，具体我就不说明了*/#Container/*页面层容器*/#Header/*页面头部*/#PageBody/*页面主体*/#Sidebar/*侧边栏*/#MainBody/*主体内容*/#Footer/*页面底部*/电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术8、DIV+CSS （4）写入整体层结构与CSS电子信息工程学院网页布局电子信息工程学院网页布局WEB编程基础二、关键技术二、关键技术8、DIV+CSS （4）写入整体层结构与CSS/*基本信息*/body font:12px;margin:0px;text-align:center;ba