skip to main content

甚麼是CSS?CSS有甚麼作用?為甚麼網頁需要CSS?

於2020年8月1日更新


CSS是甚麼?有甚麼作用?

CSS全寫叫Cascading Style Sheets

CSS的第二個英文字是Style,這字正正講出了CSS是用來做甚麼的,就是設計,Design方面的工作

在我教別人做網頁時候,我常常用一個房子來比喻的。網頁的HTML部份充當起網頁支架/外牆(如果真是不知道HTML是甚麼的話可以參考這篇),CSS則是一位室內設計師負責起這家房子的設計工作

CSS有多重要?

沒有裝修的房子

你如果試過搬家,搬的是全新房子的話,在還沒有裝修或者任何設計之前,房子看起來只有四面牆,或者只是有一些簡單的家具設備,沒甚麼特別

沒有裝修的房子

但是如果你花個幾百萬去請個室內設計師都攪個裝修的話,那你房子可以突然變得很豪華,看起來本來可能只值五百萬的房,現在可能值個一千萬了。

在做網站時有類似的情況,如果我們只用HTML去做網頁,而不用CSS去做裝修設計的話,雖然網站還是能用的,但是網站的外觀上會看起來很原始,跟還沒有裝修前的房子一樣,一點都不專業,也沒有美感可言

以我這個網站的首頁為例,你可以比較下有CSS,和沒有CSS的情況下的分別

這是有CSS
有CSS的網頁效果 這是沒有CSS
沒有CSS的網頁效果

你可以明顯看出上面兩張圖有和沒有加CSS的網頁在外觀,排版,顏色各方面簡直是差天共地,相信這已充夠讓你明白CSS的重要性和用途。

為甚麼CSS和HTML常常會被放在一齊?

因為CSS的作用是幫助HTML去攪裝修設計的,所以如果你想學一學CSS前,一定要先學HTML,也是為甚麼你會看到坊間幾乎所有的網站開發課程都是寫著"HTML + CSS入門",兩者幾乎在學習寫網站的過程中是個連體嬰一樣,不可分割。

謝謝這次的觀看,希望經過這次你能對CSS是甚麼增加了點理解。

當然我自己也有教人寫網站,有興趣的話可以看下我的DIY網站開發課程初階,裏面會教你HTML和CSS入門來做出一個能夠隨時發佈上線吸引Google網頁搜尋器流量的而且會適合所有設備(手機,平板電腦,台式機,甚至智能電視)的響應式網站(不知道甚麼是響應式的話可以參考這篇)。

如果你覺得本文章或影片有用,想再看更多我寫關於DIY網站開發,Google SEO內容的話,可以按下面的按鍵,填上你的電郵然後訂閱

作者 : - 香港全端網站開發人員,中文Google SEO顧問

其他文章

響應試網站開發課程入門

DIY網站開發初階自學課程橫額