文档库 最新最全的文档下载
当前位置:文档库 › CSS滤镜使用

CSS滤镜使用

CSS滤镜使用
CSS滤镜使用

1、Alpha 滤镜

"Alpha"属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定各种不同范围的透明度。

Alpha 滤镜语法

{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,

style=style,startx=startx,

starty=starty,finishx=finishx,finishy=finishy)}

参数含义分别如下:

参数说明

opacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。

finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。

style 指定透明区域的形状特征:

0 代表统一形状

1 代表线形

2 代表放射状

3 代表矩形

startx 渐变透明效果开始处的 X坐标。

starty 渐变透明效果开始处的 Y坐标。

finishx 渐变透明效果结束处的 X坐标。

finishy 渐变透明效果结束处的 Y坐标。

2、BlendTrans滤镜:它的功能也比较单一,就是产生一种精细的淡入淡出的效果。

(BlendTrans滤镜功能也比较单一,只有一个参数:Duration(变换时间)。需要借助于javascript 来调用它的方法来实现转换功能。)

3、Blur 滤镜

用手指在一幅尚未干透的画面迅速划过时,画面就会变得模糊。”Blur"就是产生同样的模糊效果。

Blur滤镜语法 HTML:{filter:blur(add=add,direction=direction,

strength=strength)}

Script语言: [oblurfilter=] object.filters.blur

参数含义分别如下:

参数说明

add 它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的,

这是一个布尔值:ture (默认)或false

direction 该参数用来设置模糊的方向。

0度代表垂直向上,每45度为一个单位,默认值是向左的270度

strength 只能使用整数来指定,代表有多少像素的宽度将受到模糊影响,默认是5个像素。

4、Chroma滤镜:

Filter:Chroma(color=color)

这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。

5、DropShadow滤镜:

“DropShaow",顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量,加上色彩。DropShadow 滤镜语法 {filter:dropshadow

(color=color,offx=ofx,offy=offy,positive=positive)}

参数含义如下:

参数说明

Color 代表投射阴影的颜色

offx X方向阴影的偏移量

offy Y方向阴影的偏移量

Positive 布尔值

如果为TRUE(非0),就为任何的非透明像素建立可见的投影

如果为FASLE(0),就为透明的像素部分建立透明效果

6、FlipH滤镜

FlipH 滤镜实现水平反转

FlipH 滤镜语法 {filter:filph}

7、FlipV 滤镜

FlipV 滤镜实现垂直反转

FlipV 滤镜语法 {filter:filpv}

8、Glow 滤镜

对一个对象使用"glow"属性后,这个对象的边缘就会产生类似发光的效果。

Glow 滤镜语法 {filter:glow(color=color,strength)}

参数含义如下:

参数说明

Color 指定发光的颜色

STRENGTH 强度,值为1到255之间的任何整数,指定发光色力度和范围。

9、Gray 滤镜

使用Gray滤镜可以把一张图片变成灰度图,语法很简单:

Gray 滤镜语法 {filter:gray}

10、Invert滤镜

使用Invert滤镜可以把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值

Invert 滤镜语法 {filter:invert}

Xray 滤镜语法 {filter:xray}

11、Mask 滤镜

Mask 滤镜语法 {filter:mask(color=color)}

使用"MASK"属性可以为对象建立一个覆盖于表面的膜,其效果就象戴着有色眼镜看物体一样。

12、Light 滤镜

Light 滤镜语法 {filter:light}

这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT"滤镜属性,那么就可以调用它的“方法(Method)"来设置或者改变属性。“LIGHT"可用的方法有:

参数说明

AddAmbient 加入包围的光源

AddCone 加入锥形光源

AddPoint 加入点光源

Changcolor 改变光的颜色

Changstrength 改变光源的强度

Clear 清除所有的光源

MoveLight 移动光源

我们可以定义光源的虚拟位置,以及通过调整X轴和Y轴的数值来控制光源焦点的位置,还可以调整光源的形式(点光源或者锥形光源)指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源,可能会产生一些意想不到的效果。

13、RevealTrans动态滤镜:是一个神奇的滤镜,它能产生23种动态效果,还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换,非常方便。

14、Shadow 滤镜

Shadow 滤镜

语法 {filter:shadow(color=color,direction=direction)}

利用“Shadow”属性可以在指定的方向建立物体的投影,COLOR是投影色,DIRECTION是设置投影的方向。其中0度代表垂直向上,然后每45度为一个单位。它的默认值是向左的270度。

15、Wave 滤镜

Wave 滤镜

语法 {filter:wave(add=add,freq=freq,

lightstrength=strength,

phase=phase,strength=strength)}

参数说明

wave 把对象按垂直的波形样式打乱。

默认是 TRUE(非0)

ADD 是否要把对象按照波形样式打乱

FREQ 波纹的频率,也就是指定在对象上一共需要产生多少个完整的波纹

LIGHTSTRENGTH 可以对于波纹增强光影的效果,范围0----100

PHASE 设置正弦波的偏移量

STRENGTH 振幅大小

16、Xray滤镜

使用Xray滤镜可以让对象反映出它的轮廓并把这些轮廓加亮,类似于所谓的“X”光片。

“光标”选项,光标显示属性设置

制作方法:

1、制作一个BlendTrans滤镜,取名为“myblen",Duration设置为“3"(即转换时间为3秒),滤镜设置好后,在网页源代码的< head >与< /head >之间将有下面这样一段代码:

< style type="text/css" >

< !--

.myblen { filter:blendTrans(Duration=3)

}

-- >

< /style >

2、插入第一张图片(本例图片为570X150像素),在图片的属性面板上给图片加个名称:myimg

3、把BlendTrans滤镜加载到图片上,这时图片的“img"标记的代码是这样的:

4、在网页的源代码< head >与< /head >之间插入下面这段javascript程序:

5、在网页源代码的< body >加入这样的一句代码:onload="play()"。

设置完成,点F12预览效果

W3cSchool_DIV+CSS2_参考手册

CSS 参考手册 CSS背景属性 属性描述值 background 简写属性,作用是将背景属性设置在一个声明中。background-color background-image background-repeat background-attachment background-position background-attachment 设置是否背景图像是固定的或随页面其余部分滚动。scroll fixed background-color 设置元素的背景颜色。color-rgb color-hex color-name transparent background-image 将图像设置为背景。url none background-position 设置背景图像的起始位置。top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos background-repeat 设置背景图像是否及如何重复。repeat repeat-x repeat-y no-repeat CSS 边框属性(border) 属性描述值 border 简写属性。作用是在一个声明中用来设置四个边框的所有属性。border-width border-style border-color border-bottom 简写属性。作用是在一个声明中用来设置底边框的所有属性。border-bottom-width border-style border-color border-bottom-color 设置底边框的颜色。border-color border-bottom-style 设置底边框的样式。border-style border-bottom-width 设置底边框的宽度。thin medium thick length border-color 设置四个边框的颜色,可以设置一到四个颜色。color

CSS_style属性大全

CSS style属性大全 显示: 标签属性/属性行为集合事件滤镜方法对象样式 一、标签属性属性描述 ALIGN align 设置或获取表格排列。 ALLOWTRANSPARENCY allowTransparency 设置或获取对象是否可为透明。 APPLICATION APPLICATION 表明对象的内容是否为HTML 应用程序(HTA),以便免除浏览器安全模式。ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。 BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。 BORDER border 设置或获取框架间的空间,包括3D 边框。 canHaveChildren 获取表明对象是否可以包含子对象的值。 canHaveHTML 获取表明对象是否可以包含丰富的HTML 标签的值。 CLASS className 设置或获取对象的类。 contentWindow 获取指定的frame 或iframe 的window 对象。 DA TAFLD dataFld 设置或获取由dataSrc 属性指定的绑定到指定对象的给定数据源的字段。 DA TASRC dataSrc 设置或获取用于数据绑定的数据源。 disabled 获取表明用户是否可与该对象交互的值。 END end 设置或获取表明元素结束时间的值,或者元素设置为重复的简单持续终止时间。 firstChild 获取对象的childNodes 集合的第一个子对象的引用。 FRAMEBORDER frameBorder 设置或获取是否显示框架的边框。 hasMedia 获取一个表明元素是否为HTML+TIME 媒体元素的Boolean 值。 HEIGHT height 设置或获取对象的高度。 HIDEFOCUS hideFocus 设置或获取表明对象是否显式标明焦点的值。 HSPACE hspace 设置或获取对象的水平边距。 ID id 获取标识对象的字符串。 innerText 设置或获取位于对象起始和结束标签内的文本。 isContentEditable 获取表明用户是否可编辑对象内容的值。 isDisabled 获取表明用户是否可与该对象交互的值。 isMultiLine 获取表明对象的内容是包含一行还是多行的值。 isTextEdit 获取是否可使用该对象创建一个TextRange 对象。 LANG lang 设置或获取要使用的语言。 LANGUAGE language 设置或获取当前脚本编写用的语言。

CSS 滤镜大全

CSS 滤镜大全 css滤镜的标识符式“filter”,总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。可以直接作用于对象上,并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言,能产生更多变幻效果的则称为高级滤镜。 progID= program identifier (程序ID) DX=DirectX 在CSS样式中,提供了filter(滤镜效果),它可以对文字、图片、表格等确定范围的HTML标记设置滤镜效果。 旋转: style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)" 去背景色: style="filter:Chroma(Color=#000000)" 设置渐变色: style="position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolo rstr=#ffff00,gradientType=1)" 以下是图片转换滤镜: 随机变换:progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23) 方形渐小:progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in) 方形渐大:progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out) 交叉渐小:progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in) 交叉渐大:progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out) 菱形渐小:progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in) 菱形渐大:progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out) 圆形渐大:progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out) 圆形渐小:progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in) 加号渐大:progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)

CSS扩展属性

CSS扩展属性 “扩展”样式属性包括过滤器、分页和光标选项,它们中的大部分效果仅受 Internet Exp lorer 4.0 和更高版本的支持。 指定扩展属性:在“CSS 样式定义”对话框中,选择“扩展”(如下图),然后设置所需的样式属性。 (图片较大请放大后查看) 分页:在打印期间在样式所控制的对象之前或者之后强行分页。选择要在弹出式菜单中设置的选项。此选项不受任何 4.0 版本浏览器的支持,但可能受未来的浏览器的支持。 光标:位于“视觉效果”下的“光标”选项,是光标显示属性设置。当指针位于样式所控制的对象上时改变指针图像。选择弹出式菜单(下图)进行设置。它的详细列表和相关说明。

过滤器:又称 CSS滤镜,对样式所控制的对象应用特殊效果。它把我们带入绚丽多姿的世界。正是有了滤镜属性,页面才变得更加漂亮。DW MX 2004 扩展类过滤器嵌入16项样式属性(如下图),您可以根据您的需要从“过滤器”弹出式菜单中选择并加以设置。 (图片较大请放大后查看) 下图列出16项滤镜及说明,现在再进一步介绍一下:

“Alpha”滤镜:这个名字,在Flash和Photoshop经常见到。它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。 BlendTrans滤镜:它的功能也比较单一,就是产生一种精细的淡入淡出的效果。 Blur滤镜:把它加载到文字上,产生风吹模糊的效果,类似立体字,这将为你在网页上制作立体字标题带来了方便。也可以把Blur滤镜加载到图片上,能达到用图象处理软件制作的效果。 “DropShadow”顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面,然后在页面上显示出该对象的投影。 CSS的无参数滤镜共有六个(FlipH、FlipV、Invert、Xray、Gray和Light),虽然它们没有参数,相对来讲,灵活性要差点,但它们用起来更方便,效果也相当明显。用它们可以使文字或图片翻转、获得图片的“底片”效果,甚至可以制作图片的“X光片”效果。 glow滤镜:使对象的边缘就产生类似发光的效果,glow”滤镜制作这种效果操作非常简便。 Mask滤镜:可以为网页上的元件对象作出一个矩形遮罩效果。 wave滤镜:它的作用是把对象按照垂直的波形样式扭曲的特殊效果。 Light滤镜:能产生一个模拟光源的效果,配合使用一些简单的Javascrpt,使对象产生奇特光照的效果。 RevealTrans动态滤镜:是一个神奇的滤镜,它能产生23种动态效果,还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换,非常方便。

dw滤镜效果

DW中的css滤镜 一、哪些标识能被CSS滤镜应用? Body(网页主体)Button(HTML按钮)Div(一区块)Img(图像)Imput(表单输入元件)Marquee(滚动文本)Span(与上下文位于同一段落的独立行内元件)Table(整个表格)TD(单元格)Textarea(多行文字输入框)Tfoot(当作注脚的表格行)TH(表头)Thead(表格的表头行)TR(表格的一行) 二、各种滤镜效果 alpha是用来设置透明度的 Mask属性为对象建立一个覆盖于表面的膜 blur属性假如您用手在一幅还没干透的油画上迅速划过,画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果 Chroma属性可以设置一个对象中指定的颜色为透明色 DropShadow属性是为了添加对象的阴影效果的 FlipH、FlipV属性 Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转 Glow属性当对一个对象使用“Glow”属性后,这个对象的边缘就会产生类似发光的效果 Invert属性可以把对象的可视化属性全部翻转,包括色彩、饱和度和亮度值 Shadow属性可以在指定的方向建立物体的投影 Wave属性用来把对象按照垂直的波纹样式打乱。 Xray属性这种属性产生的效果就是使对象看上去有一种X光片的感觉 滤镜说明: Alpha:设置透明层次. blur:创建高速度移动效果,即模糊效果. Chroma:制作专用颜色透明. DropShadow:创建对象的固定影子. FlipH:创建水平镜像图片. FlipV:创建垂直镜像图片. glow:加光辉在附近对象的边外. gray:把图片灰度化. invert:反色. light:创建光源在对象上. mask:创建透明掩膜在对象上. shadow:创建偏移固定影子. wave:波纹效果. Xray:使对象变的像被x光照射一样. 三、滤镜参数设置

《网页设计与制作》教案-第18讲 使用CSS美化网页二

第18讲使用CSS美化网页二 1.1教学目标: ◆知识目标 1.掌握一些CSS样式表的基本滤镜效果。 2.理解Dreamweaver CS6新增加的Spry组件功能。 ◆技能目标 1.能使用CSS样式表定义链接的各种状态 2.运用重定义HTML标签来统一页面元素格式 ◆品质目标 培养学生认真细致、踏实进取的精神 1.2教学重点: 1.掌握一些CSS样式表的基本滤镜效果。 2.掌握Dreamweaver CS6新增加的Spry组件功能。 1.3 教学难点 制作CSS样式表的基本滤镜效果 1.4教学方法:讲练结合,任务驱动、分子任务操练 1.5课时安排:2课时 1.6教学对象分析: 这个班学生具有基本专业技能,不仅仅是要教会他们方法,最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力,在保证全班同学教学进度一致的情况上,培养学生较好的专业基础与创新创作意识。 1.7教学过程: 一、CSS滤镜 在许多图像编辑软件中都有制作特效的滤镜功能,例如Photoshop和Fireworks,滤镜神奇的功能常常使我们赞叹不绝。在Dreamweaver中也有这样的功能,我们可以在CSS样式表中使用特定的语法来制作特效。 一般来说,制作文字特效往往使用专业的图像编辑软件,但是图像下载的时间较长,严重影响了页面的下载速度。通过CSS样式表可以解决这个问题,CSS样式表的定义仅需要三至四行源代码,大大加快了页面下载的速度,同时又增加了页面的视觉效果。但是,应用样式表也同时带来了许多问题,例如浏览器对样式表的兼容性,同时较复杂的样式表中要用到层,这对其他不支持样式表和层的浏览器来说,无疑是一种限制。下面我们介绍利用CSS滤镜制作阴影字。 在“CSS样式”面板中单击“新建CSS样式”按钮,打开“新建CSS样式”对话框。在“名称”文本框中输入样式表的名称,例如.shadow,在选择器类型选项中选择“类”,在“定义在”选项中选择“仅对该文档”,如图3-64所示。 单击“确定”按钮,则弹出“CSS样式定义”对话框。在“字体”下拉列表中选择字体,例如Arial…,选择“颜色”为#FFCC33。

css手册

CSS 背景属性 属性 描述 值 IE F N W3C background 简写属性,作用是将 背景属性设置在一 个声明中。 ? background-color ? background-image ? background-repeat ? background-attach ment ? background-positi on 4 1 6 1 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 ? scroll ? fixed 4 1 6 1 background-color 设置元素的背景颜色。 ? color-rgb ? color-hex ? color-name ? transparent 4 1 4 1 background-image 把图像设置为背景。 ? url ? none 4 1 4 1 background-position 设置背景图像的起始位置。 ? top left ? top center ? top right ? center left ? center center ? center right ? bottom left ? bottom center ? bottom right ? x-% y-% ? x-pos y-pos 4 1 6 1 background-repeat 设置背景图像是否及如何重复。 ? repeat ? repeat-x ? repeat-y ? no-repeat 4 1 4 1

border 简写属性。作用是在一个声明中用来设置四个边框的所有属性。 ? border-width ? border-style ? border-color 4 1 4 1 border-bottom 简写属性。作用是在一个声明中用来设置下边框的所有属性。 ? border-bottom-w idth ? border-style ? border-color 4 1 6 1 border-bottom-color 设置下边框的颜 色。 border-color 4 1 6 2 border-bottom-style 设置下边框的样 式。 border-style 4 1 6 2 border-bottom-width 设置下边框的宽 度。 ? thin ? medium ? thick ? length 4 1 4 1 border-color 设置四个边框的颜色,可以设置一到四个颜色。 color 4 1 6 1 border-left 简写属性。用于在一个声明中设置左边框的所有属性。 ? border-left-wid th ? border-style ? border-color 4 1 6 1 border-left-color 设置左边框的颜 色。 border-color 4 1 6 2 border-left-style 设置左边框的样 式。 border-style 4 1 6 2 border-left-width 设置左边框的宽 度。 ? thin ? medium ? thick ? length 4 1 4 1 border-right 简写属性。将所有用于右边框的属性设置于一个声明中。 ? border-right-wi dth ? border-style ? border-color 4 1 6 1 border-right-color 设置右边框的颜 色 border-color 4 1 6 2

《网页设计与制作基础》实验指导

实验一网页的认识 实验目的 1、掌握利用Internet进行信息游览、搜索,下载网页、图片、文字和文件; 2、利用记事本来编辑HTML文档并浏览; 3、熟悉HTML基本标记的使用。 实验环境 WindowsXP操作系统,内部组成局域网,外连Internet互联网。 实验重点及难点 ◆熟悉HTML的结构、语法。 ◆熟悉HTML基本标记的使用。 实验内容 1、从网上(如网页制作大宝库https://www.wendangku.net/doc/635458596.html,等)下载网页制作时需要的小图片、 动画及flash等网页制作素材。 2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析 网页。 3、通过浏览新浪网站主页分析其网页基本元素,查看其源代码,收藏到收藏夹中,将其设 为主页。 4、制作一个简单的网页sy1-1.html,用记事本编辑,网页标题为“熟悉HTML文档的结构”, 内容为司空曙的《江村即事》,如下图所示。 5、通过附录1的练习熟悉HTML基本标记的使用。(可参考第二章内容)

实验二 Dreamweaver基本操作(一) 实验目的 1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理; 2、熟悉网页文件的基本操作; 3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。 实验环境 WindowsXP操作系统,Dreamweaver CS3软件,内部组成局域网,外连Internet互联网。实验重点及难点 ◆文字的插入及设置。 ◆图像的插入及设置。 ◆各种超链接的创建。 实验内容 1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”,包含以下几 个文件和文件夹:图片文件夹(images);音乐文件夹(sound)等。 2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件,从提供的网 页原始素材中把相关文字复制到该网页文件中,并进行适当的文字设置,结果如下图所示。 3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为 sy2-2.html,效果如图所示。 ●标题文字大小用

标记; ●作者信息文字大小为24像素,字体为幼圆,颜色为红色; ●古诗文字大小为24像素,字体为隶书,颜色为蓝色; ●在作者信息后加一条水平线,居中,水平线宽度为浏览器的30%,水平线的粗细为20 个像素,颜色为棕色;

CSS用户手册(已精心整理)

一、CSS背景属性(Background) background简写属性在一个声明中设置所有的背景属性。 {backgroud:background-color;background-image;background-repeat ;background-attachment;background-position;} ?background-color:redrgb(255,255,255)#000000设置背景颜色 ?background-image:url(bgimage.gif);(值为图片的路径)设置背景图像 ?background-repeat:设置图像的排列 repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。repeat-y 背景图像将在垂直方向重复。no-repeat 背景图像将仅显示一次。 inherit 规定应该从父元素继承background-repeat 属性的设置。 ?background-attachment:设置背 ?图像是否固定或者随着页面的其余部分滚动。 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时,背景图像不会移动。 inherit 规定应该从父元素继承background-attachme nt属性的设置。 ?background-position:topleft;x%y%;5px50px设置背景图像的起始位置。 ? ?景 二、CSS边框属性(Border和Outline) border:简写属性在一个声明设置所有的边框属性{border:border-width;border-color;border-style;} border-width:设置边框宽度 *thin定义细的边框 *medium 默认。定义中等的边框。 *thick 定义粗的边框。 *length允许您自定义边框的宽度。(15px) *inherit 规定应该从父元素继承边框宽度。 border-color:设置边框颜色 *color_name规定颜色值为颜色名称的边框颜色(比如red)。*hex_number 规定颜色值为十六进制值的边框颜色(比如#ff00 00)。 *rgb_number 规定颜色值为rgb代码的边框颜色(比如rgb(25 5,0,0))。 *transparent 默认值。边框颜色为透明。 *inherit 规定应该从父元素继承边框颜色。 border-style:设置边框样式 *none 定义无边框。 *hidden 与"none"相同。不过应用于表时除外,对于表,hidd en用于解决边框冲突。 *dotted 定义点状边框。在大多数浏览器中呈现为实线。 *dashed 定义虚线。在大多数浏览器中呈现为实线。 *solid 定义实线。 *double 定义双线。双线的宽度等于border-width的值。 *groove 定义3D凹槽边框。其效果取决于border-color的值。*ridge 定义3D垄状边框。其效果取决于border-color的值。*inset 定义3Dinset边框。其效果取决于border-color的 值。 *outset 定义3Doutset边框。其效果取决于border-color的 值。 *inherit 规定应该从父元素继承边框样式。 --------border-bottom简写属性把下边框的所有属性设置到一个声明中. --------border-top/right/bottom/left {border-bottom:border-bottom-width;border-bottom-style; border-bottom-color;} -------border-style/width/color: outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 注释:轮廓线不会占据空间,也不一定是矩形。 {outline:outline-color;outline-style;outline-width;}三、CSS文本属性(Text) color:设置文本颜色 direction:设置文本的方向/书写方向 *ltr 默认。文本方向从左到右。 *rtl 文本方向从右到左。 *inherit 规定应该从父元素继承direction属性的值。 letter-spacing:设置字符间距 *normal 默认。规定字符间没有额外的空间。

css参考手册(完美整理版)

CSS 背景属性(Background) 属性描述CSS background在一个声明中设置所有的背景属性。 1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 1 background-color设置元素的背景颜色。 1 background-image设置元素的背景图像。 1 background-position设置背景图像的开始位置。 1 background-repeat设置是否及如何重复背景图像。 1 CSS 边框属性(Border 和Outline) 属性描述CSS border在一个声明中设置所有的边框属性。 1 border-bottom在一个声明中设置所有的下边框属性。 1 border-bottom-color设置下边框的颜色。 2 border-bottom-style设置下边框的样式。 2 border-bottom-width设置下边框的宽度。 1 border-color设置四条边框的颜色。 1 border-left在一个声明中设置所有的左边框属性。 1 border-left-color设置左边框的颜色。 2 border-left-style设置左边框的样式。 2 border-left-width设置左边框的宽度。 1 border-right在一个声明中设置所有的右边框属性。 1 border-right-color设置右边框的颜色。 2 border-right-style设置右边框的样式。 2 border-right-width设置右边框的宽度。 1 border-style设置四条边框的样式。 1 border-top在一个声明中设置所有的上边框属性。 1 border-top-color设置上边框的颜色。 2 border-top-style设置上边框的样式。 2 border-top-width设置上边框的宽度。 1 border-width设置四条边框的宽度。 1 outline在一个声明中设置所有的轮廓属性。 2 outline-color设置轮廓的颜色。 2 outline-style设置轮廓的样式。 2 outline-width设置轮廓的宽度。 2 CSS 文本属性(Text) 属性描述CSS color设置文本的颜色。 1 direction规定文本的方向/ 书写方向。 2 letter-spacing设置字符间距。 1 line-height设置行高。 1 text-align规定文本的水平对齐方式。 1

网页制作计算机题2

1.下列哪个不是CSS的优势?(___D ____)。 (A)符合WEB标准 (B)提高页面浏览速度 (C)有很好的兼容性 (D)可以编辑图像 2.Dreamweaver中CSS滤镜特效属于CSS样式定义分类中的(__D_____)。 (A)定位 (B)类型 (C)边框 (D)扩展 3.关于CSS的用法,以下说法哪个是错误的?(___B ____) (A)直接在DreamweaverCS5网页文件中创建CSS规则,这种方式是内部CSS样式表。(B)外部CSS样式表文件一次只能控制一个网页的格式。 (C)在