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

SEO博客 思享 1644浏览 0评论

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

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

测试预览

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

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

开发者模式

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

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

h1修改为h2

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

我们再修改样式看看

开发者工具

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

属性修改

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

修改CSS文件

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

这个就需要修改css文件了

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

 

转载请注明:思享SEO博客 » 利用谷歌浏览器开发者工具修改CSS

扩展阅读

谷歌浏览器怎么扩展程序怎么直接显示在右上角菜单中?

我们启用谷歌浏览器扩展程序时,发现右上角只有一个扩展程序的菜单,而不是像以前一样直接显示扩展程序图标,这无疑用起来非常不方便,那么我们应该怎么做才能让它显示呢? 步骤 其实很简单,我们只需要点击扩展程序图标 这时候,扩展程序会列出开启的程序,在程序名......

怎么关闭谷歌浏览器新版本的更新提示?

谷歌是当今非常流行的网页浏览器。但是由于某些原因谷歌浏览器的更新并不十分顺畅,但是更新提示却会冒出来,如果有强迫症的根本就受不了,那么,我们该怎么解决这一问题呢? 更新至最新版 谷歌浏览器其实是可以自动更新的,如果大家只是普通的使用,并不介意浏览器的......

chrome浏览器地址栏不显示http/https、www的解决办法

当我把chrome浏览器升级到最新版的时候,发现访问所有网站,地址栏中默认不再显示一级域名之前的东西,比如http和www,普通用户不用在意,作为网站运营人员,就必须把这个东西显示清楚。 让chrome浏览器地址栏恢复显示http/https、www......

avatar
发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址