1、4-1第 4 章 CSS 样式特效课程目标1、 会使用 style样式属性动态改变边框颜色2、 会使用 className类名属性动态改变按钮背景图片3、 会使用 display显示属性实现层或图片的隐藏/显示和切换特效教学过程在第 3 章中，已学习了 window 对象下一个非常重要的对象 document，使用该对象能控制页面中所有的元素。不过，在第 3 章中我们使用 document 对象主要用来控制页面中的层和表单元素，从而实现浮动广告窗口和复选框全选或反选的功能。本章将介绍另一种比较特别的特效CSS 样式特效。通过定义 CSS 样式，就可以制作出绚丽多彩的页面。不过为了能动态地改变页
2、面或局部区域的显示外观，还需要学习如何使用 Javascript 控制 CSS 样式，也就是 CSS 样式特效。样式特效非常多，本章主要讲解一些在商业网站中见得比较多的经典的常用的样式特效，如改变按钮背景图片特效，层的显示/隐藏特效、图片的显示 /隐藏特效等。下面开始CSS 样式特效的制作之旅吧！4.1、回顾已学的 CSS 样式表4.1.1 CSS简介CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表” ）是一组格式设置规则，用于控制 Web页面的外观。通过使用 CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在 HTML文档中，而用于定
3、义表现形式的 CSS规则则存放在另一个文件中或 HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使 HTML文档代码更加简练，缩短浏览器的加载时间。简单地说，CSS 就是用于设置网页样式的一套规范，他和 HTML都是一个共同的组织 W3C负责制定和发布的。4-2下面说下 CSS和 HTML之间的关系，HTML 是用于定义一个网页的内容和结构，CSS用于定义这个网页的形式。因为对一个网页而言，他既要求有清晰的结构和丰富的内容，同时也要求有良好的外观，非常美观的、漂亮的页面表现形式。这样使用两套规范可以实现这个目标，而且也有利于对网页进行维
4、护。因此就发布了两套规范，HTML 和 CSS，分别用于定义网页的内容和形式。为什么使用 CSS样式表呢？（1） 、HTML 标签的外观样式比较单一，颜色只有黑白而且字体类型和大小无变化。（2） 、样式表的作用相当于华丽的衣服（3） 、样式表能实现内容与样式的分离，方便团队开发4.1.2、样式表的基本语法样式表由样式规则组成，这些规则告诉浏览器如何显示文档。一个样式（STYLE）的基本语法由 3部分构成：selector(选择器)，属性(property)和属性值(value)。2.1 样式表的基本结构CSS定义可以是一个独立的文件也可以放入 HTML文档中，这就和我们后面要将的样式表的嵌入方
5、式有关，在这里不多讲，后面会重点讲解。不管是独立的文件还是 HTML文档所有的样式规则都必须放在标签对之间。如果是嵌入文档中，一般位于 HTML文件的头部，即标签之间定义的规则就可应用到当前的页面中了。关于这些规则的具体意思，下面我们来重点讲解。2.2 样式规则刚才我们也说了，CSS 的具体语法是由 3部分组成，选择器，属性和属性值。这里重要的就是选择器，首先来了解下什么是选择器。实际上是这样的，网页上有很多的元素，由各种标记定义，像我们已经学过的有文本、段落、图像、表格等，当我需要对其中的某些元素进行设置的时候，我必须先指定哪些元素要进行设置，那么就需要选择，CSS 选择器就是这样的概念来选
6、择需要定义设置的页面标记。在4-3CSS中，选择器可以有多种形式。基本上包括三种标记选择器，类选择器和 ID选择器。（1）标记选择器标记选择器中前面是选择器的名称，后面大括号内表示声明的内容，也就是说，前面的选择器用于定义你选中的网页中的哪些元素，后面的声明用于说明这些元素以什么样的形式显示。属性和值要用冒号隔开，如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开。举例说明。你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义:h1, h2, h3, h4, h5, h6 color: green (这个组里包括所有的标题元素，每个标题元素的
7、文字都为绿色)p, table font-size: 9pt (段落和表格里的文字尺寸为 9号字)效果完全等效于:p font-size: 9pt table font-size: 9pt （2）类选择符用类选择符你能够把相同的元素分类定义不同的样式，而且也可以把不同的元素定义相同的样式。定义类选择符时，在自定类的名称前面加一个点号。然后用不在不同的段落里，只要在 HTML标记里加入你定义的 class参数。4.1.3、常用的样式属性CSS 的属性非常庞大，庞大的好几本书都写不完，下面我们只列出常用的且经常使用的 CSS 属性进行学习。1 文本属性文本属性主要用来对网页中的文字进行控制，如控制
8、文字的大小、类型、样式、颜色以及对齐方式等，从而使页面中的文本达到我们想要的外观。文本属性 说 明font-size 字体大小4-4font-family 字体类型font-style 字体样式color 设置或检索文本的颜色text-align 文本对齐字体大小属性(font-size)：这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是 pt 和 px(pixel)。字体风格属性(font-style) ：这个属性有三个值可选：normal, italic, oblique。 normal 是缺省值，italic, oblique 都是斜体显示。字体浓淡属性(font-
9、weight) ：这个属性常用值是 normal 和 bold，normal 是缺省值。文本对齐属性(text-align) ：这个属性用来设定文本的对齐方式。有以下值：left (居左，缺省值) 、right (居右) 、center (居中) 、justify (两端对齐)文本修饰属性(text-decoration)：这个属性主要设定文本划线的属性。有以下值：none (无，缺省值) 、underline (下划线) 、overline (上划线) 、line-through (当中划线 )2 背景属性恰当的使用背景，可以使页面既美观显示速度又快。背景包括背景颜色、背景图像以及背景图像以
10、何种方式平铺在制定的区域内。背景属性 说 明background-color 设置背景颜色background-image 设置背景图像4-5background-repeat设置一个指定的图像如何被重复可取值 repeat-x、 repeat、 no-repeat、repeat-y背景颜色属性(background-color)：这个属性为 HTML 元素设定背景颜色，相当于 HTML 中 bgcolor 属性背景图片属性(background-image) ：这个属性为 HTML 元素设定背景图片，相当于 HTML 中 background 属性背景重复属性(background-repe
11、at) ：这个属性和 background-image 属性连在一起使用，决定背景图片是否重复。如果只设置 background-image 属性，没设置 background-repeat 属性，在缺省状态下，图片既横向重复，又竖向重复。repeat-x 背景图片横向重复 repeat-y 背景图片竖向重复 no-repeat 背景图片不重复3 方框属性方框属性其实就是对应 CSS 盒子模型，CSS 盒子模型都具备方框属性。属 性 CSS 名称 说 明margin-top 设置对象的上边距margin-right 设置对象的右边距margin-bottom 设置对象的下边距边界属性margi
12、n-left 设置对象的左边距border-style 设置边框的样式border-width 设置边框的宽度边框属性border-color 设置边框的颜色padding-top 设置内容与上边框之间的距离padding-right 设置内容与右边框之间的距离填充属性padding-bottom 设置内容与下边框之间的距离4-6padding-left 设置内容与左边框之间的距离边框风格属性(border-style)：这个属性用来设定上下左右边框的风格，它的值如下：none (没有边框，无论边框宽度设为多大) 、dotted (点线式边框) dashed (破折线式边框 ) 、solid
13、(直线式边框) 、double (双线式边框) groove (槽线式边框 ) 、ridge( 脊线式边框) 、inset (内嵌效果的边框) outset (突起效果的边框)边框宽度属性(border-width)：这个属性用来设定上下左右边框的宽度，它的值如下：medium (是缺省值 ) 、thin (比 medium 细) 、thick (比 medium 粗) 、用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。单边边框属性上下左右四个边框不但可以统一设定，也可以分开设定。设定上边框属性，你可以使用 border-
14、top, border-top-width, border-top-style, border-top-color。设定下边框属性，你可以使用 border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。设定左边框属性，你可以使用 border-left, border-left-width, border-left-style, border-left-color。设定上边框属性，你可以使用 border-right, border-right-width, border-right-style,
15、border-right-color。最常用的是 4 种 a（锚）元素的伪类，它表示动态链接在 4 种不同的状态：link、visited 、active、hover （未访问的链接、已访问的链接、激活链接和鼠标停留在链接上） 。我们把它们分别定义不同的效果：a:link color: #FF0000; text-decoration: none /* 未访问的链接 */4-7a:visited color: #00FF00; text-decoration: none /* 已访问的链接 */a:hover color: #FF00FF; text-decoration: underline
16、 /* 鼠标在链接上 */a:active color: #0000FF; text-decoration: underline /* 激活链接 */4.1.4. 样式表的 3 类应用方式下面我们来介绍在中如何来引入 CSS，我们知道 CSS 是一个独立的规范，HTML 也是一个独立的规范，那么二者是如何融合在一起共同为网页服务的呢？我们说在中引入的方法有 3 种。下面我们来逐一介绍。1 行内样式表所谓行内样式表，就是把 CSS 样式规则以 STYLE 属性直接定义在元素标记中，STYLE 属性后的内容就是 CSS 的一些属性和属性值。这种方式引入 CSS 其作用范围是只对其修饰的标记起作用。
17、这种用法的有点事可灵巧应用样式于个标签中，但是缺点是没有整篇文件的统一性。行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用2 内嵌样式表内嵌样式表时写在之间的，如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。使用格式如下：样式规则这种用法的有点就是在于整篇文件的统一性，只要是有声明的原件即会套用该样式规则，缺点就是在个别原件的灵活度不足。3 外部样式表文件如果希望一个网站中多个页面的样式保持一致，如何解决？使用外部样式表文件样式表可以解决。根据样式文件与网页的关联方式又分为：链接（LINK ）外部样式表4-8导入（import ）外部样式表使用 LINK（链接）标
18、签 :第一步：创建样式表文件 newstyle.css 第二步：把样式文件和网页绑定第三步：浏览查看各网页使用import 导入 ，语法： import newstyle.css;其实 link 和import 的最根本区别就是， link 是一个 html 的一个标签，而import 是 css 的一个标签 ,，link 除了调用 css 外还可以有其他作用譬如声明页面链接属性，声明目录，rss 等等，而import 就只能调用 css。加载 css link 与import 的区别：其实 link 与 import 在显示效果上还是有很大区别的，基本上来看 link 的加在会在页面显示之前
19、全部加在完全，而 import 会是读取完文件之后加在，所以如果网速很好或很快的情况下，会出现先开始无 css 定义，而后加载 css 定义。import 加载页面时开始的瞬间会有闪烁（无样式表的页面） ，然后才恢复正常（加载样式后的页面） ，Link 没有这个问题。他们从方法上是一样的，只是在浏览器识别上有点差距，link 在支持 CSS 的浏览器上都支持而import 只在 5.0 一行的版本有效，而且还能用于浏览器过滤也就是 hack 的使用，兼容一些老版本的浏览器。所以最好还是使用 link 通用型更强，但是对于高版本的浏览器，也就是现在的浏览器来说，其实都一样，这是个没有太大意义的区分。4-9因此，总的来说，行内样式是写在标签里面的，只对所在的标签有效。内嵌样式是写在标签之间的，只对所在的网页有效。外部样式文件时一个以.CSS 为后缀的 CSS 文件，这个样式文件可以被多个网页引用，从而保证多个网页有统一风格。
