CSS常用屬性

來源:互聯網
上載者:User
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 屬性的設定。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.