第三章css与div.ppt

1、ASP.NET基础教程 段克奇主编 清华大学出版社 2009年10月第1版 ISBN 978-7-302-20246-2 定价：49.8元,参考书,Web开发技术及其应用 王成良编著 清华大学出版社 2007年12月第1版 ISBN 978-7-302-16229-2 定价：39.5元,ASP.NET2.0完全开发指南基于VB 王有礼 编著 科学出版社 2008年1月第1版 ISBN 978-7-03-020310-6 定价：79元,参考书,第3章 DIV + CSS布局基础,3.1 CSS的基本语法,CSS（Cascading Style Sheet）的中文译名是层叠样式表。CSS用于控制网

2、页元素的外观，CSS提供了丰富的样式表现功能，如字体、段落、颜色、背景、布局等。使用DIV+CSS的布局方式改变了传统html+table的布局方式。,DIV+CSS的布局方法简单来说就是使用div标签作为容器，使用CSS技术来排布div标签的布局方法。,CSS语法中最基本的语法是选择器的概念和选择器的声明。正确使用CSS选择器能为建立标准的XHTML页面带来很多的好处。本章还将讲述CSS的继承和层叠，理解和掌握这些概念是使用CSS样式表的重要基础。,1 选择器,选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型，包括标签选择器、

3、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类等。,（1）标签选择器,一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。下图为标签选择器的结构。,（2）类选择器,使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中，XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。下图为类选择器的结构。,（3）ID选择器,ID选择器和类选择器相似，不同的是，ID选择器不能复用。在一个XHTML文档中，一个ID选择器只能把其CSS样式指定给

4、一个标签。下图为ID选择器的结构。,（4）全局选择器,全局选择器是一个星号。它能作用于XHTML文档中的所有元素，即用全局选择器声明的CSS 样式可以应用于整个XHTML文档的任何标签。下图为全局选择器的结构。,（5）组合选择器,标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。由于这两种组合方式的原理和效果一样，所以只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际中经常使用。,（6）继承选择器,学习使用继承选择器就必须先了解文档树和CSS的继承。每个XHTML都可以被看作

5、一个文档树，文档树的根部就是html标签，而head和body标签就是其子元素。在head和body里的其他标签就是html标签的孙子元素。整个XHTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙元素继承祖先元素的某些属性。 1文档树 2CSS的继承 3继承选择器,（7）伪类,伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的，伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。但是有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:active、vistited和:hover。,2. 声明,声明

6、是构成CSS语句的一部分，声明写在选择器之后。CSS的声明写在一对大括号中，其中包含CSS的属性和值。声明的写法有明确的规则，若不遵守声明的规则，则可能导致CSS样式失效。以下为CSS声明的规则： 声明中属性和值之间用冒号隔开； 声明中可以包含多个属性； 使用多重声明时，每个声明用分号隔开； 声明的大括号必须书写完整。,（1）多重声明,多重声明是指在对同一个选择器设置属性时，可以把所有属性写在同一选择器中，而不需要分开书写。 如： h1color:blue;font-size:24px;font-weight:bold;,（2）集体声明,集体声明是指若样式表中有多个选择器使用相同的属性设置，这

7、些选择器可以并列写在一起。设置好网页中某个元素的CSS样式后，另外一个元素也要应用相同的样式。 如：.one,#two,pcolor:red;,3. CSS的层叠原理,CSS的全称为Cascading Style Sheets，中文翻译为层叠样式表。学习CSS的层叠（cascading）是深入学习CSS原理的基础。当出现多个样式共同作用于某个页面元素时，就需要决定哪一个会被应用。CSS的层叠就是一个决定CSS样式优先级的规则。,（1）CSS样式来源,在之前的实例中，每个XHTML文档的外观都是由CSS样式表控制的。实际上除了网页设计师制作的CSS样式表外，还有其他样式表影响着网页文档的外观。在

8、浏览器上运行的网页文档受以下三个CSS样式表控制外观： 浏览器的默认样式 用户自定义的样式 网页作者制作的样式,（2）选择器的优先级,由于CSS的某些属性有继承性，一个页面元素往往应用了多个选择器定义的CSS样式。CSS的选择器具有优先级，用于决定哪个选择器定义的样式最终被应用到页面元素上。选择器的优先级可以简单由高到低排列如下：,!important 最高 inline style id selector class selector element selector * universal selector,（2）选择器的优先级, p font-size:22px; .name font-

9、size:22px; #idname font-size:30px; 上海理工大学 ,（3）!important语句,CSS2.0中使用重要规则提升声明中某个属性设置的优先级。重要规则就是!important语句。在声明的属性设置中使用了!important语句，其优先级最高。 如：pfont-size:24px !important; pfont-size:30px;,（4）顺序优先级,当出现多个相同的选择器设置相同的属性时，后定义的选择器优先级较高。 如：pfont-size:24px; pfont-size:30px;,通常定义样式有4种方法： 1）、内联定义样式：内联定义样式是混合在H

10、TML标记里使用的样式，即使用标记的Style属性定义的适用于该标记的样式，例如： 样式实例 就是定义表格的单元格背景为绿色，单元格字体大小为12px，行距为20px。,4. 定义样式,2）、定义内部样式块对象：定义内部样式快就是针对页面中某些公共元素的样式比较类似，如果使用内联定义方法逐个元素地定义比较繁琐，而且维护麻烦，此时就可以在网页的和标记之间插入一个块对象来统一定义，页面运行时会自动引用。例如： body color:#333333;background-mage:url(“image/bg.gif”) ,3）、导入外部样式表：导入外部样式表是指在HTML文件头部的标记之间，利用CS

11、S的import声明引入外部样式表。例如： h2 color:green 注意：导入外部样式表必须在样式表的开始部分，即在其他内部样式表上面。,4）、链入外部样式表：链入外部样式表是指在HTML文件的头信息标记之间，利用标记连接到外部样式表文件。例如： 一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑。,2、样式的优先级 依照后定义的优先原则，所以优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。,4.

12、实例：简单的竖型菜单,本实例讲解如何制作一个简单的竖型菜单。本例子中的菜单选项在静态时是褐色，当鼠标滑过菜单选项时文字会放大变色，并且显示灰色底色。本章实例主要是为了讲解如何合理地使用选择器。,3.2 DIV+CSS布局基础,在对CSS技术的基础知识有了一定的掌握后就可以开始学习DIV+CSS的布局的方法。DIV+CSS的布局方法简单来说就是使用div标签作为容器，使用CSS技术来排布div标签的布局方法。常用的CSS布局方式有浮动、定位等。本节内容包括： 了解DIV+CSS布局的流程 学习盒模型以及盒模型的基本元素 学习页面元素的布局方式,1.DIV+CSS布局的流程,使用DIV+CSS的布

13、局方法制作标准的XHTML页面的一般流程如下：,首先确定网页的布局结构。 根据结构，设定好XHTML文档中用于排版的div 标签。 使用css样式排布div标签。 重复上述步骤细分div标签内的内容。,2.了解盒模型,盒模型是DIV+CSS布局的基础，要实现DIV+CSS布局必须了解盒模型的原理。在页面上的每个元素都能看做一个容器，这个容器就是一个盒子。例如，p标签是一个能装文字的容器，它的高度就是所承载文字的高度。使用DIV+CSS布局，div标签就是布局中所用到的容器。大部分人认为只有div标签能作为容器来安排布局。其实在XHTML页面中几乎所用的标签都是容器，都能被当作容器来使用。页面上

14、的每个容器都占有一定的位置，有一定的大小。页面上的每个容器都会影响其他容器的排布，它们相互作用，从而形成一个页面的布局。,（1）div标签的盒模型例子,以下以div标签的盒模型为例子，讲述基本盒模型的基本概念。 divwidth:200px;height:200px;background:#ccc;padding:10px;border:10px solid red;margin:10px;,（2）基本盒模型,下图所示为基本盒模型。在页面中的所有元素都遵循该模型的设置方式。,（3）边距,边距用于设置页面元素与其他元素的距离。CSS的margin属性用于设置边距距离。 1用长度单位设定margi

15、n的值，如：margin:20px; 2用百分比设定margin的值，如：margin:10%; 3边距值的缩写 4单边距值 5边距重叠,（4）补白,补白用于增加页面元素边框与内容之间的空间。CSS的padding属性用于设置补白。 1用长度单位设定padding的值 2用百分比设定padding的值,（5）边框,边框是页面元素可视范围的最外圈。边框包围的范围包括页面元素的补白和内容。CSS中提供了border-width、border-color、border-style三个设置边框的属性： 1边框样式 2边框宽度 3边框颜色 4边框缩写,3. 页面元素的布局,在了解基本盒模型后，就要开始进

16、入页面元素布局的学习。页面元素布局的核心是定位和浮动的基本原理以及块级元素与行内元素的区别。掌握了这些内容就能对DIV+CSS布局的原理有相当清晰的理解。,(1) 块级元素与行内元素,所有的XHTML页面元素只有两种，一是块级元素一是行内元素。块级元素一般都从新行开始，它可以容纳行内元素和块级元素。行内元素只能容纳文本或其他行内元素。 使用CSS的display属性（的block和inline值）能使行内元素和块级元素相互转换。,p background:#ccc;display:inline; 第一行文段 第二行文段 ,(2) CSS布局方式：常规流,CSS有三种基本的布局方式，分别是常规流

17、、浮动和定位。所谓常规流（normal flow）是指页面元素按照所在XHTML文档的位置顺序排列的布局方式。在没有添加其他布局方式的情况下，页面遵循常规流的布局方式。,(3) CSS布局方式：浮动,使用浮动布局是目前网页制作中较为常用的方式。应用了浮动的元素脱离原来的常规流模式。浮动的元素可以向页面的左边或者右边移动，直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框。 CSS提供float属性用于设置元素的浮动，它包含三个值，分别是left、right和none。设置浮动为left值，元素向页面左边浮动；设置浮动为right，元素向页面右边浮动；设置浮动为none，元素不浮动。, 两

18、个元素的浮动应用,在页面布局中，很多时候会使用两个元素的浮动应用。例如，页面为两分栏的结构、图文混排都应用了两个元素的浮动。, 多个元素的浮动应用,在页面布局中，多个元素的浮动常用于相册排版、列表排版等。本例子有四个div标签，其中最外侧的div标签是父元素，其余三个元素是子元素。, 清除浮动,使用浮动后，常产生很多意外的结果，因为浮动的元素会脱离原来的常规流。浮动元素可能会覆盖一些非浮动的元素，这时需要使用CSS的clear属性来清除浮动。clear属性有四个值，分别是none、left、right和both，以下是四个值的意义。 none：允许两边都可以有浮动对象； both：不允许有浮动

19、对象； left：不允许左边有浮动对象； right：不允许右边有浮动对象。,（4）CSS布局方式：相对定位,除了使用浮动布局外，常用的布局方式还有定位。CSS提供position属性用于定位。使用position定位可以定义元素相对其父元素或者其他元素的精确位置。Position属性共有四个关键字值，分别是static、absolute、relative和fixed。 其中static为默认值，表示无定位，即块保持在原来的位置上，通常不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。 absolute代表绝对定位，relative代表相对定位，这两种定位方式是最常用的。