下载文档原格式
列举出设置html标签样式的5种常用方法设置HTML标签样式的5种常用方法HTML标签样式是网页设计中非常重要的一部分，可以让页面变得更加美观和易于阅读。
本文将列举出5种常用的设置HTML标签样式的方法。
1. 使用CSS样式表CSS样式表是一种将样式应用于HTML文档的方式，它可以让我们在一个地方定义所有HTML页面的样式，从而提高代码的可维护性和可读性。
通过CSS样式表，我们可以定义字体、颜色、背景、边框、间距等各种样式。
在HTML文档中通过link标签引入CSS文件，就可以将样式应用到HTML文档中的元素。
2. 使用内联样式内联样式是一种将样式直接应用于HTML元素的方式，它可以让我们在一个元素中定义它的样式，而不需要在CSS文件中进行定义。
内联样式使用style属性来定义样式，例如：```<p style="color:red;font-size:16px;">这是一段红色的文字</p> ```3. 使用HTML标签属性有些HTML元素具有自己的样式属性，例如，可以在img标签中使用width和height属性来设置图片的宽度和高度，可以在a标签中使用href属性来设置链接的目标。
通过这些标签属性，我们可以直接设置元素的样式，而不需要使用CSS样式表或内联样式。
4. 使用伪类和伪元素伪类和伪元素是CSS中非常重要的概念，它们可以让我们在某些条件下对HTML元素进行样式设置。
常见的伪类包括:hover、:active、:focus等，它们可以对鼠标悬停、点击、获取焦点等事件进行样式设置。
而伪元素可以让我们对元素的某些部分进行样式设置，例如::before和::after可以让我们在元素前后添加内容，从而实现一些特殊的样式效果。
5. 使用JavaScriptJavaScript是一种可以让网页动态变化的编程语言，它可以让我们通过代码来修改HTML元素的样式。
在HTML中引⼊CSS的⼏种⽅式介绍⽬录1、直接在html标签元素内嵌⼊css样式2、在html头部head部分内style声明3、使⽤@import引⽤外部CSS⽂件⽅法4、使⽤link来调⽤外部的css⽂件使⽤link来引⽤外部的css的优势下⾯是⼀些补充使⽤不同的⽅法来引⽤css样式表，最终到达的效果相同，但是使⽤不同⽅法应⽤的css⽂件将影响到SEO及⽹页打开速度效率。
html引⽤css⽅法如下接下来我们将逐个讲解html引⽤css⽅法的例⼦1、直接在html标签元素内嵌⼊css样式如<div style="font-size:14px; color:#FF0000;">我是div css测试内容⽀持</div> 效果如下图2、在html头部head部分内style声明插⼊代码如下：<style type="text/css"><!--.ceshi {font-size:14px; color:#FF0000;}/*这⾥是设置CSS的样式内容*/--></style>具体⽅法如下图：3、使⽤@import引⽤外部CSS⽂件⽅法<!doctype html><html><head><meta charset="utf-8"><title>测试</title><style type="text/css"><!--@import url(wcss.css);/*这⾥是通过@import引⽤CSS的样式内容*/--></style></head><body><div class="ceshi">我是div css测试内容⽀持</div></body></html>Wcss.css⽂件内代码.ceshi {font-size:14px; color:#FF0000;}效果如下图：可以看出使⽤此⽅法和使⽤⾃带式引⽤css样式表⽅法有相同处，都是需要在html的head内使⽤style标签引⽤外部css。
HTML4-7章作业1、CSS样式表不可能实现( )功能。
A将格式和结构分离 B．一个CSS文件控制多个网页C.控制图片的精确位置 D．兼容所有的浏览器2、可用来在一个网页中嵌入显示另一个网页内容的标记符是（）A.<Marquee>B. <Iframe>C.<embed>D.<object>3.我们想要在框架中加入一个叫做list.htm的文件，应该在HTML中如何描述它？A、frame page="list.htm"B、frame target="list.htm"C、frame src="list.htm"D、frame framepage="list.htm"4.我们想要在页面中加入一个层，可以使用哪些HTML标记来描述它？(选择2项)A、<floor>B、<div>C、<span>D、<level>5 . 下列哪种CSS样式定义的方式拥有最高的优先级？A、嵌入B、行内C、链接D、导入6 . 以下的HTML中，哪个是正确引用外部样式表的方法？A、 <style src="mystyle.css">B、 <link rel="stylesheet" type="text/css" href="mystyle.css">C、 <stylesheet>mystyle.css</stylesheet>7. 在HTML文档中，引用外部样式表的正确位置是？A) 文档的末尾B) <head>部分C) 文档的顶部D) <body>部分8. 哪个HTML标签可用来定义内部样式表？A) <style>B) <script>C) <css>9. 哪个HTML属性可用来定义内联样式？A) fontB) classC) stylesD) style10. 下列哪个选项的CSS语法是正确的？A) body:color=blackB) {body:color=black(body}C) body {color: black}D) {body;color:black}11. 如何在CSS文件中插入注释？A) // this is a commentB) // this is a comment //C) /* this is a comment */D) ' this is a comment12 . CSS哪个属性可用来改变背景颜色？A) bgcolor:B) color:C) background-color:13. 如何为所有的<h1>元素添加背景颜色？A) h1.all {background-color:#FFFFFF}B) h1 {background-color:#FFFFFF}C) all.h1 {background-color:#FFFFFF}14 . CSS如何改变某个元素的文本颜色？A) text-color:B) color:C) fgcolor:D) text-color=15 . 哪个CSS属性可控制文本的尺寸？A) font-sizeB) text-styleC) font-styleD) text-size16 . 以下的CSS中，可使所有<p>元素变为粗体的正确语法是?A) <p style="font-size:bold">B) <p style="text-size:bold">C) p {font-weight:bold}D) p {text-size:bold}17 . 如何显示没有下划线的超链接？A) a {text-decoration:none}B) a {text-decoration:no underline}C) a {underline:none}D) a {decoration:no underline}18 . 如何使文本以大写字母开头？A) text-transform:capitalizeB) 无法通过CSS来完成C) text-transform:uppercase19 . css如何改变元素的字体？A) font=B) f:C) font-family:20 . 如何改变元素的左边距？A) text-indent:B) margin-left:C) margin:D) indent:21. 如何产生带有正方形的项目的列表？A) list-type: squareB) list-style-type: squareC) type: squareD) type: 222 . 我们可以在下列哪个HTML元素中放置javascript代码？A) <script>B) <javascript>C) <js>D) <scripting>23.某一站点主页面index.html的代码如下所示，则选项中关于这段代码的说法正确的是（）。
css的作用CSS（Cascading Style Sheets），层叠样式表，是一种用来描述网页上的样式和布局的标记语言。
CSS的作用在于将HTML文档的呈现和内容分离，从而提供更灵活、更精细的设计控制。
首先，CSS可以提升网页的外观和视觉效果。
通过CSS，可以修改网页的背景颜色、字体样式、大小、颜色、边框样式等等，使网页看起来更加美观和专业。
CSS可以帮助设计师实现各种各样的效果，比如渐变、阴影、旋转、动画等，丰富了网页的表现形式。
其次，CSS可以实现网页的布局控制。
使用CSS，可以轻松调整HTML元素在网页中的位置和大小。
通过设置元素的定位、浮动、清除浮动等属性，可以实现栅格布局、响应式布局等各种布局需求。
CSS还提供了强大的盒模型，可以定义元素的内外边距、边框和大小，方便进行页面布局和样式设计。
此外，CSS还可以实现网页的适应性和响应式设计。
通过媒体查询，可以根据不同的设备和屏幕大小应用不同的样式和布局，使网页可以在不同的设备上展示出最佳的用户体验。
响应式设计可以使网页在桌面、平板、手机等多种设备上都有良好的显示效果，提升了用户访问网页的便捷性和舒适度。
另外，CSS还可以提高网页的加载速度和性能。
通过优化CSS代码，可以减小文件的大小，加快网页的加载速度。
CSS中还有一些属性和技术，比如渐进增强和优雅降级，可以优化网页的性能和跨浏览器兼容性。
此外，CSS还可以提高网页的可访问性。
通过给HTML元素添加适当的样式和属性，可以使网页对残障人士更友好，例如为视觉障碍者提供可读的文本、为听觉障碍者提供字幕等。
最后，CSS还可以实现网页的动态效果和交互性。
通过CSS 的动画属性和过渡效果，可以实现网页的各种动态效果，如渐变、旋转、缩放等等。
通过CSS选择器和伪类，还可以实现用户交互的效果，如按钮悬停效果、链接样式等等，增加了网页的交互性和用户体验。
综上所述，CSS在网页设计中发挥着重要的作用。
它可以提升网页的外观效果、调整网页的布局、实现网页的适应性和响应式设计、提高网页的加载速度和性能、提升网页的可访问性，以及实现网页的动态效果和交互性。
举例说明在html中引入css的方法【篇一：举例说明在html中引入css的方法】html与css是两个作用不同的语言，它们同时对一个网页产生作用，因此必须将css与html链接在一起使用。
在html中，引入css的方法主要有4种：行内式、内嵌式、导入式和链接式。
行内式行内式即在标记的style属性中设定css样式，这种方式本质上没有体现css的优势，因此不推荐使用。
行内式示例：p>2. 嵌入式嵌入式将页面中各种元素的设置集中写在 head /head之间，对于单一的网页使用方便。
但对于包含很多页面的网站，如果每个页面都以嵌入式方式设置各自的样式，也将失去css带来的优点，因此一个网站通常都是编写一个独立的css文件，然后将其引入html文档中。
嵌入式示例：!doctype html html head meta name=viewportcontent=width=device-width / title /title style type=text/cssp>3. 导入式与链接式导入式和链接式的目的都是将一个独立的css文件引入html文件中，二者的区别在于链接式使用html的标记引入外部css文件，而使用导入式则是使用css的规则引入外部css文件。
使用链接式引入外部css文件示例：link href=~/content/base.css rel=stylesheet type=text/css / 使用导入式引入css文件示例：style type=text/css @import /content/base.css /style 采用这两种方式的显示效果区别：使用链接方式时，会在加载页面主体部分之前加载css文件，这样显示出来的网页从一开始就是带有样式效果的。
而使用导入式时，会在整个页面加载完成后再加载css文件，对于有的浏览器来说，在一些情况下，如果网页文件比较大，则会出现显示无样式的页面，闪烁一下之后再出现设置样式后的效果。
2.2.2 CSS样式表引用（一）：内部样式表（CSS样式表引用）引入CSS样式表的方法引入CSS样式表的重要性要想使用CSS修饰网页，就需要在HTML文档中引入CSS样式表。
根据CSS代码在HTML 文档中的位置不同及是否作为独立文件存在，将CSS样式表引入方式主要分为三类，分别是：内部样式表，外部样式表、行内样式表。
1、内部样式表内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义，其基本语法格式如下：<head><style type="text/css">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>该语法中，<style>标记一般位于<head>标记中<title>标记之后，也可以把它放在HTML 文档的任何地方。
但是由于浏览器是从上到下解析代码的，把CSS代码放在头部便于提前被下载和解析，以避免网页内容下载后没有样式修饰带来的尴尬。
接下来通过一个案例来学习如何在HTML文档中使用内嵌式CSS样式，具体代码如下： 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"1 "/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<html xmlns="/1999/xhtml">3<head>4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5<title>使用CSS内部样式表</title>6<style type="text/css">7h2{ text-align:center;} /*定义标题标记居中对齐*/8p{ font-size:16px; color:red; text-decoration:underline;} /*定义段落标记的样式*/9</style>10</head>11<body>12<h2>内嵌式CSS样式</h2>13<p>使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，title标记之后。
html的工作原理
HTML的工作原理是通过标签来表示文档中的不同元素，比
如标题、段落、链接、图像等。
HTML文档由一系列标签组成，这些标签使用尖括号进行包围，标签之间可以嵌套或者单独存在。
标签可以包含属性，属性提供了有关元素的更多信息。
HTML文档的解析是由浏览器完成的。
当浏览器加载HTML
文档时，它遵循HTML解析规则逐行解析文档内容。
其中，
浏览器会识别标签，根据标签的类型和属性来构建文档的结构树，同时将文本内容显示在浏览器窗口中。
解析过程中，浏览器会根据CSS样式表对文档进行样式化处理，使得页面外观更加丰富和美观。
CSS样式表会定义元素的样式属性，如颜色、字体、大小、位置等。
浏览器根据样式规则将这些属性应用到文档中的相应元素上。
另外，HTML还支持脚本语言，如JavaScript。
通过嵌入或者
引用JavaScript代码，可以实现页面的动态交互和事件处理。
最终，浏览器会将经解析、样式化和脚本处理后的HTML文
档呈现给用户，用户可以通过浏览器窗口与页面进行交互，如点击链接、填写表单等。
总结来说，HTML的工作原理是通过浏览器解析HTML标签，构建文档的结构树，并对文档进行样式化和脚本处理，最终将结果呈现给用户。
css 修改iframe的方法
要修改一个iframe的CSS样式，你可以使用以下方法之一：
1. 外部样式表：在你的HTML文档的<head>部分中，使用<link>元素引入一个外部的CSS文件，并在该文件中定义你想要的样式。
在外部CSS文件中，使用iframe作为选择器来定义样式。
```html
<link rel="stylesheet" href="styles.css">
```
在styles.css文件中：
```css
iframe {
/* 这里是你想要的样式 */
}
```
2. 内部样式表：在你的HTML文档的<head>部分中，使用<style>标签来定义内部样式表，并在其中使用iframe作为选择器来定义样式。
```html
<style>
iframe {
/* 这里是你想要的样式 */
}
</style>
```
3. 内联样式：直接在iframe标签中使用style属性来定义样式。
```html
<iframe style="/* 这里是你想要的样式 */"></iframe>
```
这些方法中，外部样式表和内部样式表更具可维护性和灵活性，因为它们将样式和HTML文档分离开来，使得样式的修改更加方便。
而内联样式则用于对单个iframe进行样式修改，适用于一些简单的修改。
一、内联样式表HTML5中可以在HTML标签的style属性中直接添加CSS样式，这种方法称为内联样式表。
例如：```<p style="color: red; font-size: 20px;">这是一段内联样式表的文字</p>```内联样式表的优点是可以针对单个或少量元素进行样式设置，不会影响到其他元素。
但缺点是不利于样式的管理和维护，因为样式和内容混在一起，不易于分离和修改。
二、嵌入式样式表除了内联样式表外，HTML5还支持在文档头部使用<style>标签定义嵌入式样式表。
例如：```html<!DOCTYPE html><html><head><style>p {color: red;font-size: 20px;}</head><body><p>这是一段嵌入式样式表的文字</p></body></html>```嵌入式样式表的优点是可以集中管理页面的样式，便于维护和修改。
但缺点是无法复用样式，当样式需要应用到多个页面时，需要分别在每个页面中定义。
三、外部样式表HTML5还支持将样式表文件单独抽离出来，然后在页面中引用外部样式表文件。
例如：```html<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="styles.css"></head><body><p>这是一段外部样式表的文字</p></body>```外部样式表的优点是可以实现样式的复用，多个页面可以引用同一个样式表文件，便于统一管理和修改。
css style写法CSS样式可以通过三种方式来编写：内联样式、嵌入式样式和外部样式表。
1. 内联样式：直接在HTML元素中使用“style”属性来添加CSS样式。
例如：```html<p style="color:blue; font-size:20px;">这是一段内联样式的文本。
</p> ```2. 嵌入式样式：在HTML文档的`<head>`部分中使用`<style>`标签来编写CSS样式。
例如：```html<head><style>p {color: blue;font-size: 20px;}</style></head><body><p>这是一段嵌入式样式的文本。
</p></body>```3. 外部样式表：将CSS样式编写到一个单独的.css文件中，然后在HTML 文档的`<head>`部分使用`<link>`标签来引用该CSS文件。
例如：```html<head><link rel="stylesheet" href=""></head><body><p>这是一段外部样式表的文本。
</p></body>```在外部样式表（）中编写如下代码：```cssp {color: blue;font-size: 20px; }```。
1.1.1CSS样式表在HTML文档中的应用利用CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。
这就避免了象表格嵌套那样将整个页面圈在一个大表格里，使得页面体积变小，浏览速度变快。
1.1.2如何插入样式表当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档。
插入样式表的方法有三种：●外部样式表顾名思义，外部样式表是指储存在html文档之外的独立CSS文件中的样式表。
当样式需要应用于很多页面时，外部样式表将是理想的选择。
在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
每个页面使用<link>元素链接到样式表。
浏览器会从文件mystyle.css中读到样式声明，并根据它美化HTML文档。
外部样式表可以在任何文本编辑器中进行编辑，但该文件中不能包含任何的html元素。
样式表应该不要在属性值与单位之间留有空格。
例如使用“margin-left: 20 px” 而不是“margin-left: 20px”，它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。
●内部样式表对于小范围应用的样式，为了精简外部样式表的规模，常常在该html文档中直接定义样式表，故命名为内部样式表。
此时可以使用<style 元素在HTML文档头部<head> </head>●内联样式由于要将样式和内容混杂在一起，内联样式会损失掉样式表的许多优势，请慎用这种方法。
例如仅当样式需要在某个元素上应用一次时采用内联样式。
要使用内联样式，你需要在相关的元素内使用样式（style）属性。
Style属性可以包含文档对象模型DOM（Document Object Model）以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
是对Web文档进行应用开发、编程的应用程序接口（API）。
作为W3C公布的一种跨平台、与语言无关的接口规范，DOM提供了在不同环境和应用中的标准程序接口，可以用任何语言实现。
作为表示和处理一个HTML或XML 文档的常用方法，通过对DOM操作可以重构整个HTML文档，包括添加、移除、改变或重排页面上的项目。
根据 DOM，HTML文档中的每个成分都是一个节点。
DOM 是这样规定的：1)整个文档是一个文档节点2)每个HTML标签是一个元素节点3)包含在HTML元素中的文本是文本节点4)每一个HTML属性是一个属性节点上述HTML中：<html>节点无父节点；它是根节点（想想家谱中祖先的位置）。
<head>和<body>的父节点是<html>节点，文本节点" Document：文档，是个平面文件"的父节点是<p>节点。
并且<html>节点拥有两个子节点：<head>和<body>；<head>节点拥有一个子节点：<title> 节点。
<title>节点也拥有一个子节点：文本节点 " DOM中一切都是节点"。
<h1>和<p>节点是同胞节点，同时也是<body>的子节点此外<head>元素是<html>元素的首个子节点；<body>元素是<html>元素的最后一个子节点；<h1>元素是<body>元素的首个子节点；<p>元素是<body>元素的最后一个子节点。
1.1.4选择器的使用CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素就需要我们所说的选择器。
选择器主要是用来确定html的树形结构中的DOM元素节点，作用是使样式表作用与指定的元素。
CSS中有多种选择器，这里介绍两个常用选择器：id选择器和类选择器。
id 选择器id 选择器可以为标有特定id的HTML元素指定特定的样式。
id选择器以“#” 来定义。
下面的HTML代码中，id属性为black的p元素显示为黑色，而id属性为blue的p元类选择器在CSS中，类选择器以一个点号“.”定义：.center {text-align: center;......}，即可以让所有拥有center 类的HTML元素均为居中。
在下面的HTML代码中，h1和p元素都有center1.2nth-child()选择器有时我们希望颜色或者格式能够按一定的规律变化，如奇偶行颜色不同，或每隔5行换一种格式，类选择器允许以一种独立于文档元素的方式来指定样式。
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
CSS3中提供了强大的伪类（pseudo-class）选择器，使开发者能选择某一对象中符合特定条件的元素进行渲染。
如这定义：nth-child(n) 选择器匹配属于其父元素的第N个子元素，不论元素的类型。
n可以是数字、关键词或公式。
例如，利用Odd 和even匹配下标是奇数或偶数的子元素的关键词（第一个子元素的又如，可以用公式(a×n+b)周期性地控制元素背景色，a表示周期的长度，n是计数器那么如果我们将它们组合一下会如何呢?为容易区分效果我们选择三种颜色，FF0000:何一个位置，右键菜单里都有“审查元素”入口，鼠标在链接上审查的就是这个超链接标签；鼠标在图像上审查的就是图片标签；鼠标在文字上，那么审查的就是包含这些文字的网页标签，如图3-3右侧所示。
错误！文档中没有指定样式的文字。
-2用审查元素跟踪CSS的应用Chrome将开发者工具作为一个独立的窗口：审查元素功能窗口(Developer Tools)里可以做到定位网页元素、实时监控网页元素属性变化的功能，可以及时调试、修改、定位、追踪检查、查看嵌套，修改样式和查看脚本动态输出信息，是调试页面的好工具。
如上图3-3中，我们可以跟踪到“第二个段落”与“第八个段落”时，同时有两个样式（偶数行，3n+0）生效。
但3n+0样式是最后加载的，会覆盖偶数行样式的效果，所以显示为绿色。
同样，在“第五个段落”，同时有两个样式（奇数行，3n+0）生效。
但3n+0样式是后来生效，会覆盖前奇数行样式的蓝色效果，所以显示为绿色。
特别要注意理解：匹配属于其父元素的第N个子元素，例如“这是标题”是属于父元素的第1个元素，在DOM元素的索引中：索引起始值是0；因此“第一个段落”是第二个元素，索引值为1，所以是奇数行。
1.3广告页面制作CSS框模型(Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距。
内边距呈现了元素的背景。
内边距的边缘是边框。
边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
背景通常应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。
在CSS中，width和height指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。
例如我们打开的主页，用查看元素的方式查看google搜索框的布局方式，如下图3-4所示，其中element 为元素；padding是内边距，也称填充；border为边框；而margin是外边距，也可称为空白或空白边。
1.边框样式基础使用border-style:solid设置一个边框，定义边框宽度使用border- width属性即可，可以指定长度值，比如2px或0.1em；或者使用3个关键字之一，它们分别是thin、也可以指定4个边的宽度，按照top-right-bottom-left（上右下左）的顺序设置元素的各同理设置边框颜色使用border-color属性，它一次可以接受最多4个颜色值。
可以如果颜色值小于4个，颜色值复制功能就会起作用，将相对边框设置相同颜色。
例如个div元素中的边框为100像素宽高，颜色为绿色，边框宽度为10像素，圆角为4像素；第二个div元素的边框为20像素宽高，对齐向上30像素距离和向左30像素距离，边框宽图错误！文档中没有指定样式的文字。
-4圆角矩形图错误！文档中没有指定样式的文字。
-5阴影矩形通常在边框添加阴影会取得更好的效果，我们使用CSS3的阴影特性border-shadow，设置4个值：水平阴影、垂直阴影、模糊距离，以及阴影的颜色。
CSS3中，边框border的属性除了上述之外，还有边框图片属性，通过CSS3的border-image 属性，还可以使用图片来创建边框。
使用方法：border-image:url(图片地址) 边框宽度边框高度图片参数;要注意，因为当前不同浏览器对CSS3支持不同，我们在border-image属性前加上-webkit-来支持Chrome和Safari浏览器，加上-o-来支持Opera浏览器，加上-moz-来支持FireFox浏览器。
图片参数则有round（铺满）、stretch（拉伸）和repeat（平铺）。
2. 广告页面中的边框我们设计一个广告页面，需要考虑它的页面大小，使用边框对广告内容的页面大小进在页面中使用两个<div>元素，id分别为up和down。
制作上下两个边框，上边框显示广告内容，下边框显示文字或按钮。
除了设置两个元素的大小、颜色等样式外，我们还要考虑它们的位置，这时我们就要设置外边距的样式属性了。
3.设置外边距CSS margin 属性用于设置外边距（即元素间的距离），margin属性接受任何长度单位，可以是像素、英寸、毫米或em。
下面的例子为设置所有元素的四个边的外边距，所使还可以通过margin-top/margin-right/margin-bottom/margin-left来单独设置每个边的外边百分数是相对于父元素的width计算的。
上述p元素设置的外边距是其父元素的width 的10%。
4.外边距合并外边距合并（叠加）是个非常有用的东西，如上述我们设置的两个div元素样式，需要将他们按上下顺序排布，而外边距合并将这个设置过程简化了。
所谓外边距合并，就是当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
如图3-3所示。
合并前合并后图错误！文档中没有指定样式的文字。
-6外边距合并最后，我们为广告页面加上阴影效果，广告页面的雏形就制作完成了，示例代码如运行效果如图3-8所示：图错误！文档中没有指定样式的文字。
