CSS各屬性工作表

1、CSS 背景屬性（Background）

屬性	描述	CSS
background	在一個聲明中設定所有的背景屬性。	1
background-attachment	設定背景映像是否固定或者隨著頁面的其餘部分滾動。	1
background-color	設定元素的背景顏色。	1
background-image	設定元素的背景映像。	1
background-position	設定背景映像的開始位置。	1
background-repeat	設定是否及如何重複背景映像。	1

設定順序為：

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

 

eg:

   background-color: #FFCC66;
   background-image: url("butterfly.gif");
   background-repeat: no-repeat;
   background-attachment: fixed;   //固定在螢幕上，scroll:表示背景圖隨著頁面移動，即固定在頁面上。
   background-position: right bottom;

2、顏色的幾種定義和輸入方式

值	描述
color_name	規定顏色值為顏色名稱的背景顏色（比如 red）。
hex_number	規定顏色值為十六進位值的背景顏色（比如 #ff0000）。
rgb_number	規定顏色值為 rgb 代碼的背景顏色（比如 rgb(255,0,0)）。
transparent	預設。背景顏色為透明。
inherit	規定應該從父元素繼承 background-color 屬性的設定。

 

 

CSS 邊框屬性（Border 和 Outline）

屬性	描述	CSS
border	在一個聲明中設定所有的邊框屬性。	1
border-bottom	在一個聲明中設定所有的下邊框屬性。	1
border-bottom-color	設定下邊框的顏色。	2
border-bottom-style	設定下邊框的樣式。	2
border-bottom-width	設定下邊框的寬度。	1
border-color	設定四條邊框的顏色。	1
border-left	在一個聲明中設定所有的左邊框屬性。	1
border-left-color	設定左邊框的顏色。	2
border-left-style	設定左邊框的樣式。	2
border-left-width	設定左邊框的寬度。	1
border-right	在一個聲明中設定所有的右邊框屬性。	1
border-right-color	設定右邊框的顏色。	2
border-right-style	設定右邊框的樣式。	2
border-right-width	設定右邊框的寬度。	1
border-style	設定四條邊框的樣式。	1
border-top	在一個聲明中設定所有的上邊框屬性。	1
border-top-color	設定上邊框的顏色。	2
border-top-style	設定上邊框的樣式。	2
border-top-width	設定上邊框的寬度。	1
border-width	設定四條邊框的寬度。	1
outline	在一個聲明中設定所有的輪廓屬性。	2
outline-color	設定輪廓的顏色。	2
outline-style	設定輪廓的樣式。	2
outline-width	設定輪廓的寬度。	2

1、圖示：

code eg:

body {
      margin-top:100px;
      margin-right:40px;
      margin-bottom:10px;
      margin-left:70px;
}
2、border-style

 

 

 

CSS 文字屬性（Text）

屬性	描述	CSS
color	設定文本的顏色。	1
direction	規定文本的方向 / 書寫方向。	2
letter-spacing	設定字元間距。	1
line-height	設定行高。	1
text-align	規定文本的水平對齊。	1
text-decoration	規定添加到文本的裝飾效果。	1
text-indent	規定文字區塊首行的縮排。	1
text-shadow	規定添加到文本的陰影製作效果。	2
text-transform	控制文本的大小寫。	1
unicode-bidi	設定文本方向。	2
white-space	規定如何處理元素中的空白。	1
word-spacing	設定單詞間距。	1

CSS 字型屬性（Font）

屬性	描述	CSS
font	在一個聲明中設定所有字型屬性。	1
font-family	規定文本的字型系列。	1
font-size	規定文本的字型尺寸。	1
font-size-adjust	為元素規定 aspect 值。	2
font-stretch	收縮或展開當前的字型系列。	2
font-style	規定文本的字型樣式。	1
font-variant	規定文本的字型樣式。	1
font-weight	規定字型的粗細。	1

說明：

1、字型族名稱（family-name）

字型族名稱（通常所說的“字型”），包括“Arial”、“Times New Roman”、“宋體”、“黑體”等等。

族類（generic family）

一個族類是一組具有統一外觀的字型族。sans-serif就是一例，它代表一組沒有“腳”的字型。

如：

2、font-style定義所選字型的顯示樣式：normal（正常）、italic（斜體）或oblique（傾斜）。

3、font-variant（字型變化）的值可以是：normal（正常）或small-caps（小體大寫字母），small-caps字型是一種以小尺寸顯示的大寫字母來代替小寫字母的字型。

4、font-weight指定字型顯示的濃淡程度。其值可以是normal（正常）或bold（加粗）。

5、font-size字型大小，後面兩種可以隨著瀏覽器改變字型大小。 
   h1 {font-size: 30px;}
  h2 {font-size: 12pt;}
  h3 {font-size: 120%;}
  p {font-size: 1em;}


font屬性的值應按以下次序書寫：

font-style | font-variant | font-weight | font-size | font-family

 

CSS 外邊距屬性（Margin）

屬性	描述	CSS
margin	在一個聲明中設定所有外邊距屬性。	1
margin-bottom	設定元素的下外邊距。	1
margin-left	設定元素的左外邊距。	1
margin-right	設定元素的右外邊距。	1
margin-top	設定元素的上外邊距。	1

CSS 內邊距屬性（Padding）

屬性	描述	CSS
padding	在一個聲明中設定所有內邊距屬性。	1
padding-bottom	設定元素的下內邊距。	1
padding-left	設定元素的左內邊距。	1
padding-right	設定元素的右內邊距。	1
padding-top	設定元素的上內邊距。	1

CSS 列表屬性（List）

屬性	描述	CSS
list-style	在一個聲明中設定所有的列表屬性。	1
list-style-image	將圖象設定為清單項目標記。	1
list-style-position	設定清單項目標記的置放位置。	1
list-style-type	設定清單項目標記的類型。	1
marker-offset		2

內容產生（Generated Content）

屬性	描述	CSS
content	與 :before 以及 :after 虛擬元素配合使用，來插入產生內容。	2
counter-increment	遞增或遞減一個或多個計數器。	2
counter-reset	建立或重設一個或多個計數器。	2
quotes	設定嵌套引用的引號類型。	2

CSS 尺寸屬性（Dimension）

屬性	描述	CSS
height	設定元素高度。	1
max-height	設定元素的最大高度。	2
max-width	設定元素的最大寬度。	2
min-height	設定元素的最小高度。	2
min-width	設定元素的最小寬度。	2
width	設定元素的寬度。	1

CSS 定位屬性（Positioning）

屬性	描述	CSS
bottom	設定定位元素下外邊距邊界與其包含塊下邊界之間的位移。	2
clear	規定元素的哪一側不允許其他浮動元素。	1
clip	剪裁絕對位置元素。	2
cursor	規定要顯示的游標的類型（形狀）。	2
display	規定元素應該產生的框的類型。	1
float	規定框是否應該浮動。	1
left	設定定位元素左外邊距邊界與其包含塊左邊界之間的位移。	2
overflow	規定當內容溢出元素框時發生的事情。	2
position	規定元素的定位類型。	2
right	設定定位元素右外邊距邊界與其包含塊右邊界之間的位移。	2
top	設定定位元素的上外邊距邊界與其包含塊上邊界之間的位移。	2
vertical-align	設定元素的垂直對齊。	1
visibility	規定元素是否可見。	2
z-index	設定元素的堆疊順序。	2

CSS 列印屬性（Print）

屬性	描述	CSS
orphans	設定當元素內部發生分頁時必須在頁面底部保留的最少行數。	2
page-break-after	設定元素後的分頁行為。	2
page-break-before	設定元素前的分頁行為。	2
page-break-inside	設定元素內部的分頁行為。	2
widows	設定當元素內部發生分頁時必須在頁面頂部保留的最少行數。	2

CSS 表格屬性（Table）

屬性	描述	CSS
border-collapse	規定是否合并表格邊框。	2
border-spacing	規定相鄰儲存格邊框之間的距離。	2
caption-side	規定表格標題的位置。	2
empty-cells	規定是否顯示表格中的空儲存格上的邊框和背景。	2
table-layout	設定用於表格的布局演算法。	2