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; }