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所示：图错误！文档中没有指定样式的文字。