曝光臺(tái) 注意防騙
網(wǎng)曝天貓店富美金盛家居專營店坑蒙拐騙欺詐消費(fèi)者
VERSE { color: WindowText; background-color: Window }
XML 實(shí)用大全
第 430 頁
表13-2 與所有顏色有關(guān)的屬性一起使用的其他系統(tǒng)顏色
系統(tǒng)顏色關(guān)鍵字 含義
ActiveBorder 活動(dòng)窗口邊框
ActiveCaption 活動(dòng)窗口標(biāo)題
Appworkspace 多文檔界面的背景色
Background 桌面背景色
BottonFace 三維顯示元素的外觀顏色
XML 實(shí)用大全
第 431 頁
13.5 框
當(dāng)使用CSS 來格式化一文檔及其內(nèi)容時(shí)，需要用到框。框具有邊界和大小，用于存放元素的內(nèi)容。這些框堆疊在一起并可互
相覆蓋，以便根據(jù)樣式單的規(guī)則，以有序的方式對(duì)齊元素的內(nèi)容。CSS2 給框添加了新的輪廓（outline）屬性，使框能夠定
位在頁面、其他框或窗口上的絕對(duì)位置處。
13.5.1 輪廓屬性
CSS2 能夠?qū)⑤喞尤氲綄?duì)象中。輪廓很像邊框，但輪廓是繪在框之上的。其寬度不加到框?qū)挾壬稀４送猓绻鸆SS 元素是
非矩形的（不大可能），在此元素周圍的輪廓也將是非矩形的。由于輪廓不必一定是矩形的，所以不能分別設(shè)置左、右、頂
和底輪廓，只能一次改變整個(gè)輪廓。
13.5.1.1 輪廓樣式屬性
outline-style 屬性設(shè)置整個(gè)框的輪廓樣式，它起的作用如同CSS1 中的border-style 屬性，并且具有同樣的11 個(gè)值，其
含義也相同：
1．none：無線條
2．hidden：使線條不可見，但仍占據(jù)空間
3．dotted：點(diǎn)線
4．dashed：虛線
5．solid：實(shí)線
6．double：雙實(shí)線
7．grooved：凹槽線，好像埋入頁面
8．ridge：凸紋線，好像突出頁面
9．inset：嵌入線，整個(gè)對(duì)象（不僅僅是輪廓線）像是推入到文檔里面
10．outset：外置線，整個(gè)對(duì)象（不僅僅是輪廓線）像是推出文檔
11．inherit：使用父類的值
下列三條規(guī)則設(shè)置TITLE、AUTHOR 和REFRAIN 元素的輪廓樣式：
TITLE { outline-style: solid }
AUTHOR { outline-style: outset }
REFRAIN {outline-style: dashed }
XML 實(shí)用大全
第 432 頁
13.5.1.2 輪廓寬度屬性
outline-width 屬性的作用像第12 章討論的margin-width 和border-width 屬性一樣，可使用無符號(hào)的長度或下列三個(gè)關(guān)
鍵字之一來設(shè)置框的輪廓寬度：
1．thin：大約0.5 到0. 75 磅
2．medium：大約1 磅
3．thick：大約1.5 到2 磅
例如下面的這條規(guī)則給STANZA 加上一條粗輪廓線，給VERSE 加上一條細(xì)輪廓線。
STANZA { outline: thick }
VERSE { outline: thin }
13.5.1.3 輪廓顏色屬性
outline-color 屬性設(shè)置元素框的輪廓顏色。一般地說，這種設(shè)置既可以使用顏色名（如red），也可以使用RGB 顏色（如
#FF0000）。但是，還有關(guān)鍵字值invert，此值反轉(zhuǎn)屏幕的像素顏色（黑色變成白色，反之亦然）。
TITLE { outline color: #FFCCCC;
outline-style: inset;
outline width: thick }
AUTHOR { outline color: #FF33CC }
VERSE { outline-color: invert }
13.5.1.4 輪廓簡略屬性
outline 屬性是簡略屬性，它設(shè)置容器框的所有四個(gè)邊的輪廓寬度、顏色和樣式。例如：
STANZA { outline: thin dashed red }
VERSE { outline: inset }
13.5.2 定位屬性
CSS2 對(duì)文檔中每個(gè)對(duì)象的位置提供了多種控制方法。可以把特定的對(duì)象或?qū)ο蟮奶囟愋桶磳臃胖谩Ｃ繉优c其他層無關(guān)，
可獨(dú)立移動(dòng)。position 屬性確定對(duì)象如何排列，可使用下列四個(gè)關(guān)鍵字值之一：
1．static：缺省的布局
2．relative：對(duì)象偏移其靜態(tài)位置
XML 實(shí)用大全
第 433 頁
3．a(chǎn)bsolute：相對(duì)于包含對(duì)象的框，將對(duì)象放置在特定的位置
4．fixed：對(duì)象放在窗口或頁面的特定位置
13.5.2.1 相對(duì)定位（relative positioning）
編排文檔時(shí)，格式化標(biāo)識(shí)符根據(jù)對(duì)象和文本的正常信息流（flow），選擇項(xiàng)目的位置。實(shí)際上，這就是對(duì)象缺省的靜態(tài)格式
化，大多數(shù)文檔創(chuàng)作者都使用這種方法來編排文檔。編排文檔完成之后，對(duì)象相對(duì)于當(dāng)前位置可能會(huì)發(fā)生偏移。這種對(duì)象位
置的調(diào)整就是所謂的相對(duì)定位。使用相對(duì)定位，改變對(duì)象的位置，對(duì)其后的對(duì)象沒有任何影響。由于相對(duì)定位的框完全保持
其正常的信息流的大小和間隔，因此，框可以交疊。
將position 屬性設(shè)置為relative，可生成一個(gè)相對(duì)定位的對(duì)象。其偏移量可由left、right、top 和bottom 屬性來控制。
使用JavaScript 來改變這些屬性，甚至可以在文檔上移動(dòng)對(duì)象和層。可以使影像或文本移動(dòng)、出現(xiàn)或消失、或中途改變。
例如，下面的這條規(guī)則將TITLE 元素從正常的位置向上移動(dòng)50 像素，向左移動(dòng)65 像素。
TITLE { position: relative; top: 50px; left: 65px }
13.5.2.2 絕對(duì)定位（Absolute Positioning）
絕對(duì)定位元素參照包含它的塊來放置。它可為它包含的框建立一個(gè)新的包含塊。絕對(duì)定位元素的內(nèi)容不會(huì)在其他框周圍流動(dòng)。
這樣可能會(huì)使它們?cè)斐娠@示在文檔中的其他框的內(nèi)容模糊不清。絕對(duì)定位元素對(duì)其后同屬的出現(xiàn)順序無任何影響，所以跟在
絕對(duì)定位元素后面的元素所產(chǎn)生的效果，就如同絕對(duì)定位元素不在此處一樣。
AUTHOR { position: absolute; top: 60px; left: 140px }
13.5.2.3 精確定位（Fixed Positioning）
具有固定位置的元素相對(duì)于其顯示窗口或頁面的坐標(biāo)放置。如果正在查看由連續(xù)媒體組成的文檔，那么當(dāng)此文檔滾動(dòng)時(shí)，被
固定的框就不會(huì)移動(dòng)。如果被固定的框處于分頁媒體上，那它總是會(huì)出現(xiàn)在每頁的末尾。這樣就能夠把頁腳或頁眉放在文檔
上，或?qū)⒑灻旁谝幌盗兄挥幸豁摷埖男偶哪┪病＠纾旅娴囊?guī)則，以將REFRAIN 元素的左上角放在距顯示窗口（或打
印的紙張）左上角往下300 像素、往右140 像素的地方。
REFRAIN { position: fixed; top: 300px; left: 140px }
13.5.2.4 使用z-index 屬性來層疊元素
z-index 屬性控制定位框的層疊順序。要改變?nèi)笔〉膠-index 值，可將z-index 設(shè)置為整數(shù)（如2）。有較大z-index 值的
中國航空網(wǎng) www.k6050.com
航空翻譯 www.aviation.cn
本文鏈接地址：
XML實(shí)用大全(122)
