HTML5學習筆記（十）：CSS常用操作

標籤：apt   控制   idt   其他   高度   效果   css   外邊距   int   

對齊

在 CSS 中，可以使用多種屬性來水平對齊元素。

水平對齊

使用 margin 屬性來水平對齊，可通過將左和右外邊距設定為 "auto"，來對齊塊元素。

把左和右外邊距設定為 auto，規定的是均等地分配可用的外邊距。結果就是置中的元素：

.center {margin-left:auto;margin-right:auto;width:70%;background-color:#b0e0e6;}

也可以簡寫為，這裡把上下的外邊距設定為0：

.center {margin:0 auto;}

左靠右對齊使用絕對位置

對齊元素的方法之一是使用絕對位置：

.right {  position:absolute;  right:0px;  width:300px;  background-color:#b0e0e6;}

注釋：絕對位置元素會被從正常流中刪除，並且能夠交疊元素。

使用浮動

對齊元素的另一種方法是使用 float 屬性：

.right {  float:right;  width:300px;  background-color:#b0e0e6;}

尺寸

CSS 尺寸屬性允許你控制元素的高度和寬度。

• height：設定元素的高度。
• line-height：設定行高。
• max-height：設定元素的最大高度。
• max-width：設定元素的最大寬度。
• min-height：設定元素的最小高度。
• min-width：設定元素的最小寬度。
• width：設定元素的寬度。

分類

CSS 分類屬性允許你控制如何顯示元素，設定映像顯示於另一元素中的何處，相對於其正常位置來定位元素，使用絕對值來定位元素，以及元素的可見度。

• clear：設定一個元素的側面是否允許其他的浮動元素。
• cursor：規定當指向某元素之上時顯示的指標類型。
• display：設定是否及如何顯示元素。
• float：定義元素在哪個方向浮動。
• position：把元素放置到一個靜態、相對的、絕對的、或固定的位置中。
• visibility：設定元素是否可見或不可見。

clear

clear 屬性定義了元素的哪邊上不允許出現浮動元素。

• left：在左側不允許浮動元素。
• right：在右側不允許浮動元素。
• both：在左右兩側均不允許浮動元素。
• none：預設值。允許浮動元素出現在兩側。
• inherit：規定應該從父元素繼承 clear 屬性的值。

cursor

cursor 屬性規定要顯示的游標的類型（形狀）。

• url：需使用的自訂游標的 URL。注釋：請在此列表的末端始終定義一種普通的游標，以防沒有由 URL 定義的可用游標。
• default：預設游標（通常是一個箭頭）
• auto：預設。瀏覽器設定的游標。
• crosshair：游標呈現為十字線。
• pointer：游標呈現為指示連結的指標（一隻手）
• move：此游標指示某對象可被移動。
• e-resize：此游標指示矩形框的邊緣可被向右（東）移動。
• ne-resize：此游標指示矩形框的邊緣可被向上及向右移動（北/東）。
• nw-resize：此游標指示矩形框的邊緣可被向上及向左移動（北/西）。
• n-resize：此游標指示矩形框的邊緣可被向上（北）移動。
• se-resize：此游標指示矩形框的邊緣可被向下及向右移動（南/東）。
• sw-resize：此游標指示矩形框的邊緣可被向下及向左移動（南/西）。
• s-resize：此游標指示矩形框的邊緣可被向下移動（南）。
• w-resize：此游標指示矩形框的邊緣可被向左移動（西）。
• text：此游標指示文本。
• wait：此游標指示程式正忙（通常是一隻表或沙漏）。
• help：此游標指示可用的協助（通常是一個問號或一個氣球）。

display

display 屬性規定元素應該產生的框的類型。

• none：此元素不會被顯示。
• block：此元素將顯示為區塊層級元素，此元素前後會帶有分行符號。
• inline：預設。此元素會被顯示為內嵌元素，元素前後沒有分行符號。
• inline-block：行內塊元素。（CSS2.1 新增的值）
• list-item：此元素會作為列表顯示。
• run-in：此元素會根據上下文作為區塊層級元素或內嵌元素顯示。
• compact：CSS 中有值 compact，不過由於缺乏廣泛支援，已經從 CSS2.1 中刪除。
• marker：CSS 中有值 marker，不過由於缺乏廣泛支援，已經從 CSS2.1 中刪除。
• table：此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有分行符號。
• inline-table：此元素會作為內聯表格來顯示（類似 <table>），表格前後沒有分行符號。
• table-row-group：此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。
• table-header-group：此元素會作為一個或多個行的分組來顯示（類似 <thead>）。
• table-footer-group：此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。
• table-row：此元素會作為一個表格行顯示（類似 <tr>）。
• table-column-group：此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。
• table-column：此元素會作為一個儲存格列顯示（類似 <col>）
• table-cell：此元素會作為一個表格儲存格顯示（類似 <td> 和 <th>）
• table-caption：此元素會作為一個表格標題顯示（類似 <caption>）
• inherit：規定應該從父元素繼承 display 屬性的值。

visibility

visibility 屬性規定元素是否可見。

提示：即使不可見的元素也會佔據頁面上的空間。請使用 "display: none" 屬性來建立不佔據頁面空間的隱藏元素。

• visible：預設值，元素是可見的。
• hidden：元素是不可見的。
• collapse：當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。
• inherit：規定應該從父元素繼承 visibility 屬性的值。

映像透明度

定義透明效果的 CSS3 屬性是 opacity。

請看下面的 CSS：

img {  opacity:0.4;  filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */}

IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設定透明度。opacity 屬效能夠設定的值從 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。

下面我們看一個效果，圖片滑鼠移入時不透明：

img {  opacity:0.4;  filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */}img:hover {  opacity:1.0;  filter:alpha(opacity=100); /* 針對 IE8 以及更早的版本 */}

 

HTML5學習筆記（十）：CSS常用操作