CSS选择器

CSS样式
    1.内联式CSS样式表：把CSS代码直接写在现有HTML标签中
         (1)<p style="color:red">这里是红色的字</p>
         (2)<p> 这里是红色的字</p style="color:red">
         注：CSS样式代码要写在style=""双引号中,如果右多条CSS样式代码设置可以写在一起，中间用分号隔开
              <p style="color:red" ; font-size:12px>这里是红色的12像素的字</p>
    2.嵌入式CSS样式表：把CSS代码写在<style type="text/css"></style>标签中间
             <style type="text/css">
                  span{
                          color:red;
                  }           
             </style>
             <body>
                    <span>这里是红色的字</span>
             </body>
    3.外部式CSS样式:把CSS写在单独的一个文件中
        在index.html文件中：      
                <link href="style.css" rel="stylesheet" type="text/css" />
                <body>
                    <span>这里是红色的字</span>
                </body>
        在style.css文件中 
                span{
                     color:red;
                }
       注：
          1.CSS样式文件名称以有意义的英文字母命名,如main.css
          2.rel="stylesheet" type="text/css"是固定写法不可修改
          3.<link>标签位置一般写在<head>标签之内
    三种方法的优先级：离修饰的内容距离越近越优先，就近原则

选择器
      选择器{
          样式
      }
      在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象，也就是"样式"作用于网页中的哪些元素

      标签选择器：html代码中的标签
           p{pont-size:12px; line-height:1.6em;}
              上面的p，就是一个p标签
  
   类选择器
           语法： .类选择器名称{CSS样式代码;}
               英文圆点开头
               名称可以随意起
           例：
              <style type="text/css">
                 .stress{
                      color:red;
                  }           
              </style>
              <body>
                 <span clss="stress"> 要修饰的文字</span>
              </body>

   ID选择器
            ID选择器类似类选择器,区别在于
              1.为标签设置id="ID名称",而不是class="类名称"
              2.ID选择符的前面是#，而不是.
            例：
              <style type="text/css">
                 #stress{
                      color:red;
                  }           
              </style>
              <body>
                 <span id="stress"> 要修饰的文字</span>
              </body>
      注：ID选择器在文档中只能使用一次
          可以用类选择器词列表方法为一个元素同时设置多个样式，ID选择器却不可以
          例：
            .stress{
                   color:red;
              }
              .bigsize{
              font-size:25px;
             }
             <p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

  子选择器
      即大于符号（>）,用于选择指定标签元素的第一代子元素       
例子：    

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>子选择符</title>
 6 <style type="text/css">
 7 .food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
 8 
 9 </style>
10 </head>
11 <body>
12 <p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
13 <h1>食物</h1>
14 <ul class="food">
15     <li>水果
16         <ul>
17             <li>香蕉</li>
18             <li>苹果</li>
19             <li>梨</li>
20         </ul>
21     </li>
22     <li>蔬菜
23         <ul>
24             <li>白菜</li>
25             <li>油菜</li>
26             <li>卷心菜</li>
27         </ul>
28     </li>
29 </ul>
30 </body>
31 </html>
View Code

       


   包含(后代)选择器
      即加入空格，用于选择指定标签元素下的后辈元素
    注：与子选择器的区别：子选择器仅是指它的直接后代，或者可以理解为作用于子元素的第一代后代
                                   而后代选择器是作用于所有子后代元素。
    

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>后代选择器</title>
 6 <style type="text/css">
 7 .first span{color:red;}
 8 
 9 .food li{
10     border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/    
11 }
12 </style>
13 </head>
14 <body>
15  <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
16 <!--下面是本小节任务代码-->
17 <ul class="food">
18     <li>水果
19         <ul>
20             <li>香蕉</li>
21             <li>苹果</li>
22             <li>梨</li>
23         </ul>
24     </li>
25     <li>蔬菜
26         <ul>
27             <li>白菜</li>
28             <li>油菜</li>
29             <li>卷心菜</li>
30         </ul>
31     </li>
32 </ul>
33 
34 </body>
35 </html>
View Code

 

通用选择器
     匹配html中所有标签元素
例子：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>* 选择符</title>
 6 <style type="text/css">
 7 * {color:red;}
 8 
 9 
10 </style>
11 </head>
12 <body>
13     <h1>勇气</h1>
14     <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
15     <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
16     <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
17 </body>
18 </html>
View Code

 

  分组选择符
   在html中多个标签元素设置同一个样式时，可以用分组选择符(,)
   如：
      h1,span{color:red;}
      相当于：
       h1{color；red;}
         span{color:red;}

 



　　

 

 

         

posted @ 2014-11-09 11:15  calmound  阅读(303)  评论(0)  编辑  收藏  举报