CSS常用屬性

CSS常用屬性

☛關於CSS屬性個人建議查看手冊更加詳細方便，我這裡就幾種常用屬性進行分類並簡單取幾個常用屬性值，僅供跟我一樣剛學習前端的人作為入門而用。

1.字型樣式

字型的縮寫,寫法是font:font-style|| font-variant ||font-weight||font-size||/ line-height||font-family，一定要按照順序來寫

字型的斜體(font-style)：正常 normal || 常用斜體 italic || 沒有斜體變數的特殊字型 oblique

小型的大寫字母t(font-varian)：正常 normal || 小型的大寫字母字型 small-caps

字型的粗細(font-weight)：正常 normal || 常用粗體 bold || 特粗 bolder || 細體 lighter || 直接用數字表示（數值100-900）

字型的大小(font-size)：這裡僅介紹可以用幾種字根單位表示（px、em、rem）

字型的行高(line-height)：可以用長度px|| 百分比（基於字型的高度尺寸）|| 用數值(乘積因子)指定行高

字型簇(font-family)： 指定文本使用某個字型或字型序列，值用單引號包起來,預設是宋體.

demo：body{font-family:helvetica,verdana,sans-serif;}

/*注釋*/：按優先順序排列。以逗號隔開。如上字型定義，假設你電腦上沒有helvetica字型，但有verdana，這時將會以verdana顯示你的文字。

@font-face嵌入字型（課外擴充）

@font-face能夠載入伺服器端的字型檔，讓瀏覽器端可以顯示使用者電腦裡沒有安裝的字型。

文法：

@font-face {

font-family : 自訂字型名稱;

src : url(字型檔在伺服器上的相對或絕對路徑) format(字型類型);

}

例：

@font-face {/*該寫法是相容所有的瀏覽器*/

font-family : bgg;

src: url('fonts/fontawesome-webfont.eot'), /* IE9+ */

url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('fonts/fontawesome-webfont.woff') format('woff'), /* chrome、firefox */

url('fonts/fontawesome-webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,Android, iOS 4.2+*/

url('fonts/fontawesome-webfont.svg') format('svg'); /* iOS 4.1+ */

}

p{ font-family: bgg }

★字型的其他比較少用的樣式：

caption： 使用有標題的系統控制項的文本字型（如按鈕，菜單等）（CSS2）

icon： 使用表徵圖標籤的字型（CSS2）

menu： 使用菜單的字型（CSS2）

message-box： 使用資訊對話方塊的文本字型（CSS2）

small-caption： 使用小控制項的字型（CSS2）

status-bar： 使用視窗狀態列的字型（CSS2）

2.文本樣式

文本顏色 color

●顏色名稱 16種基本色為aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,tealwhite,and yellow.

●16進位（hex）色彩控制（6位元），其格式為 #336699。支援某些hex值的快捷計數法。比如， #336699可以被稱為 #369。

●RGB值 RGB的數值範圍從0到255，R代表紅色，G代表綠色，B代表藍色。demo：{ color: rgb(51,204,0) }

文本縮排 text-indent,值是以em為單位的數值,1em等於一個字的寬度.

文本水平對齊 text-align：left(靠左對齊) || center(置中對齊) || right(靠右對齊) || justify(左右對齊)

文本垂直對齊 vertical-align：sub(垂直對齊文本的下標) || super(垂直對齊文本的上標) || 還有其他見手冊

文字間距 letter-spacing,值有normal和以px為單位的數值.

文本換行 word-wrap：normal(允許內容頂開或溢出) || break-word(內容將在邊界內換行。如果需要，單詞內部允許斷行)

底線控制 text-decoration ：none(沒有底線,預設)、underline(底線)、blink、overline(上劃線)、line-through(刪除線)

文本的大小寫 text-transform : 首字母大寫 capitalize || 轉換成大寫 uppercase || 轉換成小寫 lowercase

3.列表樣式 list-style

list-style-image:url(/dot.gif); 圖片式符號，選擇映像作為清單項目的引導符號

list-style-position：列表符號位置

outside（預設值，列表與符號貼近）

inside（列表縮排，與符號相離）

list-style-type：符號類型（這裡列舉幾種常用的，若需要日文平假片假什麼的可以查手冊）

不編號(none) 阿拉伯數字(decimal) 實心圓(disc) 空心圓(circle) 實心方塊(square)

小寫英文字母(lower-alpha) 大寫英文字母(upper-alpha) 小寫羅馬數字(lower-roman) 大寫羅馬數字(upper-roman)

4.背景樣式 background

背景樣式的縮寫,寫法是{background-color||background-image||background-repeat||background-attachment||background-position;}

background: 背景色 背景圖片 背景平鋪方式 背景定位 要按照順序來.例子background:#F00 url(header_bg.gif) no-repeat fixed left top;

背景顏色

透視背景 background:transparent;

背景圖片 backgroung-image:url(圖片檔案路徑);

背景平鋪方式 background-repeat：repeat(全部平鋪,預設)|| no-repeat(不平鋪)|| repeat-x(橫向平鋪)|| repeat-y(縱向平鋪)

round(背景映像自動縮放直到適應且填充滿整個容器)|| space(背景映像以相同的間距平鋪且填充滿整個容器或某個方向)

背景圖片滾動 background-attachment：scroll 預設值。背景映像會隨著頁面其餘部分的滾動而移動。

fixed 當頁面的其餘部分滾動時，背景映像不會移動。||inherit 規定應該從父元素繼承 background-attachment 屬性的設定。

背景定位 background-position:左靠右對齊方式(left||center||) 上下對齊(top||bottom);

也可以將對齊寫成數值(或百分比%):左邊數值(%) 頂部數值(%)

背景的大小 background-size

background-size: auto; 自動，預設以圖片大小

background-size：px或百分比，若只設定一個值，則第二個值會被設定為 "auto"。

background-size: cover; 將背景映像等比縮放到完全覆蓋容器，背景映像有可能超出容器。

background-size: contain; 把映像映像擴充至最大尺寸，以使其寬度和高度完全適應內容地區。但是不超出容器

background-size: 100px 100%; 寬高比例改變

背景的開始位置 background-origin

寫法{background-origin:padding-box背景從邊框之後開始(預設)||border-box背景圖從邊框開始||content-box背景從內容開始}

5.邊框樣式 border

邊框線的縮寫：{border:border-width border-style border-color;}

demo：四邊邊框相同：{border:1px solid #00F}；

若想單獨一條邊的話，哪個方向的自己挑：{border-[left||right||top||bottom]:border-width border-style border-color;}

♜邊框線的樣式 border-style：none(不加邊框線,預設)|| hidden(隱藏邊框線)|| dotted(點狀虛線)|| dashed(線狀虛線,常用)

solid(實線,常用)|| double(雙實線)|| groove(淺色實線)|| ridge(深淺色實線)|| inset(左上深右下淺的實線)|| outset(左上淺右下深的實線)

♜邊框線的寬度 border-width,值是以px為單位的數值.

♜邊框線的顏色 border-color,值是顏色的英文單詞或者十六進位的顏色.

♜inherit：規定應該從父元素繼承 border 屬性的設定。