1.1.1 CSS样式表在HTML文档中的应用
利用CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。这就避免了象表格嵌套那样将整个页面圈在一个大表格里，使得页面体积变小，浏览速度变快。
1.1.2 如何插入样式表
当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种：
● 外部样式表
顾名思义，外部样式表是指储存在html文档之外的独立CSS文件中的样式表。当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>元素链接到样式表。<link> 元素在（文档的）头部<head></head>中：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> |
浏览器会从文件mystyle.css中读到样式声明，并根据它美化HTML文档。外部样式表可以在任何文本编辑器中进行编辑，但该文件中不能包含任何的html元素。样式表应该以.css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} |
| 网页设计html代码大全颜 |
不要在属性值与单位之间留有空格。例如使用“margin-left: 20 px” 而不是“margin-left: 20px”，它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。
● 内部样式表
对于小范围应用的样式，为了精简外部样式表的规模，常常在该html文档中直接定义样式表，故命名为内部样式表。此时可以使用<style 元素在HTML文档头部<head> </head>中定义内部样式表，如下所示：
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> |
● 内联样式
由于要将样式和内容混杂在一起，内联样式会损失掉样式表的许多优势，请慎用这种方法。例如仅当样式需要在某个元素上应用一次时采用内联样式。
要使用内联样式，你需要在相关的元素内使用样式（style）属性。Style属性可以包含任何CSS属性。如下代码改变段落的颜和左外边距：
<p > This is a paragraph </p> |
1.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) 注释属于注释节点
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>什么是DOM </title> </head> <body> <h1>DOM中一切都是节点</h1> <p>Document：文档，是个平面文件</p> <p>Object：将平面文件抽象为可处理的对象</p> <p>Model：模型，从文档到对象的建模过程</p> </body> </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选择器以“#” 来定义。下面的两个id选择器，第一个定义元素的颜为黑，第二个定义元素的颜为蓝：
<style> #black {color:black;} #blue {color:blue;} </style> |
下面的HTML代码中，id属性为black的p元素显示为黑，而id属性为blue的p元素显示为蓝。
<p id=" black ">这个文字是黑。</p> <p id=" blue ">这个文字是蓝。</p> |
● 类选择器
在CSS中，类选择器以一个点号“.”定义：.center {text-align: center;......}，即可以让所有拥
有center 类的HTML元素均为居中。在下面的HTML代码中，h1和p元素都有center类。这意味着两者都将遵守".center"选择器中的规则。
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>什么是DOM </title> <style> #black {color:black;} #blue {color:blue;} .center {text-align: center;border:2px solid #a1a1a1; <!-- border-radius 属性用于创建圆角--> padding:10px 40px; background:#dddddd;width:350px; border-radius:25px;}</style> </head> <body> <h1 class="center">DOM中一切都是节点</h1> <p id="black">Document：文档，是个平面文件</p> <p class="center">Object：将平面文件抽象为可处理的对象</p> <p id="blue">Model：模型，从文档到对象的建模过程</p> </body> </html> |
显示效果如下图3-2所示。
图32使文字出现圆角边框并居中
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; } |
又如，可以用公式(a×n+b)周期性地控制元素背景，a表示周期的长度，n是计数器（从0开始），b是偏移值。假设现在要求指定下标是3的倍数的所有p元素的背景：
p:nth-child(3n+0) { background:#ff0000; } |
那么如果我们将它们组合一下会如何呢?为容易区分效果我们选择三种颜，FF0000:红 00FF00:绿 0000FF:蓝，以奇数行、偶数行、每三行的条件进行格式调整。
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <style> p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; } p:nth-child(3n+0) { background:#00ff00; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p>第五个段落。</p> <p>第六个段落。</p> <p>第七个段落。</p> <p>第八个段落。</p> <p>第九个段落。</p> </body> </html> |
为更好的理解显示效果，我们使用审查元素的方法：将鼠标移动到chrome网页上的任何一个位置，右键菜单里都有“审查元素”入口，鼠标在链接上审查的就是这个超链接标签；鼠标在图像上审查的就是图片标签；鼠标在文字上，那么审查的就是包含这些文字的网页标签，如图3-3右侧所示。
图33用审查元素跟踪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指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。例如我们打开le的主页，用查看元素的方式查看google搜索框的布局方式，如下图3-4所示，其中element为元素；padding是内边距，也称填充；border为边框；而margin是外边距，也可称为空白或空白边。
图34 边框示例 |
1.3.1 改变边框样式
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论