网页制作教程-样式与css.ppt

临沂市河东区职业中等专业学校 网页制作基础教程 ——Dreamweaver CS6 样式与CSS 知识准备 一、什么是“样式”？ 1、样式：样式表也称样式，是目前网页制作中普遍使用的一项技术，它通过设置HTML代码标签来实现对网页文本的字体、颜色、填充、边距和字间距等进行格式操作。 2、作用： （1）使用样式表自定义文本样式风格； （2）固定网页中的文字大小。 二、CSS CSS是Cascading Style Sheets（层叠样式表单）的简称。对于设计者来说它是一个非常灵活的工具，它允许设计者在HTML文档中加入样式，不但不必再把繁杂的样式定义编写在文档结构中，而且可以将所有关于文档的样式指定内容全部脱离出来，在行内定义，在标题中定义，甚至作为外部样式文件供HTML调用。CSS是当前网页设计中不可缺少的技术。 学习要点 使用CSS设置行间距 01 使用CSS去掉文本超链接下画线 02 使用CSS滤镜处理图片 03 使用CSS设置行间距 01 1.新建CSS规则 2.应用“.hangjv”样式 3.套用“.hangjv”样式 使用CSS去掉文本超链接下画线 02 在“新建CSS规则”对话框中，选择器类型选择“复合内容（基于选择的内容）”，单击“选择器名称”右边下拉框的 ，在下拉选项中选择“a:link”，单击“确定”按钮。 选择“a:hover”，表示鼠标指向链接时的效果； 选择“a:active”，表示链接激活时的效果； 选择“a:visited”，表示已点击过的链接效果。 在“a:link的CSS样式定义”对话框中，选择“none” （也就是无），单击“确定”按钮。此时，可以发现热区文字下的下划线已经消失。 使用CSS滤镜处理图片 03 1、alpha滤镜 （1）新建CSS规则 （2）设置alpha滤镜参数 （3）保存网页，在浏览器中预览 2、Wave滤镜 （1）新建CSS规则 （2）设置wave滤镜参数 （3）保存网页，在浏览器中预览 使用CSS 小结 一、使用CSS设置行间距 二、使用CSS去掉文本超链接下画线 三、使用CSS滤镜处理图片 作业 一、预习项目2 二、写出本节课的实训报告 谢谢 二〇一六年四月十九日