CSS如何调试?

html-css07

CSS如何调试?,第1张

1.我们以谷歌浏览器为例,来讲讲怎么调试CSS。先打开谷歌浏览器,看截图里的红色箭头,点击“工具”,点击“开发者工具”,就打开调试工具了,也可以按下快捷键F12来打开调试工具;

2.打开的调试工具如下图所示:

3.我们就以百度的首页为例,看看调试效果。看截图,点击那个“抓取元素”的按钮,来获取要审查的元素;

4.看截图,出现下面的界面后,点击“style”,单击那个对勾,就可以看到效果了;

5.我去掉一些样式之后,就出现了下面的效果,看截图;

PostCSS 是使用 JS 插件来转换 CSS 的工具,支持变量,混入,未来 CSS 语法,内联图像等等。

PostCSS 已经被许多大公司使用:谷歌,推特,阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 处理器插件之一。

PostCSS 可以作为预处理器使用,类似:Sass, Less 和 Stylus。但是 PostCSS 是模块化的工具,比之前那些快3-30 倍,而且功能更强大。

PostCSS 包括 CSS 解析器,CSS 节点树 API,一个源映射生成器和一个节点树 stringifier。

简而言之,PostCSS是CSS变成JavaScript的数据,使它变成可操作。PostCSS是基于JavaScript插件,然后执行代码操作。PostCSS自身并不会改变CSS,它只是一种插件,为执行任何的转变铺平道路。

本质上是没有很制PostCSS插件操纵CSS,也就是说它可以适用于任何CSS。只要你能想到的,你都可以编写一个PostCSS插件,让它来转成CSS。

PostCSS插件可以像预处理器,它们可以优化和autoprefix代码;可以添加未来语法;可以添加变量和逻辑;可以提供完整的网格系统;可以提供编码的快捷方式......还有很多很多。

事实上,使用PostCSS插件你可以做任何你想做的任何事情,但PostCSS相对而言还是较新,这也导致了一些误解,工具实际上是什么。

许多人(包括我自己在内)对PostCSS没有一个完整的印象,PostCSS实际是什么,并因此错过了PostCSS可以提供什么。

这类工具很多,虽然没看过这个视频但我可以提供几个方法

1、浏览器开发者调试器(F12打开,选中想要查看的div会显示宽高,可以看到背景颜色,字体颜色和大小等)

2、如果是图片的话可以下载下来使用Photoshop的拾色器来获取

如果觉着这种发式麻烦的话可以在网络上搜索  屏幕取色   关键字下载相关软件

但是作为技术人员的话,还是以开发者调试器使用为主的好