CSS样式表在HTML文档中的应用.doc

1.1.1 CSS样式表在HTML文档中的应用利用CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。这就避免了象表格嵌套那样将整个页面圈在一个大表格里，使得页面体积变小，浏览速度变快。1.1.2 如何插入样式表当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种：l 外部样式表顾名思义，外部样式表是指储存在html文档之外的独立CSS文件中的样式表。当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用元素链接到样式表。 元素在（文档的）头部中：浏览器会从文件mystyle.css中读到样式声明，并根据它美化HTML文档。外部样式表可以在任何文本编辑器中进行编辑，但该文件中不能包含任何的html元素。样式表应该以.css 扩展名进行保存。下面是一个样式表文件的例子：hr color: sienna;p margin-left: 20px;body background-image: url(images/back40.gif);不要在属性值与单位之间留有空格。例如使用“margin-left: 20 px” 而不是“margin-left: 20px”，它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。l 内部样式表对于小范围应用的样式，为了精简外部样式表的规模，常常在该html文档中直接定义样式表，故命名为内部样式表。此时可以使用style 元素在HTML文档头部 中定义内部样式表，如下所示： hr color: sienna; p margin-left: 20px; body background-image: url(images/back40.gif);l 内联样式由于要将样式和内容混杂在一起，内联样式会损失掉样式表的许多优势，请慎用这种方法。例如仅当样式需要在某个元素上应用一次时采用内联样式。要使用内联样式，你需要在相关的元素内使用样式（style）属性。Style属性可以包含任何CSS属性。如下代码改变段落的颜色和左外边距：This is a paragraph1.1.3 了解DOM文档对象模型DOM（Document Object Model）以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。是对Web文档进行应用开发、编程的应用程序接口（API）。作为W3C公布的一种跨平台、与语言无关的接口规范，DOM提供了在不同环境和应用中的标准程序接口，可以用任何语言实现。作为表示和处理一个HTML或XML文档的常用方法，通过对DOM操作可以重构整个HTML文档，包括添加、移除、改变或重排页面上的项目。根据 DOM，HTML文档中的每个成分都是一个节点。DOM 是这样规定的：1) 整个文档是一个文档节点2) 每个HTML标签是一个元素节点3) 包含在HTML元素中的文本是文本节点4) 每一个HTML属性是一个属性节点5) 注释属于注释节点 什么是DOM DOM中一切都是节点Document：文档，是个平面文件Object：将平面文件抽象为可处理的对象Model：模型，从文档到对象的建模过程上述HTML中：节点无父节点；它是根节点（想想家谱中祖先的位置）。和的父节点是节点，文本节点 Document：文档，是个平面文件的父节点是节点。并且节点拥有两个子节点：和；节点拥有一个子节点： 节点。节点也拥有一个子节点：文本节点 DOM中一切都是节点。和节点是同胞节点，同时也是的子节点此外元素是元素的首个子节点；元素是元素的最后一个子节点；元素是元素的首个子节点；元素是元素的最后一个子节点。1.1.4 选择器的使用CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点，作用是使样式表作用与指定的元素。CSS中有多种选择器，这里介绍两个常用选择器：id选择器和类选择器。l id 选择器id 选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以“#” 来定义。下面的两个id选择器，第一个定义元素的颜色为黑色，第二个定义元素的颜色为蓝色：#black color:black;#blue color:blue;下面的HTML代码中，id属性为black的p元素显示为黑色，而id属性为blue的p元素显示为蓝色。这个文字是黑色。这个文字是蓝色。l 类选择器在CSS中，类选择器以一个点号“.”定义：.center text-align: center;.，即可以让所有拥有center 类的HTML元素均为居中。在下面的HTML代码中，h1和p元素都有center类。这意味着两者都将遵守.center选择器中的规则。 什么是DOM #black color:black;#blue color:blue;.center text-align: center;border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd;width:350px; border-radius:25px;DOM中一切都是节点Document：文档，是个平面文件Object：将平面文件抽象为可处理的对象Model：模型，从文档到对象的建模过程显示效果如下图3-2所示。图Error! No text of specified style in document.1使文字出现圆角边框并居中1.2 nth-child()选择器有时我们希望颜色或者格式能够按一定的规律变化，如奇偶行颜色不同，或每隔5行换一种格式，类选择器允许以一种独立于文档元素的方式来指定样式。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。CSS3中提供了强大的伪类（pseudo-class）选择器，使开发者能选择某一对象中符合特定条件的元素进行渲染。如这时规定属于其父元素的第二个子元素的每个p的背景色：p:nth-child(2)background:#ff0000;定义：nth-child(n) 选择器匹配属于其父元素的第N个子元素，不论元素的类型。n可以是数字、关键词或公式。例如，利用Odd 和even匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是1）。在这里，我们为奇数和偶数p元素指定两种不同的背景色：p:nth-child(odd)background:#ff0000;p:nth-child(even)background:#0000ff;又如，可以用公式(an+b)周期性地控制元素背景色，a表示周期的长度，n是计数器（从0开始），b是偏移值。假设现在要求指定下标是3的倍数的所有p元素的背景色：p:nth-child(3n+0)background:#ff0000;那么如果我们将它们组合一下会如何呢?为容易区分效果我们选择三种颜色，FF0000:红色 00FF00:绿色 0000FF:蓝色，以奇数行、偶数行、每三行的条件进行格式调整。 p:nth-child(odd) background:#ff0000; p:nth-child(even) background:#0000ff; p:nth-child(3n+0) background:#00ff00; 这是标题第一个段落。 第二个段落。 第三个段落。第四个段落。 第五个段落。 第六个段落。第七个段落。 第八个段落。 第九个段落。为更好的理解显示效果，我们使用审查元素的方法：将鼠标移动到chrome网页上的任何一个位置，右键菜单里都有“审查元素”入口，鼠标在链接上审查的就是这个超链接标签；鼠标在图像上审查的就是图片标签；鼠标在文字上，那么审查的就是包含这些文字的网页标签，如图3-3右侧所示。 图Error! No text of specified style in document.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是外边距，也可称为空白或空白边。图Error! No text of specified style in document.3 边框示例1.3.1 改变边框样式1.边框样式基础使用border-style:solid设置一个边框，定义边框宽度使用border- width属性即可，可以指定长度值，比如2px或0.1em；或者使用3个关键字之一，它们分别是thin、medium（默认值）和thick，所以，我们可以这样设置边框的宽度：p border-style: solid; border-width: 5px;或者：p border-style: solid; border-width: thick;也可以指定4个边的宽度，按照top-right-bottom-left（上右下左）的顺序设置元素的各边边框：p border-style: solid; border-width: 15px 5px 15px 5px;同理设置边框颜色使用border-color属性，它一次可以接受最多4个颜色值。可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和RGB值：p border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; 如果颜色值小于4个，颜色值复制功能就会起作用，将相对边框设置相同颜色。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：p border-style: solid; border-color: blue red; CSS3中新增了边框圆角border-radius，我们可以利用此方法让边框变为圆角矩形的样子。这里我们使用两个div元素镶嵌，用CSS样式生成一个嵌套的圆角矩形：设置第一个div元素中的边框为100像素宽高，颜色为绿色，边框宽度为10像素，圆角为4像素；第二个div元素的边框为20像素宽高，对齐向上30像素距离和向左30像素距离，边框宽度为10像素，圆角为4像素，代码如下所示：#Expwidth:100px;height:100px;border-style:solid;border-color:green;border-width:10px;border-radius: 4px;#Exp2width:20px;height:20px;margin-left:30px;margin-top:30px;border-style:solid;border-color:indigo;border-width:10px;border-radius: 4px;运行效果如图3-5所示：图Error! No text of specified style in document.4圆角矩形 图Error! No text of specified style in document.5阴影矩形通常在边框添加阴影会取得更好的效果，我们使用CSS3的阴影特性border-shadow，设置4个值：水平阴影、垂直阴影、模糊距离，以及阴影的颜色。在上述边框样式中插入如下代码，运行效果如图3-6所示。box-shadow: 10px 10px 5px #888888;CSS3中，边框border的属性除了上述之外，还有边框图片属性，通过CSS3的 border-image 属性，还可以使用图片来创建边框。使用方法：border-image:url(图片地址) 边框宽度 边框高度 图片参数;要注意，因为当前不同浏览器对CSS3支持不同，我们在border-image属性前加上-webkit-来支持Chrome和Safari浏览器，加上-o-来支持Opera浏览器，加上-moz-来支持FireFox浏览器。图片参数则有round（铺满）、stretch（拉伸）和repeat（平铺）。如下所示使用图片创建围绕div元素的图片，示例代码如下:divborder-image:url(图片地址) 30 30 round;-moz-border-image:url(图片地址) 30 30 round; /* 老的 Firefox */-webkit-border-image:url(图片地址) 30 30 round; /* Safari 和 Chrome */-o-border-image:url(图片地址) 30 30 round; /* Opera */2. 广告页面中的边框我们设计一个广告页面，需要考虑它的页面大小，使用边框对广告内容的页面大小进行限制。我们设置两个边框，大小和背景颜色分别为如下代码所示：#up width:100px; height:150px; background-color:#367fa1;#down width:100px; height:25px; background-color:#e7986e;在页面中使用两个元素，id分别为up和down。制作上下两个边框，上边框显示广告内容，下边框显示文字或按钮。除了设置两个元素的大小、颜色等样式外，我们还要考虑它们的位置，这时我们就要设置外边距的样式属性了。3.设置外边距CSS margin 属性用于设置外边距（即元素间的距离），margin属性接受任何长度单位，可以是像素、英寸、毫米或em。下面的例子为设置所有元素的四个边的外边距，所使用的长度单位是像素 (px)：*margin : 0px 0px 0px 0px;与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：margin: top（上） right（右） bottom（下） left（左）还可以通过margin-top/margin-right/margin-bottom/margin-left来单独设置每个边的外边距。另外，还可以为 margin 设置一个百分比数值：p margin : 10%;百分数是相对于父元素的width计算的。上述p元素设置的外边距是其父元素的width 的10%。4.外边距合并外边距合并（叠加）是个非常有用的东西，如上述我们设置的两个div元素样式，需要将他们按上下顺序排布，而外边距合并将这个设置过程简化了。所谓外边距合并，就是当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如图3-3所示。合并前合并后图Error! No text of specified style in document.6外边距合并最后，我们为广告页面加上阴影效果，广告页面的雏形就制作完成了，示例代码如下：* margin:0; padding:0; border:0;#up width:100px; height:150px; background-color:#367fa1; margin:0px 0px; box-shadow:3px 3px 0px #888888;#down width:100px; height:25px; background-color:#e7986e; margin:0px 0px; box-shadow:3px 3px 2px #888888;运行效果如图3-8所示：图Error! No text of specified style in document.7广告雏形1.3.2 按钮图片样式特效1. 按钮制作制作一个广告关闭按钮，使用到HTML5中按钮元素的按钮类型，创建带有图片的按钮，用到CSS3中的背景属性。插入背景图片，使用到如下代码：background:url(图片地址);设置背景图片大小使用background-size，设置为占满：background-size:100% 100%;设置图片是否重复，是则为repeat，否则为no-repeat，使用background-repeat属性：background-repeat:no-repeat;background-origin属性可以设置图片的位置，背景图片可以放置于content-box（最外层部分开始的范围）、padding-box（中间部分开始的范围）或border-box（里面部分的范围）区域：-webkit-background-origin:content-box; /* Safari/Chrome浏览器*/background-origin:border-box;制作一个按钮图片样式，使用到对按钮两种状态下的不同的样式：未被按下时的样式和按下时（active）的样式。CSS可以对同一个元素不同状态赋予不同样式，使用active可以设置按钮按下时更换样式（更换按钮的图片），我们准备好如图3-9所示的两张图片（按下之前与按下之后将显示的图片）。图Error! No text of specified style in document.8素材同样的，放置一个id为close的按钮，然后在CSS中设置宽高（按钮按下前后仅更改图片）、阴影及圆角，使用上述图片素材，关键代码如下：#closewidth:32px;height:32px;background:url(Graphics/accept.png);background-size:100% 100%;background-repeat:no-repeat;-webkit-background-origin:content-box; /* Safari/Chrome浏览器*/background-origin:border-box;border-radius: 16px;box-shadow: 3px 3px 2px #888888;#close:activewidth:32px;height:32px;background:url(Graphics/reject.png);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin:content-box; /* Safari */background-origin:border-box;border-radius: 16px;box-shadow: 3px 3px 2px #888888;运行效果如图3-10所示。单击前 单击后图Error! No text of specified style in document.9按钮图片样式2. 广告页面中的按钮制作好按钮后，我们需要在广告页面中插入按钮，使用margin属性调整按钮的位置，关键代码如下所示：* margin:0; padding:0; border:0;#up width: