利用谷歌浏览器开发者工具修改CSS

对于SEO来说，使用开发者工具是进阶优化技能必须学会的一项，其实这个工具真的能给网站设计、优化等等带来极大的便利，下面给大家分享一个很简单的修改CSS样式的方法。

下面以我博客的一个页面为实例，给大家演示一下

测试预览

打开网页：https://www.4xseo.com/tutorial/

例如，我们需要修改内容页标题的样式，我们可以将鼠标移动到标题处，然后右键点击→→检查（审查元素）

如上图所示，右上角可以控制开发者工具窗口的位置，为了方便，我选了新窗口

这个时候，我们就可以修改网页的源码了，例如：将h1标签修改成h2 我们看看有什么变化

这个时候，就可以看到标题的字体变小了，其实就是由H1标签的样式变成了H2的

我们再修改样式看看

我们给这个标题加一个样式，或者直接在样式上进行修改，例如，我加了一个字体的大小属性

是不是立即生效了，字体变大了很多。

修改CSS文件

有没有发现改了之后网页变得巨丑务必，不用着急，刷新一下是不是就恢复正常了。那如何才能保持测试的样式呢？

这个就需要修改css文件了

图就不截了，上面的图，我们将鼠标移动到style.css 就会显示样式文件的地址，我们只要找到这个文件，将之前修改得样式在文件中做修改并保持，最后更新浏览器缓存，就OK了