网页制作css篇
网页设计与制作教程——Web前端开发(第6版)课件第5章 CSS3的属性5.8
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一章
5.8 CSS属性的应用
【例5-21】设置图像边框，本例文件5-20.html的显示效果，如图5-25所示。
5.8 CSS属性的应用
3. 图像的不透明度 语法：opacity：value | inherit; 【例5-22】设置图像的透明度，本例文件5-22.html的显示效果，如图5-26所示。
5.8 CSS属性的应用
2. 图文链接 对链接的修饰，还可以利用背景图片将文字链接进一步的美化。 【例5-24】图文链接，本例文件5-24.html，鼠标未悬停时文字链接的效果，如图528（a）所示；鼠标悬停在文字链接上时的效果，如图5-28（b）所示。
5.8 CSS属性的应用
5.8.3 创建导航菜单 1. 纵向导航菜单 【例5-25】制作纵向列表模式的导航菜单，本例文件5-25.html，鼠标未悬停在 菜单项上时的效果，如图5-29（a）所示；鼠标悬停在菜单项上时的效果，如图 5-29（b）所示。
padding:5px 5px 5px 0.5em; text-decoration:none; /*链接无修饰*/ border-left:12px solid #711515; /*左边的粗红边框*/ border-right:1px solid #711515; /*右侧阴影*/ } #nav li a:link, #nav li a:visited{ /*未访问过的链接、访问过的链接的样式*/ background-color:#c11136; /*改变背景色*/ color:#fff; /*改变文字颜色*/ } #nav li a:hover{ /*鼠标悬停于菜单项上时的样式*/ background-color:#990020; /*改变背景色*/ color:#ff0; /*改变文字颜色*/ } 菜单经过进一步美化，显示效果如图5-29所示。
网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库：CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1：制作“李彦宏——众里寻他千百 度”网页 5.2 知识库：CSS图像样式
目录
5.3 基础项目2：制作“少年中国说”网页 5.4 知识库：CSS背景样式 5.5 提高项目：制作“低碳生活 从我做起”网页 5.6 拓展项目：制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下：
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色（比如 red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number
transparent inherit
name属性或id属性相关联，创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定，所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域，其属性及属性值如下：
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示： 当vertical-align的值为bottom或者sub时，IE与Firefox 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。
网页样式CSS总结
第二章网页样式CSS总结一、CSS的概念与作用Css全称为级联样式表（Cascading Style Sheet）,通常又称为风格样式表（Style Sheet）,是用来进行网页风格设计的。
通过设立样式表，可以统一控制HTML中各标签的显示属性。
CSS可以更有效地控制网页外观。
使用CSS，可以精确的定位网页元素的位置，美化网页外观。
一个合理的CSS，还能有效地节省网络带宽，提高用户体验。
同时，使用CSS制作网页，还有以下优点：1、内容与表现分离。
有了CSS，网页的内容（XHTML）与表现就可以分开了。
2、表现统一。
可以使网页的表现非常统一，并且容易修改。
3、丰富的样式。
使得页面布局更加灵活。
4、减少网页的代码量，增加网页的浏览速度，节省网络带宽。
5、运用独立于页面的CSS，还有利于网页被搜索引擎收录。
二、<div>标签<div>标签可以用于定义HTML文档中的分区或节，即可以把HTML文档分割为独立的、不同的部分。
<div>标签就像一个容器，可以放置其他的HTML标签，如段落，列表，图片，表单等。
CSS的基本语法结构：<style type>=“text/css”>选择器{属性：属性值;......}</style>选择器：表示被修饰的对象，如页面中被修饰的段落标签<p>、列表标签<li>等。
属性：希望改变的样式，如颜色color、字体大小font—size 等，属性和属性值用冒号（：）隔开。
例如，设置页面中所有的<li>标签的文字颜色为红色，字体大小为15px，对应的样式代码如下：<style type=“text/css”>Li{color:#ff0000;font—size:15px;}</style>三、CSS选择器：根据选择器表示所修饰的内容类别，选择器又分为标签选择器、类选择器、ID选择器、并集选择器和后代选择器。
网页设计与制作案例教程(HTML5+CSS3)第6章使用CSS设置列表样式
WEB
13
6.6.1 HTML列表
在HTML中有三种列表
项目列表
编号列表
定义列表
WEB
6.6.1 HTML列表
① 项目列表
项目列表也称为无序列表，是网页中的常见元素之一，项目列
表使用<li>标签来罗列各个项目，各个项目使用特殊符号来进行分
项标识，如黑色圆点等。项目列表的列表项之间没有顺序关系。 语法格式 <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> …… </ul>
26
6.7 提高项目：制作“童书畅销榜”页面
27
6.8 拓展项目：制作“商品列表”页面
28
WEB
网 页 效 果
代 码
20
6.6.2 常用CSS列表样式
① 设置列表符号类型
项目列表项的默认符号是黑色圆点，编号列表项默认 符号是数字1、2、3…..，通过设置list-style-type属性可 以改变列表项的符号。 语法格式
list-style-type:属性值;
21
6.6.2 常用CSS列表样式
19
6.6.1 HTML列表
③ 定义列表
<!doctype html> <html> <head> <meta charset="utf-8"> <title>定义列表</title> </head> <body> <dl> <dt>中国的城市:</dt> <dd>北京</dd> <dd>上海</dd> <dd>广州</dd> <dt>美国的城市:</dt> <dd>华盛顿</dd> <dd>纽约</dd> <dd>洛杉矶</dd> </dl> </body> </html>
网页设计与制作教程——Web前端开发(第6版)课件第4章 CSS3基础4.3
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
非常棒的你！又开始学 习新的内容
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第4章 CSS3基础
4.3 CSS的两个主要特性
本节介绍CSS的两个主要特性。
目录Βιβλιοθήκη 第4章 CSS3基础4.1 CSS简介 4.2 在HTML中使用CSS的方法 4.3 CSS的两个主要特性 4.4 CSS的基本语法 4.5 CSS的选择器 4.6 属性值的写法和单位 4.7 HTML文档结构与元素类型 4.8 实训——制作内容详情页 习题4
4.3 CSS的两个主要特性
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>继承示例</title> <style type="text/css"> p {color: #00f; /*定义文字颜色为蓝色*/ text-decoration: underline; /*增加下划线*/ } p em { /*为p元素中的em子元素定义样式*/ font-size: 24px; /*定义文字大小为24px*/ color: #f00; /*定义文字颜色为红色*/ } </style>
</head>
4.3 CSS的两个主要特性
<body> <h3>CSS基础</h3> <p>CSS是一组格式设置规则，用于控制<em>Web</em>网页的外观。</p> <ul> <li>CSS的优点 <ul> <li>表现和内容（结构）分离</li> <li>易于维护和<em>改版</em></li> <li>更好的控制页面布局</li> </ul> </li> <li>CSS设计与编写原则</li> </ul>
《网页设计与制作》教案-第17讲 使用CSS美化网页一
第17讲使用CSS美化网页一1.1教学目标：◆知识目标1.熟练掌握CSS样式表的创建与编辑。
2.掌握CSS样式表的基本语法和定义位置。
3.理解CSS样式表的标签样式、高级样式、类样式的定义方法。
◆技能目标1.能合理创建和管理样式表文件，在网页设计中能够灵活利用CSS样式对页面元素变换不同的视觉效果◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握CSS样式表的创建与编辑。
2.掌握CSS样式表的基本语法和定义位置。
1.3 教学难点1.理解CSS样式表的标签样式、高级样式、类样式的定义方法。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题对于一个网站的多个页面文件，经常出现布局一致的情况，甚至网页的一些部分是完全相同的，比如导航栏、标题栏等，利用Dreamweave中的模板可以方便快捷地创建大量风格统一、布局一致的网页，运用方便灵活的库文件，可省去设计者大量的重复工作。
二、使用样式表在Internet的汪洋大海之中，怎样才能使自己的页面独树一帜？怎样使自己的页面保持统一的风格？怎样免除众多HTML标志属性设置的烦恼？Dreamweaver中的CSS（层叠样式表）可以使我们很方便地完成页面风格的设置。
利用CSS不仅可以控制一篇文档中的文本格式，而且可以控制多篇文档的文本格式。
因此使用CSS样式表定义页面文字，将会使设计制作工作量大大减小。
一些好的CSS样式表的建立，使我们可以更进一步地对页面进行美化，对文本格式进行精确定制。
什么是样式表？样式表的英文缩写为CSS，即Cascading Style Sheet（层叠样式表）的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行页面风格设计的。
第1章 HTML与CSS网页设计概述
✎ 1.2 网页制作入门
• 1.2.2 CSS简介
– CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的 文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边 框样式、边距等）以及版面的布局等外观显示样式。
✎ 1.2 网页制作入门
• 1.2.1 HTML简介
– 目前最新的HTML版本是HTML5，但是各个浏览器对其支持不统 一，所以如今大多数的网站采用的还是HTML4.01版本。
– XML虽然数据转换能力强大，完全可以替代HTML，但是面对互 联网上成千上万基于HTML编写的网站，直接采用XML还为时过 早。因此，在HTML4.0的基础上，用XML的语法规则对其进行扩 展，得到了XHTML。
的版本仍然是CSS2，即本书所讲解的版本。
✎ 1.2 网页制作入门
• 1.2.2 CSS简介
CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如 果是独立的文件，则必须以.css为后缀名。
• CSS采用的是内嵌方式，虽然与HTML在同一 个文件中，但CSS集中写在HTML文档的头部 ，也是符合结构与表现相分离的。
网页是如何形成的呢？
✎ 1.1 Web基本概念
• 1.1.1 认识网页
– 除了首页之外，一个网站通常还包含多个子页面。网页与网页之 间通过超链接互相访问。
– 网站由网页构成，网页有静态和动态之分。(动态网页有交互,如查 询\论坛上留言等
– 静态网页是指用户无论何时何地访问，网页都会显示固定的信息 ，除非网页源代码被重新修改上传。
• 如今大多数网页都是遵循Web标准开发的，即 用HTML编写网页结构和内容，而相关版面布 局、文本或图片的显示样式都使用CSS控制。
CSS样式美化网页实例
将如下图像文件：img4_3_3.jpg、img4_3_4.jpg、img4_3_5.jpg、img4_3_6.jpg、（文档中用到的图像）和img5_1.gif、img5_2.gif、img5_3.gif、img5_4.gif（图像项目符）及img5_5.gif（背景图片）复制到images文件夹下。
将ex5_city.html复制到webpages文件夹中。
1．使用CSS样式美化文本①创建类样式步骤如下：打开ex5_city.html，在菜单栏中选择“窗口”—“CSS样式”命令，切换到如下的CSS样式面板。
单击“新建CSS规则”按钮（可尝试用不同的方法），弹出如下的对话框：设置如下参数后，点击确定：在新弹出的“.textcss的CSS规则定义”中设置如下参数②重新定义特定HTML标签<h2>步骤如下：打开“新建CSS规则”对话框，设置如下参数，点击确定在“h2的CSS规则定义”对话框中设置如下参数③应用CSS样式对文中正文文本（除标题外）应用“.textcss样式”（可尝试不同的方法），部分结果截图如下：2．利用CSS样式改变超链接①创建外部CSS样式表控制整个站点的风格步骤如下：“在新建CSS规则”对话框中设置如下参数后点击确定。
（注意HTML标签<a>的含义）在弹出的对话框中进行如下设置（保存文件的路径）：设置“a的CSS规则定义”对话框：结果截图如下：3．使用高级样式步骤如下：①选择文档中所有的链接(顶端的目录)，在文本“属性”检查器中单击“项目列表”按钮，为超链接文本所在段落添加圆点项目符。
②打开“新建CSS规则”对话框，设置a:link的样式，点击确定。
③设置a:visited的样式④设置a：active的样式⑤设置a：hover的样式：预览后截图如下：点击链接前：点击链接后：4.链接外部样式文件步骤如下：把img4_tr0.gif、img4_tr1.jpg、img4_tr2.jpg、img4_tr3.jpg、img4_tr4.jpg、img4_tr6.jpg复制到images文件中，将ex5_travel.html复制到webpages文件夹中，打开ex5_travel.html，按如下步骤，为该网页附加外部样式文件（注意：在附加链接前，要先对ex5_ travel.html中网页的部分内容建立超链接：比如锚链接和返回页首链接）效果截图如下：5.CSS样式综合应用①重定义HTML标签<body>设置页面背景颜色及图像。
用css样式表美化网页
6.3
© 2009
第6章
用CSS样式表美化网页
CSS样式
CSS定义 CSS样式的分类及应用方式 使用“CSS样式”面板 新建CSS样式 设置“CSS 规则定义”对话框参数 自定义CSS样式 链接外部CSS样式 编辑CSS样式 复制CSS样式 导出CSS样式 CSS样式转化为HTML标签
样式表文件名
CSS规则列表
属性和属性值 列表
类别视图
工具按钮栏
6.9
© 2009
第6章
用CSS样式表美化网页
使用“CSS样式”面板
选择命令“窗口”→“CSS样式” or单击属性面板中的CSS按钮 or使用快捷键Shift+F11
附加样式表 新建CSS规则 编辑样式
删除CSS样式
6.10
© 2009
为超链接创建动态效果 ： a:link——定义了链接文字的样式。 a:visited——浏览者已经访问过的链接样式。 a:hover ——定义了鼠标悬浮在链接文字上时的样式。 a:active ——定义链接被激活时的样式，即鼠标已经单 击了链接，但页面还没有跳转时。
6.26
© 2009
第6章
用CSS样式表美化网页
© 2009
第6章
用CSS样式表美化网页
创建和应用CSS样式
1 控制浏览器中的文字大小 2 设置行间距 3 为图片加上边框效果
6.22
© 2009
第6章
用CSS样式表美化网页
创建和应用CSS样式
4 利用“自定义样式表”改变鼠标指针的形态 创建基本页面，“CSS样式”面板上右击，选择“新建”命令
打开“CSS 规则定义”对话框 从“光标”下拉菜单中选择鼠标方案
HTML5+CSS3网页设计与制作案例教程
随着信息通信技术的不断成熟，以及互联网与各行各业的日益融合，越来越多的人接触或从事网页设计制作工作。
在介绍网页制作技术之前，我们有必要先了解一下相关的基础知识。
本章主要介绍网页相关知识、网页的基本元素以及制作网页常用的技术和软件。
本章学习目标◎ 了解互联网、因特网、万维网的关系和区别。
◎ 了解网站、网页和HTML的基本概念。
◎ 了解静态网页和动态网页的区别和联系。
◎ 了解HTTP、FTP、IP地址、域名和URL等基本概念。
◎ 能够安装并使用浏览器查看网页。
◎ 了解从媒体内容和布局元素两个角度出发，网页所包含的基本元素。
◎ 了解网页开发所使用的基本技术和工具。
HTML5+CSS3网页设计与制作案例教程在学习如何设计一个网页之前，我们首先要对网站、网页及其相关知识具有最基本的认识。
1.1.1 互联网(internet)、因特网(Internet)、万维网(WWW)互联网指由若干计算机网络相互连接而成的网络。
进一步讲，凡是能彼此通信的设备组成的网络就叫互联网，即使仅有两台机器，不论用何种技术使其彼此通信，就可以称为互联网。
互联网的英文用开头字母小写的internet表示，不是专有名词，泛指由多个计算机网络相互连接而成的一个大型网络。
因特网和其他类似的由计算机相互连接而成的大型网络系统，都可算是互联网，因特网只是互联网中最大的一个网络。
因特网是目前全球最大的一个电子计算机互联网，是由美国的ARPA网发展演变而来的。
但因特网并不是全球唯一的互联网络，例如在欧洲，跨国的互联网络就有“欧盟网”(Euronet)、“欧洲学术与研究网”(EARN)、“欧洲信息网”(EIN)，在美国还有“国际学术网”(BITNET)，世界范围的还有“飞多网”等。
Internet专指全球最大的也就是我们通常所使用的互联网络——因特网，“因特网”是作为专有名词出现的，因而开头字母必须大写。
万维网是指环球信息网，英文全称为World Wide Web，简称WWW。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
css属性——颜色和背景属性 5)、background-attachment 设置背景是否滚动 body{background-attachment:scroll/fixed}
css属性——颜色和背景属性 6)、background-position 设置背景图案的位置 如，body{background-position:值1 值2} 默认值为：(0% 0%)。 如果只指定了一个值，该值将用于横坐标。 纵坐标将默认为50%。第二个值将用于纵 坐标。
css属性——颜色和背景属性 3)、Background-image 定义背景图片 如，body{background-image:url(*.jpg);}
css属性——颜色和背景属性 4)、background-repeat 背景图案重复方式 如，body{background-repeat:repeat/norepeat/repeat-x/repeat-y}
7)组合选择符 div .p3{ color:yellow; } 针对div标签下的所有class为p3的标签指定样 式
#p4 h2{ color:#340967; } 针对id为p4的标签下的所有h2标签指定样式
8)伪类
一种特殊的类选择符,对链接在不同状态下定义不同的样 式效果.
a:link{color:red;} a:hover{color:pink;} a:active{color:blue;} a:visited{color:green;}
css属性-文本属性
1）、word-spacing
定义了单词之间的间距
css属性-文本属性
2）、letter-spacing 定义了各个字母之间、字与字之间的间距
css属性-文本属性
3）、text-decoration 定义文字的修饰样式 text-decoration : none || underline || blink || overline || line-through
4)Id选择符
#content{ font-size:20px; line-height:130%; } Id属性将匹配所有id=“content”的元素 <div id=“content”>…..</div>
5)Class选择符 .p1{ font-size:20px; color:red; } <div class=“p1”>…</div> <td class=“p1”>…</td>
CSS层叠样式表
1、什么是css
CSS是Cascading Style Sheets（层叠样式表）的简称。 1996年12月17日W3C(The World Wide Web Consortium) 推出了css1规范, 自CSS1的版本之后，又在1998年5月12 日发布了CSS2.0版本。目前最新版本为css3，目前还没 有完全支持css3的浏览器。 对于css2支持最好的浏览器之一是Mozzla Firefox和Opera， 而应用比较广泛的Windows IE，却并没有完全支持css2.Fra bibliotekss属性-文本属性
4）vertical-align
vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length 参数：
类选择符和ID选择符的差别： 类选择符可以重复使用，且可以用在任意元素 上，使用任意次。 Id属性应该是唯一的，只有拥有该id的元素才 会应用该样式。
6)标签指定式选择符 h1#ft{ font-size:20px; color:green; } 针对id为ft的h1标签指定样式
h1.p2{ color:pink; } 针对所有class=“p2”的h1标签指定样式
1）内联式样式表 在对象的标记内使用对象的style属性定义适用 其的样式表属性
<p style="color:red;line-height:200%;"> …… </p>
2）内嵌式样式表
在<head>和</head>之间
<style type="text/css"> <!-…… --> </style>
5、css数据单位
px(象素，font-size:12px) em(相对于当前对象内文本的字体尺寸,font-size:1.2em）
ex(相对于字符的高度的相对尺寸,font-size:1.2ex）
pt(点/磅,font-size:9pt） Pc(派卡,font-size:0.5pc） In(英寸,font-size:12in） mm(毫米,font-size:4mm）
3)为了使样式更加易于阅读，一般将每条声明写 在一个新行内 p { text-align: center; color: black; font-family: arial; }
4、层叠式样式表的使用方法
1）内联式样式表-在body内实现 2）内嵌式样式表-在head内实现 3）外部链接式样式表-在文件外调用 4）导入外部样式表
a.a1:link{color:black;} a.a1:hover{font-style:italic;} 对class=“a1”的超链接应用样式
9)伪对象 div:first-letter { font-size:4em; font-style:italic; }
p:first-line { font-size:2em; font-style:italic; }
外观的统一。
样式表文件只需要下载一次，就可以在其他链接了该 文件的页面内使用。
浏览器会先显示HTML内容，然后再根据样式表文件进 行渲染，从而使访问者可以更快的看到内容。
4）导入外部样式表 指在内嵌式样式表的<style>里导入一个外部 样式表，导入时用@import <head> <style type="text/css"> <!-@import url(my.css); --> </style> </head>
3）包含选择符：对某个对象的子对象进行样式指定，包含选择符指选
择符组合中前一个对象包含了后一个对象，对象之间使用空格作为分隔符， 如
h1 span { font-weight:bold; }
上面的样式将被应用于下面的哪段文本？
<h1>这是我的一段文本<span>这是span内的文本</span></h1> <h1>单独的h1</h1> <span>单独的span</span> <h2>被h2标签套用的文本<span>这是h2下的span</span></h2>
css属性——颜色和背景属性 1)、color 定义前景色 如，p{color:red;} p{color:rgb(00,00,255);} p{color:#00ff00;} P{color:rgb(50%,0,50%) ;}
css属性——颜色和背景属性 2)、background-color 定义背景色 如，body{background-color:yellow;} div { background-color: rgb(223,71,177) ;}
10）通配选择符*，利用通配选择符可以为
所有的元素定义统一的属性。如，
*{margin:0;}
7、css属性——字体属性
font-family : name 设置字体 font-style : normal | italic | oblique 设置字体是否倾斜 font-variant:normal|small-caps 设置字体是否用小体大写
cm(厘米,font-size:0.2cm）
6、选择符的种类
1）类型选择符：指以网页中已有的标签名作为名称的选择符。
2）群组选择符：除了可以对单个对象进行样式指定外，同样可
以对一组对象进行相同的样式指派，如
h1,h2,h3,p { font-size:12px; font-family:arial; }
3）外部链接式样式表
把编辑好的CSS文档保存成“.CSS”文件， 然后在<head>中定义。定义的格式是: <head>
<link rel=“stylesheet” href=“style.css” type="text/css"> </head>
使用外部链接式样式表的优点：
独立于HTML文件，便于修改 多个文件可以引用同一个样式表文件，从而保持页面
font-size :字体大小设置
font-weight : normal | bold | bolder | lighter | number字体粗细设置
normal:正常，等同于400
bold:粗体，等同于700
number:100/200/300/400/500/600/700/800/900 bolder 或者 lighter，则是相对其父对象来说的。如果父对象的值为 normal，子对象值设为 bolder，则最终以 bold，即粗体显示。
<body style="backgroundimage:url(image/beijing1.jpg);backgroundrepeat:repeat-y;background-position:right;">
<body style="backgroundimage:url(image/beijing1.jpg);backgroundrepeat:repeat-y;background-position:center;"> <body style="backgroundimage:url(image/beijing1.jpg);backgroundrepeat:repeat-x;background-position:bottom;"> <body style="backgroundimage:url(image/beijing1.jpg);backgroundrepeat:repeat-x;background-position:center;">