第 5 章 DIV+CSS

第5章DIV+CSS

知识目标 理解CSS盒子模式。熟练掌握Div的创建与设置方法。掌握CSS规则设置方法。

5.1CSS样式表概述为什么用CSS样式 如今网页排版格式越来越来复杂，如果要对多个网页的同样格式一一进行设计，那么就会给制作人员带来很多的工作量，所以解决办法是采用CSS样式来一次性对若干个文档的格式进行控制。

5.1CSS样式表概述什么是CSS样式 CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。

5.1CSS样式表概述什么是CSS样式 CSS样式存于样式表文件中，然后在多个网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。

5.1CSS样式表概述认识CSS面板 显示当前样式显示所有样式内部样式表样式名称样式及属性值

5.2 CSS的分类 外部链接样式表(External linking css):实际上是一个仅包含样式规则的外部文本文件，其后缀名为“CSS”，当编辑此文件时，所有与此样式表链接的文档将全被更新。内嵌式样式表(Embedded CSS)：嵌在HTML代码的<style>标记之间。内联式样式表(Inlink CSS):直接在某一HTML标记后添加样式代码。优先程度：内联式>内嵌式>外部链接

（1）显示“CSS 样式”面板的方式： 打开“窗口”菜单——“CSS”样式（2）样式视图 CSS样式面板

CSS样式在网页中的三种存在方式 外部文件方式：CSS以文件的形式存在，在HTML文档头通过文件引用进行控制。 CSS文件的引用是在<head></head>标签之间写下列语句: <link rel=“stylesheet” href=“文件名.CSS” type=“text/css”>

链接与导入的区别 （1）link属于XHTML标签，而@import完全是CSS提供的一种方式，link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import 就只能加载CSS （2）当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载（3）@import是CSS2.1提出的所以老的浏览器不支持， link不存在这个问题；所以，目前使用link链接.CSS是个不错的选择！！！

不以文件的形式存在,仅作用于本文档,直接定义在不以文件的形式存在,仅作用于本文档,直接定义在 <head></head> 之间. <Style type=“text/css”> <!— P{font-family:“宋体” font-size:9pt;color:blue} H2{font-family: “宋体” ;font-size:13pt;color:red} --> </style> 内嵌样式

直接插入式 只需要在每个HTML标签后书写CSS属性。作用范围只限于本标签。 <table style=“color:red;font-size:10pt”> 在统一站点风格上，用第一方式，在某个网页风格统一上，用第二种方式，而在网页内部某个标签的具体调整上，用第三种方式。

如果是新建CSS文件,有两种方法: 方法一:可以通过菜单”文件/新建/CSS样式” 方法二:通过进入CSS面板,点击右下角的”新建CSS样式” 接下来,我们来看第二种方法创建新的 CSS 样式

创建自定义样式(也就是选择器类型中选择”类”)：名称须以.开头，并且可以包含任何字母和数字组合。例如 .myhead1。如果您没有输入开头的句点，Dreamweaver 将自动为您输入。在”定义在:”的选项中,有两个选择,第一个表示新建CSS文件,这时,你在刚才的”名称:”后面的文本框中输入的就是CSS文件名;如果你选择”仅对该文档”,则是以形如”.myhead1”方式出现在代码中.

重定义HTML标签：重定义特定 HTML 标签的默认格式。对文档中的任何标签都可以应用 CSS 样式 .

acronym从字义上理解，是取首字母的缩写词，abbr是缩写，在应用过程中，两个标签看起来差不多，但还是有区别的。acronym从字义上理解，是取首字母的缩写词，abbr是缩写，在应用过程中，两个标签看起来差不多，但还是有区别的。 <acronym title="css">Cascading Style Sheets</acronym> <abbr title="ps">photoshop</abbr> 上面这两行代码是放在页面中的.然后再设置abbr或acronym标签注意:IE6中可能不支持,IE7支持

更多的HTML标签的信息请浏览附录:html标记大全

选择高级：重新定义一些标签的特定组合格式。共有四种:a:link, a:visited, a:hover,a:active • a:link当文字作为链接时, a:visited当其链接的网页已被浏览时, a:hover表示光标移向链接文字时,a:active当超链接文字被选中时 • 在网页中练习这四种的效果

外部：将以文件的形式存在。 仅对该文档：内嵌式样式。

CSS的属性 字体：font-family 大小：font-size 粗细：font-weight 样式：font-style 行高：line-height 修饰：text-decoration 颜色：color

CSS中的单位和值 16进制颜色如#ffffff， #07dc0f 长度（1）绝对单位：英寸(in)、厘米(cm）、毫米（mm）、磅（pt）、pica=12pt （2）相对单位： em—相对于字体的font-size ex—相对于小写字母x的高度 px— 像素，最常用

定义层叠样式表 类型：定义 CSS 样式的基本类型设置。背景：对 CSS 样式的背景设置进行定义，可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。区块：精确定义整段文本中文字的字距、对齐方式等属性。方框：可以定义特定元素的大小及其与周围元素的间距等属性。边框面板：可以对控制元素周围边界的样式属性进行定义。列表面板：定义列表的样式属性。定位面板：定义层的样式属性。扩展样式面板：主要是用来控制那些不被大多数浏览器所支持的功能。

CSS的盒模型（BOX Model） content：主体内容 margin：边距，四个方向为margin-top，margin-right，margin-bottom，margin-left border：边框，四个方向为border-top，border-right，border-bottom，border-left padding：填充，四个方向为padding-top，padding-right，padding-bottom，padding-left

Div+CSS —问题探究 Div与CSS相结合来进行网页布局，已成为网页设计领域一大亮点。在Dreamweaver CS3中如何实现这一设计理念呢？Div标签一般用来定义网页上的一个特定区域，将文字、图片和表格等各种网页元素放在此区域里，再用CSS对该<Div>标签定义的区域进行定位和样式的设置。CSS样式表不但是定义页面样式的良好工具，同时它所具有的精确定位对象的控制能力又使其成为不可多得的网页布局工具，为了提高设计效率，可以事先定义好布局所需的CSS样式规则，然后在“插入Div标签”中应用。使用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器。

Div+CSS —问题探究 Div+CSS布局设计思路用Div来定义语义结构；用CSS来美化网页，如加入背景、线条边框、对齐属性等；在这个CSS定义的盒子内加上内容，如文字、图片等。

Div+CSS —问题探究 典型的版面实例该实例采用分栏结构，即页头、导航栏、内容、版权四部分组成。 Div+CSS排版结果图

Div+CSS —问题探究 Div+CSS标准的优点符合W3C标准。微软等公司均为W3C支持者，这样可以保证您的网站不会因为将来网络应用的升级而被淘汰。结构清晰，容易被搜索引擎搜索到，天生优化了seo ；提高易用性，可以一次设计，随处发布。支持浏览器的向后兼容，几乎在所有的浏览器上都可以使用。表现和内容相分离。这也用CSS布局的特色所在，网页由内容构成，而将网页设计部分剥离出来放在一个独立样式文件中，代码变得更简洁，使页面和样式的更新变得更加方便，提高了网页下载速度。 Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起。而Div 更能体现样式和结构相分离，结构的重构性强。

Div+CSS —构建任务 工作流程在站点中新建一个页面并保存。插入一个Div并设置相关CSS规则，使之成为外部容器。根据事先拟好的布局草图，定制四个Div标签并分别设置相关CSS规则。在各Div窗口中插入相应页面元素。检查整个布局效果并加以调整，保存并预览布局效果。

ID与类的区别 在CSS中，类选择符是一个半角英文句点（.）之前，而id则是半角英文井号（#）一个id名称在一个页面里面通常是唯一定义的,因此在页面里定义css通常建议使用class,这样你可以重复使用你的css. 而把id留给最需要使用html元素的javascript等

SPAN span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。举例:<p>早睡早起使人健康、富裕又聪颖。</p> 假设我们想将健康,富裕,聪颖这三个词用红色显示.我们可以用<span>标签来标记,然后，我们将这几个span设置为相同的class。这样，我们稍后就可以在样式表里针对这个class定义特定的样式。

<p>早睡早起使人<span class="benefit">健康</span>、 <span class="benefit">富裕</span>和<span class="benefit">聪颖</span>。</p> 相应的CSS代码如下： span.benefit { color:red; } 示例程序见d:/test/span-exe.html

SPAN与DIV span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表：

<div id="democrats"> <ul> <li>富兰克林·D·罗斯福</li> <li>哈利·S·杜鲁门</li> <li>约翰·F·肯尼迪</li> <li>林登·B·约翰逊</li> <li>吉米·卡特</li> <li>比尔·克林顿</li> </ul> </div> • <div id="republicans"> <ul> <li>德怀特·D·艾森豪威尔</li> <li>理查德·尼克松</li> <li>杰拉尔德·福特</li> <li>罗纳德·里根</li> <li>乔治·布什</li> <li>乔治·W·布什</li> </ul> </div>

可以定义样式如下: #democrats { background:blue; } #republicans { background:red; }

网页预览效果

div+css参考网站 http://www.csscool.cn http://www.52css.com http://www.csszengarden.com/

本章练习题 1. 选择题（1）CSS样式选择器的类型有（）。 A．标签、类、文本　B．类、标签、图像　 C．类、标签、高级　D．FLASH、类、ID （2）在“页面属性”设置中，不能设置的样式为（）。 A．背景颜色 B．背景图像 C．字体大小 D．图像边框（3）对特定ID的属性设置CSS样式时，选择器命名时，在名称前必须加（）。 A．.（英文状态的句点） B．@ C．# D．？ 2. 简答题定义CSS样式有什么好处？什么是CSS样式？分为哪几类？如何调用CSS样式？

课堂作业 对上海凯泉生物科技有限公司主页(http://www.kaiquanbiotech.com/qyjs.htm)的CSS样式导出为独立文件。

<style type="text/css">  </style>

第 5 章 DIV+CSS

第 5 章 DIV+CSS

Presentation Transcript