📄 8.3.3.htm

📁 一部非常好的javaScript教程
💻 HTM
字号:
<html>
<head>
<title>Untitled Document</title>
<LINK REL ="stylesheet" TYPE = "text/css" HREF = ".../contents.css">

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body bgcolor="#FFFFFF">
<h2 align="center">颜色与背景属性</h2>
<p>在 CSS 中，color 属性可以设置元素内文本的颜色，而各种背景属性则可以控制元素的背景颜色以及背景图案。CSS 背景属性包括：background、background-attachment、background-color、background-image、background-position 
  和 background-repeat。</p>
<p>
color 属性用于控制 HTML 元素内文本的颜色，取值可以使用 8.3.1.3 中介绍的任意一种方式。例如，可以用以下任意一种方式为 H1 元素设置绿色的文本颜色：H1.green{color:green}、H1.green{color:#00FF00}、H1.green{color:#0F0}、H1.green{color:rgb(0,255,0)}、H1.green{color:rgb(0,100%,0)}。<p>
background-color 属性用于设置 HTML 元素的背景颜色，取值可以是 8.3.1.3 中介绍的任意一种表示颜色的方式。此属性的默认值是 transparent，表示没有任何颜色（或者说是透明色），此时上级元素的背景可以在子元素中显示出来。<p>
background-image 属性用于设置 HTML 元素的背景图案，取值为 url(imageurl) 或 none。默认值为 none，即没有背景图案。当指定图案的位置时，应包括在&quot;url&quot;字样后的括号中。<p>
background-attachment、background-position 和 background-repeat 属性都是当使用了 background-image 
属性时才有效，它们用于控制背景图案的显示。<p>
background-attachment 属性控制背景图像是否随内容一起滚动，取值为 scroll | fixed。默认值为 scroll，表示背景图案随着内容一起滚动；fixed 
表示背景图案静止，而内容可以滚动。<p>
background-position 属性指定了背景图案相对于关联区域左上角的位置。该属性通常是指定由空格隔开的两个值，既可以使用关键字 left | center 
| right 和 top | center | bottom，也可以指定百分数值，或者指定以标准单位计算的距离。例如，50% 表示将背景图像放在区域的中心位置，25px 
的水平值表示图像左侧距离区域左侧 25px。如果只提供了一个值而不是一对值，则相当于只指定水平位置，垂直位置自动设置为 50%。指定距离时，也可以使用负值，表示图像可超出边界。此属性的默认值是&quot;0% 
0%&quot;，表示图像与区域左上角对齐。<p>
background-repeat 属性表示当使用背景图案时，背景图案是否重复显示。取值可以是：repeat | repeat-x | repeat-y | 
no-repeat，默认值是 repeat，表示在水平方向和垂直方向都重复，即象铺地板一样将背景图案平铺；repeat-x 表示在水平方向上平铺；repeat-y 
表示在垂直方向上平铺；no-repeat 表示不平铺，即只显示一幅背景图案。<p>
background 属性与 font 属性类似，它也是一个组合属性，可用于同时设置 background-color、background-image、background-attachment、background-position、background-repeat 
等背景属性。不过，在指定 background 属性时，各属性值的位置可以是任意的。在 Internet Explorer 5.0 中，甚至 background-position 
的两个值都可以分开。
<p> 以下示例将前面的文本属性示例进一步完善，为标题增加了背景图案，并为整个正文增加了背景颜色，同时设置了文本的颜色。
<p><a href="../src/tu8.5.htm" target="_blank">示例</a> 
<p>&nbsp; 
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -