第14章 DIV+CSS结合.pptVIP

第14章 DIV+CSS结合 本章学习DIV+CSS布局方法，DIV只不过是个层而已，并不会给网页添加什么。CSS是Cascading Style Sheet的缩写，控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。DIV通过与CSS的结合，使CSS能够控制DIV的外观、大小等。在网页中通过外接方式，链接CSS文件，也可以通过内接方式写CSS文件，还可以在div中加入style方式结合样式文件。 学习本章，将会了解以下内容： 用CSS控制DIV CSS文件链接 内联样式 内部样式表示 链接外部样式 DIV+CSS实例 14.1 用CSS控制DIV HTML中的div/div标签对是放在body/body中的标签对，每个div/div标签对代表一个层，div里面有很多属性，有ID、CLASS、 ALIGN和STYLE等，对层进一步描述，这几个属性都比较常用。 用CSS来控制DIV，即用样式表来控制DIV，在前面章节提到过，最基本的是在div标签里用STYLE表示，用来描述里面的样式，语法形式如下： div style=#/div “#”代表样式的内容，每个样式都以名值对（一个属性名称对应一个值，在CSS代码中都是这种形式）出现，中间用冒号间隔开来，如下面代码： div style=”width:760px;height:200px;”这表示一个层/div 上面代码中表示一个层，层中被样式表控制着，样式表内容是宽度为760像素（px），高度为200像素，其中宽度和高度都是名称，数值表示数据再加单位，分号代表名值对结束，所以一个名值对表示样式表的一个动作或效果，代码14.1表示了设置一个层的边框、背景颜色和高度。 14.2 CSS文件链接 CSS文件的存在使网页节省很多空间，如14.1节中的代码，每个div都由一个style控制，那么有很多层的话，就要写很多的样式内容了，这不是现实的。所以有两种方式可以把CSS文件专写在一起，CSS的外链接和内链接。 CSS文本的链接方式有三种，分别为内联定义、链入内部CSS和链接外部CSS，下面对三种不同的链接形式进行讲解。 14.2.1 内联定义 内联定义即是在对象的标记内，使用对象的style属性定义适用其的样式表属性。用这种方式主要是对特定的层或标记设置样式，如设置一个层的边框，即只代表这个层的样式，对其他层或标记无效。 内联定义的使用有一个好处就是可以灵活地设置对象的样式，缺点是样式扩展性差，即不能让其他的对象享用它的样式，虽然其他的样式链接可以取代内联定义，但内联定义还是对某些方面是有用的，如下面代码14.2所示。 14.2.2 链入内部CSS 链入内部CSS样式比内联样式的修饰的范围要大许多，与内联样式范围在本对象不一样的是，链入内部样式所在的范围在整个网页中，这个形式在有的大型网站采用比较多，加载整个网页更快。 CSS内链接是由style/style标签对放在head/head中的，在style中有一个类型属性tyle，后面接text/css，表示CSS文本，完整语法如下： style type=”text/css” /*这里写CSS内容*/ /style 在head/head中放入style/style文件中本网页的样式，如果使每张网页的层都由各网页中的style/style修饰。 14.2.3 链接外部CSS CSS外链接是把CSS文件放在网页外面，通过链接使CSS文件对本网页的样式有效，这样的链接称为外链接。 由link开始，里面的属性有type和rel，其中type和上一节学的一样，设置type为text/css，表示CSS文本，rel是样式，即stylesheet，最重要的是地址了，地址用src表示，下面是一个完整外链接，假如CSS文件和页面是同一目录。 link type=”text/css” rel=”stylesheet” src=’style.css” 通过标记link即可把外面的样式文本链接到网页，这也是绝大多数网站所采用的方法，这样更有效率，只完成一张样式表，即可控制所有的页面效果。当然，当修改样式表的同时，链接了该样式表的所有网页都会受到影响。这样对整个项目效率会提高，也是为什么网站都采用这个样式的原因。 14.3 DIV+CSS布局实例 接下来开始要讲真正的设计布局了，和一般的方法一样，首先要在脑海中有大致的轮廓构想，可能看到有关Web标准的站点大都很朴素，因为Web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就靠发挥想象力了。 注意：在实际应用过程中，DIV在有些地方的确不如表格方便，比如