咨询电话:400-810-1418服务与监督电话:400-110-6199

开发工作者入门:CSS规范总结

发布时间:2019-07-10 10:34:16

作为开发工作者,CSS是必须要掌握的,今天就给大家分享一篇CSS规范总结,一起来看吧!

CSS样式的权值(权重)

权值等级的定义

第一等:代表内联样式,如: style=””,权值为1000。

第二等:代表ID选择器,如:#content,权值为100。

第三等:代表类,伪类和属性选择器,如.content,权值为10。

第四等:代表类型选择器和伪元素选择器,如div p,权值为1。

Ps:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0,!important 优先级最高,万不得已的情况下才用。

权重计算

 #content div#main-content h2=2*100+2*1=202

 #content #main-content>h2=2*100+1=201

 body #content div[id="main-content"] h2=1*100+1*10+3*1=113

 #main-content div.paragraph h2=1*100+1*10+2*1=112

 #main-content [class="paragraph"] h2=1*100+1*10+1*1=111

 div#main-content div.paragraph h2.first=1*100+2*10+3*1=123

优先规则

权值大的样式会覆盖权值小的样式,上面例子的样式会采用权值最大201的样式,当你乱用!important,特别是后期修改样式的时候,是不是有种心力憔悴电费感觉?

当css前后样式项的权值一样,后面的样式会覆盖前面的样式。

CSS规范

命名风格规范

1 css文件命名:统一为小写的英文字母(尽量少用拼音),如:index.css。

当名字需要组合拼写时,可以在单词间加中杠线(不要用下划线:容易写错)。如:member-report.css。(推荐)

或者统一为驼峰式拼写。如:MemberReport.css (项目启动前统一风格)。

2 样式名(html的class名):在让人看懂的前提下,尽量语义化或简写。尽量少用拼音,和无语义的缩写 .bt .bd 等; 风格可以统一为小写字母,如:content。当名字需要组合时,可以采用css文件名的规范。

样式的继承

文本样式

color,font-family, font-size, font-style,

font-variant, font-weight, font, letter-spacing,

line-height,text-align, text-indent, texttransform,word-spacing

列表相关属性

list-style-image, list-style-position,

list-style-type, list-style,

3.jpg

像素化 css

CSS优化

渲染

就是浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程

浏览器对页面呈现的处理流程

用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;

浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;

浏览器又发出CSS文件的请求,服务器返回这个CSS文件;

浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;

浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;

服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器要回过头来重新渲染这部分代码;

浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;

Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;

终于等到了</html>的到来,浏览器泪流满面……

等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;

浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

回流

当页面的布局发生变化时,浏览器会回过头来重新渲染,这就是页面为什么会慢的一个原因,当一个点的变 化影响了布局,这就会使得要倒回去重新渲染,这个倒回去的过程称为 reflow(回流)。

当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流

添加或者删除可见的DOM元素;

元素位置改变和计算(offsetWidth 和 offsetHeight)

元素尺寸改变——边距、填充、边框、宽度和高度

内容改变——比如文本改变或者图片大小改变,字体的改变而引起的计算值宽度和高度改变;

页面渲染初始化

浏览器窗口尺寸改变——resize事件发生时;

操作 class 属性,脚本操作 DOM,设置 style 属性的值,激活 CSS 伪类

var s = document.body.style;

s.padding = "2px"; // 回流+重绘

s.border = "1px solid red"; // 再一次 回流+重绘

s.color = "blue"; // 再一次重绘

s.backgroundColor = "#ccc"; // 再一次 重绘

s.fontSize = "14px"; // 再一次 回流+重绘

// 添加node,再一次 回流+重绘

document.body.appendChild(document.createTextNode('abc!'));

回流比重绘的代价要更高,回流的花销跟render tree有多少节点需要重新构建有关系,假设你直接操作body,比如在body最前面插入1个元素,会导致整个render tree回流,这样代价当然会比较高,但如果是指body后面插入1个元素,则不会影响前面元素的回流。

reflow问题也是可以优化的,减少reflow是很有必要的,比如给图片设定好宽度和高度,这样就可以把图片的占位面积预定好。

重绘

一些元素需要更新属性,而这些属性只是影响元素的外观,风格(景颜色,文字颜色,边框颜色)而不会影响布局,浏览器就会repaint。repaint的速度明显比reflow的速度快。

为了帮助小伙伴们更好的学习WEB前端,技术学派整理了WEB前端的相关学习视频及学习路线图。