CSS属性文档格式.docx
《CSS属性文档格式.docx》由会员分享，可在线阅读，更多相关《CSS属性文档格式.docx（18页珍藏版）》请在冰豆网上搜索。
2、BOX模型（BOXModel）属性
什么是BOX？
CSS把HTML中以<
somesign>
……<
/somesign>
的部分称为BOX（容器），BOX有三类属性：
padding、margin和border。
Margin属性：
Margin属性分为margin-top、margin-right、margin-bottom、margin-left和margin五个属性，分别表示BOX里内容离边框的距离，它的属性值是数值单位，可以是长度、百分比或auto，margin甚至可以设为负值，造成BOX与BOX之间的重叠显示，关于margin的属性详见下表：
属性名称:
'
margin-top'
、'
margin-right'
margin-bottom'
margin-left'
属性值:
<
margin-width>
初始值:
0
适合对象:
所有元素
是否继承:
no
百分比备注:
相对于BOX的宽度
例如：
H1{margin-top:
2em}
H2{margin-right:
12.3%}
Margin还有一个快捷的书写方法，就是直接用margin属性，例如：
BODY{margin:
1em2em3em2em}
等同于：
BODY{
margin-top:
1em;
margin-right:
2em;
margin-bottom:
3em;
margin-left:
margin属性后面可以有四个值，中间用空格隔开（记住不是逗号），顺序是"
上右下左"
，当然margin后面可以不足四个值，例如：
2em}/*所有的margin都设为2em*/
1em2em}/*上下margin为1em，右左margin为2em*/
1em2em3em}/*上margin为1em，右左margin为2em，下margin为3em*/
Padding属性：
Padding属性用来描述BOX的边框和内容之间插入多少空间，和margin属性类似，它也分为上右下左和一个快捷方式padding，关于padding的属性详见下表：
padding-top'
padding-right'
padding-bottom'
padding-left'
、'
padding'
padding-width>
BLOCKQUOTE{padding-top:
0.3em}
padding属性和margin类似此处略去。
Border属性：
平时我们在查看HTML文档时，看到一段文字，并不会把它当作一个BOX，实际上BOX是有边框的，只是平时不显示出来罢了，而border属性就是用来描述BOX边框的。
Border属性分为border-width、border-color和border-style，而这些属性下面又有分支。
border-width属性：
border-width属性又分为：
border-top-width、border-right-width、border-bottom-width、border-left-width和border-width属性，border-width用长度表示为"
thin/medium/thick"
或长度单位表示，下面是border-width属性的详细列表：
border-top-width'
border-right-width'
border-bottom-width'
border-left-width'
border-width'
border-width>
medium
被禁止
border-width为快捷方式，顺序为上右下左，值之间用空格隔开。
border-color属性：
border-color属性用来显示BOX边框颜色，分为border-top-color、border-right-color、border-bottom-color、border-right-color和border-color属性，属性值为颜色，可以用十六进制表示，也可用rgb（）表示，属性见下：
border-top-color'
border-right-color'
border-bottom-color'
border-left-color'
、
'
border-color'
color>
元素颜色的初始值
border-color为快捷方式，顺序为上右下左，值之间用空格隔开。
border-style属性：
border-style属性用来设置BOX对象边框的样式，它的属性值为CSS规定的关键字，平常看不到border是因为，初始值是none的缘故。
属性见下：
border-top-style'
border-right-style'
border-bottom-style'
border-left-style'
border-style'
border-style>
none
属性值的名称和代表意义如下：
none：
无边框。
dotted：
边框为点线。
dashed：
边框为长短线。
solid：
边框为实线。
double：
边框为双线。
groove、ridge、inset和outset：
显示不同效果的3D边框（根据color属性）。
border属性：
border属性为Border的快捷方式，属性值间用空格隔开，顺序是"
边框宽度边框样式边框颜色"
，例如：
h1style="
border:
.5emoutsetred"
hello!
/h1>
还可以用border-top、border-right、border-bottom、border-left分别作为上右下左的快捷方式，属性值顺序同border属性。
3、布局（Layout）属性：
在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。
Netscape曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C承认，W3C在CSS提出了类似于Layer标记的功能。
position属性：
position属性用来决定元素的位置类型，详见属性：
position'
absolute|relative|static
static
其属性值分别代表：
absolute：
屏幕上的绝对位置。
relative：
屏幕上的相对位置。
static：
固有位置。
direction属性：
direction属性决定BOX的排列方向，详见属性：
direction'
ltr|rtl
ltr
yes
float和clear属性：
在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。
改变BOX的float属性，BOX将飘浮在其他元素的左或右方：
float'
left|right|none
STYLEtype="
IMG{float:
left}
BODY,P,IMG{margin:
/STYLE>
BODY>
P>
IMGsrc=img.gif>
Somesampletextthathasnoother...
/BODY>
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：
clear'
left|right|both|none
绝对位置属性：
绝对位置属性有四个属性：
top、right、bottom和left，属性值为长度单位或百分数：
top'
right'
bottom'
left'
length>
|<
percentage>
|auto
利用以上属性，用户就可以精确定义元素的位置，如：
Pstyle="
position:
relative;
margin-right:
10px;
left:
"
Iusedtworedhyphenstoserveasachangebar.They
will"
float"
totheleftofthelinecontainingTHIS
SPANstyle="
absolute;
top:
auto;
0px;
color:
red;
--<
/SPAN>
word.<
/P>
z-index属性：
在CSS中允许元素的重叠显示，这样就有一个显示顺序的问题，z-index属性描述了元素的前后位置，如果把电脑屏幕看作X-Y平面的话，那么Z轴就是垂直于屏幕的，z-index使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且CSS同意在z-index中使用负数。
z-index'
auto|<
integer>
auto
使用position属性的元素
width属性：
规定BOX的width属性，可以使BOX的宽度不依靠它所包含的内容的多少：
width'
|<
|auto
块元素
根据父元素的width而定
在CSS中还提供了min-width和max-width属性，使得BOX的宽度在最小宽度和最大宽度之间。
min-width'
all
max-width'
100%
height属性：
相同的BOX还有height属性来控制本身的高度：
height'
根据父元素的height而定
在CSS中还提供了min-height和max-height属性，使得BOX的高度在最小高度和最大高度之间。
min-height'
max-height'
overflow属性：
在规定元素的宽度和高度时，如果元素的面积不足以显示全部内容的话就要用到overflow属性：
overflow'
visible|hidden|scroll|auto
visible
元素的position属性
属性值含义如下：
visible：
扩大面积以显示所有内容。
hidden：
隐藏超出范围的内容。
scroll：
在元素的右边显示一个滚动条。
auto：
当内容超出元素面积时，显示滚动条。
clip属性：
CSS还提供了一种clip属性，可以把元素区域剪切成各种形状，但目前提供的只有方形一种：
clip'
shape>
适合元素:
元素的position属性被设为absolute
值为rect（toprightbottomleft）。
line-height和vertical-align属性：
line-height属性可以规定元素内部的行间距，使用长度单位或百分数：
line-height'
normal|<
number>
normal
根据元素的字体大小而定
例如下面的例子，虽然表达方式不同，但结果一样：
DIV{line-height:
1.2;
font-size:
10pt}
1.2em;
120%;
vertical-align属性决定元素在垂直位置的显示：
vertical-align'
baseline|sub|super|top|text-top|middle|bottom|text-bottom|<
baseline
inlineelements
适合继承:
根据元素的line-height属性而定
baseline：
与元素的基线对齐。
middle：
与元素中部对齐。
sub：
字下沉。
super：
字上升。
text-top：
文本顶部对齐。
text-bottom：
文本底部对齐。
Top：
和本行位置最高元素对齐。
Bottom：
和本行位置最低元素对齐。
Visibility属性:
该属性用于控制元素的显示或隐藏：
visibility'
inherit|visible|hidden
inherit
如果该值为inherit，则继承父元素属性
4、颜色和背景（ColorandBackground）属性：
这里介绍有关CSS中前景色和背景颜色、图片的设定方法。
color属性：
color属性用于设定元素的前景色：
color'
根据用户的初始值而定
color属性的值可以是十六进制数值、rgb（）函数或CSS承认的颜色名称。
如：
EM{color:
red}
rgb（255,0,0）}
背景属性：
background-color属性用于设定背景色，初始值为透明：
background-color'
|transparent
transparent
backgroud-image属性用于设定背景的图片：
background-image'
url>
|none
其中url可以为绝对地址，也可以是相对地址，例如：
BODY{background-image:
url（marble.gif）}
P{background-image:
none}
以上两个属性利用普通的HTML属性也可以实现，下面的属性是CSS对原有HTML的扩展。
background-repeat属性用来描述背景图片的重复排列方式：
background-repeat'
repeat|repeat-x|repeat-y|no-repeat
repeat
其中属性值的含义为：
repeat：
沿X轴和Y轴两个方向重复显示图片。
repeat-x：
沿X轴方向重复图片。
repeat-y：
沿Y轴方向重复图片。
不重复图片。
background:
redurl（pendant.gif）;
background-repeat:
repeat-y;
/*表示沿Y轴重复图片"
pendant.gif"
，其余部分以红色为背景色*/
background-attachment属性表示在滚动整个文档时，背景图片的显示方式。
它的属性值有两种：
fixed和scroll，fixed相当于IE4里的水印效果，也就是说在拖动文档时，背景相对是静止的，scroll则和文档一起滚动。
background-position属性用来指定背景图片显示的位置：
background-position'
[<
]{1,2}|[top|center|bottom]||[left|center|right]
0%0%
容器元素
refertothesizeoftheelementitself
其中属性值含义为：
topleft"
和"
lefttop"
表示"
0%0%"
。
top"
、"
topcenter"
centertop"
50%0%"
righttop"
topright"
都表示"
100%0%"
left"
leftcenter"
centerleft"
0%50%"
center"
centercenter"
50%50%"
right"
rightcenter"
centerright"
100%50%"
bottomleft"
leftbottom"
0%100%"
bottom"
bottomcenter"
centerbottom"
50%100%"
bottomright"
rightbottom"
100%100%"
BODY{background:
url（banner.jpeg）righttop}/*100%0%*/
url（banner.jpeg）topcenter}/*50%0%*/
url（banner.jpeg）center}/*50%50%*/
url（banner.jpeg）bottom}/*50%100%*/
background属性是以上背景属性的快捷方式，属性和顺序如下：
background'
||<
background-attachment'
只在background-position中容许使用
5、字体（Font）属性：
这里定义了关于字体的各种属性。
font-family属性定义字体的名称，可以是一个字体的名称，也可以是一类字体的名称，字体的名称一定要和计算机系统里的完全一样：
font-family'
[[<
family-name>
generic-family>
],]*[<
]
根据用户定义而定
有些计算机系统里如果没有样式单要求的字体，可以再设一个次字体以备万一。
BODY{font-family:
Baskerville,"
HeisiMinchoW3"
Symbol,serif}
family-name是指确定的某字体，如HeisiMinchoW3，generic-family指某一类字体，如se
升级会员 