DW中CSS属性详解Word文档格式.docx
- 文档编号:19967644
- 上传时间:2023-01-13
- 格式:DOCX
- 页数:17
- 大小:27.45KB
DW中CSS属性详解Word文档格式.docx
《DW中CSS属性详解Word文档格式.docx》由会员分享,可在线阅读,更多相关《DW中CSS属性详解Word文档格式.docx(17页珍藏版)》请在冰豆网上搜索。
表示比当前小一个级别或大一个级别的尺寸。
Style:
定义字体样式为Normal、Italic、或者Oblique。
Italic和Oblique是斜体字体。
默认设置为Normal。
相对应的CSS属性是”font-style”。
Italic和Oblique都是斜体字体。
而它们不同的是,Italic是斜体字,而Oblique是倾斜的文字,对于没有斜体的字体应该用Oblique。
LineHeight:
设置文本所在行的行高。
默认为Normal,你也可以自己键入一个精确的数值并选取一个计量单位。
比较直观的写法用百分比,例如140%是指行高等于文字大小的1.4倍。
相对应的CSS属性是”line-height”。
Decoration:
在文本中添加underline(下划线)、overline(上划线)、line-through(中划线)、blink(闪烁效果)。
这些效果可以同时存在,将效果前的复选框选定即可。
相对应的CSS属性是”text-decoration”。
链接的默认设置是Underline,我们可以通过选none去除下划线。
Blink(闪烁效果)只在NC浏览器里可以看到。
Weight:
给字体指定粗体字的磅值。
Normal等同于400;
Bold等同于700。
设粗体字一般用bold。
相对应的CSS属性是”font-weight”。
Variant:
允许你选取字体的变种,选small-caps(小型大写字母)时,此样式区域内所有字母大写。
相对应的CSS属性是”font-variant”。
Case:
将选区中每个单词的第一个字母转为大写,或者令单词全部大写或全部小写。
参数:
capitalize(单词首字母大写)、uppercase(转换成大写)、lowercase(转换成小写)、none(不转换)。
相对应的CSS属性是”text-transform”。
Color:
定义文字颜色。
相对应的CSS属性是”color”。
CSS中颜色的值有三种表示方法:
l #RRGGBB格式,是由红绿蓝三种颜色的值组合,每种颜色的值为“00–FF”的两位十六进制正整数。
#FF0000表示红色,#FFFF00表示黄色。
l rgb(R,G,B)格式,RGB为三色的值,取0~255,例如:
rgb(255,0,0)表示红色,rgb(255,255,0)表示黄色。
l 用颜色名称。
CSS可以使用已经定义好的颜色名称。
red表示红色,yellow表示黄色。
2. Background(背景)
Background面板主要是对元素的背景进行设置,包括背景颜色、背景图象、背景图象的控制。
一般是对BODY(页面)、TABLE(表格)、DIV(区域)的设置。
BackgroundColor:
设置元素的背景色。
相对应的CSS属性是”background-color”。
BackgroundImage:
设置元素的背景图像。
相对应的CSS属性是”background-image”。
Repeat:
确定背景图像是否以及如何重复。
NoRepeat:
在元素的开头显示一遍图像。
在元素的背景部分水平和垂直方向平铺图像。
Repeat-xandRepeat-y:
分别在水平和垂直方向重复显示,默认为Repeat。
相对应的CSS属性是”background-repeat”。
如果定义的元素的BODY,可以控制页面背景是否重复。
Attachment:
固定背景图像或者跟随内容滚动。
参数fixed表示固定背景,scroll表示跟随内容滚动的背景。
相对应的CSS属性是”background-attachment”。
如果定义的元素的BODY,可以使页面背景固定。
Horizontal:
指定背景图像的水平位置。
可以指定为left(左边),center(居中),right(右边);
也可以指定数值,如20px是指背景距离左边20象素。
相对应的CSS属性是”background-position”。
Vertical:
指定背景图像的垂直位置。
可以指定为top(顶部),center(居中),bottom(底部);
也可以指定数值。
水平位置和垂直位置使用的是同一个CSS属性,在设置时要注意。
3. Block(区块)
Block面板主要是设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。
WordSpacing:
设置单词之间的间距。
可以设置负值。
相对应的CSS属性是”word-spacing”。
一般情况下IE不支持此属性,仅在MAC平台上的IE4+可用。
LetterSpacing:
设置字符之间的间距。
可以指定负值。
因为中文也是字符,这个参数可以设置文字间的间距。
相对应的CSS属性是”letter-spacing”。
VerticalAlign:
指定元素的垂直对齐方式。
可以指定sub(下标)、super(上标)、top(与顶端对齐)、middle(居中)、bottom(与底端对齐)……。
相对应的CSS属性是”vertical-align”。
TextAlign:
设置文本的排列方式。
Left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)。
相对应的CSS属性是”text-align”。
TextIndent:
设置文本第一行的缩进值。
负值用于将文本第一行向外拉。
要在每段前空两格,可设置为2em,因为em是当前字体尺寸,2em就是两个字的大小。
相对应的CSS属性是”text-indent”。
Whitespace:
设置如何处理元素内的空白符。
有三个选项可选:
Normal会将空白符全部压缩;
Pre则会如同处理pre标签内的文本一样处理这些空白符(也就是说,所有的空白符,包括空格,标签,回车,等都会得以保留);
Nowrap指定文本只有遇到br标签时才换行。
相对应的CSS属性是”white-space”。
4. Box(盒子)
Box面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。
Width:
定义元素的宽。
相对应的CSS属性是”width”。
Height:
定义元素的高。
相对应的CSS属性是”height”。
宽和高定义的对象多为图片,表格,层等。
Float:
定义元素的漂浮方式。
left表示对象浮在左边、right表示对象浮在右边、none表示对象不浮动。
相对应的CSS属性是”float”。
Clear:
不允许元素的漂浮。
left表示不允许左边有浮动对象、right表示不允许右边有浮动对象、none表示允许两边都可以有浮动对象、both不允许有浮动对象。
相对应的CSS属性是”clear”。
Padding:
定义元素内容与其边框的空距(如果元素没有边框就是指页边的空白)。
可以分别设置top(上补白)、right(右补白)、bottom(下补白)、left(左补白)的值。
相对应的CSS属性分别是”padding;
padding-top;
padding-right;
padding-bottom;
padding-left”。
Margin:
定义元素的边框与其他元素之间的距离(如果没有边框就是指内容之间的距离)。
可以分别设置top(上边界)、right(右边界)、bottom(下边界)、left(左边界)的值。
相对应的CSS属性分别是”margin;
margin-top;
margin-right;
margin-bottom;
margin-left”。
下面是补白、边框、边界之间的关系图:
5. Border(边框)
Border面板可以设置对象边框的宽度、颜色及样式。
设置元素边的宽度。
可以分别设定Top(上边宽)、Right(右边宽)、Bottom(下边宽)、Left(左边宽)的值。
相对应的CSS属性分别是”border;
border-top;
border-right;
border-bottom;
border-left”。
设置边框的颜色。
你可以分别对每条边设置颜色。
相对应的CSS属性分别是”border-color;
border-top-color;
border-right-color;
border-bottom-color;
border-left-color”。
我们可以通过设置不同的颜色做出亮边和暗边的效果,这样元素看起来是立体的。
设置边框样式。
可以设置为none(无边框)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(凹槽)、ridge(凸槽)、inset(凹边)、outset(凸边)等边框样式。
相对应的CSS属性是”border-style”。
dotted(点线)、dashed(虚线)必须要IE5.5以上或者MAC平台支持,否则效果为实线。
6. List(列表)
List面板可以设置列表项样式、列表项图片、和位置。
Type:
设置列表项所使用的预设标记。
可以设置的样式有:
disc(实心圆)、circle(空心圆)、square(方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无项目符号)。
相对应的CSS属性是”list-style-type”。
BulletImage:
设置列表项的图像。
值为图象的URL地址或路径。
相对应的CSS属性是”list-style-image”。
Position:
设置列表项在文本内还是在文本外。
Inside:
列表项目标记放置在文本以内,Outside:
列表项目标记放置在文本以外。
相对应的CSS属性是”list-style-position”。
7. Positioning(定位)
Positioning面板就相当于对象放在一个层里来定位,它相当于HTML的DIV标记。
你可以把定义看作为一个CSS定义的层。
设定对象的定位方式。
有三种方式:
Absolute(绝对定位)、Relative(相对定位)、Static(无特殊定位)。
相对应的CSS属性是”position”。
Visibility:
设定对象定位层的最初显示状态。
有三种状态:
Inherit(继承父层的显示属性)、Visible(对象可视)、Hidden隐藏对象。
相对应的CSS属性是”visibility”。
Z-Index:
设置对象的层叠顺序。
编号较大的层会显示在编号较小的层上边。
变量值可以是正值也可以是负值。
相对应的CSS属性是”z-index”。
Overflow:
设置如果层的内容超出了层的大小时如何处理。
有四种处理方式:
visible,增加层的大小,从而将层的所有内容显示出来;
hidden,保持层的大小不变,将超出层的内容剪裁掉;
Scroll,总是显示滚动条;
Auto,只有在内容超出层的边界时才显示滚动条。
相对应的CSS属性是”overflow”。
Placement:
设置对象定位层的位置和大小。
可以分别设置left(左边定位)、top(顶部定位)、width(宽)、height(高)。
相对应的CSS属性分别是”left;
top;
width;
height”。
Clip:
定义定位层的可视区域。
区域外的部分为不可视区,为透明的。
可以理解为在定位层上放一个矩形遮罩的效果。
相对应的CSS属性是”clip”。
此参数只要在绝对定位时有效。
当Type里设定了绝对定位后,会为对象加上一个绝对定位的层。
这个CSS创建的层同一般的层一样有属性面板,也显示在层管理面板中。
你可以通过设置这个定位层的属性面板修改上述参数,不过在此属性面板里改动的值会作为内嵌样式加在对象标记后面,下图是定位层的属性面板:
8. Extensions(扩展)
Pagebreak:
在打印的时候强迫在样式控制的对象前后换页。
Before:
设置对象前出现的页分割符。
设置为always时,始终在对象之前插入页分割符。
相对应的CSS属性是”page-break-before”。
After:
设置对象后出现的页分割符。
设置为always时,始终在对象之后插入页分割符。
相对应的CSS属性是”'
>
。
以上IE5仅支持always值和空白值(null)。
Cursor:
当鼠标滑过样式控制的对象时改变鼠标形状。
可以设置为hand(手型)、crosshair(“十”型)、text(“I”型)、wait(等待)、default(默认)、help(帮助)、e-resize(东箭头)、ne-resize(东北箭头)、n-resize(北箭头)、nw-resize(西北箭头)、w-resize(西箭头)、sw-resize(西南箭头)、s-resize(南箭头)、se-resize(东南箭头)和auto(自动)。
Filter:
在样式中加上滤镜特效。
由于此属性内容比较多,我们将到下一章单独对滤镜介绍。
二、滤镜
CSS提供了一些内置的多媒体滤镜特效,使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片、文本容器、以及其他一些对象。
Dreamweaver4提供了16种滤镜可供选择,如下图:
下面,我们就来看看在Dreamweaver4里如何方便的使用这些CSS滤镜。
建立一个自定义样式“.filter”,在Filter下拉框里选Alpha滤镜,我们将“Alpha(Opacity=?
FinishOpacity=?
Style=?
StartX=?
StartY=?
FinishX=?
FinishY=?
)”的Opacity参数设为50,后面的参数都删掉,如下图:
按OK后就建立了一个“.filter”的自定义样式,我们把这个样式应用到图片上,图片就是半透明的了。
如果把这个样式应用到表格上,表格也变成了半透明状态了。
注意所有滤镜效果都要在浏览器里才能看到。
下面是原码:
<
styletype="
text/css"
!
--
.filter{ filter:
Alpha(Opacity=50)}
-->
/style>
这个例子我们没有用到后面的几项参数,只用到Opacity参数,所以将其他参数删掉。
下面我们来讲解每个滤镜的效果和参数:
1. Alpha:
设置透明度
Alpha(Opacity=?
)
Opacity:
透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。
FinishOpacity:
设置渐变的透明效果时,用来指定结束时的透明度,范围也是0到100。
设置渐变透明的样式,值为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=?
是指要设置为透明的颜色。
5. DropShadow:
建立阴影效果
DropShadow(Color=?
OffX=?
OffY=?
Positive=?
指定阴影的颜色。
OffX:
指定阴影相对于元素在水平方向偏移量,整数。
OffY:
指定阴影相对于元素在垂直方向偏移量,整数。
Positive:
是一个布尔值,值为true(非0)时,表示为建立外阴影;
为false(0),表示为建立内阴影。
6. FlipH:
将元素水平反转
7. FlipV:
将元素垂直反转
8. Glow:
建立外发光效效果
Glow(Color=?
是指定发光的颜色。
光的强度,可以是1到255之间的任何整数,数字越大,发光的范围就越大。
9. Gray:
去掉图像的色彩,显示为黑白图象
10. Invert:
反转图象的颜色,产生类似底片的效果
11. Light:
放置光源的效果,可以用来模拟光源在物体上的投影效果
此效果需要用JS设置光的位置和强度。
12. Mask:
建立透明遮罩
Mask(Color=?
设置底色,让对象遮住底色的部分透明。
13. RevealTrans:
建立切换效果
RevealTrans(Duration=?
Transition=?
是切换时间,以秒为单位。
Transtition:
是切换方式,可设置为从0到23。
如果做页面间的切换效果,可以在<
head>
区加上一行代码:
Metahttp-equiv=Page-entercontent=revealTrans(Transition=?
Duration=?
)>
如果用在页面里的元素必须配合JS使用。
14. Shadow:
建立另一种阴影效果
Shadow(Color=?
是指阴影的颜色。
是设置投影的方向,0度代表垂直向上,然后每45度为一个单位。
15. Wave:
波纹效果
Wave(Add=?
Freq=?
LightStrength=?
Phase=?
表示是否显示原对象,0表示不显示,非0表示要显示原对象。
Freq:
设置波动的个数。
LightStrength:
设置波浪效果的光照强度,从0到100。
0表示最弱,100表示最强。
Phase:
波浪的起始相角。
从0到100的百分数值。
(例如:
25相当于90度,而50相当于180度。
设置波浪摇摆的幅度。
16. Xray:
显现图片的轮廓,X光片效果
在使用CSS滤镜时,必须使用在有区域的元素,比如表格,图片等。
而文本,段落这样没有区域的元素不能使用CSS滤镜,对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。
看下面这个例子,我们对一行文字做阴影效果(dropshadow),新建自定义样式.shadow,在filter下拉框里选择“DropShadow(Color=?
)”,我们设置为“DropShadow(Color=999999,OffX=2,OffY=2,Positive=1)”。
然后把定义好的样式应用在页面中,我们发现在表格里的文字有了阴影,而段落里的文字却没有阴影。
点CSSStyles面板里的编辑样式表按钮,给样式加上Hight属性:
为了不影响原来对象的高度,我们设置的高度不能超过字体本身的高度。
OK后,在浏览器中可以看到段落里的文字也有阴影了。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DW CSS 属性 详解