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

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