📄 fd74.htm
字号:
百分比备注: 被禁止<br>
属性值含义如下:<br>
visible:扩大面积以显示所有内容。<br>
hidden:隐藏超出范围的内容。<br>
scroll:在元素的右边显示一个滚动条。<br>
auto:当内容超出元素面积时,显示滚动条。<br>
<br>
clip属性:<br>
CSS还提供了一种clip属性,可以把元素区域剪切成各种形状,但目前提供的只有方形一种:<br>
属性名称: 'clip' <br>
属性值: <shape> | auto <br>
初始值: auto <br>
适合元素: 元素的position属性被设为absolute<br>
是否继承: no <br>
百分比备注: 被禁止<br>
<shape>值为rect(top right bottom left)。<br>
<br>
line-height和vertical-align属性:<br>
line-height属性可以规定元素内部的行间距,使用长度单位或百分数:<br>
属性名称: 'line-height' <br>
属性值: normal | <number> | <length> | <percentage> <br>
初始值: normal <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注:根据元素的字体大小而定<br>
例如下面的例子,虽然表达方式不同,但结果一样:<br>
DIV { line-height: 1.2; font-size: 10pt } <br>
DIV { line-height: 1.2em; font-size: 10pt }<br>
DIV { line-height: 120%; font-size: 10pt }<br>
<br>
vertical-align属性决定元素在垂直位置的显示:<br>
属性名称: 'vertical-align' <br>
属性值: baseline | sub | super | top | text-top | middle | bottom | text-bottom
| <percentage> | <length> <br>
初始值: baseline <br>
适合对象: inline elements <br>
适合继承: no <br>
百分比备注: 根据元素的line-height属性而定<br>
属性值含义如下:<br>
baseline:与元素的基线对齐。<br>
middle:与元素中部对齐。<br>
sub:字下沉。<br>
super:字上升。<br>
text-top:文本顶部对齐。<br>
text-bottom:文本底部对齐。<br>
Top:和本行位置最高元素对齐。<br>
Bottom:和本行位置最低元素对齐。<br>
<br>
Visibility属性:<br>
该属性用于控制元素的显示或隐藏:<br>
属性名称: 'visibility' <br>
属性值: inherit | visible | hidden <br>
初始值: inherit <br>
适合对象: 所有元素 <br>
是否继承: 如果该值为inherit,则继承父元素属性 <br>
百分比备注: 被禁止<br>
<br>
4、颜色和背景(Color and Background)属性:<br>
这里介绍有关CSS中前景色和背景颜色、图片的设定方法。<br>
<br>
color属性:<br>
color属性用于设定元素的前景色:<br>
属性名称: 'color' <br>
属性值: <color> <br>
初始值: 根据用户的初始值而定 <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注: 被禁止 <br>
color属性的值可以是十六进制数值、rgb()函数或CSS承认的颜色名称。如:<br>
EM { color: red } <br>
EM { color: rgb(255,0,0) } <br>
<br>
背景属性:<br>
<br>
background-color属性用于设定背景色,初始值为透明:<br>
属性名称: 'background-color' <br>
属性值: <color> | transparent <br>
初始值: transparent <br>
适合对象: 所有元素 <br>
是否继承: no <br>
百分比备注: 被禁止 <br>
<br>
backgroud-image属性用于设定背景的图片:<br>
属性名称: 'background-image' <br>
属性值: <url> | none <br>
初始值: none <br>
适合对象: 所有元素 <br>
是否继承: no <br>
百分比备注: 被禁止 <br>
其中url可以为绝对地址,也可以是相对地址,例如:<br>
BODY { background-image: url(marble.gif) }<br>
P { background-image: none }<br>
<br>
以上两个属性利用普通的HTML属性也可以实现,下面的属性是CSS对原有HTML的扩展。<br>
background-repeat属性用来描述背景图片的重复排列方式:<br>
属性名称: 'background-repeat' <br>
属性值: repeat | repeat-x | repeat-y | no-repeat <br>
初始值: repeat <br>
适合对象: 所有元素 <br>
是否继承: no <br>
百分比备注: 被禁止 <br>
其中属性值的含义为:<br>
repeat:沿X轴和Y轴两个方向重复显示图片。<br>
repeat-x:沿X轴方向重复图片。<br>
repeat-y:沿Y轴方向重复图片。<br>
none:不重复图片。<br>
例如:<br>
BODY { <br>
background: red url(pendant.gif);<br>
background-repeat: repeat-y;<br>
}<br>
/*表示沿Y轴重复图片“pendant.gif”,其余部分以红色为背景色*/<br>
<br>
background-attachment属性表示在滚动整个文档时,背景图片的显示方式。它的属性值有两种:fixed和scroll,fixed相当于IE4里的水印效果,也就是说在拖动文档时,背景相对是静止的,scroll则和文档一起滚动。<br>
<br>
background-position属性用来指定背景图片显示的位置:<br>
属性名称: 'background-position' <br>
属性值: [<percentage> | <length> ]{1,2} | [top | center | bottom]
|| [left | center | right] <br>
初始值: 0% 0% <br>
适合对象: 容器元素 <br>
是否继承: no <br>
百分比备注: refer to the size of the element itself <br>
其中属性值含义为:<br>
“top left”和“left top”表示“0% 0%”。<br>
“top”、“top center”和“center top”表示“50% 0%”。 <br>
“right top”和“top right”都表示“100% 0%”。<br>
“left”、“left center”和“center left”表示“0% 50%”。 <br>
“center”和“center center”表示“50% 50%”。<br>
“right”、“right center”和“center right”都表示“100% 50%”。<br>
“bottom left”和“left bottom”表示“0% 100%”。<br>
“bottom”、“bottom center”和“center bottom”都表示“50% 100%” <br>
“bottom right”和“right bottom”表示“100% 100%”。<br>
例如:<br>
BODY { background: url(banner.jpeg) right top
} /* 100% 0% */<br>
BODY { background: url(banner.jpeg) top center
} /* 50% 0% */<br>
BODY { background: url(banner.jpeg) center } /* 50% 50%
*/<br>
BODY { background: url(banner.jpeg) bottom } /* 50%
100% */<br>
<br>
background属性是以上背景属性的快捷方式,属性和顺序如下:<br>
属性名称: 'background' <br>
属性值: <'background-color'> || <'background-image'> || <'background-repeat'>
|| <'background-attachment'> || <'background-position'> <br>
适合对象: 所有元素 <br>
是否继承: no <br>
百分比备注: 只在background-position中容许使用</span> <br>
<font
color=#ffa000> <b>
</td>
</tr>
</tbody>
</table>
</div>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -