層疊樣式表/選取器/格式標籤設計 精華神掌
Web Design: Context/Text/Context - Epistemological/Digital Aesthetics
- Formation Methodology
網站/網頁設計:意涵/文字實作-知識美學/數位美學之建構方法
What is CSS? 什麼是CSS?
層疊樣式表(Cascading Style Sheets, CSS)，又稱串接樣式列表，由W3C定義和維護的標準，用來為HTML或XML等，增加視覺呈現效果的網頁語言，以.css為副檔名之檔案方式使用。
CSS Syntax/ CSS 語法
CSS 語法的規則包括選取器（科學中文化的觀點，其實就是「標籤」、尤其是「格式標籤」），包括：CSS Default Selectors/ 預設選取器/預設格式標籤、CSS Class Selectors 類別選取器/自訂格式標籤、CSS ID Selectors/ ID選取器/區域格式標籤、CSS Pseudo-classes 偽類別/特定格式標籤/副標籤，和在大括號內的{宣告}，而宣告可以有多個，每個宣告又由{屬性:設定值; 屬性:設定值;}所組成。
與 Html5 同時的是 CSS3，此後都用 post CSS3，雖有 CSS4 一詞，並無公認界定。post CSS3 後，再出現新類型 At-rules，同時已實現完整CSS Animations 動態命令，與其他進階功能，如CSS 多欄版面設計...等。
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a
value.
CSS Selectors 選取器/格式標籤的類型
CSS Selectors 選取器，就是格式標籤，再分作：CSS Default Selectors/ 預設選取器/預設格式標籤、CSS Class Selectors 類別選取器/自訂格式標籤、CSS ID Selectors/ ID選取器/區域格式標籤、CSS Pseudo-classes 偽類別/特定格式標籤/副標籤。
CSS Default Selectors/ 預設選取器/預設格式標籤
即HTML預設樣式名稱，如：p（內文）, h1~h6（標題1~6）...等。
如果沒有任何，瀏覽器就使用HTML預設樣式。因為HTML預設樣式是英語系標準，字體較小，所以許多中文網頁沒有自訂，看起來字就會太小。
在CSS 中，可以直接修改「選取器樣式」，如：
p { font-size: 14pt; font-family:標楷體 }
h1 { font-size: 28pt; color: #000080; font-weight: bold; font-family:標楷體;
margin-bottom: 4px; ; margin-top: 0;}
CSS Class Selectors 類別選取器/自訂格式標籤
「類別」就是自訂樣式名稱，必須以「.」開頭作為樣式名，如設計：
.en { font-family: Times New Roman; }
.en: 英文樣式
.hilite { color: #800080; }
.hilite: 強調樣式…等。
使用時，在標籤中必須加 class=""，如：
<p class="en">
<h1 class="hilite">
CSS ID Selectors/ ID選取器/區域格式標籤
以「#」開頭的樣式名，則稱為「ID」選取器，表示區域樣式，常與有ID屬性的物件，如<div>合用。範例如：
#container {
margin: 2px;
width: 100%;
background: #ffffff;
}
Differences Between . and # in CSS/ CSS中.和#的不同
CSS中. 類別選取器/格式標籤，和#ID選取器/區域格式標籤的不同，在於使用和效果。如：
#container
<div id="container"></div>
整個區域內，使用由container定義的樣式呈現。
.en
<div class="en"></div>
使用現有CSS中的.en樣式。
注意：選取器.和#的的名稱，都不能使用數字作開頭。
CSS Pseudo-classes 偽類別/特定格式標籤/副標籤
Pseudo-classes 一般直譯為「偽類別」，中文語意並不通，存在語言文化意涵的差異。
Pseudo-classes 實為「特定格式標籤」，同時，它不像 Class Selectors 類別選取器/自訂格式標籤，可以獨立使用，一定跟在 Selectors/ 預設選取器/預設格式標籤之後，以「:」隔開，形同「副標籤」。
Pseudo-classes 偽類別/特定格式標籤/副標籤的用途，如指定滑鼠點擊、游移…事件，發生的特定動作。亦即預設、自訂（類別）、區域（ID)選取器，多應用在排版格式，而 Pseudo-classes（偽類） 處理的是「狀態」與「邏輯」。
多數的 Pseudo-classes 偽類別/特定格式標籤/副標籤，只在進階的條件下才會用到，在2015年前，有些瀏覽器的支援能力也不完整，詳如Pseudo-classes 偽類別/特定格式標籤/副標籤列表。
當前推薦之 CSS Pseudo-classes 偽類別/特定格式標籤/副標籤
在2026年後，推薦之「:選取器」如下。
:root
:root ？在網頁中，代表文檔的最高層級根元素。在 HTML 網頁裡： :root 就等於 <html>。為什麼要用它： 因為它的 「優先權 (Specificity)」 比直接寫 html 更高。當您的網頁同時套用了 w3.css 和您的自訂樣式時，寫在 :root 裡的規則比較不容易被框架蓋掉。例如：
:root {
/* 在根元素層級定義，確保全站所有頁面行為一致 */
scroll-padding-top: 80px;
}
:target
如定錨點的高亮顯示 (最推薦！)，如果點擊 #bookmark跳轉後，那個標題能「閃爍一下」或「變色」，讀者會更清楚跳到了哪裡。
CSS
/* 當某個標籤被 # 定錨選中時
*/
:target {
background-color: yellow;
transition: background-color
2s; /* 2秒後黃色自動淡出 */
}
:not()
:not() — 排除法管理，如果預設連結是藍色有底線，但「除了」Banner 裡的連結以外：
/* 排除掉導覽列中的連結 */
a:not(.banner) {
color: blue;
text-decoration: underline;
}
:nth-child()
:nth-child() — 自動化表格/列表
這對學術論文目錄非常有幫助。如果您想讓論文列表「隔行變色」：
/* 讓表格的偶數行自動變灰色，增加閱讀性 */
tr:nth-child(even) {
background-color:
#f2f2f2;
}
優點： 不管您有 10 橫列還是 1000 橫列，它都自動算好，完全不需要手動寫 class="even"。
其他
導覽列常用，將在專章詳述，先簡介如下：:hover滑鼠移上去時讓您的文創按鈕或論文連結變色:active滑鼠按下去的那一刻模擬按鈕被按下的動態感:visited已經點擊過的連結讓讀者知道哪幾篇論文他已經看過了:last-child最後一個元素讓列表的最後一項不要有底線。
At-rules
@ 開頭的指令被稱為 「At-rules」。
您可以把 CSS 想像成一個國度：
普通選擇器（如 h1,
.card, :root） 是這個國度的「法律」，規定誰該長什麼樣子。
At-rules（如 @keyframes, @media）
則是這個國度的「行政命令」或「運作邏輯」，它們定義了特殊的環境或時間軸上的變化。舉例如下。
@keyframes
@keyframes：定義「時間軸」，建立一個名為「某某某」的動作劇本沒，如以下定義一個動畫的過程。
「某某某」的動作劇本名稱就是此例的 myFlash。
@keyframes myFlash {
0% { opacity: 0; } /* 開始時看不見 */
100% {
opacity: 1; } /* 結束時完全顯現 */
}
您定義好劇本後，再到 :target 裡去調用這個劇本：animation: myFlash 2s;。
@media 媒體查詢
@media (媒體查詢)
這是現代網頁「回應式設計 (Responsive Design)」的靈魂。
用途：
規定在不同螢幕尺寸下套用不同的 CSS。
範例：
@media (max-width: 600px) {
/* 當手機螢幕小於
600px 時，縮小 Banner 高度 */
:root { scroll-padding-top: 120px; }
}
@import 匯入
@import (匯入) 對管理「網群」非常有幫助。
用途： 在一個 CSS 檔裡引入另一個 CSS 檔。
範例：
您可以在 main.css 裡寫 @import url("CIS.css");。這樣您只需要在 HTML 引入一個檔案，就能載入所有的樣式規範。
@font-face 字體定義
@font-face (字體定義) 對於文創與學術頻道，這很重要。
用途： 讓您的網頁使用自訂的藝術字體或特殊學術符號字體。
總結比較
Selectors (選擇器) 沒有符號或有 . # :，「誰」 要被改變？
Properties (屬性) 在大括號內 color,
scroll-padding-top 「改什麼」 內容？
CSS 的繼承
css 展現了三種層次的繼承。
A. 屬性繼承 (The Waterfall Effect)
繼承的階層鏈
從祖先到子孫，網頁結構就像族譜，繼承是「由上至下」發生的：
:root (曾祖父)： 權限最高。我們把變數（如
--color-soft-yellow）放在這，因為它能傳給所有人。
html (祖父)： 設定全站的基礎字體大小（如 16px）。
body (父親)： 您設定了「標楷體」與「背景圖」。這會傳給下方所有的段落、列表、表格。
容器級別 (如 #container,
#content)： 如果您在 #content 設定文字顏色為深藍色，那麼只有論文內文會變色，左側導航欄（不在 content 內）就不會被影響。
特定標籤 (如 p, td, li)： 這是最後一輩，它們繼承了父輩的所有基因，除非您在 tx.css 裡單獨命令它們「變異」（例如設定 h1
的顏色）。
哪些屬性會繼承？
不是所有屬性都會傳下去，這是最容易混淆的地方。CSS 的屬性分為「會繼承」與「不會繼承」兩大類：
會繼承的 (基因型)：
主要是與「文字」相關的。
font-family (字體)、font-size (字級)、color (顏色)、line-height (行高)。
實務： 這就是為什麼在 body 寫一次標楷體，全站就都是標楷體。
不會繼承的 (外顯型)： 主要是與「空間/盒子」相關的。
border (邊框)、margin (外距)、padding (內距)、background-image (背景圖)。
邏輯鑑定： 如果
body 有邊框，我們不希望裡面的每一行字也都自動套上邊框，那會亂成一團。所以「盒子屬性」不會自動遺傳。
特殊階層
表格 (Table) 的獨立性，在某些舊版瀏覽器或特定的 CSS 模式下，表格 (table) 不一定會完全繼承 body 的字體設定。
實務上要單獨為 th 或 td 指定字體，就是為了確保這條「瀑布」在流進表格內部時不會斷掉。
強制繼承的方法：inherit
如果您發現某個 selector（例如超連結 <a>）不聽話，不肯繼承父輩的顏色（因為瀏覽器對連結有預設的藍色），可以在 CSS 裡寫：
a { color: inherit; }
這等於是在告訴瀏覽器：「別管你的預設值了，去繼承你爸爸的顏色吧！」
B. 變數繼承 (CSS Variables)
例子： 在 :root 定義了 --row-even-yellow。
邏輯： 下方的表格樣式透過 var() 抓取這個值。
價值：
這是 2026 年主流的 「單一點管理」。如果您覺得偶數行的黃色太深，只需修改頂部一個地方，全站數千個表格會同時變色。
C. 結構繼承與狀態捕捉 (Pseudo-selectors)
例子： table tr:nth-child(even)。
邏輯： 這不依賴在 HTML 寫什麼，而是瀏覽器在生成 DOM
時，自動根據「父子關係」去計算誰該繼承黃色背景。
CSS Comments/ CSS說明命令
Comments are used to explain your code, and may help you when you edit the
source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
Post CSS3 新命令
CSS3 的進步很快，剛問世時，各瀏覽器尚未統一支援，還必須指定不同前置命令，如：-moz- 火狐，-webkit- Chrome，目前均已不需要。
更多 Post CSS3 新命令，有些仍在發展中。
Cascading Orders 樣式優先序
CSS (Cascading Style
Sheets) is an extension of HTML.
There are 3 types of styles and 4 rules, basically, defined by their priority.
3種放置位置，與4「基本」優先序。
1st: Inline Styles 行內樣式
html5/CSS3 後，已建議停用。
Use the formatting bar to design fonts.
It is the highest priority.
However, it is not recommended for future and not really working by SharePoint. SP will automatically change the inline styles into embedding styles.
2nd: Embedding (Internal) Styles 頁內樣式
html5/CSS3 後，也已不建議經常使用。
it is not the best choice by html5/CSS3, either.
FrontPage
There are 2 categories of embedded style: system default and user defined.
>Format-Style
Click the list of 'Default Tag' and modify the chosen style (as Selector, i.e. HTML style tags).
The modified style will appear in the 'User Defined Style' (as Class) list.
You may add new styles in the 'User Defined Style' list, too.
The most popular styles you want to modify are p, from h1 to h6.
It stands the 2nd priority.
3rd: Linking (External) Styles (files with .css) 外接通用樣式檔
CSS file is an external user-defined, lowest priority style sheet.
Furthermore, it is the current standard and trend for webpage design.
檔案放置位置與連接方式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
其中的意義如下：
<link>標籤
<link>是一個只能使用在 <head>內的標籤元素，表示和「頁外資源」的連結。
html5 的<link> 是變動較大的一個標籤，其中 rev (reverse relation) 屬性已經取消，與前版相容性要注意。
rel= 屬性
rel 屬性可以用在多個標籤，表示 relation 關聯的意義。
"styesheet" 值
表示連結到 CSS 檔案。
type="text/css"
type="text/css" 是一個MIME類型，type="text/css" 表示類型為 text：子類別型為： css
href= 屬性
href= 之值，為連結 CSS 之檔案名稱與位置。
CSS 檔內選取器優先序
CSS 檔內設定的選取器，有以 # 號或 . 號開頭的2種。
# 優先 於 .
4th:
Priority of More Than Two .CSS Files
If you have more than two .css files and want the file1.css to be applied as the
first priority then your markup would be:
<link rel="stylesheet" type="text/css" href="file2.css">
<link rel="stylesheet" type="text/css" href="file1.css">
這是「後進先用」-程式碼排列在下方者優先-原則，不僅適用CSS，也適用各種程式機制。
Reminder:
Microsoft Theme's CSS
Microsoft Theme's CSS is better to place above your personal CSS, such as:
<meta name="Microsoft Theme"
content="msthemeThemeName, default"/>
<link rel="stylesheet" type="text/css" href="../personal.css" />
個人樣式才優先于微軟布景樣式。
但應用以上順序時，在SharePoint窗格中，微軟布景樣式卻會跑到上方，很容易造成誤會，要特別小心。
5th:
Advanced Specificity Rules of Priority 進階特定規則
進階特定規則是當1個網站，有許多作者，同時使用多個CSS，決定優先的規則，請參閱：
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#specificity
http://www.HTMLdog.com/guides/cssadvanced/specificity/
http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
前端開發框架 Front-end Development Framework/ W3.CSS/ Bootstrap
「前端開發框架」為預先設計的 CSS 樣式和元件，讓開發者可以快速地建立響應式的網頁介面，如同早期的微軟布景樣式。當前常用的，如以下的 W3.CSS 和 Bootstrap。
W3.CSS
W3.CSS 就是套裝 CSS，注重輕量化和速度，它不依賴任何 JavaScript 框架，並且提供了一些額外的樣式和顏色選擇。
Bootstrap
Bootstrap 加上 jQuery 和 Popper.js 可提供高級 JavaScript 功能，如模態框Modal、下拉菜單等。
部署 Bootstrap 的步驟
下載 Bootstrap：您可以從 [Bootstrap 官網] 下載 Bootstrap 的最新版本。
解壓縮檔案：下載後的檔案是一個
ZIP 檔案，解壓縮後您會看到已編譯的 CSS 和 JS（bootstrap.），以及已編譯壓縮的 CSS 和
JS（bootstrap.min.）。同時也包含了 Glyphicons 的字體。
建立 HTML 範本：建立一個 HTML 檔案，並引入
Bootstrap 的 CSS 和 JS 檔案。
以下是一個基本的 HTML 範本：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 範本</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
引入 Bootstrap -->
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用於讓 IE8 支援 HTML5元素和媒體查詢
-->
<!-- 注意： 如果通過 file:// 引入 Respond.js 檔案，則該檔案無法起效果 -->
<!--[if lt IE
9]>
<script
src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script
src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
下接：CSS Files Practice 實作
使用Sharepoint作CSS層疊樣式表
Theme
Modification 布景主題修改
微軟有提供多種 css 範本，稱為布景主題，另以專篇討論修改方式。
連結不到網頁