CSS常用屬性

1. 使用Web字型

@font-face {
    font-family: Delicious;
    src: url('/Delicious-Roman.otf')
}

然後調用該字型： 
h3 { font-family: Delicious, sans-serif; }

在IE中顯示為

 

2. 規定添加到文本的修飾

text-decoration: none

none　　　　預設。定義標準的文本

underline　  定義文本下的一條線

overline　　 定義文本上的一條線

line-through 定義穿過文本的一條線

blink　　　　定義閃爍的文本

 

3. 增加或減少字元間的空白(字元間距)

h1 {letter-spacing: -0.5em}

h2 {letter-spacing: 20px}

在IE中顯示為

normal:　　預設。規定字元間沒有額外的空間

length:　　 定義字元間的固定空間(允許使用負值)

inherit

 

4. 設定字型的尺寸

font-size: 200%

medium:　　預設值

smaller:　　 設定為比父元素更小的尺寸

larger:　　　 設定為比父元素更大的尺寸

length:　　　設定為一個固定的值

%:　　　　　 設定為基於父元素的一個百分比值

inherit

 

5. 規定元素中的文本的水平對齊http://www.w3school.com.cn/css/pr_text_text-align.asp

text-align: left;　　把文本排列到左邊。預設值：由瀏覽器決定。

right　　把文本排列到右邊

center   把文本排列到中間

justify    實現左右對齊文字效果

inherit

 

6. 設定所有外邊距屬性(依次為上右下左)

margin: 10px 5px 15px 20px

margin: 10px　　表示4個外邊距都是10px

  

7. 設定所有內邊距屬性(依次為上右下左)

padding: 10px 5px 15px 20px;

padding-left: 20px;

 

8. 設定元素的背景顏色 

backgound-color: yellow

 

9. 設定所有的邊框屬性

border: 1px dashed #aaaaaa;

 

10. 這是邊框樣式

border-style: dotted dolid double dashed;　　表示上邊框是點狀 右邊框是實線 下邊框是雙線 左邊框是虛線

和margin屬性順序一樣

border-style: dotted;　　所有4個邊框都是點狀

 

11. 規定元素應該產生的框的類型

display: inline;　　預設。此元素會被顯示為內嵌元素，元素前後沒有分行符號

none: 　　　　　　此元素不會被顯示

block:　　　　　　 此元素會被顯示為區塊層級元素，此元素前後帶有分行符號

inherit:　　　　　　規定應該從父元素繼承display屬性的值

 

12. 設定表格的邊框是否合并為一個單一的邊框

table {

　　border-collapse: collapse;

}

siparate　　　預設值。邊框會被分開。不會忽略border-spacing和empty-cells屬性

collapse　　　如果可能，邊框會合并為一個單一的邊框。會忽略border-spacing和empty-cells屬性

inherit

 

13. 設定背景映像http://www.w3school.com.cn/css/pr_background-image.asp

 background-image: url(bgimage.gif);

 background-repeat: none(預設值)　　根據此值，可以設定映像無線平鋪或者不平鋪等。

 

14. 規定元素的定位類型

h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}

在IE中顯示為

static　　預設值。沒有定位，元素出現在正常的流中(忽略top,bottom,left,right或者z-index聲明)

absolute:　　　　　產生絕對位置的元素，相對於static定位以外的第一個父元素進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規定

fixed:　　　　　　　產生絕對位置的元素，相對於瀏覽器視窗進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規定。

relative:　　　　　  產生相對定位的元素，相對於其正常位置進行定位。因此，"left: 20"會向元素的LEFT位置添加20像素。

inherit

 

15. 定義元素在哪個方向浮動

float: none;　　預設值。元素不浮動，並會顯示在 其在文本中出現的位置

left:　　元素向左浮動

right:　 元素向右浮動

inherit