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