在進行前端開發的過程中，我們經常會需要提取網頁的 CSS 樣式碼，以便于對樣式效果進行分析和調整。其實，在瀏覽器中，我們就能夠方便地獲取源碼 CSS，而不必使用任何專業工具。這里提供兩種提取源碼 CSS 的方法。

第一種方法是使用 Chrome 瀏覽器開發者工具自帶的功能。我們只需要在瀏覽器中打開需要獲取 CSS 樣式代碼的網站，并點擊開發者工具（快捷鍵 F12）。接著，在開發者工具中，點擊 Elements 選項卡，并在 HTML 部分找到需要獲取樣式代碼的元素。在該元素上右鍵點擊，選擇 Copy -->Copy Selector。然后，回到開發者工具的 Styles 選項卡中，定位到該元素的 CSS 樣式代碼塊，右鍵點擊，并選擇 Copy -->Copy Rule（或 Copy All），即可將 CSS 樣式代碼復制到剪貼板中。

第二種方法是使用在線提取工具，比如 ExtractCSS （http://extractcss.com/）。只需將待提取的網頁地址粘貼到 ExtractCSS 的輸入框中，點擊 Extract 按鈕，就能夠將該網頁中的所有 CSS 樣式代碼提取出來，并顯示在頁面中。用戶可以根據需要挑選感興趣的部分進行復制和保存。

/* 例如，在開發者工具的 Styles 選項卡中
找到一個 div 區塊的 CSS 樣式代碼如下 */
div {
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
}
/* 在 ExtractCSS 中提取得到的
div 區塊的 CSS 樣式碼如下 */
div {
background-color: #f2f2f2;
}
div {border: 1px solid #ccc;}
div {
border-radius: 4px;
padding: 10px;
}