層疊樣式表的原文Cascading Style Sheets，簡稱CSS，是用來設置網頁「樣式」的一套規則，所謂的樣式（style），包括字型、字體大小、行高、顏色、邊距、格線等。過去，網頁的樣式是以HTML標記語言來設定，但是後來，樣式的部分被分離出來，改用CSS來設定。CSS有幾個特點：
*簡單的說，HTML是用來標示網頁的「架構」，CSS則是用來設定網頁的「樣式」，兩者各司其職。
*CSS和HTML是兩種完全不同的「語言」，有各自的指令寫法，不能混淆。
*一般標準的做法，是把網頁的架構寫在.html文件中，把網頁的樣式寫在.css文件中。由於.html文件中會註明所搭配的.css文件名稱和存放位置，當瀏覽器在「開啟」某個.html文件時，就會去抓取指定的.css文件來使用，以便呈現該有的樣式。
*通常網站都會包含多個網頁，也就是有多個.html文件。這些網頁文件可以「共用」同一份.css文件，也就是使用同一個樣式表。由此想見，這樣可以確保網站上所有.html文件的樣式是統一的。再者，一旦有需要修改網頁樣式時，只要把那一份.css文件修改好，所有.html文件的樣式就都跟著修改好了。
*************如何在.html文件中指定.css文件
把CSS樣式設定儲存在名為.css的純文本文件中（稱為「樣式表」或「外部樣式文件」），然後在原先的.html文件中，創建一個外部鏈接，連到這個.css文件，這樣就可以讓多個.html文件共用CSS文件。事實上這就是許多網站的設置方式。在<head></head>區塊內，使用<link>標記來指定CSS樣式設定。
如何在.html文件中鏈接到.css文件：
....
<head>
<meta charset="UTF-8">
<title>標題</title>
<link type="text/css" rel="stylesheet" href="xxxx.css">
</head>
....
*************
*其實CSS樣式設定也可以直接寫在.html文件中。有兩種可能的方式：
1）如果網頁製作者沒有權限修改伺服器主機上的.css文件，但是有權限可以修改完整的.html文件（也就是牽涉到<head></head>的區塊），那麼他就可以在<head></head>區域，把CSS的指令直接寫在<style></style>標記之間。
2）如果網頁製作者沒有權限修改原始的.css文件及.html文件，只被允許在網頁的局部添加內容（例如大多數的網誌/部落格），那麼他可以利用HTML標記中的style屬性來指定樣式，例如<div style="padding: 10px; color: gray;">。
CSS樣式的語法
雖然CSS的語法和HTML的語法不相同，但兩者都還算是相當直觀，容易理解，學習起來並不困難。最基本的樣式表示法，就是「樣式名稱+冒號+樣式值+分號」，例如：
background-color: yellow;
font-size: 150%;
是不是一看就能理解？這裡帶出學習CSS的前兩個要點，一是要熟悉常用的樣式名稱，二是要熟悉對應的樣式值寫法。例如，padding（邊距）這個樣式，有好幾種不同的表示方式：
padding: 10px 5px 15px 5px;
四個數值依序代表上邊距、右邊距、下邊距、左邊距（順時針方向）。
padding: 10px 5px;
只寫兩個數值時，第一個代表上下邊距各為10px、第二個代表左右邊距各為5px。
padding: 10px;
只用一個數值時，代表上下左右的邊距都各為10px。
left-padding: 10px;
單獨指定左邊距。
right-padding: 10px;
單獨指定右邊距。
top-padding: 10px;
單獨指定上邊距。
bottom-padding: 10px;
單獨指定下邊距。
請留意，CSS指令中的「冒號」和「分號」都是不可缺的一部分，若是漏寫或寫錯，會導致樣式無法正常顯示。
熟悉了樣式名稱和樣式值寫法之後，第三個要點是了解如何把樣式指定給網頁中的特定段落，例如針對第一級標題<h1>設定樣式。不過，在.css文件中，通常都會先針對「整個網頁」（也就是<body>這個標示）設定基本的網頁樣式，例如字型font-family、字體大小font-size、字體顏色color、背景顏色background-color等。
完整的樣式設定，必須包含HTML標記名稱+一對花括號，然後在花括號內寫出樣式設定。例如：
body {
background-color: gray;
font-family: Verdana, Arial, sans-serif;
color: black;
font-size: 12px;
}
接著，再針對各層級的內容區塊，例如標題<h1>~<h6>或段落<p>進行設定。例如把<h1>標題文字設定成150%大小，把<h2>標題文字設定成120%大小。在下面的範例中，還可看到對<h1>、<h2>同時設定字體顏色為灰色，標示方式為「h1, h2」兩個標記以逗號分隔。
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
<style type="text/css">
body {
background-color: gray;
font-family: Verdana, Arial, sans-serif;
color: black;
font-size: 12px;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
font-size: 150%;
}
h2 {
font-size: 120%;
}
</style>
</head>
<body>
<h1>網頁第一級標題</h1>
<h2>網頁第二級標題</h2>
<h2>網頁第二級標題</h2>
<p>段落內容</p>
</body>
</html>
如前所述，對<body>的樣式設定是最基礎的設定，適用於整個網頁內容（包括<h1>、<h2>）。但是若後面又針對<h1>、<h2>等標記設定了樣式，這些樣式設定值就會覆蓋（也就是取代）<body>的設定值。例如，在<body>中設定了字體顏色是黑色，但是後面又對<h1>、<h2>設定字體顏色是灰色，則灰色的設定會適用於<h1>、<h2>這兩個層級的標題。
延伸問題：如果想把某一個<h2>標題文字單獨設定成藍色，又該怎麼做？邏輯上，必須把那個<h2>「做個記號」，設定一個id名稱或是class分類名稱，這樣就能在style樣式設定時，特別標註那個特定的<h2>，並設定專屬的樣式（範例請見本文的最後一段）。
CSS的常用樣式有哪些？
能夠設定的樣式還滿多的，但如果不是重度使用者（例如網頁設計師），可以先從一些常用的樣式開始熟悉就好。以下列出一些樣式名稱，建議在設計網頁時用用看。如果調試出自己喜歡的樣式組合，不妨存檔備用，供作日後再次使用的範本，這樣就不必每次設計網頁都從零開始了！
font-family 字型 （以逗號分隔，例如：Verdana, Arial, sans-serif）
color 字體顏色
font-weight 字體粗細 （lighter；normal；bold；bolder）
font-size 字體大小 （可用像素或百分比表示，例如：14px或120%）
font-style 斜體文本 （normal；italic；oblique）
background-color 背景顏色
background-image 背景圖像
border-color 邊框顏色
line-height 行高
text-align 水平對齊 （left左對齊；center居中；right右對齊）
text-decoration (underline；line-through；overline；none)
border 邊框
border-bottom 邊框底部
padding 內邊距
list-style 列表外觀
font-family的設置
*網頁字型可分為5類：sans-serif, serif, monospace, cursive, fantasy，每一類包含多種不同的字型。
*常看到的serif和sans-serif並不是指某款特定字型的名稱，而是代表某類字型。serif是有襯邊的字型，sans-serif是無襯邊的字型。
1. serif: 有襯邊的字型，例如Times, Times New Roman, Georgia，常用於報紙雜誌的印刷體。
2. sans-serif: 無襯邊的字型，例如Verdana, Arial, Arial Black, Trebuchet MS, Geneva，常用於網頁，因為無襯邊的文字比較簡潔，在電腦、手機屏幕上閱讀比較輕鬆。
3. Monospace: 字母的間距相同的字型，例如Courier, Courier New, Andale Mono，它是模擬打字機打字的效果，常用於表示編程代碼。
4. Cursive: 仿手寫效果的字型，例如Comic Sans, Apple Chancery。適合用在活潑、不正式、年輕主題的文字。
5. Fantasy: 具裝飾性的特殊字型，例如Last Ninja, Impact。可做特殊效果用，但不適合用來顯示閱讀用的長段文字。很少用在網頁文字中。
*font-family樣式可以一次設置多種字型，字型的英文要拼寫正確（含大小寫），並以逗號隔開。如果字型的名稱中間有空格，如Courier New，該字型名稱要用引號，如"Courier New"。
*通常每次設置的多個字型會屬於同一個字型類別，例如全都是sans-serif或都是serif。
*即便在font-family設定了某款你喜歡的字型，卻不一定能在瀏覽器顯示，或是你會發現同一個網頁在不同的瀏覽器（例如Chrome、360、SAFARI）畫面中，顯示出來的字型不一樣。網頁設置的字型能否顯示，要看瀏覽器所在的電腦是否支援該字型。不同的電腦操作系統（如Windows、Mac）默認支援的字型不同。
*實際運用上，我們會對font-family設置多個字型，並且把偏好的字型寫在前面。利用這樣的設置把偏好的字型優先列舉出來，以增加對字型的控制。
*瀏覽器讀取網頁時，會按照字型設置的順序來顯示。例如font-family: Verdana, Arial, sans-serif; 如果電腦有支援Verdana字型，就以Verdana顯示文本，沒有的話就用Arial....以此類推。若是標明的字型都不支援，瀏覽器就會在sans-serif字型類別裡找一個默認的字型來使用。
*因此，設置字型時，通常最後一個會寫sans-serif或serif，五類字型中的一類。
CSS標記的分類運用
*雖然CSS可以針對不同標記如<h1>、<h2>、<p>創建樣式，但如果想要對特定一個<h2>設置專屬的樣式，該怎麼辦？可以的，只要先對不同的<h2>作分類（注意：是在.html文件中，將<h2>做標記）。
步驟：
1. 在.html文件中，利用class屬性對<h2>分類，例如：
<h2 class="general">...........</h2>
<h2 class="promote">...........</h2>
2. 接著，在.css文件中，指定各自的樣式：
h2.general { color: blue; }
h2.promote { color: red; }
*不只是<h2>，其他的標記也可以使用class這個屬性來分類。例如<div>、<blockquote>等。
步驟：
.html文件里寫： <div class="promote">
.css文件里寫： div.promote { color: red; }
*同屬一類的樣式規則可以寫在一起：
例如可以寫成：h2.promote, div.promote { color: red;}
還可以簡單寫成： .promote {color: red;}
*一個標記可以設定多個分類名，例如：<p class="premium female">，這裡有兩個分類，一個是premium，一個是female，之後再到.css文件中為不同的分類制定規則。
例如： p.premium { color: brown;}
p.female { text-decoration: underline;}
*驗證CSS語法的網站工具：http://jigsaw.w3.org/css-validator/
沒有留言:
張貼留言