CSS學習筆記（二）：特性

標籤：陰影   開頭   color   cin   css   第一個   焦點   put   dog   

一、顏色特性

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學習筆記（二）：特性