HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性

1.基本CSS选择器

　　（1）标记选择器

　　　　<style>
h1{ color:red; font-size:25px;}
</style>

　　　　例：

 1 <html>
 2     <head>
 3         <title>标记选择器</title>
 4         <style type="text/css">
 5             h2{background-color:red;color:blue;text-align:center;}
 6             p{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
 7         </style>
 8     </head>
 9     <body>
10         <h2>这是标记选择器</h2>
11         <p>标记选择器的段落</p>
12     </body>
13 </html>

　　（2）类别选择器

　　　　　　　　.p1{background-color:red;color:blue;text-align:center;300px;height:300px;line-height:300px;}

　　　　</style>

　　　　例：

 1 <html>
 2     <head>
 3         <title>类别选择器</title>
 4         <style type="text/css">
 5             h2{background-color:red;color:blue;text-align:center;}
 6             .p1{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}
 7             .p2{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
 8         </style>
 9     </head>
10     <body>
11         <h2>这是类别选择器</h2>
12         <p class="p1">类别选择器的段落！</p>
13         <p class="p2">段落！</p>
14     </body>
15 </html>

　　（3）ID选择器

　　　　　　　　#p1{background-color:blue;color:red;text-align:center;300px;height:300px;line-height:300px;}

　　　　</style>

　　　　例：

 1 <html>
 2     <head>
 3         <title>id选择器</title>
 4         <style type="text/css">
 5             h2{background-color:red;color:blue;text-align:center;}
 6             #p1{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
 7             #p2{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}
 8         </style>
 9     </head>
10     <body>
11         <h2>这是id选择器</h2>
12         <p id="p1">段落</p>
13         <p id="p2">这是一个段落</p>
14     </body>
15 </html>

2.复合CSS选择器

　　（1）“交集”选择器

　　　　　　h3.class{color:red;font-size:25px;}

　　　　例：

 1 <html>
 2     <head>
 3         <title>交集选择器</title>
 4         <style type="text/css">
 5             p.p1{color:yellow;}
 6             p{color:green;font-size:10px;}
 7             .p1{color:blue;}
 8             h2{color:red;font-size:14px;}
 9         </style>
10     </head>
11     <body>
12         <h2>这是标题</h2>
13         <p class="p1">段落1</p>
14         <p>段落2</p>
15     </body>
16 </html>

　　（2）“并集”选择器

　　　　　　.class,h3{color:red;fon-size:25px;}

　　　　例：

 1 <html>
 2     <head>
 3         <title>并集选择器</title>
 4         <style type="text/css">
 5             h3{color:yellow;font-size:30px;}
 6             p{color:blue;font-size:20px;}
 7             .p1,h3{color:red;font-size:16px;}
 8         </style>
 9     </head>
10     <body>
11         <h3>这是并集选择器</h3>
12         <p class="p1">这是段落</p>
13         <p>段落</p>
14     </body>
15 </html>

　　（3）“后代”选择器

　　　　　　.class h3{color:red;fon-size:25px;}

　　　　例：

 1 <html>
 2     <head>
 3         <title>后代选择器</title>
 4         <style type="text/css">
 5             p strong{color:red;}
 6             ul .li1{color:red;font-size:16px;}
 7             ul li ul #li2{color:green;}
 8         </style>
 9     </head>
10     <body>
11         <p>
12             <strong>加粗</strong>
13         </p>
14         <ul>
15             <li>a</li>
16             <li class="li1">b</li>
17             <li>
18                 <ul>
19                     <li>c</li>
20                     <li id="li2">d</li>
21                 </ul>
22             </li>
23         </ul>
24     </body>
25 </html>

　　3.CSS继承性

　　　　例：

 1 <html>
 2     <!--
 3         1. 给整个页面填一个一个背景
 4         2. 给em添加一个样式样倾斜效果消失
 5         3. 改变第一层UL的样式为蓝色，16px
 6         4. 改变第二层的UL的样式为红色 14px
 7         5. 改变body下面的ul下面的li下面的ol下面的li为#f8f8f8
 8     -->
 9 
10     <head>
11         <title>css继承结构</title>
12         <style type="text/css">
13             body{background-color:#89C869;}
14             ul{color:blue;font-size:16px;}
15             ul ul{color:red;font-size:14px;}
16             ul li ol li{color:#f8f8f8;}
17             h2 em{font-style:normal;}
18             ul li ul li ul{color:black;;}
19         </style>
20     </head>
21     <body>
22         <h2><em>网页设计课程</em></h2>
23         欢迎大家学习网页设计课程
24         <ul>
25             <li>在这里,你可以学到:
26                 <ul>
27                     <li>HTML</li>
28                     <li>CSS
29                         <ul>
30                             <li>CSS初级</li>
31                             <li>CSS中级</li>
32                             <li>CSS高级</li>
33                         </ul>
34                     </li>
35                     <li>JavaScript</li>
36                 </ul>
37             </li>
38             <li>你还可以学习到:
39                 <ol>
40                     <li>fireworks</li>
41                     <li>flash</li>
42                     <li>dreamweaver</li>
43                 </ol>
44             </li>
45         </ul>
46         如果您有任何问题及时提问
47     </body>
48 </html>