月度归档：2020年03月

CSS代码中属性值等于0时,不需要单位,这种写法你知道吗?


摘要:
下文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代码中的相关注释规范简介说明,如下所示:

注释对于任何语言都是必须的,那么css语言的注释该如何处理呢,下文将一一道来

1.单行注释

css中单行注释采用 斜杠加星号开头和 星号加斜杠结尾
如下:

   /* 注释内容 */

/* 列表 */
.list{...}
/* 图片 */
.img{...}
/* 标题 */
.title{...}
/* 其它 */
.other{...}


2.多行注释

css代码中,多行注释和单行注释非常的相似,我们只需将”*/”换行就可实现多行注释的操作,如下所示:

 
 /**
 * 这里放着maomao365.com的所有注释信息
 */


3.独立css文件的注释信息

 
/**
 * @name: 文件名称
 * @description: 文件功能
 * @author: 作者信息1
 *          作者信息2
 * @write:  最后写入日期及时间
 * @update: 最后更新日期及时间
 */

CSS代码的优化方法举例说明


摘要:
下文讲述函数中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; }