CSS3与页面布局学习笔记（一）概要、选择器、特殊性与刻度单位

web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用，有点[SRP单一职责]的意思，如字体大小应该是CSS控制的，就不应该使用HTML标签完成，如果CSS能解决的问题尽量不要用JavaScript完成。

一、CSS3概要

CSS（Cascading Style Sheet）是层叠样式表的意思，CSS3就是在CSS2.1的基础上升级的CSS新版本，属于HTML5的一部分。它可以有效地对页面的布局、字体、颜色、背景、动画和其它效果实现。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

1.1、特点

1.2、效果演示

纯CSS3画出小黄人并实现动画效果

HTML页面：

   DOCTYPE html  > 
   html   lang  ="en"  > 
   head  > 
       meta   charset  ="UTF-8"  > 
       title  > drawLittleHuang   title  > 
       link   rel  ="stylesheet"   type  ="text/css"   href  ="drawLittleHuang.css"  > 
   head  > 
   body  > 
       div   class  ="wrapper"  >     容器   --> 
           div   class  ="littleH"  >     小黄人   --> 
               div   class  ="bodyH"  >     身体   --> 
                   div   class  ="trousers"  >     裤子   --> 
                       div   class  ="condoleBelt"  >     吊带   --> 
                           div   class  ="left"  >  div  > 
                           div   class  ="right"  >  div  > 
                       div  > 
                       div   class  ="trousers_top"  >  div  >     裤子突出的矩形部分   --> 
                       div   class  ="pocket"  >  div  >     裤袋   --> 
                        三条线   --> 
                       span   class  ="line_left"  >  span  > 
                       span   class  ="line_right"  >  span  > 
                       span   class  ="line_bottom"  >  span  > 
                   div  > 
               div  > 
               div   class  ="hair"  >     头发   --> 
                   span   class  ="left_hair_one"  >  span  > 
                   span   class  ="left_hair_two"  >  span  > 
               div  > 
               div   class  ="eyes"  >     眼睛   --> 
                   div   class  ="leftEye"  >     左眼   --> 
                       div   class  ="left_blackEye"  > 
                           div   class  ="left_white"  >  div  > 
                       div  > 
                   div  > 
                   div   class  ="rightEye"  >     右眼   --> 
                       div   class  ="right_blackEye"  > 
                           div   class  ="right_white"  >  div  > 
                       div  > 
                   div  > 
               div  > 
               div   class  ="mouse"  >     嘴巴   --> 
                   div   class  ="mouse_shape"  >  div  > 
               div  > 
               div   class  ="hands"  >     双手   --> 
                   div   class  ="leftHand"  >  div  > 
                   div   class  ="rightHand"  >  div  > 
               div  > 
               div   class  ="feet"  >     双脚   --> 
                   div   class  ="left_foot"  >  div  > 
                   div   class  ="right_foot"  >  div  > 
               div  > 
               div   class  ="groundShadow"  >  div  >     脚底阴影   --> 
           div  > 
       div  > 
   body  > 
   html  >  

查看更多关于CSS3与页面布局学习笔记（一）概要、选择器、特殊性与刻度单位的详细内容...