1.關於樣式
1.1使用樣式的優點
假設有一個FAQ的頁面，需要將所有的question都設定為綠色，可以在每個問題前加上<font>標籤將color屬性設定為綠色。但是如果我們需要將頁面中所有問題改為藍色，就會變得非常麻煩。所以需要樣式，樣式類似於C++中的宏定義，只需在開頭聲明，當需要改動時，只改變定義的值就都改了。
樣本：
<style>p.question{color:green}</style>
該代碼建立了一個特定的<p>標籤累，其名稱為question。每當使用<p>標籤，且其class屬性設定為question時，段落文本都將用綠色顯示。
2樣式的基本要素
樣本：
<head>
<title>style</title>
<style>h1{font-weight:bold;font-size:14pt;color:orange}</style>
</head>
在該樣本中，樣式是為<h1>標籤建立的，它設定了標題的字型高度、字型大小及顏色。Web頁的樣式必須被包括在頁面標題中。當然，頁面也可以直接應用於一段html代碼。
樣本：
<h1 style = "font-weight:bold;font-size:14pt;color:orange">.....</h1>
第一種方式是建立作為樣式頁的一部分，並且將要應用於所有<h1>標籤的樣式；而第二種方式建立的是只應用於<h1>標籤指定執行個體的樣式。
3.樣式的應用
3.1內部樣式
在Web頁面的標題中建立一個或一組樣式並用<style>括住時，表示將該樣式應用於整個頁面。這種包含在Web頁中的樣式集合被稱為“內部樣式頁”。
樣本：
<head>
<title>FAQ</title>
<style>
h3{background:green;color:white}
p.question{color:green;font-style:italic}
</style>
</head>
3.2外部樣式
外部樣式頁被包含在一個獨立於將要應用該樣式的Web頁檔案中。使用外部樣式頁的優點是，可以將樣式應用於多個Web頁。
樣本：
h3{background:green}
p.question{color:green;font-weight:bold}
該代碼必須以一個帶有.css（這是用於級聯樣式的標準副檔名）副檔名的檔案形式出現。假設該代碼被放在一個名為"st.css"的檔案中，然後使用下面代碼來應用該樣式：
<link rel = "stylesheet" type = "text/css" href = "st.css">
<link>標籤用來引用.css樣式頁並將該樣式頁與Web頁關聯起來。rel屬性只是說連結引用的是一個將要應用於文檔的樣式頁。type屬性指定的是連結內容的類型，在該樣本中為級聯樣式頁。同內部樣式頁，外部樣式頁的引用必須放在標題中。
3.3樣式類
除了將樣式應用於頁面中指定標籤的所有執行個體之外，還可以建立應用於一類標籤的“樣式類”。
樣本：
p.question{color:green;font-style:italic}
該代碼錶明，樣式類是通過將樣式指定為標籤名後跟一個句點（.），然後跟類名稱（question）的形式來建立的。
3.4局部樣式
將樣式應用於個別標籤，這就是所謂的“局部樣式”。
樣本：
<h3 style = "background:green;color:white">Rel</h3>
該樣式只應用於該標籤，局部樣式將覆蓋應用於同一個標籤的樣式頁中的所有樣式。
3.5連結樣式
連結樣式專門應用於Web頁中的超連結文本方式。下面是一些超連結狀態：
link 還沒有被訪問過的連結
visited 已經被訪問過的連結
active 剛剛被單擊的連結
hover 滑鼠指標停留在連結上
通過在標籤a後跟一個冒號，然後跟超連結的狀態名可以為超連結建立樣式。
樣本：
a:hover{background:green;color:white}
4.樣式和自訂樣式標籤
HTML標籤有兩種：塊級標籤和內建標籤。塊級標籤通常會在Web頁中開始新的一行，並且常常會包含其他標籤。常用的有<p>、<body>、<table>、<h1>等等。內建標籤通常不會再Web頁中開始新的一行，並且只能包含文本或其他內建標籤。常用的有<b>、<i>、<font>和<img>等。
<div>標籤被用來建立自訂的塊級標籤；<span>標籤被用來建立自訂的內建標籤。
4.1建立自訂的樣式標籤
div.question{color:green;font-style:italic}
該代碼為自訂問題建立了一個樣式。該樣式是通過使用div標籤名後跟一個句點，然後跟自訂樣式標籤的名稱來指定的。然而這並不意味著您已經建立了一個名為“<question>”的自訂樣式標籤；相反，建立了一個名為“question"的div標籤的自訂類別。
span.qna{font-size:150%}
該代碼自訂內建標籤。建立了一個具有qna類名的自訂樣式標籤。
4.2使用自訂的樣式標籤
樣本：
<div class = "question">
<span class = "qna">Q</span>:What is your name?</div>
<p>
<span class = "qna">A</span>:Tom</p>
在該樣本中，自訂的question樣式類被用於<div>標籤，以標記問題段落。在解答段落使用仍是傳統的<p>標籤。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
