Hello 大家好
我寫了一篇關於如何查看網頁CSS樣式設定的文章，希望能幫助到想要調整網頁樣式的朋友們～
文章很長，強烈建議使用圖文好讀版：
https://joserenfu.com/how-know-web-html-css/
不知道剛開始學習的你看了很多網站之後，有沒有出現以下的狀況：
網站中有很多圖片和區塊，我要怎麼知道它設定多少寬度呢？
網站用的字體好特別，我要怎麼知道它用什麼字體或設定多大呢？
網站的主色調好美喔！但我要怎麼知道它的色碼？
…等等以上的問題
透過這篇除了想要分享HTML和CSS的基本知識以外，還要分享2個工具來讓你能夠找到網頁的樣式設定
一、CSS是什麼？HTML又是什麼？
了解網站的樣式設定之前，我們得先確保有網頁語法的基本認識，就像是我們要認識英文單字之前，我們需要先看得懂ABC英文字母一樣
1.HTML是什麼？
HTML主要負責建立網頁呈現的基本架構，主要是由HTML標籤組成的，就像我們人的樣子是由各種骨頭與器官組成一樣，也決定了我們呈現出來的樣貌，像是人和狗的骨頭形狀、數量都不同，所以我們的外貌也就不同
臉部的五官也是如此，我們有一個鼻子有兩個鼻孔、一張嘴巴有上唇和下唇…等等，HTML也是用來建構網站網站基本的輪廓，像是頁頭、內容區塊、圖片區塊、頁尾
2.那CSS又是什麼？
CSS主要負責視覺的樣式設定，如果你有玩過角色扮演的遊戲，有些遊戲在創立角色時候，可以讓我們去客製化角色的樣子，像是身高比例、皮膚顏色、眼睛大小、鼻子形狀…等等
而CSS就是專門來控制網頁上的各種元件的大小、粗細、顏色、字體、對齊和位置…等等這些事情
CSS還有一個核心的功用，就是把重複的事情只做一次設定，例如我的網站上所有的按鈕都要用紅色底色、白色文字，那我們會取一個名稱，在CSS中稱為class
然後再對這個class設定它需要有哪些CSS屬性，以及這些屬性的數值，再來只要將class套用在每個HTML標籤上，這些HTML標籤就都會有同樣的CSS樣式設定了，當然CSS若有修改，所有套用同一個class的標籤也都會受影響
3.幾個關於HTML、CSS疑問
請問CSS能夠改變網站HTML原本的內容嗎？
答案是不行！！因為CSS就只負責調整外觀的樣式，無法異動的原本的結構和內容，就像是我們的眼睛原本就只有兩個，無法透過化妝而生出第3個眼睛（別跟我提仿真妝，那還是假的眼睛），除非你透過整形
而外科整形手術，在網頁中就是修改HTML的結構和內容
請問編寫HTML、CSS是在寫程式嗎？
這不是喔！不管哪種程式語言都會依照你寫的運算式，而幫你運算產生出結果，但HTML和CSS並沒有運算的能力，所以你寫了”1+1=”，在網頁上也只會呈現”1+1=”，HTML和CSS並不會給你”2”這個答案
想更全盤了解可以參考
HTML&CSS：網站設計建置優化之道
二、CSSViewer外掛推薦（簡易快速）
CSSViewer是Chrome瀏覽器的擴充套件，是專門用來檢示網頁CSS樣式的工具，他的優點是安裝完之後，只要點一下要查看的區塊，立即就可顯示詳細的CSS樣式內容，如此一來就可知道，這個網頁區塊的樣式設定值囉！
1.下載/安裝
下載連結： Chrome 線上應用程式商店
2.啟用CSSViewer
安裝完畢後，在網址列後方，就會看到CSSViewer的圖示，當要查看網頁的CSS樣式時，再點一下圖示，就可開啟CSSViewer，再次點擊則是關閉CSSViewer
3.如何使用
點擊軟體圖示後，滑鼠游標移動到網頁當中，軟體會自動偵測你所指定的區塊CSS樣式設定，並顯示出來
CSSViewer的好處是可以很容易的指定到畫面的元素，並顯示出它所被套用的CSS樣式，但缺點是你無法知道CSS的寫法是如何
例如：
CSS是直接指定在這個HTML標籤上嗎？
還是受到其他標籤的CSS影響呢？
CSS是直接指定在這個HTML標籤上嗎？還是受到其他標籤的CSS影響呢？
這對於需要編寫或改寫CSS樣式的人來說蠻重要的，因為必須找到CSS真正對應的寫法，而下面要分享的就是網頁設計師、網頁前端工程師必會使用的Chrome瀏覽器開發者工具
三、Chrome瀏覽器開發者工具（進階工具）
Chrome瀏覽器開發者工具是網頁開發者必會使用的工具，它主要是內建在Chrome瀏覽器之中，只要你是使用Chrome瀏覽器，將滑鼠移到某個元素上(圖片、文字…等)，點擊滑鼠右鍵，在開啟的選單中選擇檢查，瀏覽器就會開啟這樣的畫面
如果你跟我長得不一樣請不要擔心，視窗右上角的三個點圖示點擊後，會有選項可以改變工具的呈現方式，如下圖
1.開發者工具介紹
開發者工具的功能非常多，但這邊主要介紹網頁設計師必會使用到的兩個部分，左邊紫色區塊是網頁HTML，右邊藍色區塊是CSS樣式設定
這時候我們就可以開始來找找各個元素的CSS設定拉！
2.尋找HTML被套用的CSS樣式
因為我剛剛是對網站LOGO點擊右鍵使用檢查，所以開發者工具會自動用淺藍色背景，標示我LOGO圖片的HTML所在地方，當滑鼠游標移到HTML標籤上時，網頁畫面也會同步標示，你正在選擇的地方，你現在可以馬上對我的網頁試看看
點擊HTML標籤後，右邊的CSS區塊也會呈現這個HTML標籤所套用到的CSS。這時候眼尖的你可能會發現，套用的CSS設定怎麽會這麼多，有些還重複被劃掉
簡單解釋的話，是因為HTML標籤編寫時候是有階層關係的，就像左邊的HTML所呈現方式一樣，需要把HTML一一層層展開撥開，如同洋蔥一樣
而最外層的設定就往內影響所有的HTML，例如我在最外層的HTML設定背景CSS為紅色，那只要在這層HTML以下的標籤都會受到影響，除非在這其中的HTML又在另外設定背景顏色，那就會以最內部的為主
也可以把它想成是種繼承遺傳的概念，當我的阿公有禿頭的情況時，相對的我的爸爸甚至到我都極有可能會禿頭，因為基因遺傳的關係，除非在我這就將禿頭基因移除，不然我的之後的子子孫孫都應該會是禿頭，HTML設定CSS的階層影響也是這樣，越外層影響越大
3.設定CSS看看效果
在Chrome開發者工具中所做的HTML和CSS及其他任何修改，可以立即看到網頁的變化，都不會被儲存下來，所以重新整理網頁又會恢復原樣喔
現在以我網站為例子，我要想要將右的側標題文字改為紅色，我會將我滑鼠游標指到標題文字上面，並點擊右鍵和選擇檢視，我即可找到標題的HTML和CSS設定
這時候我會尋找目前真正最後控制標題顏色的CSS寫在哪邊（常用的CSS屬性我有整理在最下方），”最後真正“這詞就如我上面所說的，因為階層關係，它被套用到很多CSS屬性，通常最上方式的CSS即是最後被套用到的CSS
如下圖，紫線處是class名稱，藍線處則是控制文字顏色的CSS屬性
這時候你可以嘗試修改藍線處的CSS數值（滑鼠直接點擊），如下圖
然後不是每個CSS數值一開始就有設定，但你也可以點擊空白區塊地方，加入新的CSS屬性，網頁也會立即出現效果
CSS常見語法懶人包在文章下方
四、如何在電腦上模擬手機螢幕
因為智慧型手機普及的關係，網頁在手機上都會呈現出不同樣子，有沒有辦法在電腦上就可以模擬了呢？
答案是：有的
開發者工具有一個手機模擬器，啟用的按鈕在開發這工具視窗的左上角
點開後網頁呈現會變成模擬器的樣子（開發者工具我先改為視窗右側顯示），紫線處還可以選擇不同的裝置尺寸喔！
這主要是用來看看手機版是否有跑版，但有些操作難免還是會跟手機上有點不同，但已經非常方便囉！
五、常用CSS語法懶人包
文字CSS
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-shadow 设置文本阴影。
字體CSS
属性 描述
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-weight 设置字体的粗细。
背景CSS
属性 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
内邊距CSS
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
邊框CSS
属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
外邊距CSS
属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
以上資料來源來至W3C網站
六、結語
CSSViewer和Chrome的開發者工具各有不同的優點
如果你只是要單純要瞭解網頁CSS目前設定的數值的話，CSSViewer就非常方便快速
但如果你是需要修改和編寫CSS的話，就必須要會使用開發者工具，這樣才有辦法真正設定好CSS在對的HTML標籤上
如果你對HTML和CSS想要有更多了解，不妨可以參考下面的書籍喔！
HTML&CSS：網站設計建置優化之道