网页布局之Div+Css.ppt

*;主讲人：殷立峰;本章主要内容： 概要介绍CSS的概念和使用方法 介绍CSS的基本语法 CSS样书主要属性的设置 介绍CSS的框模型的基本结构 介绍使用DIV+CSS开发网页界面的方法 ;4.1 CSS 基础;4.1.1 CSS的创建与使用;1.外部样式表;浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子： 不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。 ;*;2.内部样式表;3.内联样式;4.多重样式;而内部样式表拥有针对 h3 选择器的两个属性： 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是： 即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。 ;4.1.2 CSS 语法;下面这行代码的作用是将 h1元素内的文字颜色定义为红色，同时将字体大小设置为 14个像素。 在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。 下面的示意图为您展示了上面这段代码的结构： ;如果要定义不止一个声明，则需要用分号将每个声明分开。应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：;2.选择器的分组;4.1.3派生选择器;*;在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。 再看看下面的 CSS 规则： ;下面是它施加影响的 HTML：;4.1.4 id 选择器;下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。;2.id 选择器和派生选择器 在现代布局中，id 选择器常常用于建立派生选择器。 ;;;;4.1.5 CSS 类选择器;;4.1.6 CSS 属性选择器;1.属性选择器。;2.属性和值选择器。;3.属性和值选择器 - 多个值;4.设置表单的样式;下面的表格是CSS 属性选择器的相关描述：;4.2 CSS 样式;4.2.1 CSS背景;1.背景色;2．背景图像;大多数背景???应用到 body 元素，不过并不仅限于此。下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景： 您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像： 理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。 ;3.背景重复;4.背景定位;为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。 关键字。图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对象垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。 ;所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：;百分数值。百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：;;因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：;;长度值。长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。 比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上： ;5.背景关联;;6.CSS 背景属性;4.2.2 CSS 文本;1.缩进文本;一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。 使用负值。text-indent 还可以设置为负值。利用这种技术，可以实现很多