05 CSS样式表的设置和应用

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