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

?

expression用法 :?

width: expression(document.body.clientWidth);

height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight);

top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2);

left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2);

轉載于:https://www.cnblogs.com/studyhs/archive/2012/09/06/2672860.html

總結

以上是生活随笔為你收集整理的CSS 常用属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。