文档介绍：Css样式及应用
一、样式
定义:控制文本或文本区域外观的一组格式属性
样式:①HTML样式
②CSS样式
二、认识CSS
CSS就是Cascading Style Sheets,中文翻译为“层叠样式表”,简称样式表
1997年W3C(The World Wide Web Consortium)颁布了有关样式表的第一个标准CSS1
1998年5月发布了CSS2版本,样式表得到了更多的充实
注意:CSS需要IE4( Explorer )scape )以上的浏览器支持,有些效果需要更高版本的浏览器支持
1. 基本语法
基本语法:CSS的定义是由选择符(selector),属性(properties)和属性的取值(value)三个部分构成
基本格式如下: selector {property: value} (选择符{属性:值})
如果属性的值是多个单词组成,必须在值上加引号
如: p {font-family: "sans serif"}
如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开
如:p {text-align: center; color: red}
页面中插入样式表的方法
页面中样式表的使用方法:
链入外部样式表:是把样式表保存为一个样式表文件
内部样式表:是把样式表放到页面<head>区里
内嵌样式:是混合在HTML标记里使用的,用这种方法,可以很简单的对某个元素单独定义样式
注意:依照后定义的优先,所以优先级最高的是内嵌样式,内部样式表高于链入外部样式表,链入的外部样式表和内部样式表之间是最后定义的优先级高
三、创建CSS样式
创建样式表的类型:
Make Custon Style (class) :(创建自定义样式)自定义一个样式,可以作为class属性应用于页面中。
Redefine HTML Tag:(重定义HTML标记)对指定的 HTML 标记的默认格式进行重新定义。
Use CSS Selector:(使用CSS选择符)对特定的标签组合,或者包含有指定ID属性的所有标签进行格式定义
下面我们来讲解每个滤镜的效果和参数:
1. Alpha:设置透明度
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。
FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。
Style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY:代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标。
2. BlendTrans:图像之间的淡入和淡出的效果
BlendTrans(Duration=?)
Duration:淡入或淡出的时间。
注意:这个滤镜必须配合JS建立图片序列,才能做出图片间效果。
3. Blru:建立模糊效果
Blur(Add=?, Direction=?, Strength=?)
Add:是否单方向模糊,此参数是一个布尔值,true(非0)或false(0)。
Direction:设置模糊的方向,其中0度代表垂直向上,然后每45度为一个单位。
Strength:代表模糊的象素值。
4. Chroma:把指定的颜色设置为透明
Chroma(Color=?)
Color:是指要设置为透明的颜色。
5. DropShadow:建立阴影效果
DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
Color:指定阴影的颜色。
OffX:指定阴影相对于元素在水平方向偏移量,整数。
OffY:指定阴影相对于元素在垂直方向偏移量,整数。
Positive:是一个布尔值,值为true(非0)时,表示为建立外阴影;为false(0),表示为建立内阴影。
6. FlipH:将元素水平反转
7. FlipV:将元素垂直反转
8. Glow:建立外发光效效果
Glow(Color=?, Strength=?)
Color:是指定发光的颜色。 Strength:光的强度,可以是1到255之间的任何整数,数字越大,发光的范围就越大。
9. Gray:去掉图像的色彩,显示为黑白图象
10. Invert:反转图象的颜色,产生类似底片的效果
11. Light:放置光源的效果,可以用来模拟光源在物体上的投影效果
注意:此效果需要用JS设置光的位置和强度。