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

自媒体 思享 2563浏览

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

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

测试预览

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

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

开发者模式

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

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

h1修改为h2

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

我们再修改样式看看

开发者工具

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

属性修改

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

修改CSS文件

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

这个就需要修改css文件了

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

 

推荐阅读

如何清除谷歌浏览器旧的重定向缓存

当我们设置301重定向到网页时,浏览器会缓存,下次访问网页时,我们会拿着缓存直接跳转。即使取消了301跳转,我们访问网页的时候还是会跳转。此时,我们不应该清除整个浏览器缓存,而是禁用当前页面的缓存。下面是Chrome和Firefox浏览器如何禁用当前......

修改hosts解决Chrome浏览器无法使用翻译功能的问题

由于Google Translate退出中国,目前无法使用Google Chrome的翻译功能。据TechCrunch的消息,谷歌发言人通过电子邮件告诉TechCrunch,由于“使用率低”,该公司已经停止了中国大陆的谷歌翻译服务。这一变化也影响了谷......

谷歌浏览器Chrome修改hosts禁用自动更新

使用谷歌Chrome时,如果浏览器的自动更新可能会影响某些软件的正常运行,有时需要关闭谷歌Chrome的自动更新。下面介绍如何关闭谷歌Chrome的自动更新。右键单击hosts文件,在右键菜单中单击opendlg,然后选择“记事本”将其打开。这样就可......