從基礎開始 CSS實用教程（三）

indent: 2em">十二．控制box的樣式

樣式表規定了乙個容器box，它將要儲存乙個物件的所有可操作的樣式。包括了物件本身、邊框空白、物件邊框、物件間隙四個方面。

1．邊框空白（margin）

如圖所示，位於box模型的最外層，包括四項屬性。

格式分別如下：

·margin-top：頂部空白距離

·margin-right：右邊空白距離

·margin-bottom：底部空白距離

·margin-left：左邊空白距離

空白的距離可以用帶長度單位的數字表示。

如果使用上述屬性的簡化方式margin，可以在其後連續加上四個帶長度單位的數字，來分別表示margin-top、margin-right、margin-bottom、margin-left，每個數字中間要用空格分隔。

2．物件邊框（border）

如圖所示，位於邊框空白和物件空隙之間，包括了七項屬性。

格式分別如下：

·border-top：頂邊框寬度

·border-right：右邊框寬度

·border-bottom：底邊框寬度

·border-left：左邊框寬度

·border-width：所有邊框寬度

·border-color：邊框顏色

·border-style：邊框樣式引數

其中border-width可以一次性設定所有的邊框寬度，border-color同時設定四面邊框的顏色時，可以連續寫上四種顏色，並用空格分隔。上述連續設定的邊框都是按border-top、border-right、border-bottom、border-left的順序。

border-style相對別的屬性而言稍稍複雜些，因為它還包括了多個邊框樣式的引數：

·none：無邊框。

·dotted：邊框為點線。

·dashed：邊框為長**。

·solid：邊框為實線。

·double：邊框為雙線。

·groove：根據color屬性顯示不同效果的3d邊框

·ridge：根據color屬性顯示不同效果的3d邊框

·inset：根據color屬性顯示不同效果的3d邊框

·outset：根據color屬性顯示不同效果的3d邊框

3．物件間隙（padding）

如圖所示，位於物件邊框和物件之間，包括了四項屬性。

基本格式如下：

·padding-top：頂部間隙

·padding-right：右邊間隙

·padding-bottom：底部間隙

·padding-left：左邊間隙

和margin類似，padding也可以用padding一次性設定所有的物件間隙，格式也和margin相似，不再一一枚舉了。

從基礎開始 CSS實用教程（三）

indent 2em 十二 控制box的樣式 樣式表規定了乙個容器box，它將要儲存乙個物件的所有可操作的樣式。包括了物件本身 邊框空白 物件邊框 物件間隙四個方面。1 邊框空白 margin 如圖所示，位於box模型的最外層，包括四項屬性。格式分別如下 margin top 頂部空白距離 marg...

礎開始 CSS實用教程 二

七 控制文字的樣式控制文字的樣式包括文字大小寫 文字修飾兩個部分。1 文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫，而可以在輸入完畢後，再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示 ...

CSS實用教程（二）

七 控制文字的樣式 控制文字的樣式包括文字大小寫 文字修飾兩個部分。1 文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫，而可以在輸入完畢後，再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示...