3.4、邊框屬性
3.5、鼠標光標屬性
3.6、定位屬性
3.7、區塊屬性
3.8、列表屬性
3.3.4、邊框屬性
不同方向的邊框屬性如表所示：
| 邊框屬性 |
描述 |
| border |
邊框 |
| border-top |
上邊框 |
| border-left |
左邊框 |
| border-right |
右邊框 |
| border-bottom |
下邊框 |
對于邊框的樣式，可以按照下表中所示進行設置：
| 邊框樣式屬性值 |
描述 |
| none |
無邊框 |
| dotted |
邊框由點組成 |
| dash |
邊框由短線組成 |
| solid |
邊框是實線 |
| double |
邊框是雙實線 |
| groove |
邊框帶有立體感的溝槽 |
| ridge |
邊框成脊型 |
| inset |
邊框內嵌一個立體邊框 |
| outset |
邊框外嵌一個立體邊框 |
范例文件：13-18.htm
1 <!-- ------------------------------ -->
2 <!-- 文件范例：13-18.htm -->
3 <!-- 文件說明：CSS邊框 -->
4 <!-- ------------------------------ -->
5 <HTML>
6 <HEAD>
7 <TITLE>CSS背景圖像位置</TITLE>
8 <Style Type="text/css">
9 <!--
10 P{
11 border-top: 2px solid #990000;
12 border-right: 2px solid #3399FF;
13 border-bottom: 2px solid #00FF33;
14 border-left: 2px solid #CC33FF;
15 }
16 -->
17 </Style>
18 </HEAD>
19 <BODY>
20 <H1>主流的網頁設計軟件</H1>
21 <p>目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
22 </BODY>
23 </HTML>
文件說明：
第10～15行分別設定了上、右、下、左4個邊框的寬度、邊框樣式和顏色。
顯示結果：
3.4.5、鼠標光標屬性
| 鼠標光標屬性值 |
描述 |
| hand |
手 |
| crosshair |
交叉十字 |
| text |
文本選擇符號 |
| wait |
Windows 的沙漏形狀 |
| default |
默認的鼠標形狀 |
| help |
帶問號的鼠標 |
| e-resize |
向東的箭頭 |
| ne-resize |
指向東北方的箭頭 |
| n-resize |
向北的箭頭 |
| nw-resize |
指向西北方的箭頭 |
| w-resize |
向西的箭頭 |
| sw-resize |
指向西南方的箭頭 |
| s-resize |
向南的箭頭 |
| se-resize |
指向東南方的箭頭 |
范例文件：13-19.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-19.htm -->
<!-- 文件說明：CSS鼠標光標屬性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS鼠標光標屬性</TITLE>
<Style Type="text/css">
<!--
Body{
CURSOR:CROSSHAIR
}
IMG{
Cursor:help
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網頁設計軟件</H1>
<img src=13-19.jpg align=left>
<P>目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</P>
</BODY>
</HTML>
顯示結果：
3.4.6、定位屬性
| 定位屬性 |
描述 |
| position |
“absolute”（絕對定位）、“relative”（相對定位） |
| top |
層距離頂點縱坐標的距離 |
| left |
層距離頂點橫坐標的距離 |
| width |
層的寬度 |
| height |
層的高度 |
| z-index |
決定層的先后順序和覆蓋關系，值高的元素會覆蓋值比較低的元素 |
| clip |
限定只顯示裁切出來的區域，裁切出的區域為矩形。只要設定兩個點即可，一個是矩形左上角的頂點，由top和right兩項的設置完成，另一個是右下角的頂點，由bottom和 right 兩項設置完成 |
| overflow |
當層內的內容超出層所能容納的范圍時：
visible：層的大小、內容都會顯示出來
hidden：會隱藏超出層大小的內容
scrol：不管內容是否超出層的范圍，選中此項都會為層添加滾動條
auto：只在內容超出層的范圍時才顯示滾動條
|
| visibility |
這一項是針對嵌套層的設置，嵌套層是插入在其他層中的層，分為嵌套的層（子層）和被嵌套的層（父層）
inherit：子層繼承父層的可見性，父層可見，子層也可見；父層不可見，子層也不可見
visible：無論父層可見與否，子層都可見
hidden：無論父層可見與否，子層都隱藏
|
范例文件：13-20.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-20.htm -->
<!-- 文件說明：CSS定位屬性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS定位屬性</TITLE>
<Style Type="text/css">
<!--
.self{
position:absolute;
top:80px;
left:50px;
width:300px;
height:100px;
overflow:auto;
background-color:#336699;
color:#FFFFFF;
z-index:1;
visibility:visible;
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網頁設計軟件</H1>
<div class="self">目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</div>
</BODY>
</HTML>
顯示結果：
3.4.7、區塊屬性
| 區塊屬性 |
描述 |
| width |
設定對象的寬度 |
| height |
設定對象的高度 |
| float |
讓文字環繞在一個元素的四周 |
| clear |
指定在某一個元素的某一邊是否允許有環繞的文字或對象 |
| padding |
決定了究竟在邊框與內容之間應該插入多少空間距離，它有4個屬性，分別是：top、bottom、left、right，分別用于設定上下左右的填充距離 |
| margin |
設置一個元素在4個方向上與瀏覽器窗口邊界或上一級元素的邊界的距離。與“padding”類似，它也有上下左右4個屬性，分別控制4個方向 |
范例文件：13-21.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-21.htm -->
<!-- 文件說明：CSS區塊屬性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS區塊屬性</TITLE>
<Style Type="text/css">
<!--
.self{
width:300px;
height:100px;
MARGIN-TOP: 20PX;
MARGIN-RIGHT: 30PX;
MARGIN-BOTTOM: 20PX;
MARGIN-LEFT: 30PX
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網頁設計軟件</H1>
<div class=self>目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文本了，人們現在追求的是網頁的動態效果和交互性。而Macromedia公司的網頁設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網頁設計的杰出代表，其最新版本MX繼承了前期版本的優點，進行了功能的進一步整合，非常適合于網頁設計和網站建設的需要。</div>
</BODY>
</HTML>
顯示結果：
3.4.8、列表屬性
| 列表屬性 |
描述 |
| list-style-type |
設定引導列表選項的符號類型 |
| bullet |
選擇圖像作為項目的引導符號 |
| position |
決定列表項目縮進的程度，outside：列表貼近左側邊框；inside：列表縮進 |
| 列表符號類型屬性值 |
描述 |
| disc |
在文本行前面加“●”實心園 |
| circle |
在文本行前面加“○”空心園 |
| square |
在文本行前面加“■”實心方塊 |
| decimal |
在文本行前面加普通的阿拉伯數字 |
| lower-roman |
在文本行前面加小寫羅馬數字 |
| upper-roman |
在文本行前面加大寫羅馬數字 |
| lower-alpha |
在文本行前面加小寫英文字母 |
| upper-alpha |
在文本行前面加大寫英文字母 |
| none |
不顯示任何項目符號或編號 |
范例文件：13-22.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-22.htm -->
<!-- 文件說明：CSS列表屬性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS列表屬性</TITLE>
<Style Type="text/css">
<!--
li{
list-style-type:upper-roman;
}
-->
</Style>
</HEAD>
<BODY>
<H2>圖像設計軟件</H2>
<OL>
<LI>Photoshop</LI>
<LI>Illustrator</LI>
<LI>Freehand</LI>
<LI>CorelDraw</LI>
</OL>
</BODY>
</HTML>
顯示結果：
posted on 2007-10-08 17:18
CoderDream 閱讀(4209)
評論(2) 編輯 收藏 所屬分類:
CSS