网页设计6：CSS样式.ppt

《网页设计6：CSS样式.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计适用软件学院第6课:CSS样式学习目标：学会使用CSS控制页面元素的显示效果学习任务：1、掌握CSS样式的创建、编辑和应用2、掌握滤镜的用法重难点：1、CSS样式的设置2、CSS滤镜的设置和使用样式样式是指一组可控制文本块或文本区域外观的格式属性。字符的样式是指字符外观的显示方式。Dreamweaver中的常用样式（文本选项卡下）加粗：文字加粗显示。斜体：文字显示为倾斜格式。加强：加强格式根据浏览器不同规定而显示，多为加粗方式显示。强调：强调格式根据浏览器不同规定显示，多为斜体显示。段落：标签

2、式。引用块：表明选中的文字是被引用的，有缩进。已编排格式：指的是用户预先对

3、可以更精确的控制页面的布局。CSS使网页文件变的更小、下载更快。CSS可以更快更容易的维护及更新大量的网页。CSS分类嵌入式在独立的文档应用CSS样式外部链接式应用于多个文档，生成专门的*.CSS文件。创建新CSS样式打开CSS样式面板：“窗口”—“CSS样式”或Shift+F11单击CSS样式面板中的“新建CSS样式”按钮，打开“新建CSS样式”对话框。1、名称：为新样式命名（名称前必须以英文句点开头，如无此点，Dreamweaver自动添加）2、选择器类型：类：自定义一个新的样式，可应用于任何标签。标签：重新定义HTML标签

4、，定义之后不需要选中对象就直接应用到页面中去了。高级：针对超级链接状态进行设置。共四种状态。a:Link：超级链接的正常状态，没有任何动作的时候。a:Visited：访问过的超级链接状态。a:Hover：光标移上超级链接状态。a:Active：选中超级链接状态。3、定义在：新建样式表文件：在网页外部定义一个新的CSS样式表文件。仅对该文档：将CSS样式定义在该文档内部，仅能在该文档中应用。编辑现有样式：内部CSS样式的修改：在CSS面板中右击样式，在弹出菜单中选择“编辑”，在“样式定义”对话框中编辑样式。外部CSS样式的修改：(

5、方法同上)应用CSS样式：应用嵌入式CSS样式如果设置段落将光标定位在段落中或选中段落，如果设置多个段落需要选中这些段落，如果设置字符需要选中字符在CSS样式面板中，选择某个样式右击选择“套用”或者在属性面板样式菜单中选择某个样式。应用外部链接式CSS样式打开CSS样式面板单击“附加样式表”按钮，打开“链接外部样式表”对话框。在“文件/URL”文件域中输入或通过浏览找到外部CSS样式表地址和名称。链接：通过链接调用外部样式表文件导入：在页面打开时加载外部样式表文件。重置：在现有样式的基础上创建新样式。删除样式：选中样式，单击“删

6、除CSS样式”按钮。定义CSS样式设置CSS样式的8个面板：类型、背景、区块、方框、边框、列表、定位、扩展类型：此面板可定义样式的基本类型设置。字体：为样式设置字体类型。大小：定义文本字体的大小。粗细：对字体应用指定的或相对的粗细度。样式：指定样式为普通、斜体或偏斜体。变量：设置字体变量（主要应用于英文）.行高：设置文本所在地方的行高。大小写：设置文本的大小写状态（应用于英文。）装饰：使用下划线、上划线、删除线装饰文本。闪烁效果只在NC浏览器中可以看到。颜色：定义文本颜色。背景：此面板主要是对元素的背景进行设置，包括背景颜色、背

7、景图象、背景图象的控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。背景颜色：设置元素的背景色。背景图像：设置元素的背景图像。重复：确定背景图像是否以及如何重复。重复：在元素的背景部分水平和垂直方向平铺图像。不重复：在元素的开头显示一遍图像。横向重复：在水平方向重复显示纵向重复：在垂直方向重复显示附件：固定背景图像在最初位置或者跟随内容滚动。有些浏览器会将固定当作滚动看待。水平位置：指定背景图像的水平位置。左对齐、右对齐和居中分别是指相对于元素的对齐方式。垂直位置：指定背景图像的垂直位置。顶部、居中、底部

8、分别是指相对于元素的对齐方式。区块：此面板主可定义样式的空格和对齐方式。单词间距：设置单词之间的间距。可以设置负值。字母间距：设置字符之间的间距。可以指定负值。因为中文也是字符，这个参数可以设置文字间的间距。垂直方式：指定元素的垂直对齐方式。通常是相对于其上一级