前端开发Css性能怎么优化?

移动平台前端开发
前端 移动开发
移动端web前端开发薪水
css文件导入
2.使用sprite技术
3.缩写css
/padding简写/
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
padding:1px 2px 3px 4px;/顺时针,上右下左,margin一样/
/background简写/
background-image: urlcolor=rgb(204, 204, 204);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: -47px 0;
background-color:#FFF;
background:urlcolor=rgb(204, 204, 204) no-repeat fixed -47px 0 #FFF;
/border简写/
border-width: 1px;
border-style:solid;
border-color: #000;
border:1px solid #000;
/outline简写/
outline-width:1px;
outline-style:dotted;
outline-color:red;
outline:1px dotted red; /类似border/
/font简写/
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 15px;
line-height: 1.2em;
font-family: ’Comic Sans MS’,’Microsoft YaHei’,Arial;
/按顺序,font-size和font-family为必选/
font: italic small-caps bold 15px/1.2em ’Comic Sans MS’,’Microsoft YaHei’,Arial;
/border-radius简写/
border-top-left-radius: 10px 11px;
border-top-rightright-radius: 11px 12px;
border-bottom-rightright-radius: 12px 13px;
border-bottom-left-radius: 13px 14px;
border-radius: 10px 11px 12px 13px /11px 12px 13px 14px;
/list-style简写/
list-style-type:circle;
list-style-position:inside;
list-style-image:urlcolor=rgb(204, 204, 204);
list-style:circle inside urlcolor=rgb(204, 204, 204);
/颜色/
color:#114433;
color:#143;
4.避免使用Expressions和Filter
5.属性公用
li:nth-child(1){
position:absolute;
top:0;
left:0;
display:block;
width:100px;
height:100px;
}
li:nth-child(2){
position:absolute;
top:0;
left:200px;
display:block;
width:100px;
height:100px;
}
/属性共用/
li{
position:absolute;
top:0;
display:block;
width:100px;
height:100px;
}
li:nth-child(1){
left:0;
}
li:nth-child(2){
left:200px;
}
6.选择器优化
精简选择器
div article #content table tbody tr td.able{
….
}
/精简为/
.able{
….
}
避免使用属性选择器
子选择器与后代选择器
样式与结构分离
移动端前端开发自适应
传智播客 前端与移动开发视频教程
web前端移动前端开发
» 本文来自:前端开发者 » 《前端开发Css性能怎么优化?》
» 本文链接地址:https://www.rokub.com/7664.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!