版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
1、第四章 CSS层叠样式表4.1 CSS的概述CSS是Cascading Style Sheets(层叠样式表)的缩写，其作用是提供为Web文档添加样式的简单机制。这里的“样式（Style）”，指的是Web文档字体的大小、颜色、边框、背景等显示属性；而“层叠（Cascading）”二字，指的是一个Web文档的样式可以从其它样式表中继承而来。关于这一点，我们会在本章的4.3节进行详细的说明。那么，为什么我们需要学习CSS呢？或者说，CSS能够为我们创建Web文档带来什么好处？第二章我们学习HTML语言基础时，我们知道HTML 标签被设计为定义Web文档的布局和内容。通过使用 <h1>、
2、<p>、<table> 这样的标签，HTML 的含义是表达“这是标题”、“这是段落”、“这是表格”之类的信息。然而对于Web文档的设计师来说，这还不够全面。Web文档的设计者不仅仅希望通过HTML这样的标记语言来设计Web文档的布局和内容，还希望通过某种方式设计Web文档的显示属性，通过控制Web文档的视觉效果（通常就是字体的大小，颜色的搭配，背景的选择等）来表达自己独特的、个性化的设计理念。于是HTML也提供了诸如<font size=” ” color=” ”>这样的标签以及与标签搭配的显示属性（如”background, bgcolor”等）来实现这一
3、功能，但这样做存在两个问题：1不同的浏览器对显示属性的解释不同，不同的浏览器提供不同的视觉标签，并且同一属性在不同的浏览器里还可能表达不同的视觉效果。2使用相对独立的HTML所提供的显示属性，不利于整体效果的统一，修改起来也会比较麻烦。例如，假设我们要使某个<table>的第一列的所有表格单元（<td>）的背景色显示为暗红色，那么或许我们可以使用第二章学习的方法，使用<td bgcolor=”#b82222”>这样的标签来标记所有第一列的表格单元来达到这样的目的。那么，如果有一天我们厌烦了这样的视觉效果，而想将其背景色改为纯蓝色，我们就不得不使用<td
4、 bgcolor=”#0000ff”>这样的标签对所有第一列的<td>单元进行替换。假如这个<table>有20行或者更多好吧，你可以想象一下，这是一件多么让人厌烦的工作。因此，我们需要一种能独立于浏览器之外的、能够统一设计并管理所有（不仅仅局限于一个Web文档，而是在同一站点内的所有Web文档）相同类型的Web文档内容的视觉样式的简单机制，这就是CSS。通过这一章的学习，我们要学会CSS的基本语法，CSS的单位和属性，以及CSS的“层叠”规则，并通过一些实例掌握CSS在Web页面设计中的应用。4.2 CSS基础4.2.1 CSS基本语法CSS语言是一种标记语言,
5、它不需要编译,可以直接由浏览器执行，属于浏览器解释型语言。通常，解释型语言的语法都比较简单，CSS也正是如此。一般而言，我们可以先定义一个样式（Style），然后再在html代码中使用这个样式。一个典型的样式的定义由三部分组成，分别是：1 选择符（Selector）：选择符可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE等。你也可以简单的理解为该样式的名字。我们通过它定义一个样式，也通过它使用该样式。2 属性（Property）：需要定义的显示属性，一个样式中可定义多个显示属性。3 属性值（Value）：各属性的取值，包括单位。以下是一个样式一般的语法格式：sel
6、ector property: value;例如：p color:blue;其中，p就是选择符，它对应HTML中的<p>标签；color是属性，表示需要设置<p>标签中的内容颜色；blue是属性值，表示<p>标签中的内容颜色为纯蓝色。最后以一个分号“；”作为一个“属性：值对”的结尾，一个选择符可以包含多条属性，属性间以分号“；”间隔，例如：P color:blue; font-size:12px;定义了一个样式之后，就可以在html代码中使用这一样式。样式的使用（引用）共有三种方式，分别是：内联引用、内部引用（嵌入）与外部引用。1CSS的内联引用内联，即把C
7、SS样式直接作用在html标签中，例如： <p style="font-size:12px; color:blue;"> （该段落的文字大小为12个像素，其颜色为纯蓝色） </p>除了<BASEFONT>、<PARAM>和<SCRIPT>这三个html标签外，STYLE属性可以应用于任意BODY元素(包括<BODY>标签本身)。这个属性将任何数量的CSS声明当作自己的值，而每个声明用分号“；”隔开。使用内联CSS的网页制作者必须将<META>标签里的CONTENT属性设置为text/css，
8、而HTTP-EQUIV属性设置为Content-Style-Type，例如:<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">注意: 中文网页的标记为:<META HTTP-EQUIV="Content-Type" CONTENT="text/css">因为和需要展示的内容混合在一起，内联样式会失去一些样式表的优点。一般情况下，应当尽量避免使用。需要注意的是，使用内联方式时，其样式只在使用了style属性的这一标签中有效，在其它
9、的标签中是无效的。例如： <p style="font-size:12px; color:blue;"> （该段落的文字大小为12个像素，其颜色为纯蓝色） </p> <p> （该段落的文字的显示属性为默认） </p>2CSS的内部引用（嵌入）可以使用<style>标签直接把CSS代码加载到html文档内部，例如：<style type="text/css">/* -文字样式开始- */* 定义在<P>标签中的文字大小为12个像素，颜色为纯蓝色 */P color:blue
10、; font-size:12px; /* -文字样式结束- */</style>在内部引用样式时，<style>标签的type属性必须设置为“text/css”。与内联方式不同的是，一旦在一个html页面中定义了某个标签的显示属性，则其在该页面内所有与之匹配的标签中都有效。例如： <p> （该段落的文字大小为12个像素，其颜色为纯蓝色） </p> <p> （该段落的文字大小也为12个像素，其颜色为纯蓝色） </p>最后需要注意的是，通常<style>标签应放在HEAD部分。3CSS的外部引用外部引用CSS是最好
11、的引入CSS的方式（可以使代码量最小，表现最统一，也是标准网页设计W3C规范所推荐的）。内联引用虽然是一种快捷的方式，但是不利于以后的统一修改和表现的一致性，除了在需要使用样式表的层叠以外，是不提倡使用的。CSS的外部引用可分为2种方式：一种是使用<link>标签，一种是使用<style>标签的“import”方法。使用<link>标签<head><link rel="stylesheet" type="text/css" href="http:/localhost/style.css&qu
12、ot; /></head><LINK>标记应放置在文档的HEAD部分。“rel”属性用于定义连接的文件和HTML文档之间的关系。rel=“stylesheet”指定一个固定或首选的样式而rel=“alternate stylesheet”定义一个交互样式。固定样式在样式表激活时总被应用，一般使用固定样式。“href”属性指出指定外联的CSS文件的地址，可以为相对地址也可为绝对地址。需要注意的是，外联的CSS文件不应包含<head>或<style>这样的html的标签，只需要如：P color:blue; font-size:12px; 这样
13、的代码所组成的文件就可以了。使用import<head><style type="text/css">import url(http:/localhost/style.css);</style></head>url()中的地址仍然可以是相对地址，也可以是绝对地址。需要注意的是，import的CSS文件应当放在<style>标签的开始部分，这是由CSS的层叠规则所决定的。我们将在4.3节详细解释CSS的层叠规则。 4.2.2 CSS的选择符可以通过不同的方式来定义和使用一个选择符。一般来说，除了上面提到的基本方式以外
14、，选择符还可分为以下五种类型：1.选择符组 你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义，例如：h1, h2, h3, h4, h5, h6 color: green （这个组里包括从<h1><h6>的所有的HTML标题元素，每个标题元素的文字都为绿色） p, table font-size: 9pt （段落和表格里的文字尺寸为9号字） 其效果完全等效于： p font-size: 9pt table font-size: 9pt 2.类选择符 使用类选择符你能够把相同的元素分类定义不同的样式。定义类选择符时，在自定类的名称前面
15、加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类： p.right text-align: right p.center text-align: center 然后用在不同的段落里，只要在HTML标记里加入你定义的class参数，例如： <p class="right"> （这个段落里的文本内容是向右对齐的）</p> <p class="center">（这个段落里的文本内容是居中排列的）</p> 注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能
16、和效果简要命名。类选择符还有一种重要的用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式，例如： .center text-align: center （注意选择符前有一个点号“.”）（定义.center的类选择符为文字居中排列） 这样的类可以被应用到任何元素上。下面我们使<h1>元素（标题1）和<p>元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符里的定义，例如：<h1 class="center">（这个标题是居中排列的）</h1> <p clas
17、s="center">（这个段落也是居中排列的）</p> 注意：这种省略HTML标记的类选择符是我们以后最常用的CSS方法。使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。3.ID选择符在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。 定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素： #intro font-size:110%; font-weight:bold; col
18、or:#0000ff; background-color:transparent （字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明） 下面这个例子，ID属性只匹配id="intro"的段落<p>元素： p#intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中的类用ID替代：<p id="intro"> （这个段落向右对齐）</p>
19、; 注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。 4.包含选择符可以单独对某种元素包含关系定义的样式表，如元素1里包含有元素2。这种方式只对在元素1里的元素2定义有效，对单独的元素1或元素2无定义，例如有如下定义： table a font-size: 12px （定义在表格<table>内的链接<a>改变样式，文字大小为12象素；而表格外的链接<a>的文字仍为默认大小，并且表格<table>内的非链接文本的字体也不变。） 5.伪类与伪元素在我们上面所介绍的4种选择符中，其实现是采用模式（pattern）匹配的
20、方式，这里的模式就是我们所定义的选择符的名字和属性。例如在前面介绍的类选择符中，如果我们有如下定义：p.right text-align: right那么当我们在html代码中使用如下<P>标签时：<p class="right"> （这个段落里的文本内容是向右对齐的）</p> 则段落里的文本内容是向右对齐的。而之所以能够实现这样的效果，是因为浏览器在解释代码时，p.right与<p class="right">被认为是一对匹配的模式。伪类或伪元素的实现机制与我们上面介绍的所有选择符都不同。伪类或伪元素对元
21、素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容。下面我们分别介绍常用的伪类和伪元素。 类伪类的语法格式是selector: pseudo class property: value; ，简单地用一个半角英文冒号（:）来隔开选择符和伪类。常用的伪类有：:first-child ，:link，:vistited，:hover，:active，:focus，:lang由于first-child和lang不为IE（internet explorer）支持，我们介绍能够安全使用的四个伪类。由于它们一般应用在锚结点上，因此又被称为锚伪类。下面是一个锚伪类的例子：a:l
22、ink color: red /* 未被访问的链接 红色 */a:visited color: green /* 已被访问过的链接 绿色 */a:hover color: blue /* 鼠标悬浮在上的链接 蓝色 */a:active color: white /* 鼠标点中激活链接 白色 */需要注意的是，首先，用于进行匹配的不是选择符的名字<a>而是其行为（未访问、已访问等）；其次，由于CSS的层叠规则，其书写顺序是不能颠倒的，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。伪类也可以与类结合使用，这时其语法格式为selector
23、.class:pseudo-class property: value，例如：a.tz:link color: red /* 未被访问的链接 红色 */a.tz:visited color: green /* 已被访问过的链接 绿色 */a.tz:hover color: blue /* 鼠标悬浮在上的链接 蓝色 */a.tz:active color: white /* 鼠标点中激活链接 白色 */伪元素伪元素是创造关于html语言能够指定的文档树之外的抽象，例如html不提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，并且还还提供设计师给在源文档中不存在的内容分配样式（例
24、如：:before和:after能够访问产生的内容）的机制。常见的伪元素有：:first-line，:first-letter，:before，:after由于伪元素的语法格式与伪类相同，因此本书不予详细介绍。4.2.3 CSS的单位在CSS中，一共有七种类型的单位，分别是：长度单位、百分比单位、颜色单位、URLs、时间单位、频率单位以及角度单位。下面分别介绍前四种常用单位。 1长度单位 一个长度的值由可选的正号" + "或负号" - "、接着的一个数字以及标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如，1.3 em就不是一个有效的长度的值
25、，但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。 CSS中的长度单位有2种类型：相对值单位与绝对值单位。相对值单位确定一个相对于另一长度属性的长度，表明了其长度单位会随着它的参考值的变化而变化。因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位: em (em，元素的字体的高度，其值相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。) ex (x-height，字母 "x" 的高度。其值相对于字符“x”的高度，此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的
26、默认字体尺寸。) px (像素，相对于屏幕的分辨率) 绝对值长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位: in (英寸，1英寸=2.54厘米) cm (厘米，1厘米=10毫米) mm (米) pt (点，1点=1/72英寸) pc (帕，1帕=12点)一般Web页面上正文的字体大小为12px或9pt。值得注意的是，对于计算机的屏幕设备（显示器）而言，像素(Pixel)或者说px是一个最基本的单位，其它所有的单位，都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候，都统一先换算成为像素的多少，然后进行显示。所以，就计算机的屏幕而言，相对长度和绝对长度没有
27、本质差别。任何单位其实都是像素，差别只是比例不同。但在其它不以像素作为其基本长度单位的设备中（如打印机），相对长度单位与绝对长度单位仍然是有差别的。 2百分比单位一个百分比值由可选的正号""或负号""、接着的一个数字，还有百分号"%"。在一个百分比值之中是没有空格的。百分比值是相对于其它数值，同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小，这时可以把百分比单位看作一个相对长度单位。例如：h1 font-size: 120% h1 font-size: 1.2em 这两条定义的功能是一样的，都是使一级标题标签<
28、h1>中的字体大小按照预设的1.2倍显示。 3颜色单位CSS中的颜色值可以划分为两大类：一种是关键字，一种是RGB格式的数字。Windows VGA(视频图像阵列)形成了16各关键字：aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，and yellow。在进行CSS设计的时候，可以直接引用以上关键字，例如：div color:blue;div color:navy;RGB格式的颜色可以有四种形式，其中R代表红色，G代表绿色，B代表蓝色： #rrggbb (如，#0
29、0cc00；注意参数采用16进制，且为2位数，如不足2位应在参数前填0) #rgb (如，#0c0，它就等于#00cc00) rgb(x,x,x) x是一个介乎0到255之间的十进制整数 (如，rgb(0,204,0) rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数，它代表的是某一原色相对于十进制数255的大小 (如，rgb(0%,80%,0%)，它就等于rgb(0%,80%*255,0%)即rgb(0,204,0)例如：div color:#0000FF;div color:#00F;div color:rgb(0,0,255)div color:rgb(0%,0%,1
30、00%)以上四种形式都表示<div>中的文本内容以纯蓝色（div color:blue;）显示。 4统一资源定位符URLs一个URL值的格式为：url(foo)，foo是一个URL（internet中某资源的地址，既可以是相对地址也可以是绝对地址）。URL可以选择用单引号( ' )或者双引号( " )，并且在URL之前或之后可以包含空格。例如：BODY background: url(style.gif) BODY background: url("style.gif") BODY background: url(http:/localhost
31、/ style.gif) 4.2.4 CSS的属性CSS的属性非常丰富，常用的有：字体属性、颜色和背景属性、文本属性、边距属性、填充距属性、边框属性、分级属性以及鼠标属性等。其属性名以及属性的含义见表4.1：表4.1 CSS的属性1字体属性（font）属性名属性含义属性值font-family使用什么字体所有的字体，如宋体，仿宋体，MingLiu体等font-style字体是否斜体Normal、italic、obliquefont-variant是否用小体大写Normal、small-capsfont-weight字体的粗细Normal、bold、bolder、lithter等font-siz
32、e字体的大小使用前面学过的长度单位。绝对长度单位和相对长度单位都可以使用2颜色和背景属性属性名属性含义属性值Color定义前景色在Web页面中，前景色即页面的文本颜色。它可以使用上面介绍的所有颜色单位Background-color定义背景色在Web页面中，背景色一般指的就是文本之后的屏幕颜色。它也可以使用上面介绍的所有颜色单位Background-image定义背景图案也可以简写为Background，其值是一个URL，可以使用相对路径或绝对路径Background-repeat背景图案的重复方式当背景图案的大小小于页面的整体大小时，采用何种方式进行平铺，其值为Repeat-x（横向平铺）、
33、repeat-y（纵向平铺）、no-repeatBackground-attachment设置背景图案的滚动方式当背景图案的大小大于页面的整体大小时，允许滚动背景图案而不影响前景的显示，其值为Scroll（拖动滚动条滚动）、Fixed（不允许滚动）Background-position背景图案的初始位置Percentage、length、top、left、right、bottom等3文本属性属性名属性含义属性值Word-spacing单词之间的间距Normal（默认）或使用前面介绍的长度单位Letter-spacing字母之间的间距同上Text-decoration文字的装饰样式None、un
34、derline、overlineline-through、blinkVertical-align垂直方向的位置Baseline、sub、super、toptext-top、middle、bottomtext-bottomText-transform文本转换Capitalize（首字母大写）、uppercase（大写）Lowercase（小写）、noneText-align对齐方式Left、right、center、justifyText-indent首行的缩进方式可使用前面介绍的长度单位以及百分比单位Line-height文本的行高Normal（默认）或使用前面介绍的长度单位以及百分比单位4边
35、距属性属性名属性含义属性值Margin-top顶端边距该属性设定Web页面正文的整体位置相对于浏览器的边距。其值为auto（自动）或使用前面介绍的长度单位以及百分比单位Margin-right右侧边距同上Margin-bottom底端边距同上Margin-left左侧边距同上5填充距属性属性名属性含义属性值Padding-top顶端填充距该属性设定填充单元的位置相对于其容器的边距。其值为auto（自动）或使用前面介绍的长度单位以及百分比单位Padding-right右侧填充距同上Padding-bottom底端填充距同上Padding-left左侧填充距同上6边框属性属性名属性含义属性值Bor
36、der-top-width顶端边框宽度Thin、medium、thick或使用长度单位Border-right-width右侧边框宽度同上Border-bottom-width底端边框宽度同上Border-left-width左侧边框宽度同上Border-width一次定义宽度同上Border-color设置边框颜色使用颜色单位Border-style设置边框样式None、dotted、dash、solid等Border-top一次定义顶端定义顶端的长度以及颜色。可使用长度单位和颜色单位Border-right一次定义右侧同上Border-bottom一次定义底端同上Border-left一次
37、定义左侧同上Width定义宽度属性auto（自动）或使用长度单位以及百分比单位Height定义高度属性auto（自动）或使用长度单位Float文字环绕Left、right、noneClear文字环绕方式Left、right、none、both7分级属性属性名属性含义属性值Display定义是否显示Block、inline、list-item、none（不显示）White-space怎样处理空白Normal、pre、nowrapList-style-type定义项目编号Disc（实心圆）、circle（空心圆）、square（正方形）等List-style-image定义项目编号的图案none或
38、一个地址URLList-style-position项目编号的起始位置inside、outside8鼠标属性属性名属性含义属性值Cursor自动Auto定位“+”字Crosshair默认指针Default手形Hand移动Move箭头朝右方e-resize箭头朝右上方Ne-resize箭头朝左上方Nw-resize箭头朝上方n-resize箭头朝右下方Se-resize箭头朝左下方Sw-resize箭头朝下方s-resize箭头朝左方w-resize文本“I”形Text等待（默认沙漏图案）Wait帮助（默认“？”图案）Help4.2.5 CSS的过滤器CSS的过滤器主要用于定义对象的一些特殊的显
39、示效果，而这些效果通常是需要使用图片或动画才可以做到的。它可以分为两类：静态过滤器与动态过滤器。由于动态过滤器需要结合在Script代码中使用，因此本书主要介绍静态过滤器。定义一个静态过滤器的基本语法是：style="filter:filtername(fparameter1, fparameter2.)其中，filter是过滤器关键字，指出以下将要定义一个滤镜；filtername是滤镜的名字，IE支持14个滤镜，如表4.2所示；fparameter是相对于该滤镜的参数，不同的滤镜其参数不同。表4.2 静态过滤器的属性过滤器属性（filtername）过滤器描述参数参数描述Alph
40、a设定一定的透明度Opacity透明度级别,范围是0-100, 0代表完全透明 is transparent, 100代表完全不透明FinishOpacity透明区域结束时的透明度级别Style代表透明区域的形状特征，可设置的值是0（统一形状），1（线性），2（矩形），3（长方形）StartX、StartY、FinishX、FinishY分别代表透明效果开始时的x坐标、y坐标；结束时的x坐标、y坐标Blur创造高速运动的模糊效果Add其值为“true或非0”；“false或0”Direction模糊效果按照顺时针方向从0 - 315度，每45度为一个单位，默认值是向左的270度Strength
41、代表模糊深度的一个整数值Chroma制造特殊色彩的透明效果Color需要设为透明的颜色值，必须是对象中有的颜色值DropShadow创造阴影效果Color代表投射阴影的颜色OffX、OffY阴影的水平和垂直偏移量Positive一个布尔值。若值为true（非0），就为非透明像素建立阴影；为false（0），就为透明的像素建立阴影FlipH创造水平镜像的效果无无FlipV创造垂直镜像的效果无无Glow在物体边缘整加发光效果Color指定发光的颜色Strength发光强度，从 0-100Gray去掉图像的色彩效果无无Invert反转对象的明度、亮度和饱和度效果无无Light放置光源的效果特殊（见注
42、1）特殊（见注1）Mask创造透明的遮罩效果color指定遮罩的颜色Shadow创造偏移的阴影效果Color代表阴影的颜色Direction设置投影的方向，按照顺时针方向进行，0度代表垂直向上，然后每45度为一个单位。默认值是向左的270度。共8个方向Wave创造沿X轴波形扭曲效果Add一个布尔值，表示是否要为对象施加此滤镜效果。true（非0)表示应用，false（0）为不应用Freq代表波形产生的频率LightStrength代表施加在波纹上的光的强度Phase设置波形起始位置的偏移量，数值从0到100，0代表0度，100代表360度，25代表90度Strength代表波纹振幅的大小XRa
43、y仅显示物体的边缘效果无无*注1：light滤镜的语法比较特殊，其发光效果也比较特殊，这里简单说明如下： light滤镜可以被用来模拟光源在物体上的投影效果，它一共有3种形式的光源效果，分别是泛光、锥形光和点光： AddAmbient(R,G,B,strength)在图像周围加入泛光，Ambient光是无方向的而且影响整个区域，太阳光发射的就是Ambient光。 其语法格式为： call object.style.filters.Light(n).addAmbient(R,G,B,strength) R、G、B决定了Ambient光的颜色数，strength决定了光投射的数量。 AddCone
44、(x1,y1,z1,x2,y2,R,G,B,strength,spread)在图像上增加一个锥形的光源。Cone光是有方向的而且只影响一指定的区域。 其语法格式为： call object.style.filters.Light(n).addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread) x1、y1、z1代表光源的位置，x2、y2、z2代表目标点的位置。R、G、B代表光的颜色数，strength代表光投射的数量。 AddPoint(x,y,z,R,G,B,strength)在图像上增加一个点光源,点光源就像一个灯泡发的光一样.其语法格式为： call ob
45、ject.style.filters.Light(n).addPoint(x,y,z,R,G,B,strength) x、y、z代表点光源的位置，R、G、B代表光的颜色数，strength代表光投射的数量和范围。 一旦定义了以上的光源属性，就可以用如下的方法来设置或改变属性。 ChangeColor(lightnumber, r,g,b, fAbsolute)ChangeColor将改变光源作用到物体上的色彩值。使用lightnumber标识被改变色彩的光源，r,g,b表示改变后的光源的色彩。fAbsoloute 是一个布尔值，如果值为true(非0)，则相关的光源色彩被改变到新的数值，如果值
46、为false(0)则相关的光源色彩被改变为新的数值。 ChangeStrength(lightnumber, strength, fAbsolute)ChangeStrength 改变光源的强度。 ClearClear方法将清除所有的光源。 MoveLight(lightnumber, x, y, z, fAbsolute)MoveLight移动光源位置、目标点位置，对泛光等没有影响。4.3 层叠样式表的原则层叠样式表的原则主要有2个，一个是继承性，一个是其层叠优先级。1层叠样式表的继承CSS的继承规则非常简单：一般情况下，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改
47、。例如，一个<BODY>定义了的颜色值也会应用到段落<p>的文本中，除非<p>中另外定义了段落中文本的颜色值。有些情况是内部选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上边界属性是不会继承的；直觉上，一个段落<p>也不会具有同<BODY>一样的上边界值。对于这些特殊的情况，请同学们在实际使用中自行总结。2层叠样式表的层叠优先级所谓层叠（Cascading）就是指在同一元素的同一属性上，拥有多条CSS规则指定了值，这也是CSS之所以被称为层叠样式表的一个重要原因。例如我们首先使用CSS的内部引用方式定义段落<p&g
48、t;的样式：pcolor : yellow;然后我们又为定义了<p>的一个类“intro”：rocolor : blue;最后我们在html中有如下代码：<p class="intro" style="color:red;">这段文字到底应该是什么颜色呢？</p>我们看到，在上面的例子中，<p>既内联引用了一个样式“style="color:red;"”，又通过类引用了“ro”，而我们又首先定义了<p>的通用样式“pcolor : yellow;”。那么在
49、这个例子中，<p>中的文字到底是显示为红色还是蓝色或者是黄色呢？要搞清楚这个问题，就必须理解CSS的层叠优先级。难点是，CSS的层叠优先级比较复杂，其算法步骤较多，影响优先级的因素也比较多。我们这里只给出一个在一般情况下适用的、简单的规则，对其完整算法有兴趣的同学可以参阅W3G关于CSS层叠优先级的解释，其Web地址是：/TR/CSS21/cascade.html#specificity可以这样简单的理解CSS的层叠优先级：优先级按照以下因素从高到低为： 声明“!important”关键字 CSS的来源：内联引用 > 内部引用 > 外部引
50、用 CSS的位置：出现在后的总是比出现在前的具有更高的优先级具有“!important”关键字的CSS具有最高优先级；如果参与竞争的CSS都没有声明“!important”关键字，则判断其来源：内联引用具有最高优先级，其次是内部引用，其次是外部引用；最后，在同一来源内部，CSS出现的位置决定其优先级的高低：出现在后的总是比出现在前的具有更高的优先级。例如，在上面的那个例子中，由于所有参与竞争的CSS都没有声明“!important”关键字，因此用CSS的来源决定其优先级。于是，上面段落<p>中的文本的显示颜色应为其内联CSS所定义的颜色，即红色。如果我们修改一下其CSS定义：pco
51、lor : yellow;rocolor : blue ! important;<p class="intro" style="color:red;">这段文字到底应该是什么颜色呢？</p>那么，这段文字的颜色应为带有“!important”关键字的CSS所定义的颜色，即使用ro类将文字的显示颜色设为蓝色。4.4 设计实例CSS是一种强大的调控用户界面的手段。在Web2.0规范中，W3C建议所有的客户端页面布局都应采用CSS+DIV的方式来实现。在学习了第2，3章后，我们已经对DIV有了一定的认识，但在前几章的
52、内容里我们的页面布局方式采用的仍然是TABLE或IFRAME的方式，现在就让我们来试试CSS+DIV的强大能力。本实例要求设计一个栏目链接列表，其功能是：当鼠标移动到链接所在行，链接文本颜色会改变，同时会在链接右下侧显示一个与链接相关的信息面板，信息面板中左边有一幅图片，图片右侧又有一系列与图片相关的说明。下面说明其实现步骤及原理。1准备工作首先，我们需要做一些准备工作：在硬盘里建立一个新文件夹，名字任意，在本例中其名字为“实例”；接着在此文件夹中建立一个html文件，名字任意，本例中其名字为“css.htm”；然后在此文件的同级目录新建一个文件夹，名字为“images”，用来存放需要显示的图
53、片；最后准备4张图片，依次命名为：1.gif，2.gif，3.gif和4.gif，并将之存放在images目录下。其大小在本例中为202×137，当然你也可以不按照此格式，只不过这样就需要调整源代码才能得到理想的显示效果了。准备好后的文件如下图所示：2源代码准备工作完成后，我们通过文本编辑器或Dreamweaver等工具在css.htm中写入如下代码：<!下面是Web页面的元信息-><!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/
54、TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><!元信息结束，下面是其head部分-><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS综合实例</title><!下面是一个使用内部引用方式定义的CSS-&g
55、t;<style type="text/css"><!-*margin:0px;padding:0px;body margin:10px;font-size: 13px;a:link color: #666;text-decoration: none;/*去除链接下划线*/a:visited color: #666;text-decoration: none;a:hover color: #F90;h3 color: #FFF;background-color: #F90;width: 300px;padding-top:3px;text-align:ce
56、nter;ul width: 300px;border-top: 1px solid #F60;/*使其上边有一线条，与标题h3吻合*/ul li padding:5px;border-bottom: 1px solid #CCC;list-style:none;/*去除列表样式，这对于标准浏览器很重要*/a position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/a div display: none;/*初始化信息面板不显示*/a:hover backg
57、round:#fff;/*IE7以下版本A状态伪类bug*/a:hover div position: absolute;padding:5px;display:block;width: 380px;/*给出宽度*/height: 140px;/*给出高度/left:150px;/*这是相对父级a的定位*/top: 20px;border: 1px solid rgb(255,154,0);background-color: rgb(255,255,255);a img width:202px;height:137px;border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏
58、览器会出现边框*/display:block;position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/left:5px;dl width: 160px;float:right;color: #999;line-height:20px;dl dd span font-weight: bold;color: #639;-></style></head><!CSS定义与head部分结束，下面是Web页面的正文部分-><body><h3>仙剑奇侠传人物赏析</h3><ul><li><a href="#">01 定情<div><img src="images1.gif" alt="" /><dl><dd><span>人物：</span>赵灵儿与李逍遥</dd><dd><s
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论