css样式教程.docx
《css样式教程.docx》由会员分享，可在线阅读，更多相关《css样式教程.docx（18页珍藏版）》请在冰豆网上搜索。
css样式教程
七、外补丁
MarginsProperties
属性
CSSVersion
版本
Compatibility
兼容性
InheritFromParent
继承性
Description
简介
margin
CSS1
IE4+,NS4+
无
检索或设置对象四边的外延边距
margin-top
CSS1
IE4+,NS4+
无
检索或设置对象顶边的外延边距
margin-right
CSS1
IE4+,NS4+
无
检索或设置对象右边的外延边距
margin-bottom
CSS1
IE4+,NS4+
无
检索或设置对象底边的外延边距
margin-left
CSS1
IE4+,NS4+
无
检索或设置对象左边的外延边距
说明：
这种颜色是CSS2标准属性。
这种颜色是IE建议样式表属性。
这种颜色是NS私有属性。
这种颜色是目前尚无浏览器支持的属性。
1.1Margin
版本：
CSS1 兼容性：
IE4+NS4+ 继承性：
无
语法：
margin:
auto|length
参数：
auto:
值被设置为相对边的值
length:
由浮点数字和单位标识符组成的长度值|百分数。
百分数是基于父对象的高度。
对于内联对象来说，左右外延边距可以是负数值。
请参阅长度单位
说明：
检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
在IE4+，margin属性不可用于td和tr对象。
外延边距始终透明。
对应的脚本特性为margin。
请参阅我编写的其他书目。
关于对象的尺寸与边框，内外补丁等样式表属性的关系，请参看图例以及height和width属性。
1.2margin-top
版本：
CSS1 兼容性：
IE4+NS4+ 继承性：
无
语法：
margin-top:
auto|length
参数：
auto:
值被设置为相对边的值
length:
由浮点数字和单位标识符组成的长度值|或者百分数。
百分数是基于父对象的高度。
请参阅长度单位
说明：
检索或设置对象顶边的外延边距。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
在IE4+，margin属性不可用于td和tr对象。
外延边距始终透明。
对应的脚本特性为marginTop。
请参阅我编写的其他书目。
示例：
body{margin-top:
11.5%;}
请您用下面的按钮加减这段文字的margin-top属性的值（单位是px）。
看一看会发生什么，然后您就会明白这个属性的意义。
希望您喜欢这本电子书。
谢谢。
1.3margin-right
版本：
CSS1 兼容性：
IE4+NS4+ 继承性：
无
语法：
margin-right:
auto|length
参数：
auto:
值被设置为相对边的值
length:
由浮点数字和单位标识符组成的长度值|或者百分数。
百分数是基于父对象的高度。
请参阅长度单位
说明：
检索或设置对象右边的外延边距。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
在IE4+，margin属性不可用于td和tr对象。
外延边距始终透明。
对应的脚本特性为marginRight。
请参阅我编写的其他书目。
示例：
body{margin-right:
11.5%;}
请您用下面的按钮加减这段文字的margin-right属性的值（单位是px）。
看一看会发生什么，然后您就会明白这个属性的意义。
希望您喜欢这本电子书。
谢谢。
1.4margin-bottom
版本：
CSS1 兼容性：
IE4+NS4+ 继承性：
无
语法：
margin-bottom:
auto|length
参数：
auto:
值被设置为相对边的值
length:
由浮点数字和单位标识符组成的长度值|百分数。
百分数是基于父对象的高度。
请参阅长度单位
说明：
检索或设置对象底边的外延边距。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
在IE4+，margin属性不可用于td和tr对象。
外延边距始终透明。
对应的脚本特性为marginBottom。
请参阅我编写的其他书目。
示例：
body{margin-bottom:
11.5%;}
请您用下面的按钮加减这段文字的margin-bottom属性的值（单位是px）。
看一看会发生什么，然后您就会明白这个属性的意义。
希望您喜欢这本电子书。
谢谢。
1.5margin-left
版本：
CSS1 兼容性：
IE4+NS4+ 继承性：
无
语法：
margin-left:
auto|length
参数：
auto:
值被设置为相对边的值
length:
由浮点数字和单位标识符组成的长度值|或者百分数。
百分数是基于父对象的高度。
请参阅长度单位
说明：
检索或设置对象左边的外延边距。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
在IE4+，margin属性不可用于td和tr对象。
外延边距始终透明。
对应的脚本特性为marginLeft。
请参阅我编写的其他书目。
示例：
body{margin-left:
11.5%;}
请您用下面的按钮加减这段文字的margin-left属性的值（单位是px）。
看一看会发生什么，然后您就会明白这个属性的意义。
希望您喜欢这本电子书。
谢谢。
八、轮廓Outlines
OutlinesProperties
属性
CSSVersion
版本
Compatibility
兼容性
InheritFromParent
继承性
Description
简介
outline
CSS2
NONE
无
复合属性。
设置或检索对象外的线条轮廓
outline-color
CSS2
NONE
无
设置或检索对象外的线条轮廓的颜色
outline-style
CSS2
NONE
无
设置或检索对象外的线条轮廓的样式
outline-width
CSS2
NONE
无
设置或检索对象外的线条轮廓的宽度
说明：
这种颜色是CSS2标准属性。
这种颜色是IE建议样式表属性。
这种颜色是NS私有属性。
这种颜色是目前尚无浏览器支持的属性。
1.1Outline
版本：
CSS2 兼容性：
NONE 继承性：
无
语法：
outline:
outline-color||outline-style||outline-width
参数：
该属性是复合属性。
请参阅各参数对应的属性。
说明：
设置或检索对象外的线条轮廓。
outline画在border外面，并且不一定是矩形。
目前IE5.5尚不支持此属性。
对应的脚本特性为outline。
请参阅我编写的其他书目。
示例：
img{outline:
red}
p{outline:
double5px}
1.2outline-color
版本：
CSS2 兼容性：
NONE 继承性：
无
语法：
outline-color:
color|invert
参数：
color:
指定颜色。
请参阅颜色单位和附录：
颜色表
invert:
使用背景色的反色
说明：
设置或检索对象外的线条轮廓的颜色。
参见outline属性。
目前IE5.5尚不支持此属性。
对应的脚本特性为outlineColor。
请参阅我编写的其他书目。
示例：
img{outline-color:
red}
p{outline-color:
#E9E9E9}
1.3outline-style
版本：
CSS2 兼容性：
NONE 继承性：
无
语法：
outline-style:
none|dotted|dashed|solid|double|groove|ridge|inset|outset
参数：
none:
无边框。
与任何指定的outline-width值无关
dotted:
点线边框
dashed:
虚线边框
solid:
实线边框
double:
双线边框。
两条单线与其间隔的和等于指定的oueline-width值
groove:
根据outline-color的值画3D凹槽
ridge:
根据outline-color的值画菱形边框
inset:
根据outline-color的值画3D凹边
outset:
根据outline-color的值画3D凸边
说明：
设置或检索对象外的线条轮廓的样式。
参见outline属性。
目前IE5.5尚不支持此属性。
对应的脚本特性为outlineStyle。
请参阅我编写的其他书目。
示例：
img{outline-color:
orange;outline-style:
solid;outline-width:
medium;}
1.4outline-width
版本：
CSS2 兼容性：
NONE 继承性：
无
语法：
outline-width:
medium|thin|thick|length
参数：
medium:
默认宽度
thin:
小于默认宽度
thick:
大于默认宽度
length:
由浮点数字和单位标识符组成的长度值。
不可为负值。
请参阅长度单位
说明：
设置或检索对象外的线条轮廓的宽度。
参见outline属性。
目前IE5.5尚不支持此属性。
对应的脚本特性为outlineWidth。
请参阅我编写的其他书目。
示例：
img{outline-color:
orange;outline-style:
solid;outline-width:
medium;}
八、内容Content
ContentProperties
属性
CSSVersion
版本
Compatibility
兼容性
InheritFromParent
继承性
Description
简介
include-source
CSS2
NONE
无
这个属性插入另一个文档到当前文档，取代当前对象的内容
quotes
CSS2
NONE
无
设置或检索对象内使用的嵌套标记
content
CSS2
NONE
无
用来和:
after及:
before伪元素一起使用，在对象前或后显示内容
counter-increment
CSS2
NONE
无
设定当一个selector发生时计数器增加的值
counter-reset
CSS2
NONE
无
将指定selector的计数器复位
说明：
这种颜色是CSS2标准属性。
这种颜色是IE建议样式表属性。
这种颜色是NS私有属性。
这种颜色是目前尚无浏览器支持的属性。
1.1include-source
版本：
CSS2 兼容性：
NONE 继承性：
无
语法：
include-source:
url（url）
参数：
url:
使用绝对或相对地址指定插入文档。
假如该文档不存在，当前对象的内容将被显示
说明：
这个属性插入另一个文档到当前文档，取代当前对象的内容。
插入文档的样式属性从当前对象继承。
目前IE5.5尚不支持此属性。
对应的脚本特性为includeSource。
请参阅我编写的其他书目。
示例：
div{position:
absolute;top:
100px;left:
300px;width:
200px;height:
200px;border:
thinsolidblack;include-source:
url（"}
1.2Quotes
版本：
CSS2 兼容性：
NONE 继承性：
无
语法：
quotes:
none|string
参数：
none:
content属性的open-quote和close-quote值将不会生成任何嵌套标记
string:
用引号括起的嵌套标记定义。
两个为一组。
第一个string定义前标记（例：
"<"），第二个string定义后标记（例：
">"）。
组之间用空格格开。
嵌套标记的应用深度按定义顺序内推
说明：
设置或检索对象内使用的嵌套标记。
目前IE5.5尚不支持此属性。
对应的脚本特性为quotes。
请参阅我编写的其他书目。
示例：
blockquote[lang-=fr]{quotes:
"\201C""\201D"}
blockquote[lang-=en]{quotes:
"\00AB""\00BB"}
blockquote:
before{content:
open-quote}
blockquote:
after{content:
close-quote}
q{quotes:
"""""""'""'";}
Thisisanemedded
quote.
显示结果如下：
"Thisisan'embedded'quote."
1.3Content
版本：
CSS2 兼容性：
NONE 继承性：
无
语法：
content:
attr（alt）|counter（name）|counter（name,list-style-type）|counters（name,string）|counters（name,string,list-style-type）|no-close-quote|no-open-quote|close-quote|open-quote|string|url（url）
参数：
attr（alt）:
使用alt特性的文字
counter（name）:
使用已命名的计数器
counter（name,list-style-type）:
使用已命名的计数器并遵从指定的list-style-type属性
counters（name,string）:
使用所有已命名的计数器
counters（name,string,list-style-type）:
使用所有已命名的计数器并遵从指定的list-style-type属性
no-close-quote:
并不插入quotes属性的后标记。
但增加其嵌套级别
no-open-quote:
并不插入quotes属性的前标记。
但减少其嵌套级别
close-quote:
插入quotes属性的后标记
open-quote:
插入quotes属性的前标记
string:
使用用引号括起的字符串
url:
使用指定的绝对或相对地址
说明：
用来和:
after及:
before伪元素一起使用，在对象前或后显示内容。
目前IE5.5尚不支持此属性。
对应的脚本特性为content。
请参阅我编写的其他书目。
示例：
p:
after{content:
url（"http:
"）;text-decoration:
none;}
p:
before{content:
url（"beep.wav"）}
1.4counter-increment
版本：
CSS2 兼容性：
NONE 继承性：
无
语法：
counter-increment:
none|identifiernumber
参数：
none:
阻止计数器增加
identifiernumber:
identifier定义一个将被增加selector，id，或者class。
number定义增加的数值。
可以为负值。
默认值是1
说明：
设定当一个selector发生时计数器增加的值。
目前IE5.5尚不支持此属性。
对应的脚本特性为counterIncrement。
请参阅我编写的其他书目。
示例：
p:
before{content:
"paragraph"counter（paragraph）;counter-increment:
paragraph;}
1.5counter-reset
版本：
CSS2 兼容性：
NONE 继承性：
无
语法：
counter-reset:
none|identifiernumber
参数：
none:
阻止计数器复位
identifiernumber:
指定一个或多个复位的计数器
说明：
将指定selector的计数器复位。
默认值是0。
目前IE5.5尚不支持此属性。
对应的脚本特性为counterReset。
请参阅我编写的其他书目。
示例：
h1:
before{counter-increment:
main-heading;counter-reset:
sub-heading;content:
"Section"counter（main-heading）":
"}
九、内补丁paddings
PaddingsProperties
属性
CSSVersion
版本
Compatibility
兼容性
InheritFromParent
继承性
Description
简介
padding
CSS1
IE4+,NS4+
无
检索或设置对象四边的补丁边距
padding-top
CSS1
IE4+,NS4+
无
检索或设置对象顶边的补丁边距
padding-right
CSS1
IE4+,NS4+
无
检索或设置对象右边的补丁边距
padding-bottom
CSS1
IE4+,NS4+
无
检索或设置对象底边的补丁边距
padding-left
CSS1
IE4+,NS4+
无
检索或设置对象左边的补丁边距
说明：
这种颜色是CSS2标准属性。
这种颜色是IE建议样式表属性。
这种颜色是NS私有属性。
这种颜色是目前尚无浏览器支持的属性。
1.1Padding
版本：
CSS1 兼容性：
IE4+NS4+ 继承性：
无
语法：
padding:
length
参数：
length:
由浮点数字和单位标识符组成的长度值|或者百分数。
百分数是基于父对象的宽度。
请参阅长度单位
说明：
检索或设置对象四边的补丁边距。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
不允许负值。
对应的脚本特性为padding。
请参阅我编写的其他书目。
关于对象的尺寸与边框，内外补丁等样式表属性的关系，请参看图例以及height和width属性。
示例：
body{padding:
36pt24pt36pt;}
body{padding:
11.5%;}
body{padding:
10%10%10%10%;}
1.2padding-top
版本：
CSS1 兼容性：
IE4+NS4+ 继承性：
无
语法：
padding-top:
length
参数：
length:
由浮点数字和单位标识符组成的长度值|或者百分数。
百分数是基于父对象的宽度。
请参阅长度单位
说明：
检索或设置对象顶边的补丁边距。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
不允许负值。
对应的脚本特性为paddingTop。
请参阅我编写的其他书目。
示例：
body{padding-top:
36pt;}
请您用下面的按钮加减这段文字的padding-top属性的值（单位是px）。
看一看会发生什么，然后您就会明白这个属性的意义。
希望您喜欢这本电子书。
谢谢。
1.3padding-right
版本：
CSS1 兼容性：
IE4+NS4+ 继承性：
无
语法：
padding-right:
length
参数：
length:
由浮点数字和单位标识符组成的长度值|或者百分数。
百分数是基于父对象的宽度。
请参阅长度单位
说明：
检索或设置对象右边的补丁边距。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
不允许负值。
对应的脚本特性为paddingRight。
请参阅我编写的其他书目。
示例：
body{padding-right:
36pt;}
请您用下面的按钮加减这段文字的padding-right属性的值（单位是px）。
看一看会发生什么，然后您就会明白这个属性的意义。
希望您喜欢这本电子书。
谢谢。
1.4padding-bottom
版本：
CSS1 兼容性：
IE4+NS4+ 继承性：
无
语法：
padding-bottom:
length
参数：
length:
由浮点数字和单位标识符组成的长度值|或者百分数。
百分数是基于父对象的宽度。
请参阅长度单位
说明：
检索或设置对象底边的补丁边距。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
不允许负值。
对应的脚本特性为paddingBottom。
请参阅我编写的其他书目。
示例：
升级会员 