第10讲层叠样式表单(CSS)续.

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