CSS有哪些规范
这篇文章主要介绍“CSS有哪些规范”,在日常操作中,相信很多人在CSS有哪些规范问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS有哪些规范”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
权值等级的定义
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表类,伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如div p,权值为1。
Ps:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0,!important 优先级最高,万不得已的情况下才用。
权重计算
优先规则
权值大的样式会覆盖权值小的样式,上面例子的样式会采用权值最大201的样式,当你乱用!important,特别是后期修改样式的时候,是不是有种心力憔悴电费感觉?
当css前后样式项的权值一样,后面的样式会覆盖前面的样式。
Css 概念
命名风格规范
1 css文件命名:统一为小写的英文字母(尽量少用拼音),如:index.css。
当名字需要组合拼写时,可以在单词间加中杠线(不要用下划线:容易写错)。如:member-report.css。(推荐)
或者统一为驼峰式拼写。如:MemberReport.css (项目启动前统一风格)。
2 样式名(html的class名):在让人看懂的前提下,尽量语义化或简写。尽量少用拼音,和无语义的缩写 .bt .bd 等; 风格可以统一为小写字母,如:content。当名字需要组合时,可以采用css文件名的规范。
样式的继承
文本样式
列表相关属性
像素化 css
渲染
就是浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程
浏览器对页面呈现的处理流程
回流
当页面的布局发生变化时,浏览器会回过头来重新渲染,这就是页面为什么会慢的一个原因,当一个点的变 化影响了布局,这就会使得要倒回去重新渲染,这个倒回去的过程称为 reflow(回流)。
当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流
reflow问题也是可以优化的,减少reflow是很有必要的,比如给图片设定好宽度和高度,这样就可以把图片的占位面积预定好。
重绘
一些元素需要更新属性,而这些属性只是影响元素的外观,风格(景颜色,文字颜色,边框颜色)而不会影响布局,浏览器就会repaint。repaint的速度明显比reflow的速度快。
到此,关于“CSS有哪些规范”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341