Chrome使用說明系列（二）－－CSS的即時調整－台灣的Web工程師

CSS，一個控制網頁上HTML的樣式，CSS在設計網頁是非常重要的，因為HTML中的原素排列方式是從上到下的，但是我們現在網頁看起來排版都很漂亮，這是因為CSS的幫忙；CSS宣告這個HTML原素要被排在什麼地方，再由瀏灠器來達成要求，組出現在我們看到的網頁。

CSS因應時代的進步，CSS也進步到CSS3，其實說CSS3，可能有人不清楚，不過要是說要響應式網頁（Responsive），大家應該比較清楚，因為它可以說是近來網頁設計的主流，它可以配合各種畫面的大小，自動調整成適合的版面，更重要的是，它能讓網頁的設計者，只需要寫一次程式，就可以配合電腦、平版、手機等各式不同的畫面。而響應式網頁，主要就是建立在CSS3之上。

CSS是如此的重要，所以如果能即時在網頁上調整，那不知道可以節省多少的時間，尤其是遇到不確定的語法時，更是方便，本篇會大幅介紹Chrome如何即時處理CSS的調整。

接下來我們就來試CSS怎麼即時調整吧，我們一樣以Chrome開啟Google的新聞網頁，https://news.google.com.tw/，並且按滑鼠右鍵後點選「檢查」，進入到下圖的情況。

利用Style方式調整CSS

假設我們的目的是：要擴大圖片列下方的空白距離。

將滑鼠移到右邊如圖的位置，點一下滑鼠左鍵，即可針對這個HTML元素做CSS設定。

設定margin-bottom:35px，就可以達到效果，下圖可以看到圖片下方的空白加大了，同時也可以看到它的HTML語法有改變，多了一個「style:”margin-bottm: 35px”」。

重點說明

其實Chrome的這個功能有點嚇到我了，因為真的很方便，而且不只如此，Chrome本身有提供輸入建議，所以你可以發現，當輸入到一半時，它就幫你把可能要輸入的內容就跳出來，供君選擇；而且不只是左邊的輸入建議，包括右邊（參考上圖的滑鼠位置）也有輸入建議，你可以透過鍵盤的上、下按鍵，調整你要的高度，或是選擇你想輸入的內容，Chrome也即時的幫你把畫面做調整，真的是非常方便。

尋找class對HTML的影響

有接手過他人程式的經驗的話，都會遇到這種狀況，就是根本不知道什麼東西寫在那裡，或是什麼東西造成什麼影響。

CSS也一樣，因為HTML的父子關係架構，加上每個元素各自有自己的class來控制這個HTML元素，造成HTML的子元素會受到來自不知道那一個父輩元素的影響，完全搞不清到底是那一個CSS，造成瀏灠器要將這個HTML顯示成這種樣式。因此，我們接下來介紹在Chrome中怎麼找出什麼class會對我們的HTML造成影響。

示範之前，一樣請各位開啟瀏灠器，進入「檢查」的畫面中，不過這次我們示範用的範例改為facebook的登入頁。

下方範例的目的：找出影響下方紅框字體大小的，有那一些class，並且試著取消這些class造成的影響。

首先，因為影響文字大小的CSS是font-size，所以我們直接利用畫面右下方（紅框）的部份，來找出用那些class有宣告font-size。

很幸運的，第一個class就有用到font-size，將滑鼠移到上圖的位置，可以看到font-size前方有一個勾選的框框跑出來，所以我們再試著將它取消勾選看看。

取消勾選後，發現了幾個現象：

「註冊」的文字變小了。
取消勾選後的font-size，被用刪除線註消了。
下一行的font-size：15px設定，在上一張圖原本是用刪除線註消的，結果在這一張圖是被開啟的狀態。

第一個和第二個現像可以理解，因為這是我們原本預期的事情，但造成第三個現象的原因是什麼呢？其實是因為在這一個HTML元素裡，定義了太多的class，甚至會有來自父元素的影響，而這些class如果有重覆的定義，就會有順序的問題（詳細可上網參考「css 套用順序」的關鍵字），而我們把某一個class取消後，Chrome會根據CSS的套用順序，自動將下一個CSS開啟，這也是第三個現象的原因。

重點說明

透過進行取消勾選的動作，就可以看到這個CSS所產生的視覺效果為何，重覆進行這個動作，就可以達到我們的目的，找到是那一段CSS造成元素的影響；而當我們找到是這段CSS時，在CSS的右上方（參考上圖的滑鼠位置），Chrome也可以幫我們追查到是那一份文件的那一行宣告的，如此即可追回原程式進行處理。