開源技術教學網[網頁設計] 教學：CSS 入門教學
文章推薦指數： 80 %
CSS 的組成. 早期的HTML 代碼，將網頁中風格(style) 相關的設定直接內嵌在HTML 標籤中，但這樣的做法很難維護網頁，而CSS 的作用，就是將風格的部分抽離出來，放在獨立 ...
Togglenavigation開源教學精選項目C語言Golang資料結構網頁程式電子書籍現代C語言程式設計C語言應用程式設計多平台Objective-C程式設計跨平台CommonLisp程式設計社群媒體臉書粉絲團臉書社團推特GitHubGumroad本站資訊關於著作權免責聲明隱私權開源教學網頁設計CSS入門教學最後修改日期為JUL21,2022前言在本文中，我們談談CSS；和HTML類似，短短一篇文章是無法談完CSS的，我們這裡僅做一些概念上的介紹。 Loremipsumdolorsitamet,consecteturadipiscing... 是因為
CSS的組成早期的HTML代碼，將網頁中風格(style)相關的設定直接內嵌在HTML標籤中，但這樣的做法很難維護網頁，而CSS的作用，就是將風格的部分抽離出來，放在獨立的設定檔中。
透過修改CSS命令稿，可以同時更動頁面上數個網頁元素的風格，使得網頁維護更容易。
CSS的標準經過數個版本更迭，目前的版本是CSS3。
不過，在瀏覽器上實際可用的CSS設定還是要看各瀏覽器的實作情形來決定。
可以自己身邊放一本CSS字典或到CanIUse網站查閱可用的CSS特性。
CSS設置的虛擬碼如下：selector{
property:value;
}
用一個簡例來對照一下：body{
background-color:beige;
}
由此可知，CSS設定包含三項要素：Selector：該CSS設定的目標標籤，像是本例的bodyProperty：該CSS設定的特性，像是顏色、大小、位置等，像是本例的background-colorValue：該CSS設定的值，像是本例的beige(米白色)學習CSS，就是學習這三項要素。
就像HTML，學習CSS初期會比較枯燥，通常都是在學習一陣子後，用多個CSS設定值組合出不同的視覺效果，才會慢慢建立成就感。
在網頁中加入CSS設定的方式在網頁中加入CSS設定的方式有以下三種：外部樣式表(externalstylesheet)內部樣式表(internalstylesheet)行內樣式(inlinestyle)外部樣式表是將CSS設定寫在另外一個檔案中，再從HTML頁面中引入，如下例：
基礎CSS實例：字體(Font)我們以一個字體的簡例來看如何使用CSS。
我們將範例放在這裡，本節節錄部分內容。
以下是HTML的部分：PageTitle
在h1中，我們使用serif家族字體，這類字體有稜角，視覺上較美觀，但不利於閱讀長篇文字。
在p中，則使用sans-serif家族字體，這類字體沒有稜角，易於閱讀。
讀者可以將兩種字體家族對調看看，測試其效果。
基礎CSS實例：BoxModel我們藉由另一個簡例來看CSS的boxmodel如何使用。
我們將完整的例子放在這裡，本文僅節錄部分內容。
首先來看HTML的部分：
接著來看CSS的部分：body{
background-color:grey;
}
#border{
padding:5px;
width:80%;
max-width:500px;
background-color:lightgrey;
}
.box{
border:3pxsolidviolet;
border-radius:12px;
margin:10px;
padding:10px;
background-color:slateblue;
color:white;
}
在此處，我們設置三組樣式，第一組直接設在上，僅設置背景顏色。
第二組設在id#border上，用padding設置內部邊界5px，並設置其寬度和最大寬度及另一個顏色。
第三組設置在class.box上，同時設置對外的margin及對內的padding寬度及其他屬性。
讀者可以試著把內外框的padding和margin屬性移除，觀察其變化，即可知道這兩個屬性對版面的影響。
繼續深入只憑本文短促的介紹，其實無法真正學好CSS，初學者還是建議買一本HTML和CSS的專書，或是參考w3schools、MDN等線上教材，才能真正學習CSS。
檢查CSS代碼的工具檢查原生CSS雖然CSS是靜態代碼而非程式碼，但我們也可以用一些工具去檢查CSS代碼是否有錯。
本節使用CSSLint，透過以下指令即可安裝：$npminstall-gcsslint
使用方式相當簡單，直接把想檢查的CSS檔案的路徑當成參數丟給csslint即可：$csslintpath/to/file.css
檢查Sass等前置語言前述的工具是用來檢查原生CSS的，如果想檢查Sass等CSS前置語言的話，可考慮stylelint，透過以下指令安裝：$npminstall--globalstylelint
如果喜歡局部安裝的朋友，可以改用--save-dev：$npminstall--save-devstylelint
這時候就要自己改package.json以串連指令。
除了安裝stylelint本身，也要安裝相對應的設定檔，可安裝以下兩種之一：stylelint-config-recommended：偵測所有可能的錯誤stylelint-config-standard：除了錯誤外，還加入一些風格上的建議透過以下指令安裝：$npminstall--save-devstylelint-config-standard
修改其設定檔.stylelintrc.json使其生效：{
"extends":"stylelint-config-standard"
}
之後就可以用stylelint來檢查Sass等前置語言檔案：$stylelintpath/to/file.scss
用CSS壓縮器節約頻寬一般CSS教材或是網站上的範例，都會把CSS代碼排列整齊，這是為了教學上的考量。
CSS代碼的空白和換行其實對CSS設定沒啥影響，在效能優先的考量下，其實可以把這些部分拿掉；這類機械性的編輯動作不需要人工介入，而CSS壓縮器(CSSminifier)就是在此種思維下產生的自動化工具。
這種工具有好幾個，uglifycss是其中一個例子。
uglifycss本身是node套件，以npm即可安裝：$npm install -guglifycss
使用方式如下：$uglifycss--outputstyle.min.cssstyle.css
由於經過CSS壓縮器處理過的CSS命令稿難以閱讀，通常會保留一份未壓縮的命令稿，僅發布已壓縮的部分。
慣例上，壓縮過的會命名為xxx.min.css，而原本的會命名為xxx.css。
用CSS框架快速設置網站外觀由於每個網站都需要CSS來美化站容，撰寫CSS命令稿成了固定的任務之一，而CSS框架可以減少撰寫基礎程式碼的工作量，專注在製做網站或網頁程式上。
根據其功能性，CSS框架可分為元件框架(componentCSSframework)和工具框架(utilityCSSframework)兩種。
前者有一堆預寫好的組件，可以較快完成網站的界面，但每個網站看起來會大同小異。
後者僅給予基本功能，使用者需要從中組合出網站的外觀，而不同網站看起來差異性較大。
對初學者來說，元件CSS框架比較容易上手。
最知名的元件CSS框架是Bootstrap，而TailwindCSS則是近幾年很紅的工具CSS框架。
這類框架除了可以打點門面，通常會加上適應性網站(mobileresponsivewebsite)和切板(layoutformatting)等功能，簡化不少手工，所以很受歡迎。
當然，使用現有的CSS框架並不代表我們就不用學CSS，如果內建的樣式無法滿足我們的需求，我們還是要自行客製化樣式；此外，如果只用現有的CSS框架而不自己加以設定，其實很容易就看得出來是套現成的CSS樣式表，無法建立自己的風格。
分享本文追蹤本站
延伸文章資訊
- 1【Day 4】網頁設計入門：基礎HTML、CSS 線上課程推薦
【Day 4】網頁設計入門：基礎HTML、CSS 線上課程推薦 ... 昨天分享的教學是以文章資源為主，好處是一目了然，所有大綱和分類都可以快速尋找。 但文字看久 ...
- 2網頁程式設計入門，一文讀懂HTML、CSS｜ALPHA Camp Blog
網頁設計在進入工程的範疇時，通常最常聽到的名詞就是HTML/CSS！其實它們兩者在技術上都代表著不同的電腦語言工具，用來分別處理「網頁呈現」上的不同 ...
- 3網頁設計百科 基本網頁設計/認識CSS/常用語法
基本網頁設計/認識CSS/常用語法，針對一個網站從零到有，教您如何以「實務」的角度，學習網頁設計的相關技巧！
- 4將css置入網頁的四種方法 - 旭展顧問
在網頁中大部分尺寸、顏色、文字、位置的設定都是要靠CSS的編輯來呈現，不管是照片的 ... 網頁設計// ... 將css放在head裡面（只影響單個網頁）; 2.
- 5CSS 基本- 學習該如何開發Web | MDN
這個元素在你的 index.html 文件裡的head中（在 <head> 跟 </head> 任何位置中）。 這一段code將頁面連結到樣式表，將Open Sans字體系列與網頁一起下載， ...
