和的属性
属 性 描 述
width/height单元格的宽和高,接受绝对值(如 80)及相对值(如 80%)。
colspan 单元格向右打通的栏数
rowspan 单元格向下打通的列数
align 单元格内字画位置(水平),可选值为: left, center, right
valign 单元格内字画位置(垂直),可选值为: top, middle, bottom
bgcolor 单元格的底色
bordercolor 单元格边框颜色
bordercolorlight 单元格边框向光部分的颜色
bordercolordark 单元格边框背光部分的颜色
background 单元格背景图片
d)跨行跨列属性
跨多列的语法: colspan=#> colspan=#>
跨多行的语法: rowspan=#> rowspan=#>
5. 16. 框架集<frameset>控制
属 性 描 述
border 设置边框粗细,默认是5象素.
bordercolor 设置边框颜色
frameborder 指定是否显示边框 :"0"代表不显示边框,"1"代表显示边框
cols 用"象素数" 和 "%"分割左右窗口,"*"表示剩余部分
rows 用"象素数" 和 "%"分割上下窗口,"*"表示剩余部分
framespacing="5" 表示框架与框架间的保留空白的距离
noresize 设定框架不能够调节,只要设定了前面的,后面的将继承
6. 17.框架窗口<frame>
属 性 描 述
src 指示加载的url文件的地址
bordercolor 设置边框颜色
frameborder 指示是否要边框,1显示边框,0不显示(不提倡用 yes 或 no)
border 设置边框粗细
name 指示框架名称,是连结标记的 target所要的参数
noresize 指示不能调整窗口的大小,省略此项时就可调整,
scrolling 指示是否要滚动条,auto根据需要自动出现,Yes有,No无
marginwidth 设置内容与窗口左右边缘的距离,默认为1
marginheight 设置内容与窗口上下边缘的边距,默认为1
width 框窗的宽及高 默认为width="100" height="100"
align 可选值为 left, right, top, middle, bottom
7. 18.浮动窗口
<iframe> 的参数设定格式:<iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">
属 性 含 义
src 浮动窗框中的要显示的页面文件的路径,可以是相对或绝对。
name 此框窗名称,这是连结标记的 target 参数所 要的,
align 可选值为 left, right, top, middle, bottom,作用不大
height 框窗的高,以 pixels 为单位。
Width 框窗的宽,以 pixels 为单位。
marginwidth 该插入的文件与框边所保留的空间。
marginheight 该插入的文件与框边所保留的空间。
frameborder 使用 1 表示显示边框, 0 则不显示。(可以是 yes 或 no)
scrolling 使用 Yes 表示容许卷动(内定), No 则不容许卷动。
8. 19. 表单标签<form>……</form>
语法:<FORM name=“form_name” ACTION=“URL” METHOD=“GET|POST”>…</FORM>
Name :定义表单的名称
Method: 定义表单结果从浏览器传送到服务器的方式,默认参数为:get ;
Action :用来指定表单处理程序的位置(asp 等服务器端脚本处理程序)
20.文本框文本框是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短的回答,如姓名、地址等。
代码格式:<input type=“text” name=“...” size=“...” maxlength=“...” value=“...”>
type=“text” 定义单行 文本输入框;
name 属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
size 属性定义文本框的宽度,单位是单个字符宽度;
maxlength 属性定义最多输入的字符数。
value 属性定义文本框的初始值
21.密码框
密码框是一种特殊的文本框,它的不同之处是当输入内容时,均以*表示,以保证密码的安全性。
格式:<input type=“password” name=“...” size=“...” maxlength=“...” >
23. 按钮
类型:普通按钮、提交按钮、重置按钮。
1) 普通按钮
当type 的类型为button 时,表示该输入项输入的是普通按钮。
语法格式: <input type="button" value="…“ name=“…”>
Value: 表示显示在按钮上面的文字。 普通按钮经常和脚本一起使用。
2) 提交按钮
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。 例句: <input type="submit" value="提交">
3) 重置按钮
当type的类型为reset时,表示该输入项输入的是重置按钮,单击按钮后,浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。
语法格式: <input type=“reset" value=“…“ name=“…”>
24. 单选框和复选框
单选框
格式:<input type=“radio”name=“…” value=“…” checked>
Checked: 表示此项默认选中
Value 表示选中后传送到服务器端的值。
Name 表示单选框的名称,如果是一组单选项,name 属性的值相同有互斥效果。
复选框
语法格式:<input type=checkbox name=“…” value=“…” checked >
Checked: 表示此项默认选中
Value 表示选中后传送到服务器端的值。
Name 表示复选框的名称,如果是一组单选项,name 属性的值相同亦不会有互斥效果。
25. 文件输入框
当type=“file”时,表示该输入项是一个文件输入框,用户可以在文件输入框的内部填写自己硬盘中的文件路径,然后通过表单上传。
语法格式:<input type=“file” name=“…”>
26.下拉框 (Select) 既可以用做单选,也可以用做复选。
单选例句如下 :
<select name="fruit" >
<option value="apple"> 苹果
<option value="orange"> 桔子
<option value="mango"> 芒果
</select>
如果要变成复选,加muiltiple即可 。用户用Ctrl来实现多选。
<select name="fruit" multiple>,用户还可以用size 属性来改变下拉框的大小。
27. 多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols 表示textarea 的宽度,rows 表示textarea 的高度
28.滾动字幕<marquee> ... </marquee>
align: 对齐方式 LEFT,CENTER,RIGHT,TOP,BOTTOM
behavior: 用于设定滚动的方式,主要由三种方式:
behavior="scroll": 表示由一端滚动到另一端;
behavior="slide": 表示由一端快速滑动到另一端,且不再重复;
behavior="alternate" : 默认值——表示在两端之间来回滚动。
direction: left(默认值) 左; right 右;up 上;down 下;
bgcolor: 背景颜色
height: 高度
weight: 宽度
Hspace/vspace: 分别用于设定滚动字幕的左右边框和上下边框的宽度。
scrollamount: 滚动的速度
scrolldelay: 延迟时间
loop: 循环次数;
onmouseover: 鼠标触发事件---当用户将鼠标指针移动到对象内时触发
onmouseout: 鼠标滑出事件---当用户将鼠标指针移出对象边界时触发
这里要用到的是 this.start() 与this.stop()意思就是鼠标移到marquee的内容上的时候停止循环,鼠标移开marquee 又开始移动。
innercode: 设置或获取位于对象起始和结束标签内的 code
innerText: 设置或获取位于对象起始和结束标签内的文本
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。scrollDelay: 设置或获取字幕滚动的速度,要创建垂直滚动的字幕,请将其 scrollLeft 属性设定为0,要创建水平滚动的字幕,请将其 scrollTop 属性设定为 0,这将覆盖任何脚本设置
scrollHeight: 获取对象的滚动高度
scrollAmount: 设置或获取介于每个字幕绘制序列之间的文本滚动像素数
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetLeft: 获取对象相对于版面或由 offsetParent 指定的父坐标的计算左侧位置
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 指定的父坐标的高度。
setInterval: 交互时间。它从载入后,每隔指定的时间就执行一次表达式
clearInterval: 使用 setInterval 方法取消先前开始的间隔事件。
29.嵌入多媒体文件<EMBED SRC="音乐文件地址">
1、自动播放:
语法:autostart=true、false
true:音乐文件在下载完之后自动播放;
false:音乐文件在下载完之后不自动播放。
示例:<embed src="your.mid" autostart=true>
<embed src="your.mid" autostart=false>
2、循环播放:
语法:loop=正整数、true、false
属性值为正整数值时,音频或视频文件的循环次数与正整数值相同;
属性值为true时,音频或视频文件循环;
属性值为false时,音频或视频文件不循环。
示例:<embed src="your.mid" autostart=true loop=2>
<embed src="your.mid" autostart=true loop=true>
<embed src="your.mid" autostart=true loop=false>
3、面板显示:
语法:hidden=ture、no
说明:该属性规定控制面板是否显示,默认值为no。
ture:隐藏面板;
no:显示面板。
示例:<embed src="your.mid" hidden=ture>
<embed src="your.mid" hidden=no>
4、开始时间:
语法:starttime=mm:ss(分:秒)
说明:该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。
示例:<embed src="your.mid" starttime="00:10">
5、音量大小:
语法:volume=0-100之间的整数
说明:该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。
示例:<embed src="your.mid" volume="10">
6、容器属性:
语法:height=# width=#
说明:取值为正整数或百分数,单位为像素。该属性规定控制面板的高度和宽度。
height:控制面板的高度;
width:控制面板的宽度。
示例:<embed src="your.mid" height=200 width=200>
7、容器单位:
语法:units=pixels、en
说明:该属性指定高和宽的单位为pixels或en。
示例:<embed src="your.mid" units="pixels" height=200 width=200>
<embed src="your.mid" units="en" height=200 width=200>
8、外观设置:
语法:controls=console、smallconsole、playbutton、pausebutton、stopbutton、
volumelever 说明:该属性规定控制面板的外观。默认值是console。
console:一般正常面板;
smallconsole:较小的面板;
playbutton:只显示播放按钮;
pausebutton:只显示暂停按钮;
stopbutton:只显示停止按钮;
volumelever:只显示音量调节按钮。
示例:<embed src="your.mid" controls=smallconsole>
<embed src="your.mid" controls=volumelever>
9、对象名称:
语法:name=#
说明:#为对象的名称。该属性给对象取名,以便其他对象利用。
示例:<embed src="your.mid" name="sound1">
10、说明文字:
语法:title=#
说明:#为说明的文字。该属性规定音频或视频文件的说明文字。
示例:<embed src="your.mid" title="第一首歌">
11、前景色和背景色:
语法:palette=color|color
说明:该属性表示嵌入的音频或视频文件的前景色和背景色,第一个值为前景色,第二个值为背景
色,中间用 | 隔开。color可以是RGB色(RRGGBB)也可以是颜色名,还可以是transparent (透明)。
示例:<embed src="your.mid" palette="red|black">
12、对齐方式:
语法:align=top、bottom、center、baseline、 left、right、texttop、middle、
absmiddle、absbottom
说明:该属性规定控制面板和当前行中的对象的对齐方式。
center:控制面板居中;
left:控制面板居左;
right:控制面板居右;
top:控制面板的顶部与当前行中的最高对象的顶部对齐;
bottom:控制面板的底部与当前行中的对象的基线对齐;
baseline:控制面板的底部与文本的基线对齐;
texttop:控制面板的顶部与当前行中的最高的文字顶部对齐;
middle:控制面板的中间与当前行的基线对齐;
absmiddle:控制面板的中间与当前文本或对象的中间对齐;
absbottom:控制面板的底部与文字的底部对齐。
30.IE中的背景音乐
<bgsound src="音乐文件地址" loop=#>
31. 样式类
1.常规类
格式:选择符.类名{属性:值对}
2.一般类
格式:.类名{属性:值对}
3.ID类
格式:#类名{属性:值对}
32.样式表的引入
内嵌样式(Inline Style)
<P style="font-size:20pt; color:red ">这里使用了内嵌样式</p>
内部样式表(Internal Style Sheet)
<STYLE type ="text/css">
H1 .mylayout {border-width:1; b order :solid; text-align:center; color:red}
</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 这个标题使用了内部样式表。</H1>
外部样式表(External Style Sheet)
用文本编辑器(NotePad)建立一个叫**的文件,扩展名为.css 。文件内容如下:
H1.mylayout {border-width: 1; border: solid; text-align : center;color:red}
调用<HEAD><link href="home.css" rel="stylesheet" type="text/css"></HEAD>
<H1 class="mylayout"> 这个标题使用了外部样式表。</H1>
33.字体属性
字体名称属性(font-family)
P{font-family:”New century Schoolbook”,华文彩云,黑体,楷体}
字体大小属性(font-size)
{font -size:16pt} 最常用的就是pt和px(pixel)
字体风格属性(font-style)
{font-sytle:italic}属性值可选:n ormal, italic, oblique。normal是缺省值,italic , oblique都 是斜体显示。
字体浓淡属性(font-weight)
这个属性常用值是normal和bold,n ormal 是缺省值。
字体变量属性(font-variant)
这个属性有两个值,n ormal 和small-caps,normal是缺省值 。small-caps表示小的大写字体。
34. 文本属性
文本对齐属性 (text –align:)
left (居左,缺省值) right (居右 ) center (居中) justify (两端对齐)
.p2 {text -align:right
文本修饰属性(text-decoration)
none (无 ,缺省值)
underline (下划线)
overline (上划线)
line-through (当中划线)
示例代码如下 :.p2 {text-dec oration : underline}
文本缩进属性(text-indent)
length (长度 ,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
percentage (百分比,相当于父对象宽度的百分比 )
示例代码如下:.p1 {text-indent: 8mm}
行高属性(line-height)
normal (缺省值) length (长度,可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))
percentage (百分比,相当于父对象高度的百分比)
示例代码如下:.p1 {line-height:1cm}
字间距属性(letter-spacing)
n ormal (缺省值)
length (长度,可以用绝对单位(cm, mm , in, pt, pc)或者相对单位 (em, ex, px))
示例代码如下:.p1 {letter-spacing: 3mm}
颜色属性(color)
示例代码如下:.p1{color:gray}
背景颜色属性(background -color) body {background-color:#99FF00 ;}
背景图片属性(background -image)
<body style="background-image:url(../images/css_tutorials/background.jpg)">
35. CSS伪类
1. 锚(a)伪类
a :link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FFCC00}
a:active {color: #0000FF}
2 class伪类
a.c1:link {col or: #FF0000}
a.c1:visited {color: #00FF00}
a.c1:hover {color: #FFCC00}
a.c1:active {color: #0000FF}
36.Css滤镜
a) Alpha 滤镜透明度
语法:{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,
startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。
Style参数指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形。
Finishopacity是一个可选项,用来设置结束时的透明度,从而达到一种渐变效果,它的值也是从0到100。
StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。
b) Blur 滤镜模糊效果
语法:对于HTML:{ilter:blur(add=add,direction=direction,strength=strength)}
“ADD”参数是一个布尔判断“TRUE(默认)”或者“FALSE”。它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的,
“DIRECTION”参数用来设置模糊的方向。其中0度代表垂直向上,然后每45度为一个单位。它的默认值是向左的270度。
“STRENGTH“值只能使用整数来指定,她代表有多少像素的宽度将受到模糊影响。默认是5个。
c) FlipH, FlipV 滤镜
语法:{filter:filph} ,{filter:filpv} 分别是水平反转和垂直反转,
d) Chroma 滤镜透明色
语法:{filter:chroma(color=color)}
使用”Chroma"属性可以设置一个对象中指定的颜色为透明色,参数COLOR即要透明的颜色。
e) DropShadow 滤镜阴影效果
语法:{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}
“DropShaow"顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量,加上较深。"Color"代表投射阴影的颜色,"offx"和"offy"分别是X方向和Y方向阴影的饿偏移量。"Positive"参数是一个布尔值,如果为“TRUE(非0)”,那么就为任何的非透明像素建立可见的投影。如果为“FASLE(0)”,那么就为透明的像素部分建立透明效果
f) Glow 滤镜发光的效果
语法:{filter:glow(color=color,strength)}
当对一个对象使用"glow"属性后,这个对象的边缘就会产生类似发光的效果。“COLOR”是指定发光的颜色,“STRENGTH”则是强度的表现,可以从1到255之间的任何整数来指定这个力度。
g) Gray ,Invert,Xray 滤镜
语法:{filter:gray} ,{filter:invert},{filter:xray}
Gray滤镜是把一张图片变成灰度图;Invert滤镜是把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值;Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的“X”光片
h) Light 滤镜
语法:Filter{light}
这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT"滤镜属性,那么就可以调用它的“方法(Method)"来设置或者改变属性。“LIGHT"可用的方法有:
AddAmbient 加入包围的光源
AddCone 加入锥形光源
AddPoint 加入点光源
Changcolor 改变光的颜色
Changstrength 改变光源的强度
Clear 清除所有的光源
MoveLight 移动光源
可以定义光源的虚拟位置,以及通过调整X轴和Y轴的数值来控制光源焦点的位置,还可以调整光源的形式(点光源或者锥形光源)指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源,可能回产生一些意想不到的效果。
i) Mask 滤镜
语法:{filter:mask(color=color)}
使用"MASK"属性可以为对象建立一个覆盖于表面的膜,其效果就象戴者有色眼镜看物体一样。
j) Shadow 滤镜
语法:{filter:shadow(color=color,direction=direction)}
利用“Shadow”属性可以在指定的方向建立物体的投影,COLOR是投影色,DIRECTION是设置投影的方向。其中0度代表垂直向上,然后每45度为一个单位。它的默认值是向左的270度。
k) Wave滤镜
语法{filter:wave(add=add,freq=freq,lightstrength=strength,
phase=phase,strength=strength)}
"wave" 属性把对象按垂直的波形样式打乱。默认是“TRUE(非0)”,
“ADD”表示是否要把对象按照波形样式打乱,
“FREQ”是波纹的频率,也就是指定在对象上一共需要产生多少个完整的波纹,
“LIGHTSTRENGTH”参数可以对于波纹增强光影的效果,范围0----100,
“PHASE”参数用来设置正弦波的偏移量。
“STRENGTH”代表振幅大小。
37.光标形状
hand手形
crosshair 精确定位“+”字
text 文本“I”形
wait 等待
default 默认光标
help 帮助
e-resize 箭头朝右方
ne-resize 箭头朝右上方
n-resize 箭头朝上方
nw-resize 箭头朝左上方
w-resize 箭头朝左方
sw-resize 箭头朝左下方
s-resize 箭头朝下方
se-resize 箭头朝右下方
ps:摘自百度文库
|