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相似,不再一一枚舉了。
十三.顯示控制樣式
基本格式如下:
display: 引數
引數取值範圍:
·block(預設):在物件前後都換行
·inline:在物件前後都不換行
·list-item:在物件前後都換行,增加了專案符號
·none:無顯示
十四.空白控制樣式
基本格式如下:
空白屬性決定如何處理元素內的空格。
white-space: 引數
引數取值範圍:
normal:把多個空格替換為乙個來顯示
pre:忠實地按輸入顯示空格
nowrap:禁止換行
但要注意的是,write-space也是乙個塊級屬性。
--系列完--
從基礎開始 CSS實用教程(三)
indent 2em 十二 控制box的樣式 樣式表規定了乙個容器box,它將要儲存乙個物件的所有可操作的樣式。包括了物件本身 邊框空白 物件邊框 物件間隙四個方面。1 邊框空白 margin 如圖所示,位於box模型的最外層,包括四項屬性。格式分別如下 margin top 頂部空白距離 marg...
礎開始 CSS實用教程 二
七 控制文字的樣式控制文字的樣式包括文字大小寫 文字修飾兩個部分。1 文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示 ...
CSS實用教程(二)
七 控制文字的樣式 控制文字的樣式包括文字大小寫 文字修飾兩個部分。1 文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示...