CSS手册简编:颜色背景属性

css

CSS属性:

4、颜色和背景(Color and Background)属性:

这里介绍有关CSS中前景色和背景颜色、图片的设定方法。

color属性:

color属性用于设定元素的前景色:

属性名称: 'color'
属性值: <color>
初始值: 根据用户的初始值而定
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

color属性的值可以是十六进制数值、rgb()函数或CSS承认的颜色名称。如:

EM { color: red }
EM { color: rgb(255,0,0) }

背景属性:

background-color属性用于设定背景色,初始值为透明:

属性名称: 'background-color'
属性值: <color> | transparent
初始值: transparent
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

backgroud-image属性用于设定背景的图片:

属性名称: 'background-image'
属性值: <url> | 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: red url(pendant.gif);
background-repeat: repeat-y;
}
/*表示沿Y轴重复图片"pendant.gif",其余部分以红色为背景色*/

background-attachment属性表示在滚动整个文档时,背景图片的显示方式。它的属性值有两种:fixed和scroll,fixed相当于IE4里的水印效果,也就是说在拖动文档时,背景相对是静止的,scroll则和文档一起滚动。

background-position属性用来指定背景图片显示的位置:

属性名称: 'background-position'
属性值: [<percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right]
初始值: 0% 0%
适合对象: 容器元素
是否继承: no
百分比备注: refer to the size of the element itself

其中属性值含义为:
"top left"和"left top"表示"0% 0%"。
"top"、"top center"和"center top"表示"50% 0%"。
"right top"和"top right"都表示"100% 0%"。
"left"、"left center"和"center left"表示"0% 50%"。
"center"和"center center"表示"50% 50%"。
"right"、"right center"和"center right"都表示"100% 50%"。
"bottom left"和"left bottom"表示"0% 100%"。
"bottom"、"bottom center"和"center bottom"都表示"50% 100%"
"bottom right"和"right bottom"表示"100% 100%"。
例如:

BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 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中容许使用

时间: 2024-10-30 13:23:41

CSS手册简编:颜色背景属性的相关文章

CSS手册简编:用户属性

css CSS属性: 9.用户界面属性: cursor属性,用户可以指定在某个元素上要使用的光标形状: 属性名称: 'cursor'属性值: auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | <url>初始值: auto适合对象:

CSS手册简编:表格属性

css CSS属性:8.表格属性: 由于表格中的大部分属性已经在以上的各类属性中探讨过了,所以这里只有两个属性介绍: row-span属性描述表格跨越的行的数目: 属性名称: 'row-span'属性值: <integer>初始值: 1适合对象: 表格元素是否继承: no百分比备注: 被禁止 column-span属性描述表格跨越的列的数目: 属性名称: 'column-span'属性值: <integer>初始值: 1适合对象: 表格元素是否继承: no百分比备注: 被禁止

CSS手册简编:列表属性

css CSS属性: 7.列表属性: 这里的属性用来描述列表(list)的一系列属性. list-style-type属性描述用于列表每一项前使用的符号: 属性名称: 'list-style-type'属性值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none初始值: disc适合对象: 列表元素是否继承: yes百分比备注: 被禁止 属性值含义为:dis

CSS手册简编:文本属性

css CSS属性: 6.文本(Text)属性: 这里的属性将影响WEB文档中的文本显示情况. text-indent属性描述文本的缩进程度: 属性名称: 'text-indent'属性值: <length> | <percentage>初始值: 0适合对象: 容器元素是否继承: yes百分比备注: 根据父元素的宽度而定 下面的例子表明段落的缩进值为3em: P { text-indent: 3em } Alignment属性表明文本的对齐方式: 属性名称: 'alignment'

CSS手册简编:字体属性

css CSS属性: 5.字体(Font)属性: 这里定义了关于字体的各种属性. font-family属性定义字体的名称,可以是一个字体的名称,也可以是一类字体的名称,字体的名称一定要和计算机系统里的完全一样: 属性名称: 'font-family'属性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]初始值: 根据用户定义而定适合对象: 所有元素是否

CSS手册简编:媒体属性

CSS属性:1.媒体(Media)类型样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面.屏幕.电子合成器等等.特定的属性只能作用于特定的媒体,如"font-size"属性只对可卷动的媒体类型有效(屏幕).声明一个媒体属性可以用@import或@media引入:@import url(loudvoice.css) speech;@media print {/* style sheet for print goes here */}也可以在文档标记中引入媒体:<LINK r

CSS属性(颜色背景属性)

css 2.颜色和背景属性 您总不希望自己的页面处于黑白世界吧.如果给用<font>属性定义的文本添上颜色是不是会更好呢? 下面我们就讲一下CSS的颜色和背景属性.先来看一下CSS下的颜色和背景都有哪些属性吧(如下表): 我们还是举个例子吧.比如上一节讲到的"LEAF"字体,我们在其中加入颜色属性,在<style>再加入以下代码: color:rgb(204,82,28): background-img:url(ss01038.jpg): background-

CSS手册简编

css 自W3C(The World Wide Web Consortium)制定了代号为Cougar的HTML的4.0版本以来,存在在Web页面中的动态效果首次被正式的承认了,W3C把动态超文本(Dynamic HTML)的实现分为了三个部分:脚本.支持动态效果的浏览器和CSS.前两者也许你经常用到,但CSS是什么或许你并不清楚,如果有过制作Web页面的经历,你可能听说过样式单或风格单,如果对此你亦无耳闻,不要紧,只要你想制作出具有更多新特性的Web页,本文将同样适合于你.(请使用IE4或IE

CSS语法手册(五)颜色和背景属性

css|语法 1.color 功能:设置前景或元素的颜色.数值:使用颜色关键字或RGB值.例子: 文本颜色(关键字) 文本颜色(#rrggbb) 文本颜色[rgb(rr,gg,bb)] 文本颜色[rgb(r%,g%,b%)] 2.background-color 功能:设置页面或页面元素的背景颜色.数值:颜色 - 可用颜色名或RGB值transparent - 透明,使页面背景为缺省背景.例子: 背景颜色 3.background-image 功能:定义背景图形.数值:none - 不用图形作背