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 屬性的設定。
更多CSS常用屬性相關文章請關注PHP中文網！
