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

1.基本CSS选择器

　　（1）标记选择器

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

　　　　例：

 <html>
     <head>
         <title>标记选择器</title>
         <style type="text/css">
             h2{background-color:red;color:blue;text-align:center;}
             p{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
         </style>
     </head>
     <body>
         <h2>这是标记选择器</h2>
         <p>标记选择器的段落</p>
     </body>
 </html>

　　（2）类别选择器

　　　　<style type="text/css">

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

　　　　</style>

　　　　例：

 <html>
     <head>
         <title>类别选择器</title>
         <style type="text/css">
             h2{background-color:red;color:blue;text-align:center;}
             .p1{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}
             .p2{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
         </style>
     </head>
     <body>
         <h2>这是类别选择器</h2>
         <p class="p1">类别选择器的段落！</p>
         <p class="p2">段落！</p>
     </body>
 </html>

　　（3）ID选择器

　　　　<style type="text/css">

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

　　　　</style>

　　　　例：

 <html>
     <head>
         <title>id选择器</title>
         <style type="text/css">
             h2{background-color:red;color:blue;text-align:center;}
             #p1{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
             #p2{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}
         </style>
     </head>
     <body>
         <h2>这是id选择器</h2>
         <p id="p1">段落</p>
         <p id="p2">这是一个段落</p>
     </body>
 </html>

2.复合CSS选择器

　　（1）“交集”选择器

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

　　　　例：

 <html>
     <head>
         <title>交集选择器</title>
         <style type="text/css">
             p.p1{color:yellow;}
             p{color:green;font-size:10px;}
             .p1{color:blue;}
             h2{color:red;font-size:14px;}
         </style>
     </head>
     <body>
         <h2>这是标题</h2>
         <p class="p1">段落1</p>
         <p>段落2</p>
     </body>
 </html>

　　（2）“并集”选择器

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

　　　　例：

 <html>
     <head>
         <title>并集选择器</title>
         <style type="text/css">
             h3{color:yellow;font-size:30px;}
             p{color:blue;font-size:20px;}
             .p1,h3{color:red;font-size:16px;}
         </style>
     </head>
     <body>
         <h3>这是并集选择器</h3>
         <p class="p1">这是段落</p>
         <p>段落</p>
     </body>
 </html>

　　（3）“后代”选择器

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

　　　　例：

 <html>
     <head>
         <title>后代选择器</title>
         <style type="text/css">
             p strong{color:red;}
             ul .li1{color:red;font-size:16px;}
             ul li ul #li2{color:green;}
         </style>
     </head>
     <body>
         <p>
             <strong>加粗</strong>
         </p>
         <ul>
             <li>a</li>
             <li class="li1">b</li>
             <li>
                 <ul>
                     <li>c</li>
                     <li id="li2">d</li>
                 </ul>
             </li>
         </ul>
     </body>
 </html>

　　3.CSS继承性

　　　　例：

 <html>
     <!--
         1. 给整个页面填一个一个背景
         2. 给em添加一个样式样倾斜效果消失
         3. 改变第一层UL的样式为蓝色，16px
         4. 改变第二层的UL的样式为红色 14px
         5. 改变body下面的ul下面的li下面的ol下面的li为#f8f8f8
     -->

     <head>
         <title>css继承结构</title>
         <style type="text/css">
             body{background-color:#89C869;}
             ul{color:blue;font-size:16px;}
             ul ul{color:red;font-size:14px;}
             ul li ol li{color:#f8f8f8;}
             h2 em{font-style:normal;}
             ul li ul li ul{color:black;;}
         </style>
     </head>
     <body>
         <h2><em>网页设计课程</em></h2>
         欢迎大家学习网页设计课程
         <ul>
             <li>在这里,你可以学到:
                 <ul>
                     <li>HTML</li>
                     <li>CSS
                         <ul>
                             <li>CSS初级</li>
                             <li>CSS中级</li>
                             <li>CSS高级</li>
                         </ul>
                     </li>
                     <li>JavaScript</li>
                 </ul>
             </li>
             <li>你还可以学习到:
                 <ol>
                     <li>fireworks</li>
                     <li>flash</li>
                     <li>dreamweaver</li>
                 </ol>
             </li>
         </ul>
         如果您有任何问题及时提问
     </body>
 </html>