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)##low(square)##low(circle)      ♥ 大寫♥(square)##low(low)#low(low()#low(low()英文字母(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中文網其他相關文章！