网页设计6：CSS样式.pptVIP

适用软件学院第6课:CSS样式学习目标：01单击此处添加正文，文字是您思想的提炼，请尽量言简意赅地阐述观点。学会使用CSS控制页面元素的显示效果02单击此处添加正文，文字是您思想的提炼，请尽量言简意赅地阐述观点。学习任务：03掌握CSS样式的创建、编辑和应用掌握滤镜的用法重难点：04CSS样式的设置CSS滤镜的设置和使用样式样式是指一组可控制文本块或文本区域外观的格式属性。字符的样式是指字符外观的显示方式。Dreamweaver中的常用样式（文本选项卡下）加粗：文字加粗显示。斜体：文字显示为倾斜格式。加强：加强格式根据浏览器不同规定而显示，多为加粗方式显示。强调：强调格式根据浏览器不同规定显示，多为斜体显示。段落：标签P/P所定义的显示方式。引用块：表明选中的文字是被引用的，有缩进。已编排格式：指的是用户预先对pre/pre标签中的文字排版格式将在浏览器中原样的显示。字符：插入特殊字符（利用键盘不能直接输入的字符。）使用菜单“文本”—“样式”下的子菜单设置文本样式。CSS样式CSS是一种样式表的技术，全称为“级联样式表”，是用来进行网页风格设计的。CSS的作用可以将格式和结构分离HTML语言只是定义了网页的结构和个别要素的功能，而让浏览器自己决定应该让各要素的显示方式。CSS通过将定义结构的部分和定义格式的部分分离，能够对页面的布局施加更多的控制。CSS可以更精确的控制页面的布局。CSS使网页文件变的更小、下载更快。CSS可以更快更容易的维护及更新大量的网页。CSS分类嵌入式在独立的文档应用CSS样式外部链接式应用于多个文档，生成专门的*.CSS文件。创建新CSS样式打开CSS样式面板：“窗口”—“CSS样式”或Shift+F11单击CSS样式面板中的“新建CSS样式”按钮，打开“新建CSS样式”对话框。名称：为新样式命名（名称前必须以英文句点开头，如无此点，Dreamweaver自动添加）选择器类型：类：自定义一个新的样式，可应用于任何标签。标签：重新定义HTML标签，定义之后不需要选中对象就直接应用到页面中去了。高级：针对超级链接状态进行设置。共四种状态。 a:Link：超级链接的正常状态，没有任何动作的时候。 a:Visited：访问过的超级链接状态。 a:Hover：光标移上超级链接状态。 a:Active：选中超级链接状态。3、定义在：新建样式表文件：在网页外部定义一个新的CSS样式表文件。仅对该文档：将CSS样式定义在该文档内部，仅能在该文档中应用。编辑现有样式：内部CSS样式的修改：在CSS面板中右击样式，在弹出菜单中选择“编辑”，在“样式定义”对话框中编辑样式。外部CSS样式的修改：(方法同上)应用CSS样式：应用嵌入式CSS样式如果设置段落将光标定位在段落中或选中段落，如果设置多个段落需要选中这些段落，如果设置字符需要选中字符在CSS样式面板中，选择某个样式右击选择“套用”或者在属性面板样式菜单中选择某个样式。应用外部链接式CSS样式打开CSS样式面板单击“附加样式表”按钮，打开“链接外部样式表”对话框。在“文件/URL”文件域中输入或通过浏览找到外部CSS样式表地址和名称。链接：通过链接调用外部样式表文件导入：在页面打开时加载外部样式表文件。重置：在现有样式的基础上创建新样式。删除样式：选中样式，单击“删除CSS样式”按钮。定义CSS样式设置CSS样式的8个面板：类型、背景、区块、方框、边框、列表、定位、扩展类型：此面板可定义样式的基本类型设置。字体：为样式设置字体类型。大小：定义文本字体的大小。粗细：对字体应用指定的或相对的粗细度。样式：指定样式为普通、斜体或偏斜体。变量：设置字体变量（主要应用于英文）.行高：设置文本所在地方的行高。大小写：设置文本的大小写状态（应用于英文。）装饰：使用下划线、上划线、删除线装饰文本。闪烁效果只在NC浏览器中可以看到。颜色：定义文本颜色。背景：此面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。背景颜色：设置元素的背景色。背景图像：设置元素的背景图像。重复：确定背景图像是否以及如何重复。单击此处可添加副标题重复：在元素的背景部分水平和垂直方向平铺图像。不重复：在元素的开头显示一遍图像。横向重复：在水平方向重复显示纵向重复：在垂直方向重复显示附件：固定背景图像在最初位置或者跟随内容滚动。有些浏览器会将固定当作滚动看待。水平位置：指定背景图像的水平位置。左对齐、右对齐和居