网页设计与制作ppt高职 第9章 在网页中应用CSS样式.ppt

《网页设计与制作ppt高职 第9章 在网页中应用CSS样式.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第9章在网页中应用CSS样式CSS样式简介任务1创建CSS样式任务2设置CSS样式任务3管理CSS样式任务4应用CSS高级样式任务5本章导读要创建一个漂亮的网页，掌握设置CSS样式是必不可少的，CSS样式可以实现网页中几乎所有的样式效果。CSS样式简介创建CSS样式设置CSS样式管理CSS样式应用CSS高级样式能力目标任务1CSS样式简介CSS是CascadingStyleSheets的缩写，中文译作“层叠样式表”，简称样式表。CSS样式可以精确地控制页面中每个元素的字体样式、背景、排列方式、区域尺寸和边框等；CSS样式还能够简化网页

2、代码格式，使得下载显示的速度加快。应用外部链接样式表，可以一次完成多个页面中网页内容的显示样式修改，极大地减少了用户的重复劳动量。任务2创建CSS样式Dreamweaver提供的样式表编辑功能可以让用户轻松地进行复杂的样式设置，创建出适用的样式表。创建样式表有两种方法，一种是通过“CSS样式”面板创建，另一种是执行菜单命令创建样式表。阶段1执行菜单命令创建样式表（1）选择“窗口→CSS样式”命令，打开“CSS样式”面板，然后选择“文本→CSS样式→新建”命令。（2）在打开的对话框的“选择器类型”中选择“类”单选按钮，在“名称”文本框中

3、输入自定义样式表名称。（3）在“定义在”选项中，可以选择新建样式表的作用类型，是独立的“新建样式表文件”，还是只对当前网页效果设置有作用的“仅对该文档”，然后单击“确定”按钮。（4）在打开的“.style1的CSS规则定义”对话框中进行各选项的设置后，单击“确定”按钮。（5）在“CSS样式”面板中可以看到新创建好的样式表。阶段2使用CSS面板创建样式表（1）选择“窗口→CSS样式”命令，打开“CSS样式”面板，然后单击“新建CSS规则”按钮。（2）在打开的对话框的“选择器类型”中选择“类”单选按钮，在“名称”文本框中输入自定义样式表名

4、称。（3）在“定义在”选项中，可以选择新建样式表的作用类型，是独立的“新建样式表文件”，还是只对当前网页效果设置有作用的“仅对该文档”，然后单击“确定”按钮。（4）在打开的“.style1的CSS规则定义”对话框中进行各选项的设置后，单击“确定”按钮。（5）在“CSS样式”面板中可以看到新创建好的样式表。任务3设置CSS样式只有对CSS样式的详细设置进行全面的认识，然后掌握利用CSS样式表在网页中进行各种效果设置的具体方法，才能很好地使用CSS样式来美化网页。阶段1设置类型（1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则

5、”对话框，在其中新建一个CSS规则。（2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框。字体：在其下拉列表中，选择要设置的字体。大小：在其下拉列表中，可以选择字体的大小，也可以在文本框中输入字体大小。样式：设置字体的样式，有正常、斜体和斜偏体3种选择。行高：设置一个段落中每行字的行间距。粗细：设置字体的粗细。变体：设置字体的特殊输入，有正常和小型大写字母两种。大小写：设置字母的大小写。修饰：设置字体的效果，为其添加下划线、上划线等。颜色：设置字体颜色。（3）选择需要的选项进行设置，例如

6、在“字体”中选择“宋体”，字体大小为12像素，行高为1.5倍行高，修饰为“无”，颜色为“#666666”。（4）单击“确定”按钮，即可完成“类型”的设置。阶段2设置背景（1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。（2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框，在“分类”列表中选择“背景”选项。背景颜色：在背景颜色中，设置一种颜色作为背景色背景图像：添加背景图像的路径。重复：有不重复、重复、横向重复和纵向重复4个选项，分别用于表示

7、背景图像的铺设方式。附件：有固定和滚动两个选项。选择“固定”背景位置固定，选择“滚动”背景可以跟随内容滚动。水平位置：设置背景图像在水平方向的位置。垂直位置：设置背景图像在垂直方向的位置。（3）选择需要的选项进行设置，这里在背景颜色框中设置颜色为“#CCCCCC”。（4）单击“确定”按钮，即可完成“背景”样式的设置。阶段3设置区块（1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。（2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框，在“分类

8、”列表中选择“区块”选项。单词间距：设置单词之间的间距。字母间距：设置字母或字符的间距，如果要减小字符间距，需要输入一个负值。垂直对齐：指定元素的垂直对齐方式，有“基线下标、上标、顶部、文本顶对齐、中线对齐、底部和文本底