1、4Chuzhou University.Anhui,ChinaHTTP:/4Chuzhou University.Anhui,ChinaHTTP:/HTTP:/第10講css樣式續Chuzhou University.Anhui,China4Chuzhou University.Anhui,ChinaHTTP:/4Chuzhou University.Anhui,ChinaHTTP:/本講內容4Chuzhou University.Anhui,ChinaHTTP:/4Chuzhou University.Anhui,ChinaHTTP:/css語法css編寫規則顯示屬性display css對

2、文本的格式化主要顯示在顯示器和打印 機上，在CSS中，display用來設置元素內容在 屏幕上的顯示形狀，如成塊、成行貨其他方 式HTTP:/3顯示屬性displayXML文檔被顯示在矩形區域中，-些重要的布局屬件及其屬性值如 下：display :描述矩形區域的顯示方法 block 元素作為新的一段，顯示在新的一行上 inline一行級元索，顯示時不產牛新塊，跟隨前面定義的塊級元索 list-item 以列表形式顯示一 list-style-type: disc,circle,square,decimal table一 inline-tabletable ow一 table-columnta

3、ble-captionnone 不顯示元索4Chuzhou University.Anhui,ChinaHTTP:/A法 mTs-ylcsbcct hrclr.goosoodvAooavJ3nev*$amevi AalcrialvsQmahrriaiv - 72/9SA/slzcv|42OQvaoodvoodv;Mnev?material V5O%s420/priccv4OOJVBmcyf一c/namcynMC2.I*sc/mmcrgvANhv lcn-c V 二 5AoodvcramcvB/nmcvmxc3.v-fi込 Ki-c/matcriAlv 7W2A/K.ZCViccv342/pri

4、arv/vaoMKv0J 1Chuzhou u2nhuLchinaHTTP、w w w ch zu e duhn6goods (disppyo-ock;widt=r300;heighn200; background-coonsi-vcn一gooddispcry&locrnampmareriaksizppricedisplay :=in3 fontfami w*妄遙$;fonTsizc 二 2PX-0J 1Chuzhou u2nhuLchinaHTTP、w w w ch zu e duhn建 Ztextarea.css textarea舉例2HTTP:/舉例2建 vltextarea.xml 內

5、容一內容二內容三 display:block; backgroundcolor:#c()c()(X); width:3OO;textlistf display:list-item; list-sty le-type:disc; fonl-tamily: 體： font-size:20px; text-align:left; text-indent:2em;#Chuzhou University“Anhui,ChinaHTTP:/#Chuzhou Univer引ty“Anhui,ChinaHTTP:/width , height :描述矩形區域的寬度和高度- in 英寸- cm 厘米一 mm 毫

6、米一 pt 點(points , 1/72 inch)- px 象素(pixels)HTTP:/9顏色與背景使用英文單詞女 U:auqa,navy,silver,olive,teal,purple,maroon,fuc hsia,lime使用RGB函數如 rgb(255,O,O) rgb(O,O,O) rgb(255,255,255) 顏色組合十六進制代碼#ffOOOO #OOOOff 等#Chuzhou Univer引ty“Anhui,ChinaHTTP:/Chuzhou UniversitynhuiXnaHTTP:/goodsdisplay :table;width:300;height:

7、200;background-color: silver;name color:blue;font:20px;或11name color:rgb(0,0,255);font:20px;或 name color:#0000ff;font:20px;HTTP:/Chuzhou UniversitynhuiXna背景 background-color background-image使用background對前面兩種屬性概括 舉例 goods background:url(back.gif);Chuzhou UniversitynhuiXnaHTTP:/字體與文本 font-family 字體族#C

8、huzhou University.Anhui,ChinaHTTP:/title font-family:宋體，楷休，黑體 font-style 體樣式 font-weight 字體粗細:normahbold?bolderjighter font是對上述字體屬性的概括，可以代表上 面所有屬性 name font-size: 12pt type font-size: largerdate font-size: 150% size font-size: 1.5em#Chuzhou University.Anhui,ChinaHTTP:/文本屬性首行縮進16Chuzhou University“An

9、hiii,ChindHTTP: . 5 text-align:對齊方式HTTP: . 515 text-decoration： underline overline用CSS設計頁面Chuzhou例6.9、例6.10的XML文檔及對應的CSS文檔; 例6.11 （對book和tille設置了背景色）16Chuzhou University“Anhiii,ChindHTTP: . 5用css設計頁面20Chuzhou Univer引ty“Anhui,ChinaHTTP: 杯可以css中的樣式規則包含了許多樣式屬性, 控制字體，

10、顏色，對齊，空白等。樣式屬性可以分為兩種主要類型：布局屬性：影響XML內容的顯示位置，如內容的 顯示位置，寬度，對齊等；格式屬性：控制XML內容的外觀，如邊界，字體 等。HTTP:/元素定位(position)元素的定位方式分為相對定位和絕對定位兩種。相對定位，即元素根據自c原始位置作相對位移。而其 周圍的元素并不受影響。如：titledisplay : block;font-family : Arial, Helvetica, sans-serif;font-size : 25px;color : #191970;background-color : #A9A9A9;position : r

11、elative;left:100px;top:20px;元素定位(position)該CSS文檔在對litle元素定義樣式時，增加了對title 元素的位置設置。title元素相對丁-原位置向左偏移1 OOpx, 向上偏移20pxo可以看到，此時title重疊在了下面的元 素上。除了通過“left和“top設置左移和上移的距離 外，還可以設置“bottom”和“nght屬性，控制下移和 右移的距離。下圖顯示了部分輸出結果：HTTP: 杯19元素定位(position)20Chuzhou Univer引ty“Anhui,ChinaHTTP: 杯20Chuzhou Univer引ty“Anhui,

12、ChinaHTTP: 杯Xavier MichReading XMLPeachpit Press Berkley 2001 0-201-718922-6 24 95 An uq to the minute book on extensible Markup Language, which Includes chapters ori all aspects ofXML including DTDs. XML Schema.XSLT and XPaths. style sheets, XLink and XPoinlerHerbert TreReadinHTMLApplepit Press New

13、 York 2001 0-201-713322-6 27 95An up to the second book on HyperText Markup Lanquaqe. The book includes chapters on all aspects of HTML includ ng tags, tables, frames, graphic design and page layout.20Chuzhou Univer引ty“Anhui,ChinaHTTP: 杯還可以修改上面的css,將定位方式設置為絕對定位, 如：titledisplay : block;font-family :

14、Arial, Helvetica, sans-serif; font-size : 25px;color: #191970;background-color : #A9A9A9;position : absolute;left:100px;top:20px;Chuzhou UniversityAnhuiXnaHTTP:/21Xavier ML A Hurried Returni eschpitiAn up to the minute book on extensible Markup Language, v4iichA Hurried Return6 24.95inc udes chapter

15、s on all aspects of XML including DTDs, XML Schema.XSLT and XPaths, style sheets, XLink and XPointer.Herbert Trevor Michael LongApplepit Press New York 2001 0-201-713322-6 27.95An up to the second book on HyperTe: left/right；四個數值分別代表top、right、bottomleftpadding-top , padding-light, padding-bottom , p

16、adding-left padding :石義與margin類似border:可用border屬性統設胃,或用 border-top . border-left屬 性分別設置。#Chuzhou University,Anhui,ChinaHTTP:/border屬性如下:border-width :所有邊界的寬度 border-color :所有邊界的顏色 border-style :所有邊界的樣式，取值冇solid , double , dashed、dotted .groove , ridge , outset, none（缺省值j border :設逍所有邊界為相I可寬度，顏色，樣式 b

17、order-left:設置左邊界 border-right:設置右邊界 border-top :設置上邊界 border-bottom :設置卜邊界 border-width : 10px border-style : dotted k =border : 10px dotted black;border-color : black border-left: lOpx double redHTTP:/25環繞文本在css中，一個元素的文本可以環繞另一個 元素的文本，就像HTML中文本能環繞圖片 一樣。示例： 參見例6.16的XML丈檔對應的CSS文檔（例6.17）#Chuzhou Univer

18、sityAnhui,ChinaHTTP:/圖片通過使用CSS,可以在XML中引入圖片（在 XML文檔中，沒有提供一種受到廣泛支持的方 法來鏈接圖片）。27Chuzhou字體字體的設置包括字形、字號和顏色。在定義字體時， 最好在字襪列表的后而設定字體家族（font family）,以防 萬一所設的字體在客戶的計算機上未被安裝。例如：HTTP:/具體方法：修改XML文檔，使其包含一個picture元素，用該元素處理圖片信息。picture7C素的id屬性用來在CSS中鏈接并輸出相應的圖片（參見例6.18的XML文檔和例6.19的CSS文檔）font-family : Arial, Helvetica, sans-serif;font-size : 20px;color : #5F9EA0;也可以用一種在頁面中嵌入字體的機制，即可使用一 種未被安裝的字體。這需要提供一個指向該字體文件的 URL,然后下載該文件，就可以在頁面上正確顯示該字體。 IE要求字體文件以“.eot形式存放，（參見例6