CSS 教學：認識語法規則與基本功｜ALPHA Camp Blog

CSS 是專為定義網頁版面設計（layout）而發明，透過CSS，我們能指定文件中各項HTML 元件的視覺樣式。

CSS 全名是Cascading Style Sheets，階層樣式表。

階層 ... Loading...首頁課程內容系列課程JavaScript全端開發課程學期一｜程式設計入門學期二｜掌握網頁開發學期三｜軟體工程師養成全年開課時間表最新消息非本科跨領域學程式最新課程DATA&AI公開課SQL14天入門課學習體驗成效Blog技術主題求職攻略數據入門文章首頁FAQ常見問題關於ALPHACamp加入我們學員專屬福利📣6/28課程說明會馬上報名Web技術CSS教學：認識語法規則與基本功Posted on 2022-03-09  by    byALPHACamp網頁設計，仰賴HTML和CSS兩種不同的語言。

HTML處理內容，CSS則定義內容呈現，各司其職。

而在現代網頁設計工作、如一個大型開發專案中，我們通常也會看到有工程師專注處理網站內容與結構、設計師則處理網站的設計與呈現。

本文將協助你開始使用CSS、理解CSS怎麼連結HTML文件、認識CSS語法規則；也瞭解怎麼開始練基本功，踏出網頁設計的第一步。

認識HTML、CSS是什麼，快速了解網頁設計入門在CSS和HTML分工前CSS問世前（-1996），網頁開發者其實偏好用HTML標籤的屬性來指派樣式。

例如：

一段文字

這樣做衍生不少問題，例如讓網頁內容包覆過多的標籤、程式碼變得不好閱讀。

這對人或搜尋引擎都不友善，但其中最大的影響，是讓網站維護變得非常困難。

試想想以下這個例子：我們的網頁裡有10個

大小的副標題。

副標題一

…

副標題二

………

副標題十

但若我們有天覺得副標題用藍色（blue）不夠搶眼，想改成橘色，那我們就要把那10個副標題一個個找出來修改。

這種反覆的修改工作，容易出錯，也會嚴重影響到工程師的生活水平。

CSS和HTML的分工CSS是專為定義網頁版面設計（layout）而發明，透過CSS，我們能指定文件中各項HTML元件的視覺樣式。

CSS全名是CascadingStyleSheets，階層樣式表。

階層式（cascading）指的是，我們可在同一個元件上套用不同樣式，而樣式與樣式間則存在相對的階層關係。

由於CSS專注在外貌的設定，使得HTML能專注於文件結構，最能讓網頁原始碼文件乾淨俐落。

CSS和HTML的分工，是現代網路開發流行的設計原則（Separationofpresentationandcontent）之一。

你可以想像一下HTML、CSS和瀏覽器之間的對話。

HTML會說：「這是一個標題。

」而CSS會和瀏覽器則會補充：「這個標題很大，請放在正中間、請使用顯眼的黑色。

」接下來，我們一起來瞭解，如何用CSS輕鬆的把所有的副標都改好。

如何有系統學習HTML/CSS/JavaScript，下載全端開發學習地圖CSS語法規則以這段CSS為例：h1{ color:#ff6600;}這段是一個CSS宣告的長相：選擇器(selector)定義你的樣式對誰有作用，它對應的可能是HTML標籤名稱或者是class和id屬性，我們在後面會再介紹選擇器。

{}：大括號包圍了一個宣告區域，任何寫在這個區域裡的設定，會對文件裡所有的

標籤起作用。

屬性與值：在圖例中，我們宣告選擇器，也就是

的「文字顏色」(color)屬性的值是#ff6600。

請注意CSS是用冒號(:)而非等號(=)來設定。

每條宣告用分號(;)隔開小插曲：#ff6600是一種顏色編碼，就是程式設計師向電腦表達不同顏色的方法之一。

以下是一些顏色的範例。

完整的顏色編碼可以參考這個網站。

Source：https://www.toodoo.com/db/color.html套用方式那這段CSS宣告要放在哪裡呢？最好的方式，是獨立在另一個叫「style.css」的檔案裡，再將檔案引入HTML文件，我們建議你總是使用這種方式來處理你的樣式表，但在這裡我們還是和你做完整的介紹：內嵌於style屬性一段文字這種宣告方式只會影響到這一個標籤，而不是所有的

。

這是一個很簡便的作法，但CSS宣告混合在HTML結構中，無法進行管理。

你可能會在寫blog時偶爾不得不這麼做(因為你無法在別人家的平台上開新檔案)。

在HTML內嵌STYLE標籤，其效果比較可以從下圖看得出來，左邊是用Sublime編輯器在HTML裡先寫好，文字是紅色與文字30pt大。

標頭裡的style標籤CSS宣告p{color:black;font-size:10pt;}這樣做會讓你影響到這份HTML文件裡所有的

，如果你的網站真的只有一張，這不失為一個快速的方法。

然而，這樣做同樣有讓語法變得冗長，以及在檔案變多時維護困難的問題。

當前的趨勢是將HTML和CSS分開維護，因此，請你習慣建立外部檔案來管理你的CSS樣式表。

外部檔案(建議方法)透過這個作法，你可以將整個網站的樣式，統合到style.css這份文件裡。

然後在所有的HTML文件標頭裡加上。

再次強調，這種作法是業界的當前趨勢。

讓我們來認識一下引入外部檔案的HTML標籤：是一種「後設元素」(metaelement)只能放在標頭裡，他可以載入外部檔案。

所以瀏覽器讀取到這一行時，就會自動載入CSS文件的全部內容。

rel='stylesheet'告訴文件載入的資源是樣式表，所以瀏覽器就知道要用讀CSS的方式去處理載入的內容。

href='style.css'href屬性和標籤時的用法一樣，描述路徑，讓瀏覽器找得到檔案。

註解(Comment)要小心CSS的註解方式跟HTML不一樣，CSS的註解是用/*與*/來包圍：body{ color:#FF6600;  /*這是AlphaCamp最喜歡的橘紅色*/}多重選擇你可以連結宣告多個CSS設定：h1{ font-family:"Helvetica","Arial",sans-serif; /*指定字型*/ color:green;}h2{ font-family:"Helvetica","Arial",sans-serif; color:blue;}font-family指定字型的意思，這邊設定的字型要以大多瀏覽器都相容支援的字型為主但在這裡，有沒有發現字型(font)那一行重覆在h1和h2出現？也就是說，

與的字型其實是一樣，只有文字顏色(fontcolor)不一樣。

如果你總是這樣寫，當我們需要改變與的字型是，很容易就會改了這邊、漏了那邊。

所以，你需要學習做整理和合併：

h1,h2{ font-family:"Helvetica","Arial",sans-serif;}h1{ color:green;}h2{ color:blue;}如此一來你就能統一管理h1和h2的字型了！零基礎有效實作學會HTML和CSS，最適合新手的程式設計入門CSS基本功：理解瀏覽器預設樣式很多人會覺得學CSS就是要寫出很多厲害的樣式。

但其實，每家瀏覽器都有提供的預設樣式，所以也不用太過擔心。

只是，基礎簡樸的網頁早已不能滿足現在人的需求，所以我們會需要漸漸開發更多的CSS屬性和撰寫技巧。

我們寫的HTML/CSS是在瀏覽器裡，在你撰寫任何樣式表之前，Blink、Gecko、WebKit等各大瀏覽器引擎都有在W3C定義的標準之上，提供預設樣式(下圖截取自BrowserDefaultStyles網站)。

故在鑽研更多切版技巧前，一定要先理解瀏覽器的預設樣式。

例如，認識各HTML元素在瀏覽器裡的預設行為，瞭解：div會佔掉一整列、span乖乖包覆內容、ul前面會有一個黑圓點等等。

這才能更加理解，我們正學習的屬性是在修改什麼、前端工程師為什麼需要面對跨瀏覽器兼容性問題。

CSS基本功：「由大到小，由外而內」的架構「看一招、學一招」是CSS能力養成中普遍的路徑，然而這也會讓部分學習者感受到學習似乎有些零碎、鬆散或容易迷失在玲瑯滿目的屬性裡。

以下歸納出CSS的學習與實作架構。

此框架的核心理念是將頁面「由大而小、由外而內」地降維拆分，並基本上將頁面拆分成四個層級：排版層級區塊層級內容層級動畫層級雖然動畫層級的特效往往令人更目眩神迷，不過紮實的CSS學習應從基本的元素排版定位開始掌握。

這四個層級基本上可以涵蓋一個頁面樣式所需要的所有CSS屬性類型。

總結CSS看似容易入手，我們好像可以在第一天就學完所有東西了。

但這就是CSS易學難精的特質。

CSS非常需要學習者一次一次地刻意練習、累積經驗，才能撥雲見日，摸清楚這門知識。

希望這篇文章提供的CSS學習方法與架構，能幫助你更有效地累積知識，建立基礎與系統化的概念，並在這條修煉之路上，走得更遠、更穩健。

三分鐘小測驗，找到你學習HTML、CSS、JavaScript網頁開發的入口‍ 更多技術學習資源 前端 JavaScript|HTML/CSS|Bootstrap|RWD|DOM|API|AJAX|Postman|jQuery 後端 HTTP/HTTPS|Node.js|MongoDB|Git|SQL/NoSQL|Docker 其他 VSCode|WebApp|Leetcode ‍ALPHACampSeeAllPost前端程式設計入門Search熱門搜尋自學程式學習方法學習教練助教跨領域職涯軟體工程師前端全端AllCategoriesAC動態AC評價Web技術人物專訪程式學習自學能力資料科學軟體職涯FollowUs延伸閱讀更多好文章推薦給你！Web技術React教學，系統性學習React的步驟Web技術演算法(Algorithm)是什麼?演算法應用的例子與場景Web技術助教開講活動回顧：網頁開發必學技巧不藏私公開Web技術LeetCode解題的思考策略，刷題的4個階段Web技術什麼是Scrum？認識Scrum的做法與它的限制Web技術CSS學習與實作經驗分享，如何建立扎實基本功Web技術為什麼要用Docker？如何用Docker構築不同MongoDB架構？Web技術API開發、測試、除錯一次到位！使用MSW快速上手MockAPIALPHACamp的使命是「幫助人們發展有意義、有價值的職涯」。

自2014年以來，我們以新加坡和台灣為教學據點，培訓超過6500名學員。

校友遍及台灣、新加坡、中國、以及全球的科技新創。

JavaScript全端開發課程三學期系統化課程設計學期一：程式設計入門學期二：掌握網頁開發學期三：軟體工程師養成最新課程New數位職涯RPGDATA&AI公開課SQL14天入門課LearnMore非本科跨領域學程式理工科職涯升值挑戰學習體驗成效Blog技術主題職涯攻略常見問題關於ALPHACamp加入我們ContactUsEmail：[email protected]電話：+886-2-2546-9766（※防疫期間AC採遠距上班，如需聯繫請來信或FB私訊）地址：105台北市復興北路201號6樓之4獲取最新資訊業界經驗分享、職涯諮詢、學習技能提升！訂閱電子報ALPHACamp｜創新職涯的線上學校©2022AllRightsReserved