CSS设置背景——颜色背景
<1>.设置body的背景颜色
1 <html>
2 <head>
3 <style type="text/css">
4 body {background-color: yellow}
5 h1 {background-color: #00ff00}
6 h2 {background-color: transparent}
7 p {background-color: rgb(250,0,255)}
8 p.no2 {background-color: gray; padding: 20px;}
9 </style>
10 </head>
11
12 <body>
13 <h1>这是标题 1</h1>
14 <h2>这是标题 2</h2>
15 <p>这是段落</p>
16 <p class="no2">这个段落设置了内边距。</p>
17 </body>
18 </html>
上面的代码中<style> </style>是用来设置css属性的。
看了下面的这个图你就会一切都明白了。
多个选择器属性要用分号隔开。
具体的效果如何,那就得动手了!
<2>.设置部分字体的颜色
1 <html>
2 <head>
3 <style type="text/css">
4 span.highlight
5 {
6 background-color: yellow
7 }
8 </style>
9 </head>
10
11 <body>
12 <p>
13 <span class="highlight">通过 CSS 继承,</span>
14 子元素将继承最高级元素(在本例中是 body)所拥有的属性
15 <span class="highlight">
16 (这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。
17 </span>
18 不需要另外的规则,所有 body 的子元素都应该显示
19 Verdana字体,子元素的子元素也一样。
20 并且在大部分的现代浏览器中,也确实是这样的。
21 </p>
22 </body>
23 </html>
我们将看到在<span> </span>标签中的字体的背景颜色就成了黄色的了。
<span>标签是什么呢?
根据我的体会:它的作用就是把一段话分开成不同的部分,以便于添加不同的样式。
具体的效果如何,那就要自己动手啦!
posted on 2011-09-13 21:51 More study needed. 阅读(501) 评论(0) 编辑 收藏 举报