第6章 CSS样式表设计
合集下载
TP-4702.0101Dreamweaver网页设计与制作第1章
Dreamweaver
Dreamweaver是Macromedia公司推出的，是目前国 内公认的最佳的网页制作工具，最近版本为 Dreamweaver 8
教学进程
1.2 网站的策划和设计
1.2.1 网站的风格
风格，是指站点的整体形象给访问者的综合感受，比 较抽象。 网站的整体形象包含以下因素 ☻网站标志的设计 ☻ 色彩 ☻ 版面布局 ☻ 浏览方式 ☻交互性 ☻文字 ☻价值
合理的版面布局
精美的网站标志
注重色彩搭配
网页内容便于浏览
网页内容要精彩
简约、美观
教学进程
1.1.2 网页设计常用的工具
FrontPage
FrontPage是Microsoft公司推出的Web站点创建和管理 工具，它是微软Office成员之一。 FrontPage是一个所见即所得的“傻瓜”型网页制作软 件，你可以在对HTML毫不了解的情况下轻松地制作 出自己的网页来，你需要做的只是用鼠标以及键盘的 简单操作。
紫色
紫色：给人神秘、压迫的感觉。
白色
白色：具有洁白、明快、纯真、清洁的个性。
灰色
灰色：具有中庸、平凡、温和、谦让、中立和 高雅的个性。
ห้องสมุดไป่ตู้
教学进程
1.2.3 设计草图
根据实际需要，画出网站的设计草图
教学进程
1.3 Dreamweaver 8介绍
1.3.1 Dreamweaver简介
Dreamweaver 8 是一款专业的HTML编辑器 用于对Web站点、Web页和Web应用程序进行设计、 编码和开发。
第4章 超级链接的应用
第5章 图像与多媒体 第6章 使用CSS样式表
第7章 交互式表单的应用
第6章Div标签与CSS样式表(4)-CSS语法
因此，概括来说，CSS就是由3个基本部分组成 的——“对象”、“属性”和“值”。
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}
第6章DIV+CSS
属性值越大表示在越上层 z-index : number
Overflow、Visibility、display、Z-index属性
display-－设置对象显示方式(可以各种不同的方式显示对象)
dispaly:block | none | inline | inline-block |list-item
图片 段落
top left 使用 Z － index指定是哪一层 <DIV>是块级容器标签，可以包 含图片、标题、段落、文字等
第二节 div与span
[SPAN]
注释： span 没有固 相对div容器，span容器的文本或图片要小些。 定的格 式表现。 当对它 不能用宽度属性width设置span标记内对象的宽 应用样 度。 式时， 何时使用span？在一行文本中，想对其中的文字 它才会 设置样式，而又不要该行文本换行的条件下，可 产生视 觉上的 选择span。 变化。
<html> <head> <style type="text/css"> #container{ margin:0px auto; padding:10px; width:450px; height:260px; border:1px solid #000;} #box1{width:300px; height:260px; border:1px solid #000; float:left;} #box2{width:120px; height:260px; border:1px solid #000; float:right;} </style> </head> 每个板块都是一个<div>，这里直接使用 <body> CSS 中的 id 来表示各个板块。 <div id="container"> 页面的所有 Div 块都属于 container，一般的 <div id="box1">这里是box1</div> Div 排版都会在最外面加上这个父 Div ， <div id="box2">这里是box2</div> 便于对页面的整体进行调整。 对于每个 Div 块，还可以再加入各种元素或行 </div> </body> </html>
Overflow、Visibility、display、Z-index属性
display-－设置对象显示方式(可以各种不同的方式显示对象)
dispaly:block | none | inline | inline-block |list-item
图片 段落
top left 使用 Z － index指定是哪一层 <DIV>是块级容器标签，可以包 含图片、标题、段落、文字等
第二节 div与span
[SPAN]
注释： span 没有固 相对div容器，span容器的文本或图片要小些。 定的格 式表现。 当对它 不能用宽度属性width设置span标记内对象的宽 应用样 度。 式时， 何时使用span？在一行文本中，想对其中的文字 它才会 设置样式，而又不要该行文本换行的条件下，可 产生视 觉上的 选择span。 变化。
<html> <head> <style type="text/css"> #container{ margin:0px auto; padding:10px; width:450px; height:260px; border:1px solid #000;} #box1{width:300px; height:260px; border:1px solid #000; float:left;} #box2{width:120px; height:260px; border:1px solid #000; float:right;} </style> </head> 每个板块都是一个<div>，这里直接使用 <body> CSS 中的 id 来表示各个板块。 <div id="container"> 页面的所有 Div 块都属于 container，一般的 <div id="box1">这里是box1</div> Div 排版都会在最外面加上这个父 Div ， <div id="box2">这里是box2</div> 便于对页面的整体进行调整。 对于每个 Div 块，还可以再加入各种元素或行 </div> </body> </html>
第6章 Div+CSS布局网页
图6-18 设置分类项方框
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
第6章 表格与表单
注意: cellpadding类似于盒子模型的内边距padding，指的是单元格内部的距离 ，cellspacing则指的是外部单元格与单元格之间的距离。可以结合盒子 模型的内外边距理解cellpadding与cellspacing的不同。
6.1 表格标记
• 6.1.2 <table>标记的属性
4、width与height属性
设置单元格的背景图像 设置单元格横跨的列数（用于合并水平方向 的单元格） 设置单元格竖跨的行数（用于合并竖直方向 的单元格）
rowspan
正整数
6.1 表格标记
• 6.1.4 <td>标记的属性
注意:
让IT教学更简单，让IT学习更有效
1、在<td>标记的属性中，重点掌握colspan和rolspan，其他的属性了解 即可，不建议使用，均可用CSS样式属性替代。 2、当对某一个<td>标记应用width属性设置宽度时，该列中的所有单元 格均会以设置的宽度显示。 3、当对某一个<td>标记应用height属性设置高度时，该行中的所有单元 格均会以设置的高度显示。
6.2 CSS控制表格样式
• 6.2.2 CSS控制单元格边距
让IT教学更简单，让IT学习更有效
– 使用<table>标记的属性美化表格时，可以通过cellpadding和 cellspacing分别控制单元格内容与边框之间的距离以及相邻单元 格边框之间的距离。
注意: 行标记<tr>无内边距属性padding和外边距属性margin，本书不再做 具体的演示，初学者可以自己测试加深理解。
属性名 含义 常用属性值
height
align valign
第6章 表格与表单_补充案例(1)
第六章补充案例案例6-6 简单的用户登陆界面一、案例描述1、考核知识点input控件2、练习目标➢熟悉表单的构成➢掌握<form>标记的用法➢理解<form>标记相关属性➢掌握input控件属性中的单行文本输入框、密码输入框以及提交按钮属性3、需求分析在网页中，通常会使用表单来收集用户信息，并将这些信息传递给后台服务器，实现人机交互。
同时，为了明确信息分类、便于用户操作，还会用到一系列的表单控件，用于定义不同的表单功能。
为了便于初学者的理解和掌握，接下来，通过一个登陆界面的案例做具体演示。
4、案例分析1)最终实现效果，如图6-11所示。
图6-1登陆界面2）分析效果图，具体实现步骤如下：a)定义表单域。
b)定义用于输入用户名的单行文本输入框。
c)定义密码输入框。
d)定义用于输入验证码的单行文本输入框。
e)定义登陆按钮。
二、案例实现图6-2简单的登陆界面案例6-7 简单的交规考试答卷一、案例描述1、考核知识点input控件2、练习目标➢熟悉表单的构成➢掌握<form>标记的用法➢掌握input控件属性中单选框和复选框属性➢熟悉<label>标记的使用方法3、需求分析浏览网页时，经常会看到带有小图标的列表项，这些小图标不仅可以美化网页，还能提供更好的用户体验。
虽然无序列表和有序列表都有自带的列表项目符号，但是，它们在不同浏览器中显示的效果不同。
因此，在实际工作中，经常通过给列表项定义背景图像来设置列表项目符号。
4、案例分析1)最终实现效果，如图6-13所示。
图6-3交规考试答卷效果2）分析效果图，具体实现步骤如下：a)定义一个名为“交通考试选择题”的<h3>标题。
b)定义表单域c)使用<p>标记定义单选题的题干。
d)使用<input>标记的单选按钮属性定义选项。
e)使用<p>标记定义多选题的题干。
f)使用<input>标记的复选框属性定义选项。
《网页设计与制作》课程标准
《网页设计与制作》课程标准学时数：48学时________________ 课程性质：专业必修课—适用专业：计算机应用专业—一、本课程的性质、地位、作用以及与其它相关课程内容的联系《网页设计与制作》是计算机应用专业的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
二、课程教学目标本门课程在专业教学计划中起着十分重要的作用，通过这门课程，学生可以掌握以下技能和知识：*掌握网站的开发流程，如建站规划、效果图制作、建立站点等相关知识。
*掌握各种网页元素在DreamWeaVer中的使用。
例如表格、文本、图像、超级链接、层和表单等。
*掌握测试和发布网站的方法。
包括网站测试的内容和方法。
*能够解决一些网页设计中的常见问题。
三、本课程学时安排四、课程教学内容和基本要求（按章节详细阐述）第一章：网页设计概述（一）教学重点和难点重点：Dreamweavercs5的参数设置、Dreamweaver的站点设置。
难点：DreamWeaVer的站点设置。
（二）教学内容和基本要求教学内容：基础知识，初识DreamWeaver,DreamWeaVerCS5的参数设置，设置站点。
基本要求：了解网页设计基本知识；掌握DreanlweaVerCS5的参数设置；熟练掌握Dreamweaver的站点设置。
第二章：表格布局（一）教学重点和难点重点：表格基本操作、表格布局。
难点：表格布局。
（二）教学内容和基本要求教学内容：表格基本操作，表格高级应用，表格布局，网页设计基础。
基本要求：了解表格基本操作、表格高级应用及网页设计基础；掌握表格基本操作；熟练掌握表格布局。
第三章：CSS样式表（一）教学重点和难点重点：CSS样式表应用。
网页设计与制作案例教程(HTML5+CSS3)第6章使用CSS设置列表样式
WEB
13
6.6.1 HTML列表
在HTML中有三种列表
项目列表
编号列表
定义列表
WEB
6.6.1 HTML列表
① 项目列表
项目列表也称为无序列表，是网页中的常见元素之一，项目列
表使用<li>标签来罗列各个项目，各个项目使用特殊符号来进行分
项标识，如黑色圆点等。项目列表的列表项之间没有顺序关系。 语法格式 <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> …… </ul>
26
6.7 提高项目：制作“童书畅销榜”页面
27
6.8 拓展项目：制作“商品列表”页面
28
WEB
网 页 效 果
代 码
20
6.6.2 常用CSS列表样式
① 设置列表符号类型
项目列表项的默认符号是黑色圆点，编号列表项默认 符号是数字1、2、3…..，通过设置list-style-type属性可 以改变列表项的符号。 语法格式
list-style-type:属性值;
21
6.6.2 常用CSS列表样式
19
6.6.1 HTML列表
③ 定义列表
<!doctype html> <html> <head> <meta charset="utf-8"> <title>定义列表</title> </head> <body> <dl> <dt>中国的城市:</dt> <dd>北京</dd> <dd>上海</dd> <dd>广州</dd> <dt>美国的城市:</dt> <dd>华盛顿</dd> <dd>纽约</dd> <dd>洛杉矶</dd> </dl> </body> </html>
第6章 表格在网页中的应用
4. 表头标签<th>
<th></th>标签对为表格特有的表示表头单元格的标签，在Dreamweaver的设计界 面中创建表格时可以选择表头所在的位置。scope为<th>标签的属性，表示定义表头， "col"为属性值，表示将当前列的所有单元格和表头单元格联系起来。
5. 标题标签<caption>
<caption></caption>标签对为table表格特有的表示标题的标签，同<th>标签不同的 是，<caption>标签不需要合并，它本身就只有一列，同时<caption>标签的位置是默认 居中的。
— 27 —
案例二 制作月历——使用CSS控制表格进阶
— 10 —
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 04
设置表头（<th>标签）样式。在步骤3输入的代码下方输入如下代码。
th{ background-image:url(image/title.gif); /*设置表头背景图像为title.gif */ background-repeat:repeat-x; /*设置表头背景图像为横向重复*/ height:25px; /*设置表头高度为25像素（与背景图像的高度相同）*/ line-height:25px; /*设置表头行高为25像素（与表头高度一致，使文字居中）*/ color:#FFFFFF; /*设置表头文字颜色为白色（也可以写成color:white;）*/ border:1px solid #5F5F5F; /*设置表头边框1px，样式为直线，颜色为#5F5F5F*/ padding:0 2px 0; /*设置单元格内边距大小为上：0，左右：2像素，下：0*/ }
<th></th>标签对为表格特有的表示表头单元格的标签，在Dreamweaver的设计界 面中创建表格时可以选择表头所在的位置。scope为<th>标签的属性，表示定义表头， "col"为属性值，表示将当前列的所有单元格和表头单元格联系起来。
5. 标题标签<caption>
<caption></caption>标签对为table表格特有的表示标题的标签，同<th>标签不同的 是，<caption>标签不需要合并，它本身就只有一列，同时<caption>标签的位置是默认 居中的。
— 27 —
案例二 制作月历——使用CSS控制表格进阶
— 10 —
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 04
设置表头（<th>标签）样式。在步骤3输入的代码下方输入如下代码。
th{ background-image:url(image/title.gif); /*设置表头背景图像为title.gif */ background-repeat:repeat-x; /*设置表头背景图像为横向重复*/ height:25px; /*设置表头高度为25像素（与背景图像的高度相同）*/ line-height:25px; /*设置表头行高为25像素（与表头高度一致，使文字居中）*/ color:#FFFFFF; /*设置表头文字颜色为白色（也可以写成color:white;）*/ border:1px solid #5F5F5F; /*设置表头边框1px，样式为直线，颜色为#5F5F5F*/ padding:0 2px 0; /*设置单元格内边距大小为上：0，左右：2像素，下：0*/ }
第6章flash教程
综合实训——为“macaco”网页设置样式
在讲解了定义样式表的方法和样式表的分类后， 下面通过为“macaco”网页设置标签样式、类样 式及链接样式，来了解这三种样式在实际网页中 的应用，并进一步练习和巩固前面学过的知识， 具体操作见视频6-1。
6.3
6.3.1
样式表的高级应用
在同一个网页中设置两种链接样式
第6章
高级应用
6.1
认识样式表
熟悉“CSS样式”面板
6.1.1
在Dreamweaver CS3中，我们可以借助“CSS样 式”面板来新建、删除、编辑和应用样式，以 及附加外部样式表等。
6.1.2
CSS样式的存在方式
CSS样式以两种方式存在于网页中： 外部CSS样式表：为增强CSS样式的通用性，我 们可以创建扩展名为.css的样式表文件。利用 “CSS样式”面板可将该文件链接到站点中的 一个或多个网页中，从而使用户可以直接应用 其中定义的样式。 内部（或嵌入式）CSS样式表：是一系列包含 在HTML文档head部分style标签内的CSS样式。
6.2
定义样式表
6.2.1 定义样式的步骤
1.CSS样式的分类
根据应用对象的不同，CSS样式被分成了以下 三类。
类样式:主要用于定义一些特殊的样式。
标签样式:用来重定义HTML标签的格式。 选择器样式:主要用来定义链接文本的样式。
2.定义样式的步骤
在“CSS样式”面板中单击“新建CSS规则”按 钮 ，打开“新建CSS规则”对话框。在“选 择器类型”区选择要创建的CSS类型，在“定 义在”选项组中指定保存样式的位置，单击“ 确定”按钮，打开“规则定义”对话框。
6.2.2
定义“类”样式
在了解了定义样式的步骤后，本节来学习一下 “类”样式的定义和应用方法。
课后练习
《动画与网页制作》课后练习第一章网页制作基础判断正误（1）HTML标记符一般不区分大小写。
（对）（2）网站就是一个链接的页面集合。
（对）（3）将网页上传到Internet时通常采用FTP方式。
（对）（4）所有的HTML标记符都包括开始标记符和结束标记符。
（错）选择题（单选）（1）WWW是的意思。
答案：BA．网页B．万维网C．浏览器D．超文本传输协议（2）在网页中显示特殊字符，如果要输入“<”，应使用_________。
答案：D A．lt; B．≪ C．< D．<（3）浏览器是一种_________。
答案：BA．系统程序B．客户端程序C．服务器端程序D．编程工具填空题（1）如果要为网页指定黑色的背景颜色，应使用以下html语句：<body > 答案：bgcolor="black"（2）网页的扩展名通常是：答案：.htm或.html（3）要为网页添加背景音乐，应使用标记符。
答案：BGSOUND（4）BODY的属性用于设置未被访问过的超链接的颜色。
答案：link简答题（1）简要说明HTML 的基本工作原理。
综合题（1）编写一个能够显示背景图案并能播放背景音乐的网页。
（2）编写一个显示为如图所示的页面。
第二章文本与超链接判断正误（1）用H1标记符修饰的文字通常比用H6标记符修饰的要小（错）。
（2）B标记符表示用粗体显示所包括的文字。
（对）（3）使用FONT 标记符的size 属性可以指定字体的大小。
（对）（4）OL和LI标记符结合，可以创建无序列表，UL和LI 标记符结合可以创建有序列表。
（错）（5）在网页中创建超链接，其中URL 可以是相对地址或绝对地址。
（对）选择题（单选）（1）以下关于FONT标记符的说法中，错误的是：答案：D A．可以使用color 属性指定文字颜色。
B．可以使用size 属性指定文字大小（也就是字号）。
用css样式表美化网页
6.3
© 2009
第6章
用CSS样式表美化网页
CSS样式
CSS定义 CSS样式的分类及应用方式 使用“CSS样式”面板 新建CSS样式 设置“CSS 规则定义”对话框参数 自定义CSS样式 链接外部CSS样式 编辑CSS样式 复制CSS样式 导出CSS样式 CSS样式转化为HTML标签
样式表文件名
CSS规则列表
属性和属性值 列表
类别视图
工具按钮栏
6.9
© 2009
第6章
用CSS样式表美化网页
使用“CSS样式”面板
选择命令“窗口”→“CSS样式” or单击属性面板中的CSS按钮 or使用快捷键Shift+F11
附加样式表 新建CSS规则 编辑样式
删除CSS样式
6.10
© 2009
为超链接创建动态效果 ： a:link——定义了链接文字的样式。 a:visited——浏览者已经访问过的链接样式。 a:hover ——定义了鼠标悬浮在链接文字上时的样式。 a:active ——定义链接被激活时的样式，即鼠标已经单 击了链接，但页面还没有跳转时。
6.26
© 2009
第6章
用CSS样式表美化网页
© 2009
第6章
用CSS样式表美化网页
创建和应用CSS样式
1 控制浏览器中的文字大小 2 设置行间距 3 为图片加上边框效果
6.22
© 2009
第6章
用CSS样式表美化网页
创建和应用CSS样式
4 利用“自定义样式表”改变鼠标指针的形态 创建基本页面，“CSS样式”面板上右击，选择“新建”命令
打开“CSS 规则定义”对话框 从“光标”下拉菜单中选择鼠标方案
第6章 CSS样式高级应用
6
盒子模型属性
border-style：边框样式。 语法：
border-style：none | hidden | dotted | dashed | solid |double…;
与border-color相似，同样提供了4个单边边框宽度属 性：：
border-top-style：样式值; border-bottom-style：样式值; border-left-style：样式值; border-right-style: 样式值;
14
盒子之间的关系
定位
static：静态定位，默认值，没有定位。（例子） 语法： position:static; 元素的位置由元素在 (X)HTML 中的位置决定。 元素框正常生成。块级元素生成一个矩形框，作为文档流的一
部分，行内元素则会创建一个或多个行框，置于其父元素中。
15
盒子之间的关系
第6章 CSS样式高级应用
本章目标
熟悉页面布局概念 掌握盒子模型和盒子的浮动与定位 掌握使用CSS+DIV布局
2
CSS盒子模型
CSS盒子模型概述
盒模型，又称框模型(Box Model)。顾名思义，就是一个盒子。 在盒子模型中，页面中所有的HTML元素都被看作成一个个盒子。
元素的外边距（margin）、边框（border）、内边距 （padding）、内容（content）就构成了CSS盒模型。
10
盒子模型属性
margin属性：盒子的外边距。外边距的属性有五种， 即margin-top、margin-right、margin-bottom、 margin-left以及综合了以上四种方法的快捷外边距属 性margin。（例子）
语法：
盒子模型属性
border-style：边框样式。 语法：
border-style：none | hidden | dotted | dashed | solid |double…;
与border-color相似，同样提供了4个单边边框宽度属 性：：
border-top-style：样式值; border-bottom-style：样式值; border-left-style：样式值; border-right-style: 样式值;
14
盒子之间的关系
定位
static：静态定位，默认值，没有定位。（例子） 语法： position:static; 元素的位置由元素在 (X)HTML 中的位置决定。 元素框正常生成。块级元素生成一个矩形框，作为文档流的一
部分，行内元素则会创建一个或多个行框，置于其父元素中。
15
盒子之间的关系
第6章 CSS样式高级应用
本章目标
熟悉页面布局概念 掌握盒子模型和盒子的浮动与定位 掌握使用CSS+DIV布局
2
CSS盒子模型
CSS盒子模型概述
盒模型，又称框模型(Box Model)。顾名思义，就是一个盒子。 在盒子模型中，页面中所有的HTML元素都被看作成一个个盒子。
元素的外边距（margin）、边框（border）、内边距 （padding）、内容（content）就构成了CSS盒模型。
10
盒子模型属性
margin属性：盒子的外边距。外边距的属性有五种， 即margin-top、margin-right、margin-bottom、 margin-left以及综合了以上四种方法的快捷外边距属 性margin。（例子）
语法：
网页设计与制作知识点整理总结
第1章网页设计概述1.1 Internet 与WWW1.1.1 InternetInternet，译为“因特网”，又叫做“国际互联网”。
Internet 为用户提供了多种服务：•万维网服务（WWW）•电子邮件服务（E-mail ）•远程登录服务（Telnet ）•文件传输服务（FTP）1.1.2 WWWWWW，是“World Wide Web”的缩写，简称Web，译为“万维网”。
WWW 是运行在Internet 之上的超文本信息浏览系统。
WWW 的核心部分由三个标准构成：HTML / URL / HTTP1．HTML：超文本标记语言，用于定义超文本文档（网页）的结构。
2．URL：统一资源定位符，用于标识万维网上信息资源的地址（网址）。
3．HTTP：超文本传输协议，是客户端浏览器与Web 服务器之间的通信协议。
1.1.3 W3C万维网联盟（World Wide Web Consortium，W3C），又称W3C 理事会。
W3C 致力于对web 进行标准化。
W3C 制定了包括XHTML 和CSS 等众多影响深远的标准规范。
1.2 网页设计1.2.1 网页网页是用超文本标记语言HTML 书写的一种纯文本文件。
网页需要通过浏览器对其进行解释，才生成包含文字、图像、声音、视频和动画等多媒体信息的页面。
1.2.2 网页的类型静态网页：网页内容固定不变。
文件扩展名是.htm 或.html。
动态网页：网页内容由服务器端运行的程序动态生成。
文件扩展名是.aspx、.jsp、.php等。
1.2.3 网页布局设计按页面大小划分，网页布局分为：•固定宽度布局（常见的网页宽度是780px，或1000px）•可变宽度布局（常见的网页宽度是屏幕的100%）按页面版式划分，网页布局分为：•单栏布局•两栏布局•三栏布局•多栏布局•变化布局1.3 服务器与浏览器1.3.1 Web 服务器Web 服务器也称为WWW 服务器，主要功能是提供超文本信息浏览服务。
网页制作课件_6 用CCS美化网页
6.2.1 类选择符
CSS选择符有类选择符和标识选择符两种。类选择符以英文句点（.）开
头，而标识选择符以英文井号（#）开头。类选择符和标识选择符的不 同之处在于，类选择符用在不止一个的元素上，而标识选择符则用在唯 一的元素上。
1．建立类选择符CSS样式 4．理解类标识符的CSS代码 在head标签中定义了一个名 字为.myCSS_Class的样式，在 body标签中应用了两次这个样式。 一次应用是在第一个P标签中， 另一次应用是在img标签中，应 用类标识符样式时，都是通过 class属性的设置实现的： class="myCSS_Class" 专家点拨：在“代码视图” 下，通过手动添加代码，编辑某 个HTML标签的class属性，就可 以让这个HTML标签控制范围内的 元素应用类选择符样式。
2．CSS样式应用于文本 3．CSS样式应用于图片
6.2.2 标识选择符
标识选择符又可以称为ID选择符，它的名字以英文井号（#）开头， 这种选择符样式只能用在一个元素上。 1．建立标识选择符样式 2．在单元格中应用样式 3．理解标识选择符的CSS代码 在 head 标签中定义了一个名字为 #myCSS_ID 的样式，在td 标签 中应用了这个样式。应用类标识符样式时，都是通过HTML标签 的id属性的设置实现的： id="myCSS_ID" ID属性是HTML标签的一个重要属性，一个网页中的标签的 ID 属性值不能重复，因此在利用ID属性应用标识选择符CSS样式 时，只能应用于一个标签。如果应用于多个标签，就会造成 标签的ID属性冲突。
6.2.3 用CSS重新定义HTML标签
创建CSS样式时，在“新建CSS规则”对话框中， 将“选择器类型”设置为“标签（重新定义特定标签 的外观）”，可以实现用CSS重新定义HTML标签的外 观的功能。 下面以p标签为例讨论用CSS重新定义HTML标签 的外观的方法。
Dreamweaver中CSS样式
1) 在CSS样式面板上， 选中作为基础旳样式。
2) 单击CSS样式面板右 上角旳“显示菜单”按钮， 打开面板菜单；或者在面 板中单击鼠标右键，打开 快捷菜单，如图6-7所示。
图6-7 CSS样式旳快捷菜单
3) 选择“重制”命令，系统弹出如图6-8所示对话框，并 显示该样式旳设置。
4) 在对话框中选择新样式旳类型和定义，输入新旳名称。 5) 单击【拟定】按钮，拟定操作。
4)填充：定义元素旳内容和边框之间旳空间大小。该设置不 会显示在Dreamweaver旳文档窗口中。
5)边界：定义元素边沿和其他元素之间旳空间大小。只有在 被应用于文本块一类旳元素时，才会在Dreamweaver旳文 档窗口中显示该属性。
6.3.5 编辑边框格式
在CSS样式定义对话框中单击左边旳“边框”，右边区
所定义范围旳文本上，也能够应用到其他旳那些符合CSS
原则规范旳文本上。
6.2 创建CSS样式
CSS样式最大旳优点是
它具有自动更新功能，当应
用了CSS格式之后，假如不
满意，仅需要修改CSS样式
就能够更新全部旳应用，而
不用像设置HTML样式那样一
种一种地修改。
6.2.1 创建新CSS样式
其操作环节如下：
2)浮动：设置元素旳旳浮动位置。页面不并移动，将元 素放置在页面边沿旳左侧或右侧时，其他元素会围绕该 元素。只有在被用于IMG标签时，才会在 Dreamweaver旳文档窗口中显示该属性。
3)清除：定义元素旳某个边侧不允许有层出现。假如分 层出目前被设置清除旳元素旳一边，该元素会被移动到 层旳下面。只有在被用于IMG标签时，才会在 Dreamweaver旳文档窗口中显示该属性。
第6章 CSS样式
2) 单击CSS样式面板右 上角旳“显示菜单”按钮， 打开面板菜单；或者在面 板中单击鼠标右键，打开 快捷菜单，如图6-7所示。
图6-7 CSS样式旳快捷菜单
3) 选择“重制”命令，系统弹出如图6-8所示对话框，并 显示该样式旳设置。
4) 在对话框中选择新样式旳类型和定义，输入新旳名称。 5) 单击【拟定】按钮，拟定操作。
4)填充：定义元素旳内容和边框之间旳空间大小。该设置不 会显示在Dreamweaver旳文档窗口中。
5)边界：定义元素边沿和其他元素之间旳空间大小。只有在 被应用于文本块一类旳元素时，才会在Dreamweaver旳文 档窗口中显示该属性。
6.3.5 编辑边框格式
在CSS样式定义对话框中单击左边旳“边框”，右边区
所定义范围旳文本上，也能够应用到其他旳那些符合CSS
原则规范旳文本上。
6.2 创建CSS样式
CSS样式最大旳优点是
它具有自动更新功能，当应
用了CSS格式之后，假如不
满意，仅需要修改CSS样式
就能够更新全部旳应用，而
不用像设置HTML样式那样一
种一种地修改。
6.2.1 创建新CSS样式
其操作环节如下：
2)浮动：设置元素旳旳浮动位置。页面不并移动，将元 素放置在页面边沿旳左侧或右侧时，其他元素会围绕该 元素。只有在被用于IMG标签时，才会在 Dreamweaver旳文档窗口中显示该属性。
3)清除：定义元素旳某个边侧不允许有层出现。假如分 层出目前被设置清除旳元素旳一边，该元素会被移动到 层旳下面。只有在被用于IMG标签时，才会在 Dreamweaver旳文档窗口中显示该属性。
第6章 CSS样式
HTML5+CSS3网页设计基础 第六章 CSS盒子模型
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第11页
6.2.2 盒模型的宽和高
4. 元素类型与元素类型转换
(1) 文档中元素都可以划归为 block和 inline两种类型 块级元素(block)，块级元素的宽度为100%，始终占据一 行。<h1>~<h6>、<p>、<ul>、<ol>、<li>、<table>、 <div>和<body>等元素都是块级元素。 行级元素(inline)，行级元素没有高度和宽度，行级元素 前后没有换行符，没有固定的形状，显示时只占据其内容 的大小。<a>、<img>、<strong>、<b>、<em>、<i>、 <span>和表单元素等都是行级元素。
第6章 CSS盒子模型
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第1页
本章概述
盒模型是CSS中一个重要概念，文档中的每个元 素被描绘为矩形盒子。一个盒子包括content （实际内容）、padding（内边距）、border （边框）和margin（外边距）。 本章将具体介绍盒子的各种外观属性和背景属性 及其设置方法。
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第21页
6.2.5 案例制作
制作完成演示案例:首页企业新闻局部页面。 参考代码 6-2.html
HTML5+CSS3网页设计基础
第6章CSS样式与盒子模型
6.1.3 创建与应用CSS样式
18
2. 创建并应用类CSS样式
（1）在“CSS样式”面板中单击“新建CSS规则”按钮，打开“新建 CSS 规则”对话框，在上
方的下拉列表框中选择“类（可应用于任何 HTML 元素）”选项，在“选择器名称”下拉列表框
中输入“.title”选项，在下方的下拉列表框中选择“（新建样式表文件）”选项，单击
按钮，打开“新建 CSS 规则”
对话框，直接单击 按钮，打开CSS规则定义对话框，在其中进行设置，单击
按钮，
返回“插入 Div 标签”对话框，单击 按钮即可在网页中创建Div标签。
6.2.3 利用CSS+Div布局网页
34
2. 设置CSS样式
在above Div标签中输入文本内容，在“CSS样式”面板的“所有规则”列表框中选择 “#above”选项，单击下方的“编辑样式”按钮，打开CSS规则定义对话框，其中设置相关 的CSS样式，完成后单击 按钮。
标题 文字
3
精确控制网页中各种元素的位置 可以为网页中的元素设置各种 过滤器，产生如阴影、模糊、 透明等效果 可以与脚本语言结合，使网页 中的元素产生多种动态效果
6.1.1 认识CSS样式
4
2．CSS样式的特点
分类使用样式
集中管理样式信息
共享样式设定
使用文件
1
优先级
CSS的特点主要包括以上几点
6.1.1 认识CSS样式
31
7．content（内容）
content 是 盒子 包含的 内 容，是网页展示给用户浏 览的内容。content 可 以 是网页中包含块元素、行 内元素、HTML的任一元 素，如文本、图像等。
6.2.2 盒子模型的布局优势
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
9.3 Class选择符 Class选择符
• 定义例子2： p.x2{color:blue;font-familt:黑体 黑体} 黑体 x2是class选择符，它定义了样式蓝色黑体 选择符， 是 选择符 它定义了样式蓝色黑体 • 引用例子 ：<p class=x2>表示该 引用例子2： 表示该<p>使用 表示该 使用 x2样式。x2不能用于其它 样式。 不能用于其它 不能用于其它HTML标记。 标记。 样式 标记 • Class选择符特点：样式定义对任何允许引 选择符特点： 选择符特点 用的标记生效，如果不引用则不使用， 用的标记生效，如果不引用则不使用，增 加了灵活性。 加了灵活性。
6.3 HTML标记选择符 HTML标记选择符
p{font-family:"宋体"; font-size:9pt; color:blue; background-color:yellow} -- > </style></head><body> <h1>标题</h1><h2>标题</h2><p>内容</p> </body></html>
6.3 Class选择符 Class选择符
• CSS实例： Class选择符 <html><head> <style type=text/css> <!-.x1{font-family: "隶书"; font-size:49; color:#ff8800; text-align:right; background-color:yellow;}
6.3 HTML标记选择符 HTML标记选择符
• CSS实例：选择符是HTML标记。 <html><head> <style type=text/css> <!-h1,h2{font-family: "隶书"; font-size:49; color:#ff8800; text-align:right; background-color:yellow;}
6.3 Class选择符 Class选择符
.x2{font-family:"宋体"; font-size:29pt; color:darkblue; background-color:red;} -- > </style></head><body> <h1 class=x1>标题</h1> <h1 class=x2>标题</h1> </body></html>
6.2 引用CSS 引用CSS
• 内联样式 直接在标记中定义style属性：STYLE 内联样式—直接在标记中定义style属性： 直接在标记中定义style属性 属性可以应用于任意BODY元素 包括 元素(包括 本身)。 属性可以应用于任意 元素 包括BODY本身 。 本身 这个属性将任何数量的CSS声明当作自己的值， 声明当作自己的值， 这个属性将任何数量的 声明当作自己的值 而每个声明用分号隔开。 而每个声明用分号隔开。 • 例1 <h1 STYLE= “color:blue;font-size:10pt;fontfamily:黑体 黑体”> 黑体 CSS实例 实例 </h1> • 例2 <P STYLE="color:red;font-family:'宋体‘;"> 宋体‘ 宋体 注意单引号，因为双引号被用作包含样式声明 包含样式声明。 注意单引号，因为双引号被用作包含样式声明。
6.1 CSS基本结构 CSS基本结构
6.1 CSS基本概念 CSS基本概念
• 编辑 编辑CSS文档：文本编辑器。如记事本和写 文档：文本编辑器 文档 字板。 字板。 • 保存 保存CSS文档： 保存成“.CSS”文件。或者 文档： 文件。 文档 保存成“ 文件 直接写在HTML文档中。 文档中。 直接写在 文档中
第6章 CSS样式表设计 CSS样式表设计
6.1 CSS基本概念 基本概念 6.3 HTML标记选择符 标记选择符 6.5 id选择符 选择符 6.7 CSS属性 属性 6.2 引用 引用CSS 6.4 Class选择符 选择符 6.tyle Sheets，层叠样式 ： ， 表。 • 作用： HTML文件显示样式定义。把HTML 作用： 文件显示样式定义。 文件显示样式定义 文件的显示的内容和显示样式定义分离。 文件的显示的内容和显示样式定义分离。
9.3 Class选择符 Class选择符
• 引用语法： 引用语法： <Xxx class=class选择符名 …> 选择符名 Xxx表示 表示HTML标记，对于定义格式 ，Xxx 标记， 表示 标记 对于定义格式2， 只能是定义出现的HTML标记。 标记。 只能是定义出现的 标记 • 定义例子1： 定义例子 ： .x1{color:red;font-familt:黑体 黑体} 黑体 x1是class选择符，它定义了样式红色黑体 是 选择符，它定义了样式红色黑体 选择符 • 引用例子 ：<h3 class=x1>表示该 引用例子1： 表示该<h3>使 表示该 使 样式。 可以用于任何 可以用于任何HTML标记。 标记。 用x1样式。x1可以用于任何 样式 标记
6.2 引用CSS 引用CSS
• 链接一个样式表：使用在<head>中使用<link>声明链 链接一个样式表：使用在<head>中使用<link>声明链 <head>中使用<link> 这个声明用于一个外部CSS文件。 CSS文件 接。这个声明用于一个外部CSS文件。 <html><head> <link href=“./l.css"rel="stylesheet”type="text/css"> </HEAD><BODY> <H1> 这个标题使用了 这个标题使用了Style。</H1> 。 <H2>这个标题没有使用 这个标题没有使用Style。</H2> 这个标题没有使用 。 </body></html> • 文件 文件1.css如下：不能有 如下： 如下 不能有style标记 标记 H1{color:blue;font-size:20pt;font-family:黑体 黑体;} 黑体
6.1 CSS基本概念 CSS基本概念
6.2 引用CSS 引用CSS
• 引用 引用CSS：将样式表应用于 ：将样式表应用于HTML文件。有 文件。 应用于 文件 四种方式： 四种方式： –内联样式,直接在标记中定义style属性 内联样式, style属性 内联样式 直接在标记中定义style –嵌入一个样式表 嵌入一个样式表 –输入一个样式表 输入一个样式表 –连接到一个外部的样式表 连接到一个外部的样式表
• /*定义<h1><h2>样式*/ h1,h2{font-family: "隶书"; color:#ff8800;text-align:center;} • /*定义<p>样式*/ p{font-family:"宋体"; font-size:9pt; color:blue;background-color:yellow;}
• CSS样式表定义的基本语法： 样式表定义的基本语法： 样式表定义的基本语法 选择符{样式属性名 样式值； 样式属性名： 选择符 样式属性名：样式值； 样式属性名：样式值； 样式属性名：样式值；…} • 选择符：引用样式的对象，用逗号隔开 选择符：引用样式的对象，
– HTML标记：如果有多个标记，用逗号分开 标记： 标记 如果有多个标记， – Class选择符，ID选择符或上下文选择符。 选择符， 选择符 上下文选择符。 选择符或 选择符
– 显示样式定义：包括字体、颜色等等。 显示样式定义：包括字体、颜色等等。 – 样式文件：将样式定义单独保存在文件中，后 样式文件：将样式定义单独保存在文件中， 缀.css。 。 – 共享：多个 共享：多个HTML文件可以共享相同的样式文件。 文件可以共享相同的样式文件。 文件可以共享相同的样式文件 – 引用：一个 引用：一个HTML文件也可以引用多个 文件也可以引用多个CSS样式 文件也可以引用多个 样式 文件中的样式定义。 文件中的样式定义。
6.2 引用CSS 引用CSS
• 输入一个样式表：使用@import声明输 输入一个样式表：使用@import声明输 这个声明用于一个CSS CSS文件或内部 入。这个声明用于一个CSS文件或内部 STYLE元素 元素。 的STYLE元素。 <STYLE TYPE="text/css" >
<!-@import url(./1.css); -- > </STYLE>
6.3 HTML标记选择符 HTML标记选择符
• 运行效果：
• HTML标记选择符特点：样式一旦定义，则 标记选择符特点：样式一旦定义， 标记选择符特点 对所有涉及的标记生效， 对所有涉及的标记生效，而且只对涉及的 标记生效。 标记生效。
9.3 Class选择符 Class选择符
• Class选择符：为某个样式自定一个名字（任 选择符：为某个样式自定一个名字（ 选择符 意字符串），即一个class选择符，该样式可 ），即一个 选择符， 意字符串），即一个 选择符 用于任何引用此名字的标签。 用于任何引用此名字的标签。 • 定义语法格式 ： 定义语法格式1： *.class选择符名 样式属性名：样式值； 选择符名{样式属性名 选择符名 样式属性名：样式值； 样式属性名：样式值； 样式属性名：样式值；…} *一般省略，表示适用于所有标记。 一般省略， 一般省略 表示适用于所有标记。 • 定义语法格式 ： 定义语法格式2： HTML标记 标记.class选择符名 样式属性名：样式 选择符名{样式属性名 标记 选择符名 样式属性名： 样式属性名：样式值； 值；样式属性名：样式值；…} 该格式只用于指定的HTML标记。 标记。 该格式只用于指定的 标记