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

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

最簡(jiǎn)單暴力的方法——直接保存

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

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

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

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

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

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

隱藏最深的查看方式——自己請(qǐng)求css

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

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

小結(jié)

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