温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS有哪些规范

发布时间:2022-03-01 17:40:54 来源:亿速云 阅读:141 作者:iii 栏目:web开发

这篇文章主要介绍“CSS有哪些规范”,在日常操作中,相信很多人在CSS有哪些规范问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS有哪些规范”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

权值等级的定义

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

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

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

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

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

权重计算

优先规则

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

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

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有哪些规范”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI