《CSS样式表的设置和应用课件》由会员分享，可在线阅读，更多相关《CSS样式表的设置和应用课件（19页珍藏版）》请在金锄头文库上搜索。
1、CSS样式表的设置和应用,前言,我们已经学习过要改变字体的颜色大小等，可以先选取文字，再在属性面板上设置，但试想想，如果文字或图片非常多，都要这样一一设置会不会很麻烦呢？下面我们学习另一种定义的方法。,什么是CSS样式？,定义： CSS样式是层叠样式单（Cascading Style Sheets）的简称。它是一系列格式设置规则，它们控制 Web 页面内容的外观。 代码位置：使用 CSS 设置页面格式时，请将内容与表现形式分开。页面内容（即 HTML 代码）驻留在 HTML 文件自身中，而用于定义代码表现形式的 CSS 规则驻留在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件
2、头部分）中。 功能：使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。它允许作者在HTML文档中加入样式（如字体类型、颜色、大小等等）。利用它可以对网页中的文本内容进行精确的格式化控制。,CSS样式的优、缺点,CSS样式的优点： 1. CSS样式不仅可以在一篇文档中使用，而且用于控制多个文档的格式。只需将CSS定义在文档之外，然后将之链接到多个文档即可。 2. CSS样式不仅可以控制大多数传统的文本格式属性，例如：字体、字号、对齐方式等，还可以定义一些特殊的属性，例如：定位、特效和鼠标轮替等。,CSS样式的种类：,自定义CSS样式：它同字处理程序（如：W
3、ORD）中使用的样式的概念类似，只是它不在有字符样式和段落样式的区别。你可以在任何文本上应用自定义的CSS样式，无论该文本是一个完整的段落还是一个选定的文本块。 HTML标记样式 CSS选择器样式：比如 它可以用于格式化超级链接,创建新CSS样式-1,默认状态下，在新建的空白文档中没有定义任何CSS样式，必须创建新的CSS样式，然后才能在文档中使用他们。,创建新CSS样式-2,步骤： 显示CSS样式面板 点击新建CSS样式按钮 创建自定义CSS样式,附加CSS样式,新建CSS样式,删除CSS样式,编辑CSS样式,使用CSS样式实现文字特效,(1) 窗口菜单-CSS样式（Shift+F11） (
4、2) 按添加样式按钮 (3) 输入样式名称,1,2,3,注意：名称要以 . 开始； 类型为:“创建自定义样式表”； 定义：只是这个文档。,使用CSS样式实现文字特效,(4) 确定-CSS样式定义对话框 (5) 设定( 在相应对话框设定类型 背景等)-确定即可,设置样式的类型对话框,无下划线,设置样式的背景色对话框,使用css样式 使链接个性化,例如: 1、除去链接文字的下划线 2、动态放大、缩小链接字体 3、改变4种状态下链接文字的底色,1、除去链接文字的下划线（1）,利用CSS编辑器实现对于链接文字、光标移到链接上时的文字、鼠标点中链接时的文字以及访问过的链接文字的设置。 如图：,新建CSS
5、样式,1、除去链接文字的下划线（2）,除去链接文字的下划线,2、动态放大、缩小链接字体,修改CSS编辑器中，鼠标移到链接文字上时的属性,3、改变4种状态下链接文字的底色,新建CSS样式定义在新建样式表文件输入文件名修改各种链接文字的背景颜色,将创建好的css样式 应用到文档的对象中,在其他网页中可以应用已创建好的CSS样式文件。,附加样式表,使用CSS样式实现文字特效,CSS练习 添加一个CSS, 名称：.eff5, 在CSS样式定义对话框中设定“方框”-宽：auto, 高：10-扩展名(extensions) -”过滤器”- 输入（先选再改） Wave(Add=true, Freq=4, L
6、ightStrength=2, Phase=0, Strength=2) -选择文本-单击.eff5 - 另外两种效果: 过滤器=Glow(Color=#33ccff, Strength=10) 过滤器= Shadow(Color=#cccccc, Direction=right),使用css样式格式化超链接1,见下一页,步骤: 1.在新建css样式的对话框中选择“类型”中的第三种-使用css样式选择器 2.点击选择器按钮,打开列表框,使用css样式格式化超链接2,a:link 鼠标未经过，定义正常时超级链接文本 的属性 A:visited 访问后状态，定义访问后超链接文本的属性 a:hover 定义鼠标经过超链接时的文字属性 A:active 鼠标按下状态，定义鼠标点击超链接时的文字属性,步骤: 3. 在列表框中选择相应的选项 即可,
