一、字体属性
1、font,设置或者检索对象中文本特性的复合属性
font:font-style||font-variant||font-weight||font-size||line-height||font-family
声明方式中参数必须按照如上的排列顺序,且每个参数仅允许有一个值,忽略的将使用其参数对应的独立属性默认值。
2、font-family,一个指定的字体名或者一个种类的字体族科
font-family:字体1,字体2,字体3,....
3、font-size,字体显示的大小
font-size:<absolute-size>|<relative-size>
4、font-style,以3种方式中的一个来显示字体:normal(普通), italic(斜体), oblique(倾斜)
font-style:normal|italic|oblique
5、font-weight,设定字体的粗细
font-weight:normal | bold | bolder| lighter | 100-900
6、font-variant,设定英文大小写转换
font-variant:normal | small-caps
二、颜色和背景属性
1、color,设定页面元素的前景色
color:color-value
2、background-color,设定页面元素的背景色
background-color:color-value
3、background-image,设定页面元素的背景图像
background-image:none|url(url)
4、background-repeat,设定一个指定的背景图像被重复的方式
background-repeat:repeat|repeat-x|repeat-y|no-repeat
5、background-attachment,设定背景图象是否跟随布面内容滚动
background-attachment:scroll|fixed
6、background-position,设定水平和垂直方向上的位置
background-position:[value]|[top|center|bottom]|[left|center|right]
7、background,背景属性的综合设定
background:background-color|| background-image||background-repeat||background-attachment||background-position
三、文本属性
1、letter-spacing,定义字符之间的间隔距离
letter-spacing:normal|length
2、word-spacing,定义单词之间的间隔距离
word-spacing:normal|length
3、text-decoration,有5个文本修饰属性,选择其中之一来修饰文本(下划线,上划线,删除线,闪烁文字,默认值)
text-decoration:underline|overline|line-through|blink|none
4、text-align,设置文本的水平对齐方式,包括左对齐、右对齐、居中、两端对齐
text-align:left|right|center|justify
5、vertical-align,设置文本的垂直对齐方式,包括垂直向上对齐、垂直向下对齐、垂直居中、文字向上对齐、文字向下对齐
vertical-align:super|sub|top|middle|bottom|text-top|text-bottom
6、text-indent,文字的首行缩进
text-indent:value
7、line-height,文本基线之间的间隔值
line-height:value
8、text-transform,控制英文文字大小写
text-transform:capitalize|uppercase|lowercase|none
四、边框属性
1、border,边框复合属性
2、border-top,上边框
3、border-left,左边框
4、border-right,右边框
5、border-bottom,下边框
6、border-color,边框颜色
border-color:color-value
7、border-style,边框样式
border-style:none|hidder|dotted|dashed|solid|double|groove|ridge|inset|outset
8、border-top-color,上边框颜色
9、border-left-color,左边框颜色
10、border-right-color,右边框颜色
11、border-bottom-color,下边框颜色
12、border-top-style,上边框样式
13、border-left-style,左边框样式
14、border-right-style,右边框样式
15、border-bottom-style,下边框样式
16、border-width,边框宽度
border-width:medium|thin|thick|length
17、border-top-width,上边框宽度
18、border-left-width,左边框宽度
19、border-right-width,右边框宽度
20、border-bottom-width,下边框宽度
五、定位属性
1、position:static|absolute|relative
2、top,距离顶点纵坐标的距离
3、left,距离顶点横坐标的距离
4、bottom,对象与其最近一个定位珠父对象底边相关的位置
5、right,对象与其最近一个定位的父对象左边相关的位置
6、width,元素的宽度
7、height,元素的高度
8、z-index,决定元素的先后顺序和覆盖关系,值高的元素覆盖值低的元素
9、clip,限定只显示剪切出来的区域,剪切出来的区域为矩形剪切设定两个点:一个是矩形左上角的顶点,由TOP和RIGHT两项设置,另一个是右下角的顶点,由BOTTOM和RIGHT两项设置
10、overflow,当元素内的内容超出元素所能容纳的范围时
visible:无论元素容纳范围的大小,内容都会显示出来
hidden:隐藏超出元素范围的内容
scroll:不管内容是否超出范围,选中此项都会添加滚动条
auto:只在内容超出范围时才显示滚动条
11、visibility,针对嵌套元素的设置,嵌套的元素称为子层,被嵌套的元素称为父层
inherit:子层继承父层的可见性
visible:无论父层可见与否,子层都可见
hidden:无论父层可见与否,子层都隐藏
六、区域属性
1、width,设定元素的宽度
2、height,设定元素的高度
3、float,允许文字环绕在一个元素的周围
4、clear,指定在某一个元素的某一边是否允许有环绕的文字或者元素
5、padding,设定在边框与内容之间插入的空间距离,有4个属性值分别用于设定上下左右的直充距离
6、margin,设定一个元素在4个方向与浏览器窗口边界或者上一级元素边界的距离,有4个属性值:top,right,bottom,left
七、列表属性
1、list-style-type,设定引导列表项目的符号类型
list-style-type:value
disc:实心圆
circle:空心圆
square:实心方块
decimal:普通数字
lower-roman:小写罗马数字
upper-roman:大写罗马数字
lower-alpha:小写英文字母
upper-alpha:大写英文字母
none: 不显示任何列表项目或者编号
2、list-style-image,选择图像作为项目的引导符号
list-sytle-image:none|url(url)
3、list-style-position,决定列表项目所缩进的程度
list-style-position:outside|inside (列表贴近左侧边框|列表缩进)
4、list-style,综合设定列表项目属性
list-style:list-style-image||list-style-position||list-style-type
八、鼠标光标属性
cursor:value
hand,手
crosshair,交叉十字
text,文本选择符号
wait,沙漏形状
default,默认的鼠标形状
help,带问号的鼠标
e-resize,向东的箭头
ne-resize,向东北的箭头
n-resize,向北的箭头
nw-resize,向西北的箭头
w-resize,向西的箭头
sw-resize,向西南的箭头
s-resize,向南的箭头
se-resize,向东南的箭头
九、空白属性
1、margin-top,相对浏览器上边距的距离
margin-top:value
2、margin-right,相对浏览器右边距的距离
margin-right:value
3、margin-bottom,相对浏览器下边距的距离
margin-bottom:value
4、margin-left,相对浏览器左边距的距离
margin-left:value
5、margin,空白属性的综合设定
margin:margin-top||margin-right||margin-bottom||margin-left
十、滤镜属性
1、Alpha,透明的层次效果 {filter:Alpha(Opacity=value,Finishopacity=value,Style=value,Starx=value,Starty=value,Finishx=value,Finishy=value)}
Opacity:代表透明水准,0-完全透明,100-完全不透明
Finishopacity:设置渐变的透明效果时,指定结束时的透明度,0到100
Style:指定透明区域的形状特征,0-统一形状,1-线形,2-放射状,3-长方形
Stylex:渐变透明效果的开始X坐标
Styley:渐变透明效果的开始Y坐标
Finishx:渐变透明效果的结束X坐标
Finishy:渐变透明效果的结束Y坐标
2、Blur,模糊效果
{filter:Blur (Add=value, Direction=value, Strength=value}
Add:指定图片是否被改变成印象派的模糊效果,true | false
Direction:用来设置模糊的方向,模糊效果是按顺时针方向进行,
Strength:有多少象素的宽度将受到模糊影响,用整数来指定,默认为5个
3、Chroma,特定颜色的透明效果
{filter:Chroma (Color=color_value}
4、Dropshadow,阴影效果
{filter:Dropshadow (Color=value, Offx=value, Offy=value, Positive=value}
Color:阴影的颜色
Offx:X轴方向阴影的偏移量
Offy;Y轴方向阴影的偏移量
Positive:TRUE,表示为不透明像素建立可见的阴影; FALSE表示为透明的像素建立可见的阴影
5、FlipH,沿水平方向翻转效果
{filter:FlipH}
6、FlipV,沿垂直方向翻转效果
{filter:FlipV}
7、Glow,边缘光晕效果
{filter:Glow (Color=color_value, Strength=value)}
Color:设定边缘光晕的颜色
Strength:设定边缘光晕的强度大小,1-255
8、Gray,灰度效果
{filter:Gray}
9、Invert,将颜色的饱和度及亮度值完全反转
{filter:Invert}
10、Mask,遮罩效果
{filter:Mask (Color=color_value)}
11、Shadow,渐变效果
{filter:Shadow (Color=color_value, Direction=value)}
12、Wave,波浪变形效果
{filter:Wave (Add=value, Freq=value, LightStrength=value, Phase=value, Strength=value)}
Add:是否把元素按照波形样式打乱
Freq:波纹的频率,指定在一个元素上需要产生多少个完整的波纹
LightStrength:增强波纹光影的效果,0-100
Phase:设置正弦波的偏移量
Strength:设置振幅的大小
13、Xray,X射线效果
{filter:Xray}
1、font,设置或者检索对象中文本特性的复合属性
font:font-style||font-variant||font-weight||font-size||line-height||font-family
声明方式中参数必须按照如上的排列顺序,且每个参数仅允许有一个值,忽略的将使用其参数对应的独立属性默认值。
2、font-family,一个指定的字体名或者一个种类的字体族科
font-family:字体1,字体2,字体3,....
3、font-size,字体显示的大小
font-size:<absolute-size>|<relative-size>
4、font-style,以3种方式中的一个来显示字体:normal(普通), italic(斜体), oblique(倾斜)
font-style:normal|italic|oblique
5、font-weight,设定字体的粗细
font-weight:normal | bold | bolder| lighter | 100-900
6、font-variant,设定英文大小写转换
font-variant:normal | small-caps
二、颜色和背景属性
1、color,设定页面元素的前景色
color:color-value
2、background-color,设定页面元素的背景色
background-color:color-value
3、background-image,设定页面元素的背景图像
background-image:none|url(url)
4、background-repeat,设定一个指定的背景图像被重复的方式
background-repeat:repeat|repeat-x|repeat-y|no-repeat
5、background-attachment,设定背景图象是否跟随布面内容滚动
background-attachment:scroll|fixed
6、background-position,设定水平和垂直方向上的位置
background-position:[value]|[top|center|bottom]|[left|center|right]
7、background,背景属性的综合设定
background:background-color|| background-image||background-repeat||background-attachment||background-position
三、文本属性
1、letter-spacing,定义字符之间的间隔距离
letter-spacing:normal|length
2、word-spacing,定义单词之间的间隔距离
word-spacing:normal|length
3、text-decoration,有5个文本修饰属性,选择其中之一来修饰文本(下划线,上划线,删除线,闪烁文字,默认值)
text-decoration:underline|overline|line-through|blink|none
4、text-align,设置文本的水平对齐方式,包括左对齐、右对齐、居中、两端对齐
text-align:left|right|center|justify
5、vertical-align,设置文本的垂直对齐方式,包括垂直向上对齐、垂直向下对齐、垂直居中、文字向上对齐、文字向下对齐
vertical-align:super|sub|top|middle|bottom|text-top|text-bottom
6、text-indent,文字的首行缩进
text-indent:value
7、line-height,文本基线之间的间隔值
line-height:value
8、text-transform,控制英文文字大小写
text-transform:capitalize|uppercase|lowercase|none
四、边框属性
1、border,边框复合属性
2、border-top,上边框
3、border-left,左边框
4、border-right,右边框
5、border-bottom,下边框
6、border-color,边框颜色
border-color:color-value
7、border-style,边框样式
border-style:none|hidder|dotted|dashed|solid|double|groove|ridge|inset|outset
8、border-top-color,上边框颜色
9、border-left-color,左边框颜色
10、border-right-color,右边框颜色
11、border-bottom-color,下边框颜色
12、border-top-style,上边框样式
13、border-left-style,左边框样式
14、border-right-style,右边框样式
15、border-bottom-style,下边框样式
16、border-width,边框宽度
border-width:medium|thin|thick|length
17、border-top-width,上边框宽度
18、border-left-width,左边框宽度
19、border-right-width,右边框宽度
20、border-bottom-width,下边框宽度
五、定位属性
1、position:static|absolute|relative
2、top,距离顶点纵坐标的距离
3、left,距离顶点横坐标的距离
4、bottom,对象与其最近一个定位珠父对象底边相关的位置
5、right,对象与其最近一个定位的父对象左边相关的位置
6、width,元素的宽度
7、height,元素的高度
8、z-index,决定元素的先后顺序和覆盖关系,值高的元素覆盖值低的元素
9、clip,限定只显示剪切出来的区域,剪切出来的区域为矩形剪切设定两个点:一个是矩形左上角的顶点,由TOP和RIGHT两项设置,另一个是右下角的顶点,由BOTTOM和RIGHT两项设置
10、overflow,当元素内的内容超出元素所能容纳的范围时
visible:无论元素容纳范围的大小,内容都会显示出来
hidden:隐藏超出元素范围的内容
scroll:不管内容是否超出范围,选中此项都会添加滚动条
auto:只在内容超出范围时才显示滚动条
11、visibility,针对嵌套元素的设置,嵌套的元素称为子层,被嵌套的元素称为父层
inherit:子层继承父层的可见性
visible:无论父层可见与否,子层都可见
hidden:无论父层可见与否,子层都隐藏
六、区域属性
1、width,设定元素的宽度
2、height,设定元素的高度
3、float,允许文字环绕在一个元素的周围
4、clear,指定在某一个元素的某一边是否允许有环绕的文字或者元素
5、padding,设定在边框与内容之间插入的空间距离,有4个属性值分别用于设定上下左右的直充距离
6、margin,设定一个元素在4个方向与浏览器窗口边界或者上一级元素边界的距离,有4个属性值:top,right,bottom,left
七、列表属性
1、list-style-type,设定引导列表项目的符号类型
list-style-type:value
disc:实心圆
circle:空心圆
square:实心方块
decimal:普通数字
lower-roman:小写罗马数字
upper-roman:大写罗马数字
lower-alpha:小写英文字母
upper-alpha:大写英文字母
none: 不显示任何列表项目或者编号
2、list-style-image,选择图像作为项目的引导符号
list-sytle-image:none|url(url)
3、list-style-position,决定列表项目所缩进的程度
list-style-position:outside|inside (列表贴近左侧边框|列表缩进)
4、list-style,综合设定列表项目属性
list-style:list-style-image||list-style-position||list-style-type
八、鼠标光标属性
cursor:value
hand,手
crosshair,交叉十字
text,文本选择符号
wait,沙漏形状
default,默认的鼠标形状
help,带问号的鼠标
e-resize,向东的箭头
ne-resize,向东北的箭头
n-resize,向北的箭头
nw-resize,向西北的箭头
w-resize,向西的箭头
sw-resize,向西南的箭头
s-resize,向南的箭头
se-resize,向东南的箭头
九、空白属性
1、margin-top,相对浏览器上边距的距离
margin-top:value
2、margin-right,相对浏览器右边距的距离
margin-right:value
3、margin-bottom,相对浏览器下边距的距离
margin-bottom:value
4、margin-left,相对浏览器左边距的距离
margin-left:value
5、margin,空白属性的综合设定
margin:margin-top||margin-right||margin-bottom||margin-left
十、滤镜属性
1、Alpha,透明的层次效果 {filter:Alpha(Opacity=value,Finishopacity=value,Style=value,Starx=value,Starty=value,Finishx=value,Finishy=value)}
Opacity:代表透明水准,0-完全透明,100-完全不透明
Finishopacity:设置渐变的透明效果时,指定结束时的透明度,0到100
Style:指定透明区域的形状特征,0-统一形状,1-线形,2-放射状,3-长方形
Stylex:渐变透明效果的开始X坐标
Styley:渐变透明效果的开始Y坐标
Finishx:渐变透明效果的结束X坐标
Finishy:渐变透明效果的结束Y坐标
2、Blur,模糊效果
{filter:Blur (Add=value, Direction=value, Strength=value}
Add:指定图片是否被改变成印象派的模糊效果,true | false
Direction:用来设置模糊的方向,模糊效果是按顺时针方向进行,
Strength:有多少象素的宽度将受到模糊影响,用整数来指定,默认为5个
3、Chroma,特定颜色的透明效果
{filter:Chroma (Color=color_value}
4、Dropshadow,阴影效果
{filter:Dropshadow (Color=value, Offx=value, Offy=value, Positive=value}
Color:阴影的颜色
Offx:X轴方向阴影的偏移量
Offy;Y轴方向阴影的偏移量
Positive:TRUE,表示为不透明像素建立可见的阴影; FALSE表示为透明的像素建立可见的阴影
5、FlipH,沿水平方向翻转效果
{filter:FlipH}
6、FlipV,沿垂直方向翻转效果
{filter:FlipV}
7、Glow,边缘光晕效果
{filter:Glow (Color=color_value, Strength=value)}
Color:设定边缘光晕的颜色
Strength:设定边缘光晕的强度大小,1-255
8、Gray,灰度效果
{filter:Gray}
9、Invert,将颜色的饱和度及亮度值完全反转
{filter:Invert}
10、Mask,遮罩效果
{filter:Mask (Color=color_value)}
11、Shadow,渐变效果
{filter:Shadow (Color=color_value, Direction=value)}
12、Wave,波浪变形效果
{filter:Wave (Add=value, Freq=value, LightStrength=value, Phase=value, Strength=value)}
Add:是否把元素按照波形样式打乱
Freq:波纹的频率,指定在一个元素上需要产生多少个完整的波纹
LightStrength:增强波纹光影的效果,0-100
Phase:设置正弦波的偏移量
Strength:设置振幅的大小
13、Xray,X射线效果
{filter:Xray}