让css的权重变得更友好的小技巧有哪些

这篇文章主要介绍让css的权重变得更友好的小技巧有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联是一家专业提供叶集企业网站建设,专注与成都网站制作、网站设计、外贸网站建设HTML5、小程序制作等业务。10年已为叶集众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

技巧一:样式总是作为特定属性组合出现

一个很好的例子就是color和bakground-color的组合。除非你只做小调整,不然你需要一起调整他们。当给一个元素添加背景颜色时,它可能不包含任何文本,但可能会有一些子元素。因此,我们一起设置前景色(color)和背景色(background-color),我们总是可以确定这些元素不会遇到任何易读性和对比问题。下次我们改变背景色时,不需要到处寻找需要修改的文本颜色,因为他们都以一个组合的形式出现在一起。

技巧二:使用动态值,比如currentColor和em等

有时候文本颜色也会使用在其他属性上。比如说border、box-shadow或者SVG图标中的fill上。定义相同颜色有一个替代方案,可以直接使用currentColor。默认情况下,color是可以继承的,你只需要在一个地方修改就可以改变其他属性的颜色。

同样的,给font-size属性使用em单位,允许你只修改:root的font-size就可以改变元素的盒模型大小。

技巧三:使用inherit属性值继承其父元素样式来覆盖UA自带样式。

像button、input这样的表单控件,不同的浏览器都会有自己的样式风格(UA样式)。我们可以使用inherit继承其父元素样式,从而覆盖浏览器的UA样式。

button,
input,
select,
textarea {
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
}

上面示例代码取自sanitize.css、 normalize.css也是这样使用的。如果你不是这样使用,说明你已经...

你也可以尝试在input[type="range"]、input[type="radio"]和input[type="checkbox"]等元素上直接使用前面介绍的currentColor属性自动匹配颜色。或许你不需要改变什么,可以将一个亮色系变成一个暗色系。

技巧四:每当你写CSS时,你想尽可能的回到树形顶部。换句话说,回到:root。

例如,我们的网站有一个侧边栏,希望在这个侧边栏上添加一个简短的个人介绍。其HTML的结构看起来可能会像这样:


    
    
        
        

CSS是这样写的:

.Bio {
    font-size: .8em;
    line-height: 1.5;
    color: #888;
}

这样写是能正常工作的,并不存在样式上的问题。但是,侧边栏还有一个导航nav,很有可能他们有一些样式是相同的。在我们这个示例中font-size和color都是相同的。让我们把这些属性从nav和.Bio中提取出来,并且将它们添加到其父元素.SideBar中:

.SideBar {
    font-size: .8em;
    color: #888;
}

事实证明,在.Posts中已经设置了line-height:1.5;。似乎整个页面都使用了相同的行高,那么我们可以将.Bio和.Posts中的line-height移到根元素中:

:root {
    line-height: 1.5;
}

这看起来是一个CSS常识,但他也不会太关注兄弟元素定义同样的事情。这也让你发现,有一些代码产生重复。其实这并不可怕,因为我们只需要花点时间重新重构代码,但这样保持了CSS的代码处理健康状态。

让css的权重变得更友好的小技巧有哪些

在树支上写样式,而不应该在树叶上写样式

以上是“让css的权重变得更友好的小技巧有哪些”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


当前题目:让css的权重变得更友好的小技巧有哪些
分享链接:http://bzwzjz.com/article/jodccc.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 专业网站设计 成都网站建设 定制网站制作 成都网站建设推广 温江网站设计 成都网站建设公司 高端网站设计 定制级高端网站建设 自适应网站设计 成都网站建设 外贸网站建设 网站建设方案 重庆外贸网站建设 app网站建设 成都网站制作 泸州网站建设 重庆企业网站建设 网站建设方案 成都商城网站建设 手机网站建设套餐 企业网站设计 手机网站建设