css学习总结

一 关于css的id选择符

 

 

      每个html的元素都包含一个id属性，该属性是唯一的，可以唯一标示一个元素，我们就可以选择更具体的元素。is属性由井号加id组成。

 

p#bulletinContent
{
  color:Yellow ;
  background-color:Maroon ;  
}

 

 

  html界面如下：

 <p id = "bulletinContent" >我的blog</p>

 

 

 

二 class选择符

    html中包含class属性，与id属性不同，class属性不要求唯一性，多个元素可以拥有相同的calss属性。

   

 
h2.titleLevel2
{
  color:Gray ; 
}

 

 html 页面代码:

 

<h2 class="titleLevel2">测试class的属性</h2>

 

三 多重class

 

    由上节的内容可知，class属性和id属性的不同之处，id属性是唯一的，而同一个属性可以赋给多个元素。

    一个html元素可以属于多个class。

    <h2 class="class1 class2">测试class的属性</h2>

  

   css文件如下:

     

        a.class1
{
  font-size:12px;
    
}

a.class2
{
  color:red; 
}

 

 

四 嵌套div标签

 

div.box
{
 border:1px solid #E2DFD0 ;
 margin-bottom:1em;
}

div.box div.title
{
  padding:0.3em ;
  padding-left:0.6em;
  background:#F2F0DD;
  font-size:0.9em ;
  font-weight:bold;
 
}

div.box div.content
{
   margin:0.3em;
   
}

div.box div.content *
{
   margin:0;
  
}

div.box h3
{
 font-weight: bold;
 font-size:0.9em;
 padding:0.5em;
 color:#0033CC;
 
}

div.box p
{
  font-size:0.9em;
  padding:0.5em;
   
}

div.content + div.content
{
 
 border-top:1px dotted #E2DFD0 ;
 
}

对应的html代码

 <div class="box">     

     <div class="title">产品列表</div>
    
     <div class="content">
          <h3>web professional</h3>
           <p>测试css代码</p>
     </div>
    
     <div class="content">
         <h3>web express</h3>
         <p>web express</p>
     </div>

     </div>    

 

五 与元素关系相关的选择符

 

 

  1 后代描述符

     下面的html代码中有两个div元素，每个有唯一的ID标示且包含一个P元素，P分别是两个div的子元素，当然也是后代元素。

 

div#weatherinfo p
{
 
 color:Orange ;
 background-color:Blue ;
}

div#datetime p
{
  color:White ;
  background-color:Black;
   
}

 

 

 html 页面为 ：

 

<div id="weatherinfo">
       <p>今日天气</p>
     </div>

    <div id="datetime">
         <p>晴</p>
    </div>