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:; padding:; }
fieldset, img,input,button { border:none; padding:;margin:;outline-style:none; }
ul, ol { list-style:none; }
input { padding-top:; padding-bottom:; font-family: "SimSun","宋体";}
select, input { vertical-align:middle; }
select, input, textarea { font-size:12px; margin:; }
textarea { resize:none; } /*防止拖动*/
img {border:; 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:;/*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:;
}