09-第九章.ppt

《09-第九章.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网站建设与网页设计第九章CSS样式说明：本章节中的具体操作步骤参见书籍的对应章节。第九章CSS样式9.1CSS样式基础9.2使用CSS样式9.3管理CSS样式9.4CSS布局基础9.5预设的CSS布局9.7Div标签布局9.6APDiv元素布局9.1CSS样式基础精美的网页离不开CSS技术，使用CSS技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现更精准的控制。CSS技术是HTML的扩展，是网页设计中不可或缺的核心技术。CSS技术最大的优势就是实现了结构与形式的分离，从而更加有利于网站的开发和维护。同时，CSS布局是很有效的网页布局方式。CSS样式是CascadingStyle

2、Sheets（层叠样式单）的简称，也可以称作“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。9.1CSS样式基础CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而避免了重复操作。实际上，CSS样式的使用就像很多软件的“更换皮肤”功能。例如，左下角为一个没有应用CSS样式的网页，而右下角为应用了CSS文件后的网页。9.1.1CSS样式简介9.1CSS样式基础在Web页面中，CSS规则有下面3中方式：外部CSS样式：存储在一个单独的外部CSS(.css)文件（而非HTML文

3、件）中的若干组CSS规则。使用link标签链接到外部样式表文件（.css文件）。如果修改外部样式表文件，那么所有链接到该样式表文件的文件都将随之变化。内部（或嵌入式）CSS样式：若干组包括在HTML文档头部分的style标签中的CSS规则。使用style标签为当前网页设置样式信息。内部样式的内容包含在文档代码head部分的style标签中，并在【CSS样式】面板中的【所有规则】窗格内列出，此样式只对当前文档有效。内联样式：通过HTML标签的style属性为单个网页元素嵌套样式信息。其中，内联样式不符合“结构与形式分离”的网页基本设计原则，不建议使用。9.1.2CSS规则的应用范围9.1C

4、SS样式基础从前面的举例中可以看出，CSS样式规则是由两部分组成：选择器和样式定义（也称声明）。选择器是标识已设置格式元素的术语，例如p，h1、类名称等，而样式定义则用于定义样式的属性，大多数情况下为包含多个样式定义的代码块，包括样式属性和相应的属性数值。h1{font-size:12pixels;font-family:宋体}在上面的CSS规则中，h1是选择器，大括号（{}）之间的所有内容都是样式定义。在Dreamweaver中常见的CSS样式选择器有3种，分别是HTML标签选择器、类选择器和伪类(也称虚类)选择器。除此之外，还有两种选择器：ID选择器和具有上下文关系的选择器。9.1.

5、3CSS样式定义规则9.1CSS样式基础HTML标签选择器HTML标签选择器用于为某个或者某些HTML元素应用样式定义。如果要定义多个标签，则要在标签之间用逗号隔开。类选择器类选择器定义了某种类样式，可用于多种HTML标签，即可以对网页中多个网页元素重复使用类样式。类选择器在制作网页中使用较多，一般形式为：首先定义类样式（形式为.类名称），然后在HTML标签中指定相应的class属性对样式进行应用。伪类选择器伪类选择器一般用于设置超链接的显示方式。例如，图9-12所示的伪类选择器定义的样式就是指未访问过的、已访问过、激活的以及鼠标指针悬停着的4种状态的超链接。9.1.3CSS样式定义规则

6、9.1CSS样式基础9.1.3CSS样式定义规则HTML标签选择器定义类选择器定义伪类选择器定义9.1CSS样式基础ID选择器HTML标签中的ID属性是指定网页中某特定元素；CSS的ID选择器是针对相应的特定元素设置样式，需要注意的是ID选择器只能对指定的唯一网页元素应用样式。一般形式为：首先定义样式为“#ID名{样式定义}”，然后在HTML标签中利用ID属性应用该样式。具有上下文关系的选择器在CSS样式定义中，如果两个选择器之间用空格分开，就表示这是一个具有上下文关系的选择器。在HTML中，第二个选择器必须放在第一个选择器中。例如，如9-14所示的样式表示只针对唯一id为contain

7、er的标签中的id为header的标签中的h1标签使用该样式。9.1.3CSS样式定义规则9.1CSS样式基础9.1.3CSS样式定义规则ID选择器定义具有上下文关系的选择器定义9.1CSS样式基础由于CSS样式定义使用广泛，这里简单介绍CSS样式定义重要组成部分样式属性值的各种单位。颜色单位在CSS中使用以下方式设置指定样式颜色值：颜色名；#RRGGBB；#RGB；#rgb（rrr，ggg，bbb）；#rgb（rrr%，ggg%，