引言、CSS编码技巧

1、currentColor

currentColor是一个表示颜色的关键字,它表示获取当前层级文本的颜色,若没有规定当前层级的文本颜色,则逐级向上查找父级元素的文本颜色。

    color: #c00;
    border: 1px solid currentColor;  //边框的颜色将为 #c00

2、继承

inherit可以用在任何CSS属性中,它总是绑定到父元素的值,对于伪元素,则会取生成该伪元素的宿主元素的值。


a{
  color:inherit;
}

加入上述代码后



3、合理使用简写和扩展写法

background: url("a.png") no-repeat top right / 2em 2em,
            url("b.png") no-repeat bottom right / 2em 2em,
            url("c.png") no-repeat bottom left / 2em 2em;

上述代码中,因为简写语法中的background-size和background-repeat的值重复了3遍,所以可以优化为

background: url("a.png")  top right,
            url("b.png")  bottom right,
            url("c.png")  bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;

单独的只为简写属性中的某一项属性提供一个值,这个值就会扩散并应用到简写属性中的每一项。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 尽量减少代码重复 在软件开发中,保持代码的DRY 和可维护性是最大的挑战之一,而这句话对CSS 也是适用的。在实践...
    图灵教育阅读 1,220评论 0 14
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,094评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,656评论 0 7
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,868评论 0 6