好程式員web前端分享CSS屬性組成及作用

好程式員web前端分享CSS屬性組成及作用

學習目标

1、css屬性和屬性值的定義

2、css文本屬性

3、css清單屬性

4、css背景屬性

5、css邊框屬性

6、css浮動屬性

一、css屬性和屬性值的定義

屬性：屬性是指定選擇符所具有的屬性，它是css的核心，css2共有150多個屬性

屬性值：屬性值包括法定屬性值及常見的數值加機關，如25px，或顔色值等。

二、CSS文本屬性

1、文本大小：{font-size:12px;}機關還可以是em，是父級元素的font-size的倍數；/系統預設的字号大小為16px

說明：

1） 屬性值為數值型時，必須給屬性值加機關，屬性值為0時除外。

2）機關還可以是pt，9pt=12px;

3）為了減小系統間的字型顯示差異，IE Netscape Mozilla的浏覽器制作商于1999年召開會議，共同确定16px/ppi為标準字型大小預設值,即1em.預設情況下，1em=16px,0.75em=12px; rem

2、文本字型：{font-family:字型1，字型2，字型3；}

浏覽器首先會尋找字型1、如存在就使用改字型來顯示内容，如在字型1不存在的情況下，則會尋找字型2，如字型2也不存在，按字型3顯示内容，如果字型3 也不存在；則按系統預設字型顯示； 

當字型是中文字型時，需加雙引号；

當英文字型由多個單詞組成時，需加雙引号如（“Times New Roman”）

當英文字型隻有一個單詞組成是不加雙引号；如：（Arial）；

Windows中文版本作業系統下，中文預設字型為宋體或者新宋體，英文字型預設為Arial.

3、文本顔色：{color:顔色值;}red/#f00/rgb(255,0,0)

用十六進制(是計算機中資料的一種表示方法)表示顔色值：

0 1 2 3 4 5 6 7 8 9

0 1 2 3 4 5 6 7 8 9 A B C D E F

顔色模式：光色模式

R G B

FF 00 00

顔色值的縮寫：

當表示三原色的三組數字同時相同時，可以縮寫為三位;

當用十六進制表示顔色值時，需要在顔色值前加“#”

fa 00 00

RGB表示方式：color:rgb(255,0,0);

4、文字加粗font-weight:bolder(更粗的)/bold（加粗）/normal（正常）/100—900;

在css規範中，把字型的粗細分為9個等級，分别為100——900，其中100對應最輕的字型變形，而900對應最重的字型變形，

5、文本傾斜：font-style：italic/oblique/normal（取消傾斜，正常顯示）;

italic和oblique都是傾斜的文字, 但差別在于Italic是指斜體字，而Oblique是傾斜的文字，對于沒有斜體的字型應該使用Oblique屬性值來實作傾斜的文字效果.

6、水準對齊方式{text-align:left左/right右/center居中/justify兩端對齊(在部分浏覽器中，對于中文不起作用);} 隻針對文本或圖檔

7、垂直對齊方式 {vertical-align:top上/bottom下/middle居中/baseline基線（某些特定的元素類型起作用）;}

8、文字行高 {line-height:normal/value;}line-height:20px; line-height:2em; (當行高的機關省略時，預設為em)

當單行文本的行高等于容器高時，可實作單行文本在容器中垂直方向居中對齊；

當單行文本的行高小于容器高時，可實作單行文本在容器中垂直中齊以上；

當單行文本的行高大于容器高時，可實作單行文本在容器中垂直中齊以下（IE6及以下版本存在浏覽器相容問題） 

9、文本修飾 text-decoration:none/underline/overline/line-through

none:沒有修飾

underline:添加下劃線

overline:添加上劃線

line-through:添加删除線

10、首行縮進：{text-indent:value;}

1）text-indent可以取負值；

2）text-indent屬性隻對第一行起作用。

11、檢索英文字母大小寫{text-transform:none無轉換/capitalize首字母大寫/uppercase全都大寫/lowercase全都小寫;}。

12、字間距{letter-spacing:value;}控制英文字母或漢字的字距。

13、詞間距{word-spacing:value;}控制英文單詞詞距。

擴充：14、文本流控制{layout-flow:horizontal/vertical-ideographic;}

1）horizontal:自左向右

2）vertical-ideographic:自上而下

15、文字屬性簡寫：font:bolder italic 12px/1.5em "宋體";     簡寫時，字型和字号是必備font屬性的簡寫：字号，行高，字型 說明:font的屬性值應按以下次序書寫(各個屬性之間用空格隔開) 順序: font-style font-weight font-size / line-height font-family

(1)簡寫時 , font-size和line-height隻能通過斜杠/組成一個值，不能分開寫。

(2) 這種簡寫法隻有在同時指定font-size和font-family屬性時才一起作用,如果你沒有設定font-weight , font-style , 他們會使用預設值。

三、CSS清單屬性

1、定義清單符号樣式

list-style-type：disc(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉清單符号)；

2、使用圖檔作為清單符号

list-style-image：url(所使用圖檔的路徑及全稱)；

3、定義清單符号的位置

list-style-position:outside(外邊)/inside(裡邊)；

list-style:none;去掉清單符号

四、邊框的屬性和屬性值

border:邊框寬度 邊框風格 邊框顔色;

例如：border:5px solid #ff0000

邊框寬度：border-width:

邊框顔色：border-color:

邊框樣式：border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線)none(去掉邊框);

可單獨設定一方向邊框，

border-bottom:邊框寬度 邊框風格 邊框顔色;      底邊框

border-left:邊框寬度 邊框風格 邊框顔色;             左邊框

border-right:邊框寬度 邊框風格 邊框顔色;          右邊框

border-top:邊框寬度 邊框風格 邊框顔色;           上邊框

五、CSS背景屬性

1、背景顔色 {background-color:顔色值;}

2、背景圖檔的設定 background-image：url(背景圖檔的路徑及全稱）；

3、背景圖檔平鋪屬{background-repeat:no-repeat不平鋪/repeat平鋪/repeat-x  X軸平鋪/repeat-y   Y軸平鋪 }

4、背景圖的位置{background-position:left/center/right/數值      top/center/bottom/數值;}

水準方向上的對齊方式（left/center/right）或值 

垂直方向上的對齊方式(top/center/bottom)或值 

background-position:值1 值2; 

兩個值 ：第一個值表示水準位置的值，第二個值：表示垂直的位置。 

當兩個值都是center的時候寫一個值就可以代表的是水準位置和垂直位置 ；

當元素小背景圖大的時候，想顯示右下方的背景圖，通過負值來調整背景圖的位置；

5、背景圖的固定{background-attachment:fixed固定/scroll滾動;}

fixed 固定，不随内容一塊滾動，根據可視視窗固定位置；

scroll:随内容一塊滾動。

網頁上常用的圖檔格式

1）jpg :有損壓縮格式，靠損失圖檔本身的品質來減小圖檔的體積，适用于顔色豐富的圖像;(像素點組成的，像素點越多會越清晰 )

2）gif：無損壓縮格式，支援透明，支援動畫，适用于顔色數量較少的圖像;

3）png:無損壓縮格式，支援透明，不支援動畫，(是fireworks的 源檔案格式)，适用于顔色數量較少的圖像; 

六、CSS浮動屬性

文法：float:none/left/right;

浮動的目的：就是讓豎着的元素橫着顯示

一個元素設定float：left/right;時，元素會脫離文檔流（半脫離），不占空間；

有三個取值：

left:元素向左浮動

right:元素向右浮動

none:預設值，不浮動。

清除浮動可以了解為打破橫向排列。

清除浮動的屬性是clear，文法：

clear : none | left | right | both

none：預設值。允許兩邊都可以有浮動對象

left：清除左浮動/不允許左邊有浮動對象

right  :  清除右浮動/不允許右邊有浮動對象

both  :  清除兩端浮動/不允許有浮動對象

有一點是要記住的那就是

對于CSS的清除浮動(clear)，一定要牢記：這個規則隻能影響使用清除的元素本身，不能影響其他元素