Web Development 網站開發 (2) - CSS 介紹：基本語法
CSS 也是網站開發裡最重要的元素之一，它負責的就是網頁的外觀。範圍涵蓋字體大小、顏色、背景、色調、佈局、甚至動畫等等，你的網站是否能賞心悅目、淺顯易懂，就靠你使用 CSS 的設計功底了。
body {
background-color: lightgray;
}
p {
font-size: 20px;
font-weight: bold;
color: blue;
}
.foo {
margin-top: 10px;
padding: 10px;
}
#box {
background-color: #aaaaaa;
width: 100px;
height: 100px;
}以上是 CSS 的一些例子。在大括號前的 body p .foo #box 我們稱它為 CSS Selector，目的是在 HTML 裡面找出那些我們即將要改變樣式的物件。而大括號裡的內容則是告訴我們要給那些物件什麼樣的 style。拿第一個 body 來說，那段的意思就是要設定 body 這個物件的背景為淺灰色。
CSS Selector
CSS Selector 的用途就是要在你的 HTML 內容裡找出你要下 style 的那個物件。以下會用一段 HTML 以及一段 CSS 來解釋兩者之間的交互。
<body>
<h1 class="title">我是標題</h1>
<p>我是內文</p>
<div id="box">方塊</div>
</body>/* 斜線星號包起來的內容是註解（像這行），會被瀏覽器給忽略，是給工程師解釋語法用的 */
/* css selector選了body，也就是html裡的body的整個內容。這段意思就是要把整個body包起來的部分的背景色設成黃色 */
body {
background-color: yellow;
}
/* css selector選了h1，這段意思就是要把h1裡的我是標題那行字的字型大小設為30pixel */
h1 {
font-size: 30px;
}
/*
可以看到這個.title跟上面不同，前面多了一個點。這樣寫的意思是告訴css不要去找標籤，要有class為title的物件 - 也就是h1
所以 h1, .title都選到了 <h1 class="title">我是標題</h1>，會發生什麼事？
css selector 是有優先級的，class會優先於標籤，所以最終這行字的大小會以.title裡的為主，大小為28px;
*/
.title {
font-size: 28px;
}
/* 給所有為div標籤的物件設定寬度30px、高度30px以及背景色為紅色的一個正方形 */
div {
width: 30px;
height: 30px;
background-color: red;
}
/*
css selector 如果前面井字號，則他要找的是id。#box為群找id=box的物件
在優先級上 id > class > 標籤，所以上面的長寬30px的div會被覆蓋為長寬40。
但因為這裏沒有指令背景色，所以背景色會使用上面定義的紅色。
*/
#box {
width: 40px;
height: 40px;
}以上介紹css selector的基本規則，當然還有更進階的用法及規則，譬如：
.a > #b , div[class*="hi"], .a + .b 等等，一開始學習可以先學簡單的，等慢慢在實現一些複雜功能的時候就會有機會接觸更高級的 CSS Selector 語法。
要注意的是使用 CSS Selector 的時候，它會嘗試去找出所有符合結果的物件。個人建議是少用標籤：你可以用 body 因為整個 HTML 只會有一個， 但儘量避免使用 div p span 這種標籤去給 style，因為他們在整個 HTML 會被使用多次，很容易就會改到其他你不想改的物件。
常見樣式
樣式有太多種，以下會依照類型給出一些最常用的樣式範例：
div {
/* 以下是針對字型的樣式設定，可以選擇字型、大小、粗細、間距、顏色、對齊等等 */
font-family: Ubuntu, Helvetica Neue, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: gray;
text-align: center;
/* 以下是針對 div 這個容器的樣子做設定 */
/* margin 是容器與其他容器的間距 */
margin-top: 20px;
margin-left: 10px;
/* padding 是這個容器與容器內容的間距 */
padding-top: 20px;
padding-bottom: 10px;
/* 邊框也可以設定粗細、顏色與樣式 */
border: 1px solid black;
/* 背景可以設定樣式或圖片 */
background: gray;
/* 設定高度寬度 */
width: 100px;
height: 100%;
max-height: 200px;
}以下從 Chrome 瀏覽器的開發工具截圖，可以很容易看出 margin/border/padding 之間的關係。我們稱它為 box model。
當然除了上述以外還有更多更細的用法，而且是很靈活的。本篇文章的目的是帶大家入門 CSS，想知道很多細節的用法可以參考 https://www.w3schools.com/css/default.asp
See the Pen qBrQxMW by Hua-Ying Tsai (@huaying) on CodePen.
繼續閱讀：