创新路
我们一直在努力

Chrome开发者工具:快速还原CSS简写属性

CSS简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性。使用简写属性,Web开发人员可以编写更简洁、更具可读性的样式表,节省时间和精力。

例如我们设置一个底部边框可以这样写

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e5e5e5;

上面的代码有点多,所以我们用简写属性来实现

border-bottom: 1px solid #e5e5e5;

这样的代码确实简洁多了

CSS代码简写虽然好,但是存在一个问题,当我们遇到不熟悉的CSS简写时,不翻看具体的规范文档,你会一头雾水,增加掌握代码的难度,有什么好办法,直接将CSS简写代码还原呢?

今天我们就用Chrome浏览器内置的开发者工具,来解决这个问题,非常简单。

1、浏览器中打开相关网页

2、键盘快捷键Ctrl+Shift+I可以启动【开发者工具】

3、键盘快捷键Ctrl+Shift+C可以进入页面元素“选择模式”,找到你需要观察的页面元素

PS:你可以可以直接点击下图箭头处图标进入“选择模式”

Chrome01.jpg

4、选中元素后,我们就可以在【开发者工具】的右栏看到对应的CSS代码了

5、我们可以看到元素相关的所有CSS代码,同你在源码中看到的其实一样,不过采用了CSS简写的代码,其实是有特殊提示的,注意下图中的三角图标

Chrome02.jpg

6、点击该三角图标,见证奇迹的时刻了,你会发现简写代码被还原了。

Chrome03.jpg

未经允许不得转载:天府数据港官方信息博客 » Chrome开发者工具:快速还原CSS简写属性

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机