怎么查看網(wǎng)頁的CSS代碼？如何閱讀？

很多學(xué)習(xí)一段時間HTML與CSS的小伙伴在看到別人寫的網(wǎng)頁的時候可能會冒起一陣學(xué)習(xí)的興趣，想要看看別人優(yōu)秀的前端頁面的HTML與CSS是怎么寫的。但是卻沒有比較好的辦法查看到相應(yīng)的文件。接下來小編用這一篇文章告訴你，怎么查看網(wǎng)頁的CSS代碼吧！

最簡單暴力的方法——直接保存

這是對于初學(xué)者來說最簡單的方法了。只需要右鍵保存一個網(wǎng)頁，就能直接獲取到這個網(wǎng)頁的所有靜態(tài)內(nèi)容（包括html，css，部分js還有靜態(tài)圖片，圖標(biāo)，字體等）。

最具有目的性的查看方式：開發(fā)者工具

使用開發(fā)者工具有兩種方式，一種是通過網(wǎng)絡(luò)請求，查看頁面請求的css，然后獲取css內(nèi)容。

可以看到我們通過開發(fā)者工具的網(wǎng)絡(luò)功能，截取到了頁面請求css的響應(yīng)，然后打開就是css樣式（這位前端開發(fā)人員樣式還寫了注解，得加雞腿）。

但這與第一種方式其實(shí)都是獲取一整個css文件，談不上最有目的性。主要是開發(fā)者工具的第二種使用方法：元素選擇：

可以看到開發(fā)者工具提供有一個選擇元素的按鈕，選擇想要的目標(biāo)元素，右邊就能展現(xiàn)對應(yīng)的樣式（所有樣式，包括已覆蓋的樣式），使用這種方式查看樣式可以查看到每一條作用于元素上的樣式，而且開發(fā)者工具還提供了很多工具，比如事件監(jiān)聽器和計算功能（這是小編比較常用的功能）。有的小伙伴可能會問：上面好像沒有偽類?。繘]錯，上面確實(shí)沒有，因為偽類需要使用上面的樣式篩選器才能展現(xiàn)出來?？偟膩碚f，這個樣式所展現(xiàn)的所有樣式，是應(yīng)用于這個頁面的所有css（可能會有多個css，這些css可能會對同一個元素添加不同的屬性）所添加的所有屬性，所以他是看元素css樣式的最佳工具。

隱藏最深的查看方式——自己請求css

在瀏覽器中右鍵，你會發(fā)現(xiàn)有個功能，叫查看源代碼。在查看源代碼的情況下，是可以看到頁面的html代碼的。然后回憶一下HTML的知識，CSS文件一般放哪里呢？沒錯，head標(biāo)簽里，通過link的方式或者style標(biāo)簽引入?？吹较旅娴拇a，沒錯，他采用的是link方式，然后你會發(fā)現(xiàn)，css的路徑貌似是可以點(diǎn)擊的，好奇的小編點(diǎn)擊了一下，然后就看到了如下頁面：

是的，沒錯，css鏈接是可以點(diǎn)擊的，點(diǎn)擊后會向服務(wù)器發(fā)起請求獲取對應(yīng)的css文件，這也是獲得網(wǎng)頁CSS代碼的方式。

小結(jié)

前端代碼對于開發(fā)者而言幾乎是完全暴露的，他的html，css乃至js都是可以通過開發(fā)者工具獲取的，只要獲取到了這些代碼。就能解決怎么查看網(wǎng)頁的css代碼的問題。以上就是本篇文章的全部內(nèi)容，更多精彩內(nèi)容請關(guān)注W3C技術(shù)頭條。