CSS底子教程之定义颜色与后台[网站美工]

赞助商链接

分享到： QQ空间新浪微博腾讯微博人人网

本文“CSS底子教程之定义颜色与后台[网站美工]”是由七道奇为您精心收集，来源于网络转载，文章版权归文章作者所有，本站不对其观点以及内容做任何评价，请读者自行判断，以下是其具体内容：

本课,你将学习如安在网站上利用颜色与后台.我们还会介绍用于定位和掌握后台图象的高级办法.本课将对下列CSS属性举行讲授:

color
background-color
background-image
background-repeat
background-attachment
background-position
background

前风光:‘color’属性

CSS属性color用于指定元素的前风光.

比方,假定你要让页面中的全部标题（headline）都显示为深红色,而这些标题采取的都是h1元素,那么可以用下面的代码来实现把h1元素的前风光设为红色.


h1 {
	color: #ff0000;
}

显示示例

颜色值可以用十六进制表示（比方上例中的#ff0000）,也可以用颜色名称（比方“red”）或RGB值（比方rgb(255,0,0)）表示.

‘background-color’属性

CSS属性background-color用于指定元素的后台色.

因为body元素包含了HTML文档的全部内容,所以,假如要改变整个页面的后台色的话,那么为body元素利用background-color属性就行了.

你也可认为其他包含标题或文本的元素单独利用后台色.在下例中,我们为body和h1元素辨别利用了差别的后台色.


body {
	background-color: #FFCC66;
}

h1 {
	color: #990000;
	background-color: #FC9804;
}

显示示例

注意:我们为h1元素利用了两个CSS属性,它们之间以分号（“;”）脱离.

后台图象[background-image]

CSS属性background-image用于设置后台图象.

在下面的示例中,我们利用了一张蝴蝶的图象作为后台.你可以将该图片下载下来（办法为:鼠标右击该图片,然后挑选“图片另存为”）,以便在自己的计算机上利用.当然,你也可以选用其他你认为称心的图片.

假如要把这个蝴蝶的图片作为网页的后台图象,只要在body元素上利用background-image属性、然后给出蝴蝶图片的存放位置就行了.


body {
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
}

h1 {
	color: #990000;
	background-color: #FC9804;
}

显示示例

注意我们指定图片存放位置的方法:url("butterfly.gif").这表明图片文件和款式表存放在同一目录下.你也可以引用存放在其他目录的图片,只需给出存放途径便可（比方url("../images/butterfly.gif")）;此外,你乃至可以通过给出图片的地址来引用因特网（Internet）上的图片（比方url("http://www.html.net/butterfly.gif")）.

平铺后台图象[background-repeat]

你有没有发目前上例中那个蝴蝶图片在横向和纵向都被平铺了?CSS属性background-repeat就是用于掌握平铺的.

下表概括了background-repeat的四种差别取值.

值	描写	示例
`background-repeat:repeat-x`	图象横向平铺	显示示例
`background-repeat:repeat-y`	图象纵向平铺	显示示例
`background-repeat:repeat`	图象横向和纵向都平铺	显示示例
`background-repeat:no-repeat`	图象不平铺	显示示例