一、顏色特性

1. 前景色：color

用種方式指定前景色，3種方式分別是rgb顏色，#16進制編碼，顏色名稱：

color: rgb(100,100,100);
color: #ee3e80;
color: DarkCyan

2. 背景色：background-color

3. 透明度：opacity，rgba

color: rgba(0,0,0,0.5);
或
opacity: 0.5;

4. HSL顏色和HSLA：

HSL顏色的三個屬性值為色調（0~360），飽和度（百分數），明度（百分數）。HSLA比HSL多一個透明度（0~1）表示。

background-color:hsla(0,100%,100%,0,5)

二、字體

1. 字體選用: font-family

可以指定多種字體，用逗號隔開，以防止用戶瀏覽器沒有安裝其中的某些字體。

font-family: Georgia, Times, serif;

2. 字體大小：font-size

字體大小有3種表示方式，分別是像素，百分數，EM值：

像素：px表示

百分數：百分數表示，100%表示16px

em值：1em等於一個字母m的寬度

3. 粗體：font-weight

使該文本以粗體顯示，bold為粗體，normal為普通粗細。

font-weight: bold;

4. 斜體：font-style

使文本以斜體顯示，italic為斜體，oblique為傾斜，normal為普通字體。

font-style: italic;

5. 大小寫：text-transform

使文本以大小寫顯示，uppercase為大寫，lowercase為小寫，capitalize為首字母大寫。

text-transform: uppercase;

6. 下劃線和刪除線:text-decoration

可選值為：none無，underline下劃線，overline頂部實線，line-through刪除線，blink文字閃爍

text-decoration: underline

7. 行間距：line-height

行間距表示的是字母的下緣線到下一行字母的上緣線的距離，一般用em值表示，這樣可按用戶調整的字母的大小而改變。

line-height:1.4em

除行間距外，還有字母間距letter-spacing和單詞間距word-spacing。

8. 對齊方式：text-align

用於控制文本的對齊方式，可選值為：left，right，center，justify（兩端對齊）

9. 垂直對齊：vertical-align

用於內聯元素，可選值為：baseline,sub,super,top,text-top,middle,bottom,text-bottom

10. 文本縮進：text-indent

對首行文本進行縮進，單位可為px或em。

text-indent: -9999px;

縮進值可為負數，即將文本左移出了屏幕外。

11. 文字投影：text-shadow（CSS3特性）

文字投影要指定3個長度和1個顏色，第一個長度陰影在左右方向的位移，第二個長度陰影在上下方向的偏移，第三個長度為陰影的模糊程度，最後一個顏色為陰影的顏色

text-shadow: -1px -2px 7px #111111;

12. 首字母或首行文本: :first-letter, :first-line

:first-letter和:first-line並不是屬性，應該稱作為偽元素。在選擇器的末尾指定偽元素，可以選定對象。

p.intro:first-letter{
font-size: 200%;
}
p.intro:first-line{
font-weight:bold;
}

13. 鏈接樣式： :link, :visited

:link和:visited是偽類。:link表示那些尚未訪問過的鏈接的樣式。:visited表示那些已經單擊過的鏈接樣式。

a:link {
color: deeppink;
}
a:visited{
color: black;
}

14. 相應用戶： :hover, :active, :focus

這三個都是偽類。

:hover 表示光標放在元素上時生效，對觸摸屏無效

:active 表示操作時生效，比如按鈕按下或者鏈接被點擊

:focus 表示元素擁有焦點時有效

input.submit:hover {
background-color: #665544:
}
input.submit:active{
background-color: chocolate;
}

三、特性選擇器

p[class] 所有包含class特性的<p>元素
p[class=‘dog‘] class特性值為‘dog‘的<p>元素
p[class~=‘dog‘] class特性值是以空格隔開的單詞列表，其中有一個為‘dog‘
p[attr^"d"]  特定的<p>元素，其中某個特性的值以"d"開頭
p[attr*"do"]  特定的<p>元素，其中某個特性的值中包含"do"
p[attr$"g"]  特定的<p>元素，其中某個特性以"g"結尾

CSS學習筆記（二）：特性