第4章CSS样式表【推荐课件】.ppt

第4章 使用CSS样式表 第4章 使用CSS样式表 本章要点内容 ： CSS样式表的概念、类型和基本写法。 利用CSS样式表面板创建和应用各种样式表。 详细设置样式表内容。 ? 本章学习目标 了解CSS样式表的概念、特点和分类。 学会创建CSS样式表和应用CSS样式表。 能够定制个性化的CSS样式表。 本章学前要求 能够创建基本的网页。 已经掌握文本和图片的操作和设置。 4.1 CSS样式表简介 4.1.1 什么是CSS HTML语言一直以来有一个缺陷，那就是将显示的效果描述与文件结构混合在一起。但是，XML语言却做到了显示效果描述与文件结构的分离，这样一方面适合各种平台上的正常显示，另一方面也极大的方便了网页制作者，因为对于相同显示效果的页面，制作者只需要设定一种统一的显示效果，所有页面都可以调用这种效果。为了让HTML适应这一形势的新规范，W3C（World Wide Web Consortium）标准化组织就开始为HTML定制样式表机制，也就是今天我们所熟悉的CSS（cascading style sheets）样式表。并且在1996年推出了CSS1，1998年推出了CSS2。目前，两大主流浏览器Netscape 的Navigator 4.0和Microsoft的Internet Explorer 4.0及以后版本都支持CSS样式。 CSS（层叠样式表）其实是一系列格式规则，这些规则由两部分组成：选择符和声明。选择符通常是指样式表的名称或特定的标签，而声明则用于定义样式元素。声明由两部分组成：属性和值。要注意的是，单一选择符的复合样式声明应该用分号隔开。术语“层叠”是指同一个网页应用多个样式表的能力，例如创建两个样式表分别用来设置字体和行距，它们同样用于一个网页。这些规则组合在一起，就可以告诉浏览器怎样去呈现一个文档。 CSS样式表起初或许只为了控制文本的属性，如字体、字号、颜色等，但是随着CSS更高版本的推出，弥补了HTML对传统的文本属性控制的不足，如段落间距、行距等。除了对传统文本的控制，CSS还加入了对其他网页元素属性甚至网页布局的控制，比如图片的显示效果、网页元素的位置、表单元素的边框粗细、鼠标指针的形状、排版定位等，并且这些设置都可以随着CSS样式表文件的更新而动态更新。 4.1.2 CSS的类型 从CSS样式标签的形式来看，在Dreamweaver中主要有三种CSS样式，分别如下： 1. 自定义CSS样式 设计者可以在HTML文件的任何位置自定义一个CSS样式表并命名，页面中的任何元素都可以使用自定义的样式。例如定义了一个名称为“red”的样式表，目的是显示文本的颜色为红色，那么一段文字调用的时候代码如下： .red{font-color:red;} 定义CSS p CLASS=”red”正文/p 整段调用CSS SPAN CLASS=”red”正文/SPAN 部分文字调用CSS 2.重定义特定标签格式 使用这种CSS样式可以改变HTML标记的原意，从而使所有应用了这些标记的HTML文本按照CSS的定义格式显示，例如为body和/body标签定义了CSS，那么所有包含在body和/body标签内的内容都要按照此CSS样式进行显示，代码如下： Body｛font-size: 10pt;｝ 本例将body和/body标签内的所有文本字体都设置为10像素大小。 3. CSS选择器 CSS选择器重定义具体某个标签组合的格式，或重定义包含特定属性的所有标签的格式。最典型的实例就是定义超级链接的各种状态，如鼠标靠近、单击时、单击后等等，代码如下： a:link｛color:#FF0000;｝ 定义正常状态颜色 a:hover{color:#666666;} 定义鼠标靠近时的颜色 a:visited{color:#999999;} 定义访问过的链接的颜色 a:active{color:#333333;} 定义鼠标单击时链接的颜色 4.1.3 CSS基本写法 CSS的写法主要有三种，具体如下： 1. 在HEAD标签内实现 在HEAD内使用HTML的style组件实现也是CSS最基本的写法，通常是将样式表的规则放置在文件头区域，位于HEAD/HEAD中，代码如下： style type=”text/css” 样式表开始 .red｛color:FFFF00；｝ 样式表的内容 /style 样式表结束 type一项表示使用的是text中CSS书写的代码，｛｝的前面部分是样式的类型和名称，｛｝中的是样式的属性和值。 2. 在BODY标签