標籤：weight 重複 play 表示 注釋 title 虛擬 根據 指定
CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式.
1. CSS 可以通過以下方式添加到HTML中:
內聯樣式- 在HTML元素中使用"style" 屬性
內部樣式表 -在HTML文檔頭部 <head> 地區使用<style> 元素 來包含CSS
外部參考 - 使用外部 CSS 檔案
最好的方式是通過外部參考CSS檔案.
p
{
color:red;
text-align:center;
}
2. CSS注釋以 "/*" 開始, 以 "*/" 結束
3. id 選取器
id 選取器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設定id選取器,CSS 中 id 選取器以 "#" 來定義。
以下的樣式規則應用於元素屬性 id="para1":
#para1
{
text-align:center;
color:red;
}
class 選取器用於描述一組元素的樣式，class 選取器有別於id選取器，class可以在多個元素中使用。
class 選取器在HTML中以class屬性工作表示, 在 CSS 中，類別選取器以一個點"."號顯示：
在以下的例子中，所有擁有 center 類的 HTML 元素均為置中。
.center {text-align:center;}
p.center {text-align:center;} 指定P
如果某些屬性在不同的樣式表中被同樣的選取器定義，那麼屬性值將從更具體的樣式表中被繼承過來。
4. 當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
1. 瀏覽器預設設定
2. 外部樣式表
3. 內部樣式表（位於 <head> 標籤內部）
4. 內聯樣式（在 HTML 元素內部）
因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式聲明： 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（預設值）。
background簡寫屬性，作用是將背景屬性設定在一個聲明中。
background-attachment背景映像是否固定或者隨著頁面的其餘部分滾動。
background-color設定元素的背景顏色。
background-image把映像設定為背景。
background-position設定背景映像的起始位置。
background-repeat設定背景映像是否及如何重複。
color設定文本顏色
direction設定文本方向。
letter-spacing設定字元間距
line-height設定行高
text-align對齊元素中的文本
text-decoration向文本添加修飾
text-indent縮排元素中文本的首行
text-shadow設定文本陰影
text-transform控制元素中的字母
unicode-bidi設定或返迴文本是否被重寫
vertical-align設定元素的垂直對齊
white-space設定元素中空白的處理方式
word-spacing設定字間距
font在一個聲明中設定所有的字型屬性
font-family指定文本的字型系列
font-size指定文本的字型大小
font-style指定文本的字型樣式
font-variant以小型大寫字型或者正常字型顯示文本。
font-weight指定字型的粗細。
a:link {color:#FF0000;} /* 未訪問連結*/
a:visited {color:#00FF00;} /* 已訪問連結 */
a:hover {color:#FF00FF;} /* 滑鼠移動到連結上 */
a:active {color:#0000FF;} /* 滑鼠點擊時 */
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}
屬性和值選取器
[title~=hello] { color:blue; }
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
CSS基礎知識1
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
