css随时录
1.很多时候页面中几乎所有的<p>标记都使用相同的样式风格,只有1`2个特殊的<p>的标记需要使用不同的风格来突出,这时可以通过class选择器与标记选择器配合使用,具体代码如下:
代码
1 <style type="text/css">
2
3 p
4 {
5 color:#03c;
6 font-size:36px;
7 }
8 h2{
9 font-family:"Times New Roman", Times, serif ;
10 color: #C00;
11
12 }
13
14 .red
15 {
16 color:#C00;
17 font-size:18px;
18
19 }
20
21 .green
22 {
23 color:#FC0;
24 font-size:24px;
25 }
26 </style>
27
28 </head>
29
30 <body>
31 <h2> wo shi wang tian qiao</h2>
32 <p class="red">class选择器</p>
33 <p class="green">class选择器</p>
34
2
3 p
4 {
5 color:#03c;
6 font-size:36px;
7 }
8 h2{
9 font-family:"Times New Roman", Times, serif ;
10 color: #C00;
11
12 }
13
14 .red
15 {
16 color:#C00;
17 font-size:18px;
18
19 }
20
21 .green
22 {
23 color:#FC0;
24 font-size:24px;
25 }
26 </style>
27
28 </head>
29
30 <body>
31 <h2> wo shi wang tian qiao</h2>
32 <p class="red">class选择器</p>
33 <p class="green">class选择器</p>
34
在html中,还可以同时给一个标记运用多个class类别选择器,从而将两个或多个不同类别的样式风格同时运用到一个标记中。
代码如下:
1 .green
2 {
3 color:#FC0;
4
5 }
6 .size
7 {
8 font-size:6px;
9 }
2 {
3 color:#FC0;
4
5 }
6 .size
7 {
8 font-size:6px;
9 }
1 <p>fjdksfjs</p>
2 <p class="green size">fjdksfjs</p>
3 <p>fjdksfjs</p>
4 <p>fjdksfjs</p>
2 <p class="green size">fjdksfjs</p>
3 <p>fjdksfjs</p>
4 <p>fjdksfjs</p>