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