purple”>紫色
2.2添加CSS的方法
1.内嵌样式表
即使用style属性直接设置
2.内联样式表
内联样式表与内嵌样式表的相似之处在于都将CSS样式编写到页面中，而不同的是内部样式表统一放置在一个固定的位置，即
以@开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。
因为联合法可以在链接外部样式表的同时针对该网页的具体情况作出别的网页不需要的规则。
3设置CSS属性
•CSS样式共分为8中类型，分别是类型、背景、区块、方框、边框、列表、定位和扩展。
3.1CSS中的常见属性值
•1.关键字
关键字随属性而变化，也就是说不同的属性，属性值的关键字也是不同的，常见的属性值的关键字有none、italic、bold、red、solid等。
•2.长度
（1）绝对单位：
英寸（in）、厘米（cm）、毫米（mm）、磅（pt）和十二点（pc）。
（2）相对单位：
em：
表示当前字体中元素的宽度。
ex：
表示当前字体中字母x的高度。
px：
表示1个像素的大小。
如：
p{display:
block;
font-size:
20px;
border-style:
solid;
border-right-width:
2.5em;
border-left-width:
1.5em;
border-top-width:
1ex;
border-bottom-width:
1ex;}
（3）百分比
指元素这个属性的当前值的百分比。
如：
p{font-size:
10pt;}
span{font-size:
150%;}
上面代码，假设标记span包含在标记p中，那么标记span的内容因为继承于p所以当前字号为10pt，而在span选择符中又设置其字号大小为当前字号的150%，所以标记name的内容会以字号15pt显示。
3.颜色
常用的设置颜色的属性有color、border-color、background-color。
颜色属性的取值可以有四种类型：
关键字、十六进制、十进制RGB、百分比RGB。
•
（1）关键字：
如red，blue等，书本P82表4-2。
•
（2）十六进制：
以“#”号开头，后面跟6位十六进制数，其中前面两位表示红色分量，中间两位表示绿色分量，末两位表示蓝色分量。
•（3）十进制RGB：
相当于调用函数，函数名为rgb，参数为三个十进制数，每个十进制数的取值范围为0~255。
如：
rgb（0,255,0）代表绿色。
•（4）百分比RGB：
和上面相似，只不过参数为三个百分数，取值范围是从0%到100%之间。
如：
rgb（0%,0%,100%）代表蓝色。
•此外，也可使用三位十六进制来表示颜色，CSS在处理时，将每位十六进制数加以重复，如#F3C就是表示#FF33CC的颜色。
4.URL
在需要为某个元素添加背景图片时，就需要使用background-image属性，这个属性的属性值是一个URL类型，指明需要作为背景图片的地址，在为其赋值时也相当于调用函数，函数名为URL，函数的参数为一个字符串，指明文件的地址，这个字符串可用双引号引起来，也可以不用，可以用绝对地址，也可以用相对地址。
如：
•body{background-image:
url（
•body{background-image:
url（“
•body{background-image:
url（image/01.gif）}
3.2CSS常用属性设置
•1.位置属性
•position：
用于确定元素的位置。
它的取值可以是：
absolute、relative、fixed、static和inherit。
•top：
用于确定显示的y轴信息。
•left：
用于确定显示的x轴信息
•right：
用于确定显示的x轴信息。
•2.显示控制属性：
•display：
用于确定元素的各种显示形式
•3.字体显示属性
•
（1）font-family：
字体族，它是使用逗号分隔开的一组字体名
•
（2）font-style属性
•这个属性用于控制字体显示的分格，是正常的，还是斜体的，还是倾斜的
•（3）font-weight属性
•这个属性规定字体显示的浓淡程度，该属性的值一般介于100-900，非整百的值是不允许的
•（4）font-size属性
•这个属性规定字体的高度和宽度，表示一个字体的大小
•（5）font-variant属性
•该属性规定字体显示的大小
•（6）font属性
•font属性包含了上面五种属性，可以将上面五种属性的值都赋给font属性
•4.颜色属性
•颜色属性是color，它规定一个元素的颜色
•CSS对颜色的取值有两种方式：
名称和RGB颜色，并且这些颜色的取值方法适用于CSS所有与颜色有关的属性。
•名称方式：
CSS能够接受windowsVGA调色板的16种颜色，分别为：
aqua（浅绿）、black（黑）、blue（蓝）、fuchsia（紫红）、gray（灰）、green（绿）、lime（酸橙）、maroon（粟）、navy（海蓝）、olive（橄榄）、purple（紫）、red（红）、silver（银）、teal（深青）、white（白）和yellow（黄）。
•RGB方式：
RGB方式可以更加精确的定义需要的颜色而不局限于上面的16种颜色，一般认为颜色可以由三原色，也即红、绿、蓝三种颜色按照一定的比例搭配而成，因此一种颜色可以通过指定这三种分量的值来获得。
•指定RGB分量有四种方法：
Ø第一，红、绿、蓝三种颜色的分量都使用两位的十六进制数进行表示，比如#0fcff。
Ø第二，红、绿、蓝三种颜色的分量是第一种方式的压缩形式，每一个分量只采用一个十六进制数来表示，使用时再把它扩充为两位的十六进制数，比如#c4d扩展为#cc44dd。
Ø第三，使用矢量的方式表示，将其表示为rgb（x,y,z）。
其中，x，y，z都是介于0-255的整数。
Ø第四，也是矢量表示法，但是形式为rgb（x%,y%z%），将数值变为百分比。
•5.背景属性
•背景属性方面包括5个小方面的属性和它们对应的大方面的属性。
•
（1）background-color属性，它设置元素的背景色
•
（2）background-image属性，用于设置元素的背景图案
•（3）background-repeat属性对丁是否重复背景
•（4）background-attachment属性规定背景图像是否随着窗口的滚动而滚动
•（5）background-position属性，一般情况下，背景的左上角重叠于元素内容的左上角，而通过这个属性可以设置背景左上角相对于元素的位置
•（6）backound属性是上面的五种属性的一个总属性
•6.文本属性
•
（1）word-spacing属性，该属性可以用于设置文字之间的距离
•
（2）letter-spacing属性，该属性用于设置每个词语的字符间距
•（3）text-decoration属性，该属性用于对文本进行下划线、闪烁等的修饰
•（4）vertical-align属性，该属性用于控制元素在容器内的位置或者控制字符在元素内的位置
•（5）text-transform属性，该属性用于指定文本的大小写方式
•（6）text-align属性，该属性用于指定块中的文本的对齐方式
•（7）text-indent属性，该属性用于指定段落缩进的格式
•7.版面属性
•
（1）margin属性，这是一个全局属性，包括四种属性：
margin-left（左边距）、margin-right（右边距）、margin-top（上边距）和margin-bottom（下边距）
•
（2）padding属性，这个属性也是全局属性，它包含了padding-top、padding-bottom、padding-left和padding-right四种属性
•（3）border-width属性，该属性包括四个属性：
border-top-width、border-bottom-width、border-left-width和border-right-width
•（4）border-color属性，该属性可用于指定边界的颜色
•（5）border-style属性，该属性用于设置边界的样式
•8.边框属性
•9.列表属性
•10.滤镜属性
4.CSS样式中滤镜的使用
1.Alpha滤镜
功能：
指定一个元素的透明度。
例如：
设置滤镜Alpha（Opacity=100,FinishOpacity=10,Style=2,StartX=100,StartY=75,FinishX=200,FinishY=150）
2.Blur滤镜
功能：
指定一个元素的模糊效果。
例如：
设置滤镜blur（add=true，direction=135，strength=10）
3.FlipH，FlipV滤镜
功能：
这两个滤镜可以分别将对象水平翻转和垂直翻转。
例如：
设置滤镜FilpH与FilpV
4.Chroma滤镜
语法：
{filter:
chroma（color=color）}
功能：
可以设置一个对象中指定的颜色为透明色。
5.DropShadow滤镜
功能：
可以给对象添加阴影效果。
例如：
设置滤镜dropshadow（color=gray，offx=5，offy=5，positive=1）
6.Glow滤镜
功能：
使对象的边缘产生类似发光的效果。
例如：
设置滤镜glow（color=red，strength=10）
7.Gray，Invert，Xray滤镜
功能：
Gray滤镜是把一张图片变成灰度图。
Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值。
Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X光片”效果。
如图：
三种滤镜后的效果。
8.Light 滤镜
语法：
{filter:
light}
功能：
这个滤镜可以模拟光源的投射效果。
一旦为对象定义了“light”滤镜属性，那么就可以调用它的方法来设置或者改变属性。
9.Mask滤镜
语法：
{filter:
mask（color=color）}
功能：
可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。
10.Shadow滤镜
功能：
可以在指定的方向建立物体的投影。
例如：
设置滤镜shadow（color=gray，direction=225）
11.Wave滤镜
功能：
把对象按照垂直的波形样式打乱。
例如：
设置滤镜Wave（Add=true,Freq=3,LightStrength=10,Phase=10,Strength=10）
升级会员 