css 层叠样式表
作用： - 颜色 - 位置 注释 /* 这是注释 */ 形式 - 内嵌样式 标签style - 内联样式 head style - 外联样式 单独文件 选择器 - id选择器 # - class选择器 . - 标签选择器 - 层级选择器 空格隔开父-子 - 组合选择器 逗号隔开同级元素 - 属性选择器 [] 里边写属性=值 优先级： style由上至下 边框 border 宽度 样式 颜色 height高度 width宽度 像素，百分比 text-align:center水平位置， line-height行高 垂直方向居中 color字体颜色 font-size字体大小 font-weight字体加粗 float 标签漂浮，块级标签堆叠 老子管不住：clear：both display - inline 行内显示 无法设置高度，宽度，边距 - block 块级显示 可以设置高度，宽度，边距 - none 不显示 - inline-block 双重属性 padding 内边距 margin 外边距 代码重用 两个样式相同的部分可以单独提出来 自适应media 布局变形解决办法：最外层用绝对宽度，内部可以使用百分比 img标签，默认有1像素的边框，border:0; position - fixed 固定 - relative+absolute 相对定位+绝对定位 z-index: 层级顺序，立体堆叠，值越大越靠前 opacity：模糊度0-1 overflow：auto hidden hover background-image: url("img/icon.png"); 默认重复 background-repeat: no-repeat; background-position-x:0; 相当于扣了一个小洞 background-position-y:0;
代码实例
float Title </div><div> .pg-head{</div><div> height: 38px;</div><div> background-color: darkgray;</div><div> }</div><div> .pg-head-left{</div><div> float: left;</div><div> }</div><div> .pg-head-right{</div><div> float: right;</div><div> }</div><div> .pg-body{</div><div> width: 900px;</div><div> height:400px;</div><div> border: 1px solid red;</div><div><br /></div><div> }</div><div> .pg-element{</div><div> width: 150px;</div><div> height:200px;</div><div> border: 1px solid green;</div><div> float: left;</div><div> }</div><div> 左边的内容 右边的内容 内部元素 内部元素 内部元素 内部元素 内部元素 内部元素
效果
fixed
Title </div><div> body{</div><div> margin: 0 auto;</div><div> }</div><div> .pg-head{</div><div> background-color: black;</div><div> color:white;</div><div> position: fixed;</div><div> width: 100%;</div><div> height: 48px;</div><div> top:0;</div><div> text-align: center;</div><div> line-height: 48px;</div><div> }</div><div> .pg-body{</div><div> height: 5000px;</div><div> background-color: #dddddd;</div><div> margin-top: 48px;</div><div> color:green;</div><div> text-align: center;</div><div> font-size:50px;</div><div> }</div><div> #pg-goto-top{</div><div> width: 80px;</div><div> height: 50px;</div><div> background-color: black;</div><div> position: fixed;</div><div> right: 10px;</div><div> bottom:10px;</div><div> color:white;</div><div> text-align: center;</div><div> line-height: 50px;</div><div> }</div><div> 顶部内容 主体内容 返回顶部 </div><div> function gotoTop() {</div><div> document.body.scrollTop=0;</div><div> }</div><div>
background
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .icon{ width: 18px; height: 18px; background-image: url("img/icon.png"); background-repeat: no-repeat; background-position-x:0; /*border: 1px solid green;*/ float: left; margin-right:10px ; } .icon-1{background-position-y:0;} .icon-2{background-position-y:-20px;} .icon-3{background-position-y:-40px;} .icon-4{background-position-y:-60px;} .icon-5{background-position-y:-100px;} .icon-6{background-position-y:-120px;} .icon-7{background-position-y:-140px;} .icon-8{background-position-y:-160px;} .icon-9{background-position-y:-180px;} </style> </head> <body> <p>原图：</p> <div> <img src="img/icon.png" alt=""> </div> <p>背景图：</p> <div class="icon icon-1"></div> <div class="icon icon-2"></div> <div class="icon icon-3"></div> <div class="icon icon-4"></div> <div class="icon icon-5"></div> <div class="icon icon-6"></div> <div class="icon icon-7"></div> <div class="icon icon-8"></div> <div class="icon icon-9"></div> </body> </html>
icon.png
效果
