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：網站設計建置優化之道 --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 101.13.169.97 (臺灣) ※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1564675030.A.6EF.html