web网页搭建：HTML与CSS（五）

div逻辑区

• 在页面中使用

  可以将页面分解为逻辑区，保证了结构清晰并便于指定样式。

div的使用代码示例如下：

  //属性说明逻辑区
    
             //颜色逻辑区
      
my favorite color:
     

      
red
      
blue
      
orange
    
   
   
           //访问城市逻辑区
    
the cities i have visited:
    

     
tianjin
     
beijing
     
qingdao
   
  

• 子孙的选择

选择逻辑区的某些元素的子孙元素，使用示例如下：

#fav h3{
   color:black;
}

说明：（该规则选择了id为fav的

所有子孙h3元素）
fav:父元素
h3:子孙元素

span逻辑分组

• 利用可以创建内联字符和元素的逻辑分组

span使用代码示例如下：

    

     
wudadao,tianjin
     
changcheng,beijin
     
badaguan,qingdao
   

指定span样式：

.position{
   font-style:italic;
}

• span与em，strong的区别

em结构用来强调某些文字，strong结构用来强调一个重点。而span只是用来改变某些文字的样式

伪类

• 伪类的运用

例如对于a元素来说会有3个状态：未访问，已访问，悬停在链接上方。则可以对不同的状态设置不同的属性。示例代码如下：

a:link{   //未访问
  color: green;
}
a:visited{   //已访问
  color: red;
}
a:hover{    //悬停于链接上方
  color:yellow;
}