對(duì)于網(wǎng)頁設(shè)計(jì)師或者網(wǎng)頁開發(fā)者來說，查看網(wǎng)頁的CSS樣式表是非常重要的。谷歌瀏覽器擁有非常方便的開發(fā)者工具，可以輕松地查看CSS樣式表。

首先，打開谷歌瀏覽器，進(jìn)入需要查看CSS樣式表的網(wǎng)頁。然后，按下F12按鍵，或者在瀏覽器菜單中選擇“更多工具”-“開發(fā)者工具”。

如圖所示：按F12可快捷進(jìn)入上述頁面。

在開發(fā)者工具中，選擇“Elements（元素）”選項(xiàng)卡，可以看到網(wǎng)頁的HTML代碼和CSS樣式表。在CSS樣式表一欄下方有一個(gè)復(fù)選框“Toggle Element State（切換元素狀態(tài)）”，可以選擇不同的狀態(tài)查看網(wǎng)頁。例如，選擇“:hover”狀態(tài)，則可以查看網(wǎng)頁元素在鼠標(biāo)懸停時(shí)的樣式。

如圖所示：

如果想要查看某個(gè)元素的CSS樣式，可以在開發(fā)者工具的元素欄中選擇該元素。選擇后，在樣式欄中即可看到該元素的CSS樣式，包括其CSS選擇器、CSS屬性和CSS值。如果該元素的CSS樣式被繼承自父元素或CSS樣式表的其他規(guī)則，則還可以查看原因，很方便。

如圖所示：

總之，谷歌瀏覽器的開發(fā)者工具可以幫助我們非常方便地查看網(wǎng)頁的CSS樣式表，對(duì)于網(wǎng)頁設(shè)計(jì)和開發(fā)非常有用。如果您還沒有使用過谷歌瀏覽器的開發(fā)者工具，趕快嘗試一下吧。