第07讲 使用CSS显示XML

,*,软件学院,Arial,或,Frutiger 55 Roman 25pt,华文细黑简,25pt,Arial,或,Frutiger 55 Roman 25pt,华文细黑简,25pt,Arial,或,Frutiger 55 Roman 25pt,华文细黑简,25pt,Arial,或,Frutiger 55 Roman 25pt,华文细黑简,25pt,Arial,或,Frutiger 55 Roman 25pt,华文细黑简,25pt,Arial,或,Frutiger Bold 40pt,黑体简,40pt,XML,.Net,教研室,第,07,讲 使用,CSS,显示,XML,01 十月 2024,主讲：郭永洪,E-mail：yh_,目标,知识目标,CSS,文档结构,CSS,引用形式,CSS,选择符和属性,能力目标,学会编写,CSS,文档,学会使用,CSS,属性格式化显示,XML,01 十月 2024,任务,任务,1,：,XML,中引用,CSS,任务,2,：,CSS,选择符的使用,任务,3,：,CSS,文本属性的使用,任务,4,：,CSS,容器属性的使用,任务,5,：,CSS,布局属性的使用,01 十月 2024,Web,标准,01 十月 2024,1.,结构标准语言,XML,：用于网络数据转换和描述。,XHTML,：基于,XML,的标识语言，是,HTML,向,XML,的过渡。,2.,表现标准语言,CSS,：实现表现与结构分离。,3.,行为标准,DOM,：文档对象模型，网页与脚本或程序语言沟通的桥梁。,ECMAScript,：一种开放的、国际上广为接受的脚本语言规范，,JavaScript,是,ECMAScript,规范的一种实现。,CSS,（级联样式单）简介,01 十月 2024,发布组织：,W3C,（万维网联盟）,CSS1,：,1996,年公布的样式语言,CSS2,：,1998,年,W3C,公布了一个修订的,CSS,规范，包含了,CSS1,所有的特色和功能，并进行了完善。,CSS,利用简单的规则来控制,HTML,元素和,XML,元素在浏览器中的显示方式。,CSS,语法格式,01 十月 2024,选择符,属性,1:,属性值,1;,属性,2:,属性值,2,；,title,font-,family:Arial,sans,-serif;,/*,字体*,/,font-size:24px;,/*,字号*,/,color:#369;,/*,前景色*,/,XML,案例教程,任务,1,：,XML,中引用,CSS,01 十月 2024,案例,1-1,：内部,CSS,引用,01 十月 2024,title,font-,family:Arial,sans,-serif;,font-size:24px;,color:#369;,XML,案例教程,案例,1-2,：外部,CSS,引用,01 十月 2024,title,font-,family:Arial,sans,-serif;,/*,字体*,/,font-size:24px;,/*,字号*,/,color:#369;,/*,前景色*,/,XML,案例教程,案例,1-3,：使用,import,指令,01 十月 2024,title,font-,family:Arial,sans,-serif;,font-size:24px;,color:#369;,title.css,import,url(“title.css,);,title,/*,color:red,;*/,padding-bottom:4px;,border-bottom:1px solid#999;,title-,import.css,XML,案例教程,任务,2,：,CSS,选择符,01 十月 2024,案例,2-1,：类型选择符,01 十月 2024,XML,文档中元素名称,title,font-,family:Arial,sans,-serif;,案例,2-2,：,ID,选择符,01 十月 2024,#b1,font-,family:Arial,sans,-serif;,font-size:24px;,color:#369;,XML,案例教程,案例,2-3,：类选择符,01 十月 2024,.b1,font-,family:Arial,sans,-serif;,font-size:24px;,color:#369;,XML,案例教程,案例,2-4,：选择符分组,01 十月 2024,多个选择符应用相同样式，用,“,，,”,分割，并为一组。,.b1,author,publisher,font-,family:Arial,sans,-serif;,font-size:24px;,color:#369;,XML,案例教程,郭永洪,西安电子科技大学出版社,案例,2-5,：包含选择符,01 十月 2024,.b1,author,publisher,font-,family:Arial,sans,-serif;,font-size:24px;,color:#369;,Book author,color:red,;,font-size:36px;,border-bottom:1px solid#999;,XML,案例教程,郭永洪,西安电子科技大学出版社,任务,3,：使用,CSS,文本属性,01 十月 2024,任务,3-1,：使用显示属性,display,显示,xml,display:none,：,用于隐藏元素，使元素在页面中不可见。,display:block,：,将元素显示在块中，块级元素通过换行与其他元素分隔。,display:inline,：,以内联方式显示元素，即元素内容紧接在前一元素内容之后。,注意：显示属性不继承,案例,3-1,：,ch7-e3-1.xml,和,display.css,任务,3,：使用,CSS,文本属性,01 十月 2024,任务,3-2,：使用字体属性,font,显示,xml,font-family,：,指定字体名称，使用逗号分隔字体名称。,font-style,：,设置字体样式，,normal(,正常,),、,italic(,斜体,),和,oblique(,倾斜体,),。,font-size,：,设置字体中典型字符的字高和字宽。,font-weight,：,设置字体粗细。,line-height,：,设置字高。,案例,3-2,：,ch7-e3-1.xml,和,font.css,任务,3,：使用,CSS,文本属性,01 十月 2024,任务,3-3,：,设置,XML,前景色和背景色,color,属性：,设置,XML,文档元素的,前景色,。,color,属性值可以是名称、十进制、十六进制或百分数,RGB,的颜色值。,background-color,属性：,设置元素内容的,背景颜色,，与,color,属性的属性值设置方式相同。,color:green,color:#FF00CC,color:rgb(100,0,80,),案例,3-3,：,ch7-e3-1.xml,和,color-bgcolor.css,任务,3,：使用,CSS,文本属性,01 十月 2024,任务,3-4,：使用文本修饰属性,显示,XML,1,、,text-indent,属性：,设置元素中文本的缩进。,2,、,text-align,属性：,设置元素中文本的对齐方式。,left,：,左对齐；,right,：右对齐；,center,：居中对齐。,3,、,vertical-align,属性：,设置元素内容的垂直对齐方式。,top,：顶对齐；,middle,：中对齐；,bottom,：底对齐。,4,、,text-decoration,属性：,设置文本内容的特殊效果。,line-through,：加删除线；,overline,：加上划线；,underline,：加下划线；,none,：默认值，不加任何修饰。,案例,3-4,：,ch7-e3-1.xml,和,text-decoration.css,任务,4,：使用,CSS,容器属性,01 十月 2024,盒模型：,1,、在元素周围增加边框（,border,）,2,、在元素与其边框之间设定空格填充（,padding,，即补白）,3,、设置边框与周围元素之间的边距（,margins,）。,任务,4,：使用,CSS,容器属性,01 十月 2024,1,、,margin-top,：,设置上页边距,2,、,margin-bottom,：,设置下页边距,3,、,margin-left,：,设置左页边距,4,、,margin-right,：,设置右的页边距,5,、,margin,：,设置四边页边距,任务,4-1,：设置,XML,页边距,案例,4-1,：,ch7-e3-1.xml,和,margin.css,任务,4,：使用,CSS,容器属性,01 十月 2024,任务,4-2,：设置,XML,边框,设置边框线样式：,border-style,属性，其值分别为：,none,、,dotted,、,dashed,、,solid,、,double,、,groove,、,ridge,、,inset,和,outset,。,设置边框线宽度：,border-width,、,border-top-width,、,border-right-width,、,border-bottom-width,和,border-1eft-width,五个属性。属性值为,thin,、,medium,、,thick,或绝对长度值。使用绝对长度值时，不能为负数，可以是,0,。,设置边框线颜色：,border-color,、,border-top-color,、,border-right-color,、,border-bottom-color,和,border-left-color,五个属性。,案例,4-2,：,ch7-e3-1.xml,和,border.css,任务,4,：使用,CSS,容器属性,01 十月 2024,任务,4-3,：补白（空格填充）,指定边框和内部元素的间距，可以使用,padding,、,padding-top,、,padding-right,、,padding-bottom,和,padding-left,五个属性来指定，属性值为绝对长度或父元素宽度的百分比。,案例,4-3,：,ch7-e3-1.xml,和,padding.css,任务,5,：使用,CSS,布局属性,01 十月 2024,任务,5-1,：元素绝对定位和相对定位,1.,绝对定位,元素根据浏览器左上角的边缘开始计算定位数值，其周围元素不受影响,。,如：控制左移和上移用,left,top,，反之则用,right,bottom,position:absolute,;,left:,100px;,top:,20px;,任务,5,：使用,CSS,布局属性,01 十月 2024,任务,5-1,：元素绝对定位和相对定位,2.,相对定位,元素根据自己原始位置作相对位移，其周围元素不受影响,。,如：控制左移和上移用,left,top,，反之则用,right,bottom,position:relative,;,left:,100px;,top:,20px;,案例,5-1,：,ch7-e3-1.xml,和,position.css,任务,5,：使用,CSS,布局属性,01 十月 2024,任务,5-2,：设置元素大小,CSS,通过高度（,height,）和宽度（,width,）参数设置元素显示的大小。,案例,5-2,：,ch7-e3-1.xml,和,width-height.css,任务,5,：使用,CSS,布局属性,01 十月 2024,任务,5-3,：环绕文本,CSS,中，一个元素的文本可以环绕另一个元素的文本，就像,HTML,中的文本能够环绕图片一样。,Price,display:block,;,color:#2F4F4F;,font-,weight:bold,;,float:left,;,案例,5