web-11. 层叠式表的属性与滤镜
11. 层叠式表的属性与滤镜
11.1 CSS属性
CSS的样式属性非常多，大体可以分为：字体、背景、文本、位置、布局、边缘、列表、其他等几类。
- 字体
（1） font-fayily
例如：font-fayily:隶书
（2）ext-decoration
设置文本中添加underline（下划线）、overline（上划线）、line-through（中划线）、blink（闪烁）等效果。
例如：text-decoration:blink
（3）font-weight
设置字体的磅值，设置粗字体一般用bold。
例子：font-weight:bold
（4）font-variant
设置英文字母的大小写，small-caps为大写。normal为普通显示。
例子：font-variant:small-caps
（5）text-transform
该属性可以将样式区域内的每个单词的第一个字符转为大写，或者将所有的字母全部大写或者小写，该属性允许的取值有：capitalize（单词首字母大写）、uppercase（所有字母转换为大写）、lowercase（所有字母转换为小写）、none（不转换）。
（6）color
定义文本颜色，有三种方式：#RRGGBB、RGB、CSS内定颜色名称。
例如：color:#FFFF00
color:rgb(125,125,0)
color:yellow
（7）font
该属性可以将各类字体属性放在一起定义，从而实现对各种字体属性的略写。
例子：font:italic bold 15px Time.serif
- 背景
（1）background-color背景颜色
例子：<body style=”......</body>
（2）background-image背景图像
例子：<body style=”background-image:图像URL”>......</body>
（3）背景图像控制属性
<style>
HTML标记名{back-ground-repeat: 属性值;background-attchment:属性值}
</style>
- 文本
word-spacing 设定词间距
letter-spacing 设定字符间距
vertical-align 设定垂直对齐方式
text-align 设定水平对齐方式
text-indent 设定首行缩进
white-space 设定空格处理
line-height 设定行高
- 位置
<html 标记 style=”位置名.位置值”>
position 设定对象的定位方式
top 设定元素上边的垂直位置
bottom 设定元素下边的垂直位置
left 设定元素左边的水平位置
width 设定元素显示的高度
height 设定元素显示的高度
z-index 设定元素的堆叠方式
- 布局
<input type=”元素名” value=”布局方式” onclick=”资源名.style.布局值”>
布局属性用于指定元素在网页中如何放置，主要包括：
visibility 设置元素的可见状态
display 设置元素的显示状态
clip 绝对定位元素的可视区域
overflow 设置内容超出元素大小时的处理方式
float 定义元素周边的浮动对象
clear 清除元素周边的浮动对象
page-break-before 设置打印该元素时是否强制分页
例子：
<html>
<head>
<title>布局属性设置</title>
</head>
<body>
<p>随着毕业的临近，同学们忙得<span id="100_image" style="
<img src="1.jpg" width="1000" height="800"></span>不可开交</p>
<p><input type="button" value="Inline"
onclick="100_image.style.display='inline'">
<input type="button" value="Block"
onclick="100_image.style.display='block'">
<input type="button" value="None"
onclick="100_image.style.display='none'">
<input type="button" value="Hidden"
onclick="100_image.style.visibility='hidden'">
<input type="button" value="Visible"
onclick="100_image.style.visibility='visible'">
</p>
</script>
</body>
</html>
- 边缘
margin 设置元素边界 HTML标记名{margin:设定值}
padding 设置边界与内部元素之前的空隙大小 HTML标记名{padding:设定值}
width 设置边框的宽度 HTML标记名{border-width:设定值}
color 设置边框的颜色 HTML标记名{border-color:设定值}
style 设置边框的样式 HTML标记名{border-style:设定值}
- 列表
<style>
HTML标记名{list-style-type:设定值}
</style>
或者
<HTML标记 style=”list-style-type:设定值”>
CSS的列表属性用于设置列表项标记的类型、列表项图片和位置，以提供丰富灵活的列表显示。
例子：
<html>
<head>
<title>列表属性设置</title>
</head>
<body>
<u1 style="list-style-type:upper-roman">
<li>比较</li>
<li>学士</li>
<li>学士</li><br>
</ul>
<u1 style="list-style-image:url(Next.gif)">
<li>学士</li>
<li>学士</li>
<li>学士</li><br>
</u1>
</body>
</html>
- 鼠标
<style>
HTML标记名{cursor:设定值}
</style>
或者
<HTML标记 style=”cursor:设定值”>
11.2 CSS滤镜
CSS提供了内置的多媒体滤镜特效，可以把可视化的滤镜和转换效果添加到标准的HTML元素上。在网页中实现滤镜特效，需要设置filter属性的各种参数。
- Alpha参数
该参数控制一个页面元素与背景混合的程度，也就是元素的透明程度。
例子：
<html>
<head>
<title>参数设置</title>
</head>
<body>
<div style="width:100;height:62;
filter:Alpha(Opacity=50)Blur(Add=5,Direction=135)">
我是段立勇
</div>
</body>
</html>
- BlendTrans参数
<style>
HTML标记名{filter:BlendTrans(Durantion=设定值)}
{/style}
或者
<HTML 标记 style=”filter: BlendTrans(Duration=设定值)”>
该参数用于淡入淡出效果。
- Blur参数
<style>
HTML标记名{filter:Blur(Add=参数值，Direction=设定值)}
{/style}
或者
<HTML 标记 style=”filter:Blur(Add=参数值，Direction=设定值)”>
该参数用于建立模糊效果。
例子：
<html>
<head>
<title>参数设置</title>
</head>
<body>
<div style="width:100;height:62;
filter:Alpha(Opacity=50) BlendTrans(Duration=50) Blur(Add=5,Direction=135)">
我是段立勇
</div>
<div style="width:100;height:62;
filter:Alpha(Opacity=50) BlendTrans(Duration=5000) Blur(Add=5,Direction=135)
FlipV">
</body>
</html>
- Chrom参数
类似于Blur参数
<div style=”......filter:Alpha(Opacity) Blur(Add=5, Direction=135) Chrom(Color=red,OffX=50,
OffY=30,positive=true)”>
......
<div style=”......Blur(Add=5, Direction=135) Chrom(Color=red,
OffX=50,OffY=30,positive=true)FilpV”>
- DropShadow参数
用于建立阴影效果，使用方法与Chrom类似。
- FlipH和FlipV参数
<style>
HTML标记名{filter: FlipH或FilpV}
</style>
或者
<HTML 标记 style=”filter: FlipH或FilpV”>
用于将元素反转，FlipH是实现水平反转，FlipV是实现垂直反转，两者的使用方法相同。
- Glow参数
<style>
HTML标记名{filter: Glow(Coloe=设定值, Strength=设定值)}
</style>
或者
<HTML 标记 style=”filter: Glow(Coloe=设定值, Strength=设定值)”>
设置边缘产生发光效果。
- Gary、Invert和Light参数
Gray参数用于去掉图像颜色显示为黑白图像；Invert参数用于反转图像产生类似底片效果；Light用于设置光源效果，模拟光源在物体上的投影。
<input style=”filter: Gray Invert Light”>
- Shadow参数
用于建立另一种阴影效果。
<input style=”filter: Shadow(Color=red,Direction=135)”>
- Mask参数
用于在元素上建立一个透明罩。
<input style=”filter: Mask(Color=red)”>
- Wave参数
用于实现波纹效果。
<input style=”filter: Wave(Add=35, Fred=3, lightstrangth=60, Phase=15, Strength=5)”>
- Xray参数
<input style=”filter:Xray”>
