自學成為網頁設計師?(下)這篇有提到網頁設計師的能力要如何提升,除了要去看很多不同的網站以外,更進階還需要有HTML和CSS的知識與編寫能力

延伸閱讀:自學成為網頁設計師?非本科生設計師的告白(下)

不知道剛開始學習的你看了很多網站之後,有沒有出現以下的狀況

  • 網站中有很多圖片和區塊,我要怎麼知道CSS設定多少寬度呢?
  • 網站用的字體好特別,我要怎麼知道CSS設定什麼字體或大小呢?
  • 網站的主色調好美喔!但我要怎麼知道CSS顏色的色碼?

…等等以上的問題

透過這篇除了想要分享HTML和CSS的基本知識以外,還要分享2個工具來讓你能夠找到網頁上的CSS樣式設定

一、CSS是什麼?HTML又是什麼?

了解網站的樣式設定之前,我們得先確保有網頁語法的基本認識,就像是我們要認識英文單字之前,我們需要先看得懂ABC英文字母一樣

1.HTML是什麼?

HTML主要負責建立網頁呈現的基本架構,主要是由HTML標籤組成的,就像我們人的樣子是由各種骨頭與器官組成一樣,也決定了我們呈現出來的樣貌,像是人和狗的骨頭形狀、數量都不同,所以我們的外貌也就不同

臉部的五官也是如此,我們有一個鼻子有兩個鼻孔、一張嘴巴有上唇和下唇…等等,HTML也是用來建構網站網站基本的輪廓,像是頁頭、內容區塊、圖片區塊、頁尾

2.那CSS又是什麼?

CSS主要負責視覺的樣式設定,如果你有玩過角色扮演的遊戲,有些遊戲在創立角色時候,可以讓我們去客製化角色的樣子,像是身高比例、皮膚顏色、眼睛大小、鼻子形狀…等等

「創立角色 臉」的圖片搜尋結果
from 黑色沙漠M

而CSS就是專門來控制網頁上的各種元件的大小、粗細、顏色、字體、對齊和位置…等等這些事情

CSS還有一個核心的功用,就是把重複的事情只做一次設定,例如我的網站上所有的按鈕都要用紅色底色、白色文字,那我們會取一個名稱,在CSS中稱為class

然後再對這個class設定它需要有哪些CSS屬性,以及這些屬性的數值,再來只要將class套用在每個HTML標籤上,這些HTML標籤就都會有同樣的CSS樣式設定了,當然CSS若有修改,所有套用同一個class的標籤也都會受影響

3.幾個關於HTML、CSS疑問

Q:請問CSS能夠改變網站HTML原本的內容嗎?

答案是不行!!因為CSS就只負責調整外觀的樣式,無法異動的原本的結構和內容,就像是我們的眼睛原本就只有兩個,無法透過化妝而生出第3個眼睛(別跟我提仿真妝,那還是假的眼睛),除非你透過整形手術

「飛影三眼」的圖片搜尋結果
from www.xuehua.us

而外科整形手術,在網頁中就是修改HTML的結構和內容

Q:請問編寫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常見語法懶人包在文章下方

四、如何在電腦上模擬手機螢幕

因為智慧型手機普及的關係,RWD網頁在手機上都會呈現出不同樣子,有沒有辦法在電腦上就可以模擬了呢?

答案是:有的

開發者工具有一個手機模擬器,啟用的按鈕在開發這工具視窗的左上角

點開後網頁呈現會變成模擬器的樣子(開發者工具我先改為視窗右側顯示),紫線處還可以選擇不同的裝置尺寸喔!

這主要是用來看看手機版是否有跑版,但有些操作難免還是會跟手機上有點不同,但已經非常方便囉!

五、常用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標籤上

假如我的說明還是無法讓你明白如何操作,這邊推薦一門我之前在Udemy上過的六角學院免費教學課程,課程主要說明Chrome開發者工具的操作與應用,第一篇章節就有相關的說明,或許看影片會比圖片更清楚喔!

點我前往免費教學課程

另外你如果想對HTML和CSS想要有更多了解,不妨可以參考下面的書籍喔!

HTML&CSS:網站設計建置優化之道

延伸閱讀:
自學成為網頁設計師?非本科生設計師的告白(上)
UI、UX是什麼?平面設計轉職必看

若你喜歡我的這篇文章,麻煩拍5次下面小手給予我支持與鼓勵喔!

Joseph

Hi 👋,我是Joseph
我是一名從理工界踏入設計圈的 UI/UX 設計師,同時也是一位人夫和新手爸爸,在這裡我不僅會分享轉職經驗、設計實務,也會分享一些我個人喜愛的事物。

19 Comments

  1. 這篇根本就是CSS大全ㄚ,想必版主一定是這方面的專家,以後需要CSS看這篇就夠了

    1. 感謝肯定~說不上什麼大全拉~就只是把常用的東西整理分享而已

  2. 之前為了佈景主題跑去找了一堆文章 都在講CSS 對我來說真是目颯颯XD(淚)
    不過版主把CSS語法整理得好清楚~很實用!!

    1. 希望可以幫助你如何看懂別人的CSS設定,但CSS的基礎知識還是要先有的喔

  3. 最近對於CSS這方面真的很掙扎阿 看了其他網頁的文章還是不太懂,但是版主的這篇寫的真棒真詳細阿 真的幫助我很多

    1. 非常開心可以幫助到你!!如果之後有什麼問題,歡迎跟我聯絡喔:D

  4. 寫的真的很好~~
    可以說是把完全對ccs語法不懂的所有基本問題都解決了!!!
    先收藏再說
    怕以後用的到~

    1. 很感謝你的的肯定!CSS其實真的不難,只是需要花點時間認識而已

  5. 這太實用了感謝版大,最近對CSS有越來越清楚地感覺(都自己亂嘗試XD 已收藏

    1. 很厲害耶~CSS真的蠻好懂的,只是需要蠻多的嘗試和練習,希望上面工具有幫助到你

  6. 這讓我想到之前都會亂改學校成績系統的頁面騙同學 XD
    版主這篇真的寫得很清楚,對於初學者來說超有幫助!

    1. 想想當年我也只是在改無名小站的主題,現在卻變職業 哈哈

  7. 非常詳細的解說~~~
    其實估狗自己的工具就很好用~~
    我公司主管也經常會使用到^^

    1. 熟悉的話真的是很便利的工具!!

  8. 真的很佩服版主懂這些,我實在很難去理解學習

    1. 不敢當,我只是分享一些我工作上用到的技能XD

  9. 實在好詳細,但對於我這種初學者來說,還是搞不懂,很氣餒
    我想做(或者可以說是複製,複製完之後改用自己的問題及答案)一個類似下列這個網站的 Q&A,但不知如何將css 套用到 html,我复制了網站的整個 html code,但仍然只顯示到文字沒有顯示到 + 號、點擊觀看回答等效果,請問如果我只需要 Q&A 這部分的話,完整的 html code + css 是怎樣寫? 別人花十分鐘的時間我花了十個鐘還是搞不到,希望能夠給我指點一下,萬分感謝!
    https://www.natur-bibe.com/faq.php?lang=tw&tb=2&cid=34

發佈回覆給「Lewis」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *