[心得] 如何查看網頁HTML和CSS-入門分享

看板Web_Design作者sashah (Sashah)時間5年前 (2019/08/01 23:57)推噓5(5推 0噓 0→)

留言5則, 5人參與討論串1/1

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://www.ptt.cc/bbs/Web_Design/M.1564675030.A.6EF.html