CSS属性.docx
《CSS属性.docx》由会员分享，可在线阅读，更多相关《CSS属性.docx（18页珍藏版）》请在冰豆网上搜索。
CSS属性
CSS属性：
1、媒体（Media）类型
样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。
特定的属性只能作用于特定的媒体，如"font-size"属性只对可卷动的媒体类型有效（屏幕）。
声明一个媒体属性可以用@import或@media引入：
@importurl（loudvoice.css）speech;
@mediaprint{
/*stylesheetforprintgoeshere*/
}
也可以在文档标记中引入媒体：
可以看出，@import和@media的区别在于，前者引入外部的样式单用于媒体类型，后者直接引入媒体属性。
@import的使用方法是@import加样式单文件的URL地址再加媒体类型，可以多个媒体共用一个样式单，媒体类型之间用"，"分割符分开。
@media用法则是把媒体类型放在前面，其他规则和rule-set基本一样。
下面列出各种媒体类型：
SCREEN：
指计算机屏幕。
PRINT：
指用于打印机的不透明介质。
PROJECTION：
指用于显示的项目。
BRAILLE：
盲文系统，指有触觉效果的印刷品。
AURAL：
指语音电子合成器。
TV：
指电视类型的媒体。
HANDHELD：
指手持式显示设备（小屏幕，单色）
ALL：
适合于所有媒体。
2、BOX模型（BOXModel）属性
什么是BOX？
CSS把HTML中以……的部分称为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'
属性值:
初始值:
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:
2em;
}
margin属性后面可以有四个值，中间用空格隔开（记住不是逗号），顺序是"上右下左"，当然margin后面可以不足四个值，例如：
BODY{margin:
2em}/*所有的margin都设为2em*/
BODY{margin:
1em2em}/*上下margin为1em，右左margin为2em*/
BODY{margin:
1em2em3em}/*上margin为1em，右左margin为2em，下margin为3em*/
Padding属性：
Padding属性用来描述BOX的边框和内容之间插入多少空间，和margin属性类似，它也分为上右下左和一个快捷方式padding，关于padding的属性详见下表：
属性名称:
'padding-top'、'padding-right'、'padding-bottom'、'padding-left'、'padding'
属性值:
初始值:
0
适合对象:
所有元素
是否继承:
no
百分比备注:
相对于BOX的宽度
例如：
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'
属性值:
初始值:
medium
适合对象:
所有元素
是否继承:
no
百分比备注:
被禁止
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'
属性值:
初始值:
元素颜色的初始值
适合对象:
所有元素
是否继承:
no
百分比备注:
被禁止
border-color为快捷方式，顺序为上右下左，值之间用空格隔开。
border-style属性：
border-style属性用来设置BOX对象边框的样式，它的属性值为CSS规定的关键字，平常看不到border是因为，初始值是none的缘故。
属性见下：
属性名称:
'border-top-style'、'border-right-style'、'border-bottom-style'、'border-left-style'、'border-style'
属性值:
初始值:
none
适合对象:
所有元素
是否继承:
no
百分比备注:
被禁止
border-color为快捷方式，顺序为上右下左，值之间用空格隔开。
属性值的名称和代表意义如下：
none：
无边框。
dotted：
边框为点线。
dashed：
边框为长短线。
solid：
边框为实线。
double：
边框为双线。
groove、ridge、inset和outset：
显示不同效果的3D边框（根据color属性）。
border属性：
border属性为Border的快捷方式，属性值间用空格隔开，顺序是"边框宽度边框样式边框颜色"，例如：
.5emoutsetred">hello!
还可以用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
适合对象:
所有元素
是否继承:
no
百分比备注:
被禁止
其属性值分别代表：
absolute：
屏幕上的绝对位置。
relative：
屏幕上的相对位置。
static：
固有位置。
direction属性：
direction属性决定BOX的排列方向，详见属性：
属性名称:
'direction'
属性值:
ltr|rtl
初始值:
ltr
适合对象:
所有元素
是否继承:
yes
百分比备注:
被禁止
float和clear属性：
在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。
改变BOX的float属性，BOX将飘浮在其他元素的左或右方：
属性名称:
'float'
属性值:
left|right|none
初始值:
none
适合对象:
所有元素
是否继承:
no
百分比备注:
被禁止
例如：
IMG{float:
left}
BODY,P,IMG{margin:
2em}
Somesampletextthathasnoother...
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：
属性名称:
'clear'
属性值:
left|right|both|none
初始值:
none
适合对象:
所有元素
是否继承:
no
百分比备注:
被禁止
绝对位置属性：
绝对位置属性有四个属性：
top、right、bottom和left，属性值为长度单位或百分数：
属性名称:
'top'、'right'、'bottom'、'left'
属性值:
||auto
初始值:
none
适合对象:
所有元素
是否继承:
no
百分比备注:
被禁止
利用以上属性，用户就可以精确定义元素的位置，如：
relative;margin-right:
10px;left:
10px;">
Iusedtworedhyphenstoserveasachangebar.They
will"float"totheleftofthelinecontainingTHIS
absolute;top:
auto;left:
0px;color:
red;">--
word.
z-index属性：
在CSS中允许元素的重叠显示，这样就有一个显示顺序的问题，z-index属性描述了元素的前后位置，如果把电脑屏幕看作X-Y平面的话，那么Z轴就是垂直于屏幕的，z-index使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且CSS同意在z-index中使用负数。
属性名称:
'z-index'
属性值:
auto|
初始值:
auto
适合对象:
使用position属性的元素
是否继承:
no
百分比备注:
被禁止
width属性：
规定BOX的width属性，可以使BOX的宽度不依靠它所包含的内容的多少：
属性名称:
'width'
属性值:
||auto
初始值:
auto
适合对象:
块元素
是否继承:
no
百分比备注:
根据父元素的width而定
在CSS中还提供了min-width和max-width属性，使得BOX的宽度在最小宽度和最大宽度之间。
属性名称:
'min-width'
属性值:
|
初始值:
0
适合对象:
all
是否继承:
no
百分比备注:
根据父元素的width而定
属性名称:
'max-width'
属性值:
|
初始值:
100%
适合对象:
all
是否继承:
no
百分比备注:
根据父元素的width而定
height属性：
相同的BOX还有height属性来控制本身的高度：
属性名称:
'height'
属性值:
||auto
初始值:
auto
适合对象:
块元素
是否继承:
no
百分比备注:
根据父元素的height而定
在CSS中还提供了min-height和max-height属性，使得BOX的高度在最小高度和最大高度之间。
属性名称:
'min-height'
属性值:
|
初始值:
0
适合对象:
all
是否继承:
no
百分比备注:
根据父元素的height而定
属性名称:
'max-height'
属性值:
|
初始值:
100%
适合对象:
all
是否继承:
no
百分比备注:
根据父元素的height而定
overflow属性：
在规定元素的宽度和高度时，如果元素的面积不足以显示全部内容的话就要用到overflow属性：
属性名称:
'overflow'
属性值:
visible|hidden|scroll|auto
初始值:
visible
适合对象:
元素的position属性
是否继承:
no
百分比备注:
被禁止
属性值含义如下：
visible：
扩大面积以显示所有内容。
hidden：
隐藏超出范围的内容。
scroll：
在元素的右边显示一个滚动条。
auto：
当内容超出元素面积时，显示滚动条。
clip属性：
CSS还提供了一种clip属性，可以把元素区域剪切成各种形状，但目前提供的只有方形一种：
属性名称:
'clip'
属性值:
|auto
初始值:
auto
适合元素:
元素的position属性被设为absolute
是否继承:
no
百分比备注:
被禁止
值为rect（toprightbottomleft）。
line-height和vertical-align属性：
line-height属性可以规定元素内部的行间距，使用长度单位或百分数：
属性名称:
'line-height'
属性值:
normal|||
初始值:
normal
适合对象:
所有元素
是否继承:
yes
百分比备注:
根据元素的字体大小而定
例如下面的例子，虽然表达方式不同，但结果一样：
DIV{line-height:
1.2;font-size:
10pt}
DIV{line-height:
1.2em;font-size:
10pt}
DIV{line-height:
120%;font-size:
10pt}
vertical-align属性决定元素在垂直位置的显示：
属性名称:
'vertical-align'
属性值:
baseline|sub|super|top|text-top|middle|bottom|text-bottom||
初始值:
baseline
适合对象:
inlineelements
适合继承:
no
百分比备注:
根据元素的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'
属性值:
初始值:
根据用户的初始值而定
适合对象:
所有元素
是否继承:
yes
百分比备注:
被禁止
color属性的值可以是十六进制数值、rgb（）函数或CSS承认的颜色名称。
如：
EM{color:
red}
EM{color:
rgb（255,0,0）}
背景属性：
background-color属性用于设定背景色，初始值为透明：
属性名称:
'background-color'
属性值:
|transparent
初始值:
transparent
适合对象:
所有元素
是否继承:
no
百分比备注:
被禁止
backgroud-image属性用于设定背景的图片：
属性名称:
'background-image'
属性值:
|none
初始值:
none
适合对象:
所有元素
是否继承:
no
百分比备注:
被禁止
其中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
适合对象:
所有元素
是否继承:
no
百分比备注:
被禁止
其中属性值的含义为：
repeat：
沿X轴和Y轴两个方向重复显示图片。
repeat-x：
沿X轴方向重复图片。
repeat-y：
沿Y轴方向重复图片。
none：
不重复图片。
例如：
BODY{
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%
适合对象:
容器元素
是否继承:
no
百分比备注:
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%*/
BODY{background:
url（banner.jpeg）topcenter}/*50%0%*/
BODY{background:
url（banner.jpeg）center}/*50%50%*/
BODY{background:
url（banner.jpeg）bottom}/*50%100%*/
background属性是以上背景属性的快捷方式，属性和顺序如下：
属性名称:
'background'
属性值:
<'background-color'>||<'background-image'>||<'background-repeat'>||<'background-attachment'>||<'background-position'>
适合对象:
所有元素
是否继承:
no
百分比备注:
只在background-position中容许使用
5、字体（Font）属性：
这里定义了关于字体的各种属性。
font-family属性定义字体的名称，可以是一个字体的名称，也可以是一类字体的名称，字体的名称一定要和计算机系统里的完全一样：
属性名称:
'font-family'
属性值:
[[|],]*[|]
初始值:
根据用户定义而定
适合对象:
所有元素
是否继承:
yes
百分比备注:
被禁止
有些计算机系统里如果没有样式单要求的字体，可以再设一个次字体以备万一。
例如：
BODY{font-family:
Baskerville,"HeisiMinchoW3",Symbol,serif}
family-name是指确定的某字体，如HeisiMinchoW3，generic-family指某一类字体，如se
升级会员 