《javascript特效代码》由会员分享，可在线阅读，更多相关《javascript特效代码（8页珍藏版）》请在金锄头文库上搜索。
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文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通
3、常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。简单地说，CSS就是用于设置网页样式的一套规范，他和HTML都是一个共同的组织W3C负责制定和发布的。下面说下CSS和HTML之间的关系，HTML是用于定义一个网页的内容和结构，CSS用于定义这个网页的形式。因为对一个网页而言，他既要求有清晰的结构和丰富的内容，同时也要求有良好的外观，非常美观的、漂亮的页面表现形式。这样使用两套规范可以实现这个目标，而且也有利于对网页进行维护。因此就发布了两套规范，HTML和CSS，分别用于定义网页的内容和形式。为什么使用CSS样式
4、表呢？（1）、HTML标签的外观样式比较单一，颜色只有黑白而且字体类型和大小无变化。（2）、样式表的作用相当于华丽的衣服（3）、样式表能实现内容与样式的分离，方便团队开发4.1.2、样式表的基本语法样式表由样式规则组成，这些规则告诉浏览器如何显示文档。一个样式（STYLE）的基本语法由3部分构成：selector(选择器)，属性(property)和属性值(value)。2.1 样式表的基本结构CSS定义可以是一个独立的文件也可以放入HTML文档中，这就和我们后面要将的样式表的嵌入方式有关，在这里不多讲，后面会重点讲解。不管是独立的文件还是HTML文档所有的样式规则都必须放在标签对之间。如果是
5、嵌入文档中，一般位于HTML文件的头部，即标签之间定义的规则就可应用到当前的页面中了。关于这些规则的具体意思，下面我们来重点讲解。2.2 样式规则刚才我们也说了，CSS的具体语法是由3部分组成，选择器，属性和属性值。这里重要的就是选择器，首先来了解下什么是选择器。实际上是这样的，网页上有很多的元素，由各种标记定义，像我们已经学过的有文本、段落、图像、表格等，当我需要对其中的某些元素进行设置的时候，我必须先指定哪些元素要进行设置，那么就需要选择，CSS选择器就是这样的概念来选择需要定义设置的页面标记。在CSS中，选择器可以有多种形式。基本上包括三种标记选择器，类选择器和ID选择器。（1）标记选择
6、器标记选择器中前面是选择器的名称，后面大括号内表示声明的内容，也就是说，前面的选择器用于定义你选中的网页中的哪些元素，后面的声明用于说明这些元素以什么样的形式显示。属性和值要用冒号隔开，如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开。举例说明。你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义:h1, h2, h3, h4, h5, h6 color: green (这个组里包括所有的标题元素，每个标题元素的文字都为绿色)p, table font-size: 9pt (段落和表格里的文字尺寸为9号字)效果完全等效于:p font-si
7、ze: 9pt table font-size: 9pt （2）类选择符用类选择符你能够把相同的元素分类定义不同的样式，而且也可以把不同的元素定义相同的样式。定义类选择符时，在自定类的名称前面加一个点号。然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数。4.1.3、常用的样式属性CSS的属性非常庞大，庞大的好几本书都写不完，下面我们只列出常用的且经常使用的CSS属性进行学习。1 文本属性文本属性主要用来对网页中的文字进行控制，如控制文字的大小、类型、样式、颜色以及对齐方式等，从而使页面中的文本达到我们想要的外观。文本属性说 明font-size字体大小font-famil
8、y字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐字体大小属性(font-size)：这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px(pixel)。字体风格属性(font-style)：这个属性有三个值可选：normal, italic, oblique。normal是缺省值，italic, oblique都是斜体显示。字体浓淡属性(font-weight)：这个属性常用值是normal和bold，normal是缺省值。文本对齐属性(text-align)：这个属性用来设定文本的对齐方式。有以下值：left (居左
9、，缺省值) 、right (居右) 、center (居中) 、justify (两端对齐)文本修饰属性(text-decoration)：这个属性主要设定文本划线的属性。有以下值：none (无，缺省值) 、underline (下划线) 、overline (上划线) 、line-through (当中划线)2 背景属性恰当的使用背景，可以使页面既美观显示速度又快。背景包括背景颜色、背景图像以及背景图像以何种方式平铺在制定的区域内。背景属性说 明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被
10、重复可取值repeat-x、 repeat、 no-repeat、repeat-y背景颜色属性(background-color)：这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性背景图片属性(background-image)：这个属性为HTML元素设定背景图片，相当于HTML中background属性背景重复属性(background-repeat)：这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。r
11、epeat-x 背景图片横向重复 repeat-y 背景图片竖向重复 no-repeat 背景图片不重复3 方框属性 方框属性其实就是对应CSS盒子模型，CSS盒子模型都具备方框属性。属 性CSS名称说 明边界属性margin-top设置对象的上边距margin-right设置对象的右边距margin-bottom设置对象的下边距margin-left设置对象的左边距边框属性border-style设置边框的样式border-width设置边框的宽度border-color设置边框的颜色填充属性padding-top设置内容与上边框之间的距离padding-right设置内容与右边框之间的距离
12、padding-bottom设置内容与下边框之间的距离padding-left设置内容与左边框之间的距离边框风格属性(border-style)：这个属性用来设定上下左右边框的风格，它的值如下：none (没有边框，无论边框宽度设为多大) 、dotted (点线式边框) dashed (破折线式边框) 、solid (直线式边框) 、double (双线式边框) groove (槽线式边框) 、ridge(脊线式边框) 、inset (内嵌效果的边框) outset (突起效果的边框)边框宽度属性(border-width)：这个属性用来设定上下左右边框的宽度，它的值如下：medium (是缺
13、省值) 、thin (比medium细) 、thick (比medium粗) 、用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。单边边框属性上下左右四个边框不但可以统一设定，也可以分开设定。设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。设定下边框属性，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。设
14、定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。设定上边框属性，你可以使用border-right, border-right-width, border-right-style, border-right-color。最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。我们把它们分别定义不同的效果：a:link color: #FF0000; text-de
15、coration: none /* 未访问的链接 */a:visited color: #00FF00; text-decoration: none /* 已访问的链接 */a:hover color: #FF00FF; text-decoration: underline /* 鼠标在链接上 */a:active color: #0000FF; text-decoration: underline /* 激活链接 */4.1.4. 样式表的3类应用方式下面我们来介绍在中如何来引入CSS，我们知道CSS是一个独立的规范，HTML也是一个独立的规范，那么二者是如何融合在一起共同为网页服务的呢？我们说在中引入的方法有3种。下面我们来逐一介绍。1 行内样式表所谓行内样式表，就是把CSS样式规则以STYLE属性直接定义在元素标记中，STYLE属性后的内容就是CSS的一些属性和属性值。这种方式引入CSS其作用范围是只对其修饰的标记起作用。这种用法的有点事可灵巧应用样式于个标签中，但是缺点是没有
