學生大多很意外,雖然上HTML5教學,但是老師一開始著重在CSS語法並教學生如何將兩者融會貫通!
前端工程師常把 CSS 想像成是 HTML5教學 標記的「化妝師」，透過 CSS 格式的設定，可讓網頁的排版更美觀。新版的 CSS 加入了動態的功能，透過適當的應用，還可在網頁上做出動態的效果。
在 HTML 檔案中，除非前端工程師做的是整體網頁的設計，不然每一個 CSS 片段都是依附在一個標記、id 或是 class 之下。
標準的 CSS 語法如下：
tag1,tag2,..., tagn {
attribute 1: value;
attribute 2: value;
…
attribute n:value;
}
語法解析：
tag1,tag2,..., tagn：最前方以要設定的標記名稱 ( 如本例為「tag1」) 為開始。如有超過一個以上的標記，就使用逗號隔開。
{ }：以大括號來包含該標記的所有的設定
attribute 1: value;："attribute "為要設定的屬性名稱，"value"為屬性值，屬性名稱與值以冒號來做隔開。如有超過一個以上的屬性設定，就使用分號隔開。
以上例子為所有的標記名稱 (tag1,tag2,..., tagn) 均設定同樣的屬性，但這些標記各自獨立，無依屬關係。如有依屬關係則為以下所示：
tag1 tag2 {
attribute 1: value;
attribute 2: value;
…
attribute n:value;
}
此例中，tag1 與 tag2 中間無任何的逗號，而 tag2 在 tag1 的後方，意思為「tag2 是 tag1 裡面的標記」，也就是我們要設定的屬性值是「tag1 裡面的 tag2 所屬的內容」，而不是把 tag1 和 tag2 設定成同一組屬性值。
至於如何把所設定的 CSS 值在網站中生效? 有兩種方法：
<style type=“text/css”>
h1, h2, h3,...h6, p {
font family: 微軟正黑體;
}
</style>
許多筆者常用此方法來定義網頁中的中文字形，把 h1-h6 以及 p 的字型都設定為微軟正黑體。只要瀏覽器有此自行就會採用。
<link rel=stylesheet type=“text/css” href=“style.css”>
此種方式一定要確定檔案「style.css」可以在網站中存取才行。這是適合於要設定許多 CSS 樣式的時候使用。
<p style=“font-family:微軟正黑體; font-size:12pt; line-height:120%”></p>
這例子只有針對此格式的設定 (此例為 <p>) 有效，出了 <p> 就無效了，但因為它是最內層，所以擁有比第一種與第二種有更高優先順序的設定；也就是說，如果這三種一起設定的話，則以最接近 (就是行內設定) 的值為準。
以上這三種身為前端工程師不可不知的方式可以自由搭配使用，如果對於同一種屬性，有不同的值的設定的話，則以最後一格設定的為準。若不確定最後一個落在甚麼地方，則可以檢視原始碼。
推薦閱讀:
前端工程師常把 CSS 想像成是 HTML5教學 標記的「化妝師」，透過 CSS 格式的設定，可讓網頁的排版更美觀。新版的 CSS 加入了動態的功能，透過適當的應用，還可在網頁上做出動態的效果。
在 HTML 檔案中，除非前端工程師做的是整體網頁的設計，不然每一個 CSS 片段都是依附在一個標記、id 或是 class 之下。
標準的 CSS 語法如下：
tag1,tag2,..., tagn {
attribute 1: value;
attribute 2: value;
…
attribute n:value;
}
語法解析：
tag1,tag2,..., tagn：最前方以要設定的標記名稱 ( 如本例為「tag1」) 為開始。如有超過一個以上的標記，就使用逗號隔開。
{ }：以大括號來包含該標記的所有的設定
attribute 1: value;："attribute "為要設定的屬性名稱，"value"為屬性值，屬性名稱與值以冒號來做隔開。如有超過一個以上的屬性設定，就使用分號隔開。
以上例子為所有的標記名稱 (tag1,tag2,..., tagn) 均設定同樣的屬性，但這些標記各自獨立，無依屬關係。如有依屬關係則為以下所示：
tag1 tag2 {
attribute 1: value;
attribute 2: value;
…
attribute n:value;
}
此例中，tag1 與 tag2 中間無任何的逗號，而 tag2 在 tag1 的後方，意思為「tag2 是 tag1 裡面的標記」，也就是我們要設定的屬性值是「tag1 裡面的 tag2 所屬的內容」，而不是把 tag1 和 tag2 設定成同一組屬性值。
至於如何把所設定的 CSS 值在網站中生效? 有兩種方法：
- 使用<style>標記，直接把css 代碼放在 HTML 檔案的最前面：
<style type=“text/css”>
h1, h2, h3,...h6, p {
font family: 微軟正黑體;
}
</style>
許多筆者常用此方法來定義網頁中的中文字形，把 h1-h6 以及 p 的字型都設定為微軟正黑體。只要瀏覽器有此自行就會採用。
- 以外部的檔案存檔
<link rel=stylesheet type=“text/css” href=“style.css”>
此種方式一定要確定檔案「style.css」可以在網站中存取才行。這是適合於要設定許多 CSS 樣式的時候使用。
- HTML行內設定
<p style=“font-family:微軟正黑體; font-size:12pt; line-height:120%”></p>
這例子只有針對此格式的設定 (此例為 <p>) 有效，出了 <p> 就無效了，但因為它是最內層，所以擁有比第一種與第二種有更高優先順序的設定；也就是說，如果這三種一起設定的話，則以最接近 (就是行內設定) 的值為準。
以上這三種身為前端工程師不可不知的方式可以自由搭配使用，如果對於同一種屬性，有不同的值的設定的話，則以最後一格設定的為準。若不確定最後一個落在甚麼地方，則可以檢視原始碼。
推薦閱讀:
