自动外链工具 在线排版工具 搜索引擎提交入口 wordpress主题推荐 批量打开网址工具 优化PDF资料 【已备案域名】 ★VIP视频在线解析★ 追虐SEO导航

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

56
文章目录
  1. 测试预览
  2. 修改CSS文件

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

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

测试预览

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

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

开发者模式

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

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

h1修改为h2

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

我们再修改样式看看

开发者工具

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

属性修改

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

修改CSS文件

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

这个就需要修改css文件了

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

 

来源:本文由思享SEO博客原创撰写,欢迎分享本文,转载请保留出处和链接!

抢沙发

昵称*

邮箱*

网址