网页制作技术（第二版）-电子教案-许莉12.任务十二应用CSS样式表.pptVIP

网页制作技术（第二版） 主编 许莉 中国水利水电出版社 网页设计与制作 学习目标 了解CSS样式的特点 掌握CSS样式的创建方法 掌握CSS样式中各类样式的定义方法。 学会管理CSS样式及CSS样式的应用 利用CSS样式表定义网页元素 本章结束 尚辅网 / 任务十二 应用CSS样式表 任务十二 应用CSS样式表 目录： 知识1 CSS样式表 知识2 CSS样式表的添加方法 知识3 内部CSS与外部CSS 知识4 样式的创建与编辑 任务1 制作类样式 任务2 制作HTML标签样式 任务3 制作链接样式 任务4 CSS样式化网页 任务十二 应用CSS样式表 知识1 CSS样式表 1. CSS样式表的特点 美化页面 方便更新 2. CSS样式表的类型 自定义 CSS 样式 HTML 标签样式 CSS 链接样式 知识2 CSS样式表的添加方法 1.添加在标签内 p style=” font-size:10pt; color:#00ff00”css样式表/p 这种方法的特点是使用简单、显示直观，但无法发挥样式表的优势。 2.添加在头文件中 head style type=”text/css” ! 样式表内容-- /style /head 经常使用的一种添加样式表的方法。 3.附加样式表 head link href=css1.css“ rel=stylesheet type=text/css /head 此方法适合大型网站的 CSS 样式定义。 知识3 内部CSS与外部CSS 1.内部CSS 只能在本文档中使用的CSS样式，称为内部CSS。使用方法1、2添加的样式表属内部CSS。 2.外部CSS CSS 外部样式表是一个包含样式和格式规范的外部文本文件，编辑外部CSS 样式表后，链接到该CSS 样式表的所有文档将全部更新。在Dreamweaver中可以导出文档中包含的CSS 样式以创建新的CSS 样式表，然后附加或链接到外部样式表以应用那里所包含的样式。 知识4 样式的创建与编辑 要创建CSS样式首先要打开“CSS样式”面板，选择【窗口】|【CSS样式】命令或按【Shift+F11】键可打开“CSS样式”面板。 在“CSS样式”面板中单击“新建CSS样式”按钮或在“CSS样式”窗口中单击鼠标右键在弹出的快捷菜单中选择“新建”命令，打开“新建CSS样式”对话框，即可创建样式 。 任务1 制作类样式 自定义文字样式“.text1”，如图所示。 任务2 制作HTML标签样式 对于表格排版的页面，所有文字都在单元格 td 标签中，因此，使用 HTML 样式统一对这些文字进行样式美化是最高效率的方法。 任务3 制作链接样式 设置网站中超链接样式，超链接默认状态为橙色无下划线，访问过后为灰色有下划线，鼠标悬停时和激活时为红色有下划线。 弹出菜单中提供的选择器包括： a :link，a:visited，a:hover和a:active 任务3 制作链接样式 任务4 CSS样式化网页 *