CSS样式表在HTML文档中的应用.docx
《CSS样式表在HTML文档中的应用.docx》由会员分享，可在线阅读，更多相关《CSS样式表在HTML文档中的应用.docx（23页珍藏版）》请在冰豆网上搜索。
CSS样式表在HTML文档中的应用
1.1.1CSS样式表在HTML文档中的应用
利用CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。
这就避免了象表格嵌套那样将整个页面圈在一个大表格里，使得页面体积变小，浏览速度变快。
1.1.2如何插入样式表
当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档。
插入样式表的方法有三种：
●外部样式表
顾名思义，外部样式表是指储存在html文档之外的独立CSS文件中的样式表。
当样式需要应用于很多页面时，外部样式表将是理想的选择。
在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
每个页面使用元素链接到样式表。
元素在（文档的）头部
中：
浏览器会从文件mystyle.css中读到样式声明，并根据它美化HTML文档。
外部样式表可以在任何文本编辑器中进行编辑，但该文件中不能包含任何的html元素。
样式表应该以.css扩展名进行保存。
下面是一个样式表文件的例子：
hr{color:
sienna;}
p{margin-left:
20px;}
body{background-image:
url（"images/back40.gif"）;}
不要在属性值与单位之间留有空格。
例如使用“margin-left:
20px”而不是“margin-left:
20px”，它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。
●内部样式表
对于小范围应用的样式，为了精简外部样式表的规模，常常在该html文档中直接定义样式表，故命名为内部样式表。
此时可以使用中定义内部样式表，如下所示：
hr{color:
sienna;}
p{margin-left:
20px;}
body{background-image:
url（"images/back40.gif"）;}
●内联样式
由于要将样式和内容混杂在一起，内联样式会损失掉样式表的许多优势，请慎用这种方法。
例如仅当样式需要在某个元素上应用一次时采用内联样式。
要使用内联样式，你需要在相关的元素内使用样式（style）属性。
Style属性可以包含任何CSS属性。
如下代码改变段落的颜色和左外边距：
sienna;margin-left:
20px">
Thisisaparagraph
1.1.3了解DOM
文档对象模型DOM（DocumentObjectModel）以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
是对Web文档进行应用开发、编程的应用程序接口（API）。
作为W3C公布的一种跨平台、与语言无关的接口规范，DOM提供了在不同环境和应用中的标准程序接口，可以用任何语言实现。
作为表示和处理一个HTML或XML文档的常用方法，通过对DOM操作可以重构整个HTML文档，包括添加、移除、改变或重排页面上的项目。
根据DOM，HTML文档中的每个成分都是一个节点。
DOM是这样规定的：
1）整个文档是一个文档节点
2）每个HTML标签是一个元素节点
3）包含在HTML元素中的文本是文本节点
4）每一个HTML属性是一个属性节点
5）注释属于注释节点
DOCTYPEhtml>
什么是DOMDOM中一切都是节点
Document：
文档，是个平面文件
Object：
将平面文件抽象为可处理的对象
Model：
模型，从文档到对象的建模过程
上述HTML中：
节点无父节点；它是根节点（想想家谱中祖先的位置）。
和的父节点是节点，文本节点"Document：
文档，是个平面文件"的父节点是
节点。
并且节点拥有两个子节点：
和；节点拥有一个子节点：
节点。</p><p><title>节点也拥有一个子节点：</p><p>文本节点"DOM中一切都是节点"。</p><p><h1>和<p>节点是同胞节点，同时也是<body>的子节点</p><p>此外<head>元素是<html>元素的首个子节点；<body>元素是<html>元素的最后一个子节点；<h1>元素是<body>元素的首个子节点；<p>元素是<body>元素的最后一个子节点。</p><p>1.1.4选择器的使用</p><p>CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素就需要我们所说的选择器。</p><p>选择器主要是用来确定html的树形结构中的DOM元素节点，作用是使样式表作用与指定的元素。</p><p>CSS中有多种选择器，这里介绍两个常用选择器：</p><p>id选择器和类选择器。</p><p>●id选择器</p><p>id选择器可以为标有特定id的HTML元素指定特定的样式。</p><p>id选择器以“#”来定义。</p><p>下面的两个id选择器，第一个定义元素的颜色为黑色，第二个定义元素的颜色为蓝色：</p><p><style></p><p>#black{color:</p><p>black;}</p><p>#blue{color:</p><p>blue;}</p><p></style></p><p>下面的HTML代码中，id属性为black的p元素显示为黑色，而id属性为blue的p元素显示为蓝色。</p><p><pid="black">这个文字是黑色。</p></p><p><pid="blue">这个文字是蓝色。</p></p><p>●类选择器</p><p>在CSS中，类选择器以一个点号“.”定义：</p><p>.center{text-align:</p><p>center;......}，即可以让所有拥有center类的HTML元素均为居中。</p><p>在下面的HTML代码中，h1和p元素都有center类。</p><p>这意味着两者都将遵守".center"选择器中的规则。</p><p><!</p><p>DOCTYPEhtml></p><p><metacharset="utf-8"></p><p><html></p><p><head></p><p><title>什么是DOMDOM中一切都是节点
Document：
文档，是个平面文件
Object：
将平面文件抽象为可处理的对象
Model：
模型，从文档到对象的建模过程
显示效果如下图3-2所示。
图32使文字出现圆角边框并居中
1.2nth-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;
}
又如，可以用公式（a×n+b）周期性地控制元素背景色，a表示周期的长度，n是计数器（从0开始），b是偏移值。
假设现在要求指定下标是3的倍数的所有p元素的背景色：
p:
nth-child（3n+0）
{
background:
#ff0000;
}
那么如果我们将它们组合一下会如何呢?
为容易区分效果我们选择三种颜色，FF0000:
红色00FF00:
绿色0000FF:
蓝色，以奇数行、偶数行、每三行的条件进行格式调整。
DOCTYPEhtml>
这是标题
第一个段落。
第二个段落。
第三个段落。
第四个段落。
第五个段落。
第六个段落。
第七个段落。
第八个段落。
第九个段落。
为更好的理解显示效果，我们使用审查元素的方法：
将鼠标移动到chrome网页上的任何一个位置，右键菜单里都有“审查元素”入口，鼠标在链接上审查的就是这个超链接标签；鼠标在图像上审查的就是图片标签；鼠标在文字上，那么审查的就是包含这些文字的网页标签，如图3-3右侧所示。
图33用审查元素跟踪CSS的应用
Chrome将开发者工具作为一个独立的窗口：
审查元素功能窗口（DeveloperTools）里可以做到定位网页元素、实时监控网页元素属性变化的功能，可以及时调试、修改、定位、追踪检查、查看嵌套，修改样式和查看脚本动态输出信息，是调试页面的好工具。
如上图3-3中，我们可以跟踪到“第二个段落”与“第八个段落”时，同时有两个样式（偶数行，3n+0）生效。
但3n+0样式是最后加载的，会覆盖偶数行样式的效果，所以显示为绿色。
同样，在“第五个段落”，同时有两个样式（奇数行，3n+0）生效。
但3n+0样式是后来生效，会覆盖前奇数行样式的蓝色效果，所以显示为绿色。
特别要注意理解：
匹配属于其父元素的第N个子元素，例如“这是标题”是属于父元素的第1个元素，在DOM元素的索引中：
索引起始值是0；因此“第一个段落”是第二个元素，索引值为1，所以是奇数行。
1.3广告页面制作
CSS框模型（BoxModel）规定了元素框处理元素内容、内边距、边框和外边距的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距。
内边距呈现了元素的背景。
内边距的边缘是边框。
边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
背景通常应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。
在CSS中，width和height指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。
例如我们打开的主页，用查看元素的方式查看google搜索框的布局方式，如下图3-4所示，其中element为元素；padding是内边距，也称填充；border为边框；而margin是外边距，也可称为空白或空白边。
图34边框示例
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:
15px5px15px5px;}
同理设置边框颜色使用border-color属性，它一次可以接受最多4个颜色值。
可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和RGB值：
p{
border-style:
solid;
border-color:
bluergb（25%,35%,45%）#909090red;
}
如果颜色值小于4个，颜色值复制功能就会起作用，将相对边框设置相同颜色。
例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：
p{
border-style:
solid;
border-color:
bluered;
}
CSS3中新增了边框圆角border-radius，我们可以利用此方法让边框变为圆角矩形的样子。
这里我们使用两个div元素镶嵌，用CSS样式生成一个嵌套的圆角矩形：
设置第一个div元素中的边框为100像素宽高，颜色为绿色，边框宽度为10像素，圆角为4像素；第二个div元素的边框为20像素宽高，对齐向上30像素距离和向左30像素距离，边框宽度为10像素，圆角为4像素，代码如下所示：