CSS基礎知識1
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