你的位置:首页 > 网页设计

[网页设计]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>

View Code

CSS样式:

@charset "utf-8";body{  margin: 0;  padding:0;}.wrapper{  width: 300px;  margin:100px auto;}.litteH{  position: relative;}.bodyH{  position: absolute;  width: 240px;  height: 400px;  border:5px solid #000;  border-radius: 115px;  background: rgb(249,217,70);  overflow: hidden;  z-index: 2;}.bodyH .condoleBelt{  position: absolute;}.bodyH .condoleBelt .left,.bodyH .condoleBelt .right{  width: 100px;  height: 16px;  border:5px solid #000;  background: rgb(32,116,160);  position: absolute;  top:-90px;  left:-35px;  z-index: 2;  -webkit-transform:rotate(45deg);}.bodyH .condoleBelt .left{  top:-88px;  left:165px;  -webkit-transform:rotate(-45deg);}.bodyH .condoleBelt .left:after,.bodyH .condoleBelt .right:after{  content: '';  width: 8px;  height: 8px;  border-radius: 50%;  background: #000;  position: absolute;  top:4px;  left:88px;}.bodyH .condoleBelt .left:after{  left:5px;}.bodyH .trousers{  position: absolute;  bottom: 0;  width: 100%;  height: 100px;  border-top: 6px solid #000;  background: rgb(32,116,160);}.trousers_top{  width: 160px;  height: 60px;  border:6px solid #000;  border-bottom: none;  border-radius: 0 0 5px 5px;  background: rgb(32,116,160);  position: absolute;  bottom: 100px;  left:34px;}.pocket{  width: 60px;  height: 45px;  border:6px solid #000;  border-radius: 0px 0px 25px 25px;  position: absolute;  bottom:65px;  left:84px;}.line_right{  width: 30px;  height: 30px;  border-bottom-left-radius: 100px;  border-bottom:6px solid #000;  border-left:6px solid #000;  position: absolute;  left: 0;  bottom:60px;  -webkit-transform:rotate(-75deg);}.line_left{  width: 30px;  height: 30px;  border-bottom-right-radius: 100px;  border-bottom:6px solid #000;  border-right:6px solid #000;  position: absolute;  right: 0;  bottom:63px;  -webkit-transform:rotate(75deg);}.line_bottom{  height: 40px;  border:3px solid #000;  border-radius: 3px;  position: absolute;  left:118px;  bottom: 0px;}.hair{  position: relative;}.left_hair_one{  width: 130px;  height: 100px;  border-radius: 50%;  border-top:8px solid #000;  position: absolute;  left:17px;  top:-17px;  -webkit-transform:rotate(27deg);  -webkit-animation: lefthair 2s ease-in-out infinite;}@-webkit-keyframes lefthair{  0%,25%,31%,100%{  }  30%{    -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);  }}.left_hair_two{  width: 80px;  height: 80px;  border-radius: 50%;  border-top:6px solid #000;  position: absolute;  left:45px;  top:-10px;  -webkit-transform:rotate(15deg);}.eyes{  position: relative;  z-index: 3;}.eyes .leftEye,.eyes .rightEye{  width: 85px;  height: 85px;  border-radius: 50%;  border:6px solid #000;  background: #fff;  position: absolute;  top:60px;  left: 27px;}.eyes .leftEye{  left: 124px;}.eyes .leftEye .left_blackEye,.eyes .rightEye .right_blackEye{  width: 40px;  height: 40px;  border-radius: 50%;  background: #000;  position: absolute;  top:24px;  left:22px;  -webkit-animation: blackeye 5s ease-in infinite;}@-webkit-keyframes blackeye{  0%,20%,50%,70%,100%{    -webkit-transform: translateX(0px);  }  30%,40%{    -webkit-transform: translateX(15px);  }  80%,90%{    -webkit-transform: translateX(-15px);  }}.eyes .leftEye .left_blackEye .left_white,.eyes .rightEye .right_blackEye .right_white{  width: 20px;  height: 20px;  border-radius: 50%;  background: #fff;  position: absolute;  top:7px;  left:17px;  -webkit-animation: whiteeye 5s ease-in-out infinite;}@-webkit-keyframes whiteeye{  0%,20%,50%,70%,100%{    -webkit-transform: translateX(0px);  }  30%,40%{    -webkit-transform: translate3d(3px,4px,0);  }  80%,90%{    -webkit-transform: translate3d(-15px,4px,0);  }}.eyes .leftEye .left_blackEye .left_white{  top:4px;  left:17px;}.eyes .leftEye:after,.eyes .rightEye:after{  content: '';  width: 28px;  height: 18px;  background: #000;  position: absolute;  left:-30px;  top:37px;  -webkit-transform:skewX(20deg) rotate(7deg);}.eyes .leftEye:after{  left:89px;  top:37px;  -webkit-transform:skewX(-20deg) rotate(-7deg);}.mouse{  position: relative;}.mouse .mouse_shape{  width: 55px;  height: 35px;  border:5px solid #000;  border-bottom-left-radius: 30px;  background: #fff;  position: absolute;  top:175px;  left:98px;  z-index: 3;  -webkit-transform:rotate(-35deg);  -webkit-animation: mouse 5s ease-in-out infinite;}@-webkit-keyframes mouse{  40%,43%{    width: 45px;    height: 25px;    top:180px;  }  0%,35%,48%,100%{    width: 55px;    height: 35px;    top:175px;    -webkit-transform:rotate(-35deg);  }}.mouse .mouse_shape:after{  content: '';  width: 70px;  height: 32px;  border-bottom:5px solid #000;  border-radius:35px 26px 5px 5px;  background: rgb(249,217,70);  position: absolute;  top:-16px;  left:3px;  -webkit-transform:rotate(34deg);  -webkit-animation: mouse_mask 5s ease-in-out infinite;}@-webkit-keyframes mouse_mask{  40%,43%{    width: 60.5px;    top:-19.3px;    left:1.5px;  }  0%,35%,48%,100%{    width: 70px;    top:-16px;    left:3px;    -webkit-transform:rotate(33deg);  }}.hands{  position: relative;}.hands .leftHand,.hands .rightHand{  width: 80px;  height: 80px;  border:6px solid #000;  border-radius: 25px;  background: rgb(249,217,70);  position: absolute;  top:220px;  left:-23px;  -webkit-transform:rotate(40deg);  -webkit-animation:rightHand .8s ease-in-out infinite;}@-webkit-keyframes rightHand{  0%,50%,100%{    -webkit-transform: rotate(40deg);  }  30%{    -webkit-transform: rotate(37deg) translateX(1px);  }}.hands .leftHand{  left:182px;  top:220px;  -webkit-transform:rotate(-40deg);  -webkit-animation:leftHand .8s ease-in-out infinite;}@-webkit-keyframes leftHand{  0%,50%,100%{    -webkit-transform: rotate(-40deg);  }  80%{    -webkit-transform: rotate(-37deg) translateX(-1px);  }}.hands .leftHand:after,.hands .rightHand:after{  content: '';  width: 6px;  border:3px solid #000;  border-radius: 3px;  position: absolute;  left:13px;  top:50px;  -webkit-transform:rotate(90deg);}.hands .leftHand:after{  left:53px;  top:50px;  -webkit-transform:rotate(-90deg);}.feet{  position: relative;}.feet .left_foot,.feet .right_foot{  width: 36px;  height: 50px;  border-bottom-right-radius: 6px;  border-bottom-left-radius: 9px;  background: #000;  position: absolute;  top: 406px;  left:88px;  -webkit-transform-origin: right top;  -webkit-animation: rightfoot .8s ease-in-out infinite;}@-webkit-keyframes rightfoot{  0%,50%,100%{    -webkit-transform: rotate(0deg);  }  80%{    -webkit-transform: rotate(10deg);  }}.feet .left_foot{  border-bottom-right-radius: 9px;  border-bottom-left-radius: 6px;  left:130px;  -webkit-transform-origin: left top;  -webkit-animation: leftfoot .8s ease-in-out infinite;}@-webkit-keyframes leftfoot{  0%,50%,100%{    -webkit-transform: rotate(0deg);  }  30%{    -webkit-transform: rotate(-10deg);  }}.feet .left_foot:after,.feet .right_foot:after{  content: '';  width: 60px;  height: 35px;  border-radius: 20px 10px 21px 15px;  background: #000;  position: absolute;  left:-36px;  top:14.4px;  -webkit-transform:rotate(5deg);}.feet .left_foot:after{  border-radius: 10px 20px 15px 21px;  left:13px;  -webkit-transform:rotate(-5deg);}.groundShadow{  width: 200px;  height: 2px;  border-radius: 50%;  background: rgba(0,0,0,0.3);  box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);  position: relative;  top: 455px;  left:25px;}

View Code

 

相册演示的代码可以在示例中下载到。

1.3、帮助文档与学习

权威的帮助文档是最好的学习资料,CSS2的帮助,非常详细:

CSS3的帮助文档:

以上的两个文档及更多的帮助将一起放在项目示例中,请下载示例。

二、选择器

在使用CSS时我们首先要做的事情是找到元素,在写相应的样式,在CSS2.1中最常使用的是三种选择器:

a)、ID选择器:以#开始,引用时使用id,如id="div1"

#div1

{

   color:red;

}

b)、类选择器:以.开始,使用class属性引用,可以有多个,如

.cls1

{

   background-color:#99ccff;

}

c)、标签选择器:以标签名称开始,如p,span,div,*

div span

{

   font-size:14px;

}

当然还有如伪类选择,a:hover,a:link,a:visted,a:active。

在CSS3中新增了很多的选择器,如果大家会jQuery,jQuery中多数选择器在CSS3中都可以直接使用。

1.1、基础的选择器

红色字体中选择器的区别是:p.info的意思是p元素中必须有属性将被选择,p .info是选择后代元素

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>选择器</title>    <style type="text/css">      p.info{        color: red;      }      p .info{        color: blue;      }    </style>  </head>  <body>    <h2>选择器</h2>    <p class="info">p1</p>    <p>        <span class="info">span1</span>        <p>p3</p>    </p>  </body></html>

 

1.2、组合选择器

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>组合选择器</title>    <style type="text/css">       #div1 span       {         color: red;       }    </style>  </head>  <body>    <h2>组合选择器</h2>    <div id="div1">      <span>span1</span>      <div id="div2">        <span>span2</span>      </div>    </div>    <span>span3</span>  </body></html>

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>组合选择器</title>    <style type="text/css">       #div1 > span       {         color: red;       }    </style>  </head>  <body>    <h2>组合选择器</h2>    <div id="div1">      <span>span1</span>      <div id="div2">        <span>span2</span>      </div>    </div>    <span>span3</span>  </body></html>

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>组合选择器</title>    <style type="text/css">       #div1 + span       {         color: red;       }    </style>  </head>  <body>    <h2>组合选择器</h2>    <div id="div1">      <span>span1</span>      <div id="div2">        <span>span2</span>      </div>    </div>    <span>span3</span>    <span>span4</span>  </body></html>

 

1.3、属性选择器

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>属性选择器</title>    <style type="text/css">      div[id][class~=cls1] {        background: lightgreen;      }    </style>  </head>  <body>    <h2>组合选择器</h2>    <span>span0</span>    <div id="div1" class="cls1">      div1    </div>    <div id="div2" class="cls1 cls2">      div2    </div>  </body></html>

 

1.4、伪类

 

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>伪类</title>    <style type="text/css">      td:first-child      {         background: lightcoral;      }    </style>  </head>  <body>    <h2>组合选择器</h2>    <table border="1" width="100%">      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>    </table>    <hr />    <table border="1" width="100%">      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>      <tr>        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>      </tr>    </table>  </body></html>

 

 

 练习:实现隔行换色,当鼠标悬停在每一行上时高亮显示为黄色,按下时高亮红色。

    <style type="text/css">      tr:nth-child(2n+1){        background:lightblue;      }      tr:hover{        background: yellow;      }      tr:active{        background: orangered;      }    </style>

 

1.5、伪元素

三、特殊性

四、刻度

五、示例下载