CSS 對齊
CSS 尺寸
CSS 分類
CSS 導(dǎo)航欄
CSS 圖片庫
CSS 圖片透明
CSS 媒介類型
CSS 注意事項(xiàng)
CSS 總結(jié)

CSS對齊

使用margin屬性水平對齊

可通過將左和右外邊距設(shè)置為 "auto"，來對齊塊元素。
把左和右外邊距設(shè)置為 auto，規(guī)定的是均等地分配可用的外邊距等缀。結(jié)果就是居中的元素：

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

使用 position 屬性進(jìn)行左和右對齊

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

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

使用 float 屬性來進(jìn)行左和右對齊

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

實(shí)例

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

CSS尺寸

CSS 尺寸屬性
CSS 尺寸屬性允許你控制元素的高度和寬度。同樣，還允許你增加行間距哀九。

CSS 分類

改變光標(biāo)

    <p>請把鼠標(biāo)移動到單詞上岭洲，可以看到鼠標(biāo)指針發(fā)生變化：</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>

CSS 分類屬性允許你控制如何顯示元素，設(shè)置圖像顯示于另一元素中的何處坎匿，相對于其正常位置來定位元素盾剩，使用絕對值來定位元素，以及元素的可見度替蔬。

CSS 導(dǎo)航條

制作水平或豎直導(dǎo)航條

CSS 圖片庫

CSS 圖片透明

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

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


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

CSS媒介類型

媒介類型(Media Types)允許你定義以何種媒介來提交文檔。文檔可以被顯示在顯示器襟衰、紙媒介或者聽覺瀏覽器等等贴铜。

@media規(guī)則

@media 規(guī)則使你有能力在相同的樣式表中，使用不同的樣式規(guī)則來針對不同的媒介。

下面這個例子中的樣式告知瀏覽器在顯示器上顯示 14 像素的 Verdana 字體绍坝。但是假如頁面需要被打印徘意，將使用 10 個像素的 Times 字體。注意：font-weight 被設(shè)置為粗體轩褐，不論顯示器還是紙媒介：

<style>
@media screen
{
    p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
    p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
    p.test {font-weight:bold}
}
</style>

不同的媒介類型

注釋：媒介類型名稱對大小寫不敏感椎咧。