Download presentation
Presentation is loading. Please wait.
1
《网页设计与制作》
2
第五章 CSS 样式表 5.1 5.2 5.3 CSS 样式的应用 使用CSS样式表 使用CSS 样式表的网页实例
3
CSS（Cascading Style Sheet），中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
【本章学习目的】 本章通过多个CSS样式的应用实例，重点介绍了CSS样式表功能、定义CSS规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章的学习，读者应了解CSS样式表的用途，掌握创建和应用CSS样式表的方法，学会用CSS样式表进行网页的美化和网页布局。
4
5.1 利用CSS 样式表的网页实例 CSS样式表是由一系列样式选择器和CSS属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。 使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，简化了格式化网页的工作。
5
5.1 利用CSS 样式表的网页实例 【例5.5】利用CSS样式还可以代替表格进行网页布局，这是目前较为流行页面排版方式，如图所示。
该实例主要采用了div标签＋css样式，涉及到的知识点有以下几点： 分析构架：画出构架图； 模块拆分：分别定义Div的CSS样式； 在网页中插入Div标签，在Div中填充网页内容； 总体调整：色彩及内容调整，适当修改CSS样式。
7
5.2 使用CSS样式表 5.2.1 CSS样式表概述 1、样式表的使用 CSS样式表的使用常用的方法有以下两种：
页面内嵌法。将样式表代码直接写在HTML标签的head区。 外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面<head>和</head>之间用以下代码调用。 <link href="css/master.css" rel="stylesheet" type="text/css" />
8
5.2 使用CSS样式表 2、CSS样式表语法 选择符 { 属性1：值1；属性2：值2…… } 参数说明：
属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开。
9
5.2.2 在Dreamweaver中定义CSS 1. 创建CSS样式
选择“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，或选择“文本”菜单｜“CSS样式”｜“新建”命令，弹出“新建CSS规则”对话框.
10
5.2.2 在Dreamweaver中定义CSS 选择器类型有以下三种： （1） 类
自定义 CSS 规则，它的特点是灵活多变，可以重复将样式应用于网页元素。在应用时，它会在HTML标签内加入一个类（class）的定久来规定标签中的格式。比如将类的样式mystyle定义于某个标题，那么代码为： <h1 class=”mystyle”>标题1应用自定义的样式</h1> （2） 标签 重新定义指定标签的外观，例如：创建或更改 h1 标签的 CSS 样式时，所有用 h1 标签设置了格式的文本都会立即更新，实现了批量快速更改格式的特点。
11
5.2.2 在Dreamweaver中定义CSS （3） 高级
在CSS 选择器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置（例如：body,table,td，用逗号隔开），定义嵌套的样式（td img 空格隔开），定义包含特定 id 属性的标签的格式设置。
12
定义的位置有以下三种情况： 选择“仅为该文档”，此时CSS样式的代码会嵌套在网页<head>和</head>标签中。 选择“新建样式表文件”，则弹出“保存样式表文件为”对话框，如图5.5所示，选择样式文件的存储路径和文件名，单击“保存”按钮，将CSS样式代码单独存放在一个CSS文件。 选择“已有的某CSS文件”，将新建的CSS规则写入已有的css文件中。 比如：选择定义在“仅对该文档”，单击“确定”按钮后，弹出“H1的CSS规则定义”对话框，如图所示，在对话框中进行各项的格式设置，然后单击“确定”按钮。
14
2.编辑和删除CSS样式 创建CSS样式后，如果要修改CSS样式，在“CSS样式”面板中，单击“CSS样式”面板右下角的“编辑”按钮，进入“CSS规则定义”的对话框，可进行修改。 某个CSS样式不再需要时，在“CSS样式”面板中，首先选中某个样式，单击CSS样式面板右下角的“删除”按钮。
15
5.3 CSS 样式的应用 【例5.6】应用CSS样式设计出图文混排效果，如图所示。
背景样式、文本及列表样式、方框与边框样式、动态链接样式； 建立单独的CSS文件，应用于多个网页。
17
样式表的应用实例1：背景样式 的应用 在【例5.6】中，上方桔黄色的横条其实是重定义了body标签的网页背景图像，背景图像横向重复，网页元素与页边距也进行了设置，其操作步骤如下： 步骤１ 单击“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，弹出“CSS规则定义”的对话框，选择“选择器类型”为“标签”，在“标签”下拉列表中选择body，定义在：选择“仅为该文档”，单击“确定”按钮，弹出 “body的CSS规则定义”的对话框， 单击“背景”选项卡，设置背景图像为：images/bg.gif，单击“重复”下拉列表，选择“横向重复”命令。 步骤2 设置页边距单击“方框”选项卡，在边界中分别设置上、下均为50像素，左右均为100像素。
18
5.3.2 样式表的实例应用2：文本及列 表的应用 在【例5.6】中，文本和列表都应用了CSS样式，分别设置字体、段落、列表的相关属性。第一行文本是标题1（标签为H1），第二行文本是标题2（标签为H2），正文部分用了列表（标签为UL）。 1、字体的样式设置 在“CSS规则定义”对话框的“类型”选项卡中设置。 2、文本段落的样式设置 在“CSS规则定义”对话框的“区块”选项卡，设置。 3、列表的样式设置 类型：设置项目符号或编号的外观。 项目符号图像：指定图像替代项目符号的样式，美化项目符号。 重定义项目列表（标签为UL)。
19
5.3.3 样式表的实例应3：方框和边框 样式的应用 在【例5.6】中，插入一幅图像，通过CSS样式的应用，实现了图文混排的效果。该实例中主要设置了方框的浮动和边界及填充的距离，实现了图像与文本之间的环绕，还设置了边框，添加了一个虚线边框修饰图像。这里首先定义了一个类的CSS规则，然后将此类应用于某个图像上。 图像边距的设置 图像的边框的设置
20
5.3.4 样式表的实例应用4：动态链接样式 简单的CSS链接样式可以在页面属性中的“链接”选项卡中设置，5.1节中已经讲过。
在【例5.6】中，建立较为复杂的CSS链接样式，当鼠标经过链接文字时，文字颜色会变色、字体样式变粗、出现背景颜色、文字修饰有下划线等。这里还讲解两个重要的知识点：如何建立CSS链接样式和如何调用外部CSS样式表。
21
1.建立链接CSS样式 单击“CSS样式”面板中的“新建CSS规则”按钮，选择器类型：高级，单击“选择器”下拉列表，分别选择a:llink（链接后效果）、a:visited（访问后效果）、a:hover（鼠标经过效果），分别定义其样式。
22
2. 调用CSS样式文件 其它网页要应用刚才建立的CSS样式文件，如何调用呢？单击“CSS样式”面板中的“附加样式表”按钮，弹出“链接外部样式表”的对话框，在“文件/URL”文本框中输入外部CSS文件路径和文件名，添加为选择“链接”选项，将新建的样式文件链接到此文件，如图所示。
23
样式的实例5：滤镜效果的应用 CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能集合。由于浏览器IE有着广泛的使用范围，因此CSS滤镜也被广大设计者所喜爱。 CSS滤镜可以为样式控制的对象指定特殊效果。 ✿注意：CSS滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接作用于文字，所以把所需要增加特效的文本事先放在单元格或层中，然后对单元格或层应用CSS样式。
24
Alpha—透明效果 Blur—模糊效果 Chroma—将指定的颜色设置成透明 Dropshadow—投影效果 FlipH—进行水平翻转 FlipV－进行垂直翻转 Glow－发光效果 Grayscale－产生灰阶 Invert－反转底片效果 Light－灯光投影 Mask－遮罩 Shadow－阴影效果 Wave－水平与垂直波动效果 Xray－设置X光效果
25
5.3.6 CSS样式进阶 利用CSS＋DIV进行网页布局的实例 利用CSS样式还可以代替表格进行网页布局，本小节讲解
制作过程如下： 1、分析架构，如图所示。 2、模块拆分 一个总的DIV标签，它包含了4个DIV标签。Container最大的容器，将所有内容包含在内。Width：778px。Header网站头部图标，包含了一幅广告横幅，Width：778px，Height110px。 Leftnav左侧导航条，Width：200，浮动为左对齐。Content网站的主要内容。 Width: 480px。Footer 网站底栏，包含版权信息等。
26
3.定义页面属性和定义特定 Id 属性的DIV标签的CSS样式。
4.插入网页元素和调整页面结构 最后，保存网页，浏览网页效果。
28
本 章 小 结 本章主要介绍了CSS样式的创建与应用，通过CSS样式的使用，使得网页样式更加丰富多彩。
1．CSS的概念： CSS样式、样式的分类、CSS的语法结构等 2．CSS样式的创建 3．CSS样式的应用
29
本章练习题 1. 选择题 （1）CSS样式选择器的类型有（ ）。 A．标签、类、文本 B．类、标签、图像
C．类、标签、高级 D．FLASH、类、ID （2）在“页面属性”设置中，不能设置的样式为（ ）。 A．背景颜色 B．背景图像 C．字体大小 D．图像边框 （3）对特定ID的属性设置CSS样式时，选择器命名时，在名称前必须加（ ）。 A．.（英文状态的句点） C．# D．？ 2. 简答题 定义CSS样式有什么好处？ 什么是CSS样式？分为哪几类？ 如何调用CSS样式？
30
上 机 实 训 1. 背景知识 根据本章所学的CSS样式表的知识，再综合前面所学的创建站点及编辑网页的知识，制作精美的网页及应用CSS扩展功能。 2. 实训准备工作 实训素材、网页元素及网页样图，发送到学生的主机中，以供学生参考使用。 3.实训要求 利用CSS样式表制作精美的网页，如图所示。 要求：根据给定的素材，首先设置页面属性 其次定义特定 Id的DIV标签的CSS样式，然后插入DIV标签，在DIV中插入内容，最后通过定义类，设置图像CSS样式。 2.在网页中添加CSS扩展效果：滤镜 要求：制作：投影字体、发光字体 、图像的透明效果、图像的波浪效果等，如图所示。 课时安排：2课时
31
上 机 实 训 1. 背景知识 根据本章所学的CSS样式表的知识，再综合前面所学的创建站点及编辑网页的知识，制作精美的网页及应用CSS扩展功能。 2. 实训准备工作 实训素材、网页元素及网页样图，发送到学生的主机中，以供学生参考使用。 3.实训要求 利用CSS样式表制作精美的网页，如图所示。 要求：根据给定的素材，首先设置页面属性 其次定义特定 Id的DIV标签的CSS样式，然后插入DIV标签，在DIV中插入内容，最后通过定义类，设置图像CSS样式。 2.在网页中添加CSS扩展效果：滤镜 要求：制作：投影字体、发光字体 、图像的透明效果、图像的波浪效果等，如图所示。 课时安排：2课时
Similar presentations
