CSS 实战1

1.CSS 初始化

@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
select, input { vertical-align:middle; }
select, input, textarea { font-size:12px; margin:0; }
textarea { resize:none; } /*防止拖动*/
img {border:0; vertical-align:middle; }  /*  去掉图片低测默认的3像素空白缝隙*/
table { border-collapse:collapse; }
body {
    font:12px/150% Arial,Verdana,"\5b8b\4f53";
    color:#666;
    background:#fff
}
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}
a{color:#666; text-decoration:none; }
a:hover{color:#C81623;}
h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:normal;font-size:100%;}
s,i,em{font-style:normal;text-decoration:none;}
.col-red{color: #C81623!important;}

/*公共类*/
.w {  /*版心 提取 */
    width: 1210px;margin:0 auto;
}
.fl {
    float:left
}
.fr {
    float:right
}
.al {
    text-align:left
}
.ac {
    text-align:center
}
.ar {
    text-align:right
}
.hide {
    display:none
}

2.引入CSS

3. Favicon 图标

<link rel="shortcut icon" href="favicon.ico" />

4.CSS 位置来分

行内式  CSS

<div class="fr" style="color:red;">aa</div>

5.内嵌式样式

<style>
    .one {
        width: 200px;
    }
</style>

6.外链式

<link rel=”stylesheet” href =”css/base.css” />

7.属性例子

Font 字体综合写

Font: 字体加粗  字号/行高 字体;（必须有字号和字体。）

Font-weight:bold;   700    

  S  del    删除线

  I   em   倾斜

  U   ins   下划线

 字体加粗  font-weight: 700;  

让字体不加粗:  font-weight:normal;

 字体倾斜:  font-style:italic;  不用

 字体不倾斜： font-style:normal;

 不下划线 不删除线:  text-decoration: none;

 定位：  position：static;  静态定位   约等于标准流

 浮动的不浮动: float:none;      none  left  right

 定位的不定位:  position: static;    absolute  relative  fixed

权重：标签  1     类  10   id  100  行内  1000     

 网页稳定：

  Width 和height  最稳定

  其次 padding     

  最后才考虑margin

8. 浮动(float)

正常流   normal  flow  

浮动 定位   脱标   out of  flow  

浮动目的：可以让多个块级 元素 放到一行上。  

 Float: left   right  none;

9. 清除浮动

 清除浮动： 根据情况需要来清楚浮动 。

 清除浮动的目的： 就是为了解决 父 盒子高度为0 的问题。

 清除浮动：

    1. 额外标签法   

    2. Overflow: hidden   触发 bfc 模式 就不用清楚浮动

    3. 伪元素  

    .clearfix:after {

          content:””;

          Visibility:hidden;  

          Display:block;

          Height:0;

          Clear:both;

     }

    .clearfix{

      Zoom:1;

}

 清除浮动：  真正的叫法  闭合浮动

   4. 双伪元素

 

.clearfix:before,.clearfix:after{
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}