05 CSS样式表的设置和应用.ppt

《05 CSS样式表的设置和应用.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、CSS样式表的设置和应用前言我们已经学习过要改变字体的颜色大小等，可以先选取文字，再在属性面板上设置，但试想想，如果文字或图片非常多，都要这样一一设置会不会很麻烦呢？下面我们学习另一种定义的方法。什么是CSS样式？定义：CSS样式是层叠样式单（CascadingStyleSheets）的简称。它是一系列格式设置规则，它们控制Web页面内容的外观。代码位置：使用CSS设置页面格式时，请将内容与表现形式分开。页面内容（即HTML代码）驻留在HTML文件自身中，而用于定义代码表现形式的CSS规则驻留在

2、另一个文件（外部样式表）或HTML文档的另一部分（通常为文件头部分）中。功能：使用CSS可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。它允许作者在HTML文档中加入样式（如字体类型、颜色、大小等等）。利用它可以对网页中的文本内容进行精确的格式化控制。CSS样式的优、缺点CSS样式的优点：1.CSS样式不仅可以在一篇文档中使用，而且用于控制多个文档的格式。只需将CSS定义在文档之外，然后将之链接到多个文档即可。2.CSS样式不仅可以控制大多数传统的文本格式属性，例如：

3、字体、字号、对齐方式等，还可以定义一些特殊的属性，例如：定位、特效和鼠标轮替等。CSS样式的种类：自定义CSS样式：它同字处理程序（如：WORD）中使用的样式的概念类似，只是它不在有字符样式和段落样式的区别。你可以在任何文本上应用自定义的CSS样式，无论该文本是一个完整的段落还是一个选定的文本块。HTML标记样式CSS选择器样式：比如它可以用于格式化超级链接创建新CSS样式-1默认状态下，在新建的空白文档中没有定义任何CSS样式，必须创建新的CSS样式，然后才能在文档中使用他们。创建新CSS样式

4、-2步骤：显示CSS样式面板点击新建CSS样式按钮创建自定义CSS样式附加CSS样式新建CSS样式删除CSS样式编辑CSS样式使用CSS样式实现文字特效(1)窗口菜单->CSS样式（Shift+F11）(2)按添加样式按钮(3)输入样式名称123注意：①名称要以.开始；②类型为:“创建自定义样式表”；③定义：只是这个文档。使用CSS样式实现文字特效(4)确定->CSS样式定义对话框(5)设定(在相应对话框设定类型背景等)->确定即可设置样式的类型对话框无下划线设置样式的背景色对话框使用css样式

5、使链接个性化例如:1、除去链接文字的下划线2、动态放大、缩小链接字体3、改变4种状态下链接文字的底色1、除去链接文字的下划线（1）利用CSS编辑器实现对于链接文字、光标移到链接上时的文字、鼠标点中链接时的文字以及访问过的链接文字的设置。如图：新建CSS样式1、除去链接文字的下划线（2）除去链接文字的下划线2、动态放大、缩小链接字体修改CSS编辑器中，鼠标移到链接文字上时的属性3、改变4种状态下链接文字的底色新建CSS样式定义在新建样式表文件输入文件名修改各种链接文字的背景颜色将创建好的c

6、ss样式应用到文档的对象中在其他网页中可以应用已创建好的CSS样式文件。附加样式表使用CSS样式实现文字特效CSS练习添加一个CSS,名称：.eff5,在CSS样式定义对话框中设定“方框”->宽：auto,高：10->扩展名(extensions)->”过滤器”->输入（先选再改）Wave(Add=true,Freq=4,LightStrength=2,Phase=0,Strength=2)->选择文本->单击.eff5->另外两种效果:过滤器=Glow(Color=#33ccff,Streng

7、th=10)过滤器=Shadow(Color=#cccccc,Direction=right)使用css样式格式化超链接1见下一页步骤:1.在新建css样式的对话框中选择“类型”中的第三种----使用css样式选择器2.点击选择器按钮,打开列表框使用css样式格式化超链接2a:link鼠标未经过，定义正常时超级链接文本的属性A:visited访问后状态，定义访问后超链接文本的属性a:hover定义鼠标经过超链接时的文字属性A:active鼠标按下状态，定义鼠标点击超链接时的文字属性步骤:3.在列

8、表框中选择相应的选项即可