摘要:
下文css代码出现属性值等于0的写法说明,如下所示:
1.css 属性值等于0时,笔者建议去掉单位
例:
margin-bottom: 0em; bottom: 0px; ----建议改写为以下写法---- margin-bottom:0; bottom:0;
2.css 属性值为小于1的浮点数时,建议省略前面的0,如下所示
.txtInfo {
width: 180px;
background: blue;
opacity: 0.7;
}
----建议改写为以下方式--------
.txtInfo {
width: 180px;
background: blue;
opacity: .7;
}
摘要:
下文css代码中的相关注释规范简介说明,如下所示:
注释对于任何语言都是必须的,那么css语言的注释该如何处理呢,下文将一一道来
1.单行注释
css中单行注释采用 斜杠加星号开头和 星号加斜杠结尾
如下:
/* 注释内容 */
/* 列表 */
.list{...}
/* 图片 */
.img{...}
/* 标题 */
.title{...}
/* 其它 */
.other{...}
2.多行注释
css代码中,多行注释和单行注释非常的相似,我们只需将”*/”换行就可实现多行注释的操作,如下所示:
/** * 这里放着maomao365.com的所有注释信息 */
3.独立css文件的注释信息
/** * @name: 文件名称 * @description: 文件功能 * @author: 作者信息1 * 作者信息2 * @write: 最后写入日期及时间 * @update: 最后更新日期及时间 */
摘要:
下文讲述函数中return语句的功能简介说明,如下所示:
css 作为html样式编写的必备脚本,在互联网项目中必不可少,那么我们该如何编写高性能的css代码呢?下文将一一道来,如下所示:
1.css代码分析
#container > a{
color: blue;
font-size: 18px;
}
以上css代码解析注意事项: css解析是从右到左 1.找出所有<a>标签的元素 2.找到a标签的父级中id 等于"container"的html元素 3.将匹配出的超链接元素的字体设置为blue 大小设置为18px;
css代码性能说明
css选择器采用不同的写法,会导致浏览器解析所消耗的能量不同,如:
#container *{
color: blue;
font-size: 18px;
}
上述代码,在大型页面中是不可取的写法,因为需匹配的元素非常非常多,这将会加大系统的开销,
因为根据右侧匹配规则,”*”将会匹配所有元素,
所以最右侧匹配器,我们尽量采用最小化原则
1.ID选择器
2.类选择器
3.元素选择器
4.兄弟选择器
5.子选择器
6.后代选择器
7.属性选择器
8.伪类/伪元素选择器
上述匹配器规则的性能由高至低
css代码性能优化指导
1.尽量避免使用”*”通配符
2.合理使用id选择器
因为id选择器性能最好,但是其样式只能应用到一个元素上,会使代码体积变大,尽量使用”类选择器”class
3.避免使用限定标签之”类和id写法”
例:应避免以下写法
div#className {}
div.idName {}
4.减少后代选择器使用
例:
#container > a{ }
5.多使用继承
#className {}
#className > .span { font-size:24px; }
#className > .a { font-size:24px; }