CSS教程(七)
2008-03-09 11:30:55 来源:WEB开发网核心提示:---《网猴》版权所有欢迎进入第4天的课程,在此之前我们主要谈了文字样式设定,CSS教程(七),现在我们探讨一下要素和图象方面的样式设置,通过学习今天的课程,也就是说,论背景色原来是什么颜色,我们将掌握如何给要素赋予色彩,将图象放在要素后面
---《网猴》版权所有
欢迎进入第4天的课程。在此之前我们主要谈了文字样式设定,现在我们探讨一下要素和图象方面的样式设置。通过学习今天的课程,我们将掌握如何给要素赋予色彩,将图象放在要素后面。如果以前你一直不认为CSS是一种很有用的东西,那么今天将是你大彻大悟的一天。
我们将学习以下CSS属性:
* 颜色
* 背景色
* 背景图象
* 重复背景
* 固定背景
* 背景定位
* 背景
首先,我们谈一下将颜色加到网页要素上。
颜色
颜色属性并不陌生,它的用法很象HTML中使用的参数值。
B { color: #333399 }
根据这项CSS规则,浏览器将网页上所有的加重体字以设定的颜色显示,象这几个字那样。
有3种方法用于设定你所需要的颜色:
* 颜色名称
CSS所用的颜色名称同我们常用的称呼方式。16种基本色为 aqua, black, blue, fuchsia, gray, green, lime,maroon, navy, olive, purple, red, silver, teal, white, and yellow.
但是Netscape和Microsoft的浏览器还认可数百种其它色彩名称,参见
HYPE's Color Specifier.
* 16进制(hex)色彩控制
使用16进制数可实现对色彩的更精确的控制,其格式为 #336699。16进制(hex)色彩控制详见Webreference.com。
CSS还支持某些hex值的快捷计数法。比如, #336699可以被称为 #369。浏览器会将其按照16进制格式阐释。
* RGB值
对于习惯于RGB计数法的用户,这里将提供一种全新的色彩设定方法。RGB法通常用于图象应用软件例如
Photoshop。利用RGB设定色彩的方法如下:
B { color: rgb(51,204,0) }
RGB的数值范围从0到255,R代表红色,G代表绿色,B代表蓝色。
IE 3不支持RGB格式,但是4.0版本的浏览器都支持。
在传统的网页设计中,为了在某一要素后面加上背景色,你必须先在要素周围生成表格单元, 然后在表格单元中添加颜色。 利用 CSS添加背景色则相当容易。
背景色
利用CSS在网页要素后面加入固定的背景色及图象。
P.yellow { background-color: #FFFF66 }
The above rule has been applied to this entire paragraph. You can use any of the values we talked about on the previous page: color names, hex numbers, or RGB values.
你甚至可以将要素只加到某一个单词后面。
在IE 3 和 Netscape Communicator中, 第一段文字后的背景色延伸的长度不同.在IE 4中颜色会延伸更多一些,在整个段落后面形成一个较大的方块背景。
(注意:IE 3根本不支持背景色属性。但是它支持背景设置,这种快捷属性也能达到同样的效果。详见第6页。)
你还可以给背景色设定透明属性,也就是说,论背景色原来是什么颜色,都会以透明色显。
欢迎进入第4天的课程。在此之前我们主要谈了文字样式设定,现在我们探讨一下要素和图象方面的样式设置。通过学习今天的课程,我们将掌握如何给要素赋予色彩,将图象放在要素后面。如果以前你一直不认为CSS是一种很有用的东西,那么今天将是你大彻大悟的一天。
我们将学习以下CSS属性:
* 颜色
* 背景色
* 背景图象
* 重复背景
* 固定背景
* 背景定位
* 背景
首先,我们谈一下将颜色加到网页要素上。
颜色
颜色属性并不陌生,它的用法很象HTML中使用的参数值。
B { color: #333399 }
根据这项CSS规则,浏览器将网页上所有的加重体字以设定的颜色显示,象这几个字那样。
有3种方法用于设定你所需要的颜色:
* 颜色名称
CSS所用的颜色名称同我们常用的称呼方式。16种基本色为 aqua, black, blue, fuchsia, gray, green, lime,maroon, navy, olive, purple, red, silver, teal, white, and yellow.
但是Netscape和Microsoft的浏览器还认可数百种其它色彩名称,参见
HYPE's Color Specifier.
* 16进制(hex)色彩控制
使用16进制数可实现对色彩的更精确的控制,其格式为 #336699。16进制(hex)色彩控制详见Webreference.com。
CSS还支持某些hex值的快捷计数法。比如, #336699可以被称为 #369。浏览器会将其按照16进制格式阐释。
* RGB值
对于习惯于RGB计数法的用户,这里将提供一种全新的色彩设定方法。RGB法通常用于图象应用软件例如
Photoshop。利用RGB设定色彩的方法如下:
B { color: rgb(51,204,0) }
RGB的数值范围从0到255,R代表红色,G代表绿色,B代表蓝色。
IE 3不支持RGB格式,但是4.0版本的浏览器都支持。
在传统的网页设计中,为了在某一要素后面加上背景色,你必须先在要素周围生成表格单元, 然后在表格单元中添加颜色。 利用 CSS添加背景色则相当容易。
背景色
利用CSS在网页要素后面加入固定的背景色及图象。
P.yellow { background-color: #FFFF66 }
The above rule has been applied to this entire paragraph. You can use any of the values we talked about on the previous page: color names, hex numbers, or RGB values.
你甚至可以将要素只加到某一个单词后面。
在IE 3 和 Netscape Communicator中, 第一段文字后的背景色延伸的长度不同.在IE 4中颜色会延伸更多一些,在整个段落后面形成一个较大的方块背景。
(注意:IE 3根本不支持背景色属性。但是它支持背景设置,这种快捷属性也能达到同样的效果。详见第6页。)
你还可以给背景色设定透明属性,也就是说,论背景色原来是什么颜色,都会以透明色显。
更多精彩
赞助商链接