自動外鏈工具 在線排版工具 搜索引擎提交入口 wordpress主題推薦 批量打開網址工具 【老域名購買】 思享SEO導航 【網站合作】

利用谷歌瀏覽器開發者工具修改CSS

904
文章目錄
  1. 測試預覽
  2. 修改CSS文件

對于SEO來說,使用開發者工具是進階優化技能必須學會的一項,其實這個工具真的能給網站設計、優化等等帶來極大的便利,下面給大家分享一個很簡單的修改CSS樣式的方法。

下面以我博客的一個頁面為實例,給大家演示一下

測試預覽

打開網頁:http://www.nhkkdh.live/tutorial/

例如,我們需要修改內容頁標題的樣式,我們可以將鼠標移動到標題處,然后右鍵點擊→→檢查(審查元素)

開發者模式

如上圖所示,右上角可以控制開發者工具窗口的位置,為了方便,我選了新窗口

這個時候,我們就可以修改網頁的源碼了,例如:將h1標簽修改成h2 我們看看有什么變化

h1修改為h2

這個時候,就可以看到標題的字體變小了,其實就是由H1標簽的樣式變成了H2的

我們再修改樣式看看

開發者工具

我們給這個標題加一個樣式,或者直接在樣式上進行修改,例如,我加了一個字體的大小屬性

屬性修改

是不是立即生效了,字體變大了很多。

修改CSS文件

有沒有發現改了之后網頁變得巨丑務必,不用著急,刷新一下是不是就恢復正常了。那如何才能保持測試的樣式呢?

這個就需要修改css文件了

圖就不截了,上面的圖,我們將鼠標移動到style.css 就會顯示樣式文件的地址,我們只要找到這個文件,將之前修改得樣式在文件中做修改并保持,最后更新瀏覽器緩存,就OK了

 

來源:本文由思享SEO博客原創撰寫,歡迎分享本文,轉載請保留出處和鏈接!
seo培訓評論廣告

搶沙發

昵稱*

郵箱*

網址

七乐彩选号技巧