第4章XML与CSS题材.ppt

第四章 XML与CSS;主要内容;XML与样式表;CSS的发展史;CSS的发展史;CSS的发展史;CSS技术优势;4.1 使用CSS;CSS样式的基本语法;CSS常用属性;4.2 标记与样式表;4.2 标记与样式表; 在CSS中，最重要的概念是样式表。样式表由一组样式规则组成，通过这组样式规则来告诉浏览器用什么样的样式来显示文本。比如，告诉浏览器使用什么样的字体、颜色和页边距来显示文本。 一个样式规则由三部分组成： 选择符(selector)(文本代表)、 属性(properties)和属性的取值(value).;4.2 标记与样式表;4.2 标记与样式表;4.2 标记与样式表;4.2 标记与样式表;例子1（P76） Cha4_1.xml ?xml version=1.0 encoding=UTF-8 ? ?xml-stylesheet href=“Show1.css type=text/css ? root time ID=beijing 北京时间: hour 12点 /hour minute 56分 /minute /time time 格林威治时间: hour 4点 /hour minute 56分 /minute /time /root ;Show1.css time { display:block;font-size:20pt;font-weight:bold; } time#beijing { display:block;font-size:20pt;font-weight:bold; color:rgb(255,0,0); } hour { display:line;font-size:16pt;color:rgb(0,255,0); } minute { display:line;font-size:8pt;color:rgb(255,30,120); } ;4.2 标记与样式表;?xml version=1.0 encoding=UTF-8? ?xml-stylesheet href=showStudent.css type=text/css? root student 张三 sex男/sex birthday1970.12.28/birthday /student student 李四 sex女/sex birthday1977.11.25/birthday /student /root;showStudent.css student { display:block;font-size:20pt;font-weight:bold; color:red; } sex { display:block;font-size:20pt;color:rgb(0,255,0); } birthday { display:block;font-weight:bold; color:green; };4.3 设置文本的显示方式;4.3 设置文本的显示方式;4.3 设置文本的显示方式;例子2（P78） Cha4_2.xml;Show2.css;4.3 设置文本的显示方式;2.行方式 通过将属性display的值指定为line display:line; 使得文本以行的方式在浏览器中显示 time { display:line; } ;4.3 设置文本的显示方式;例子3（P79）Cha4-3.xml;Show3.css;4.3 设置文本的显示方式;4.3 设置文本的显示方式;4.3 设置文本的显示方式;4.3 设置文本的显示方式;4.3 设置文本的显示方式;4.3 设置文本的显示方式;4.3 设置文本的显示方式;例子4（P81）Cha4_4.xml;Show4.css;4.3 设置文本的显示方式;4.3 设置文本的显示方式;4.4 字体;4.4 字体;4.4 字体;4.5 文本样式;4.5 文本样式;4.5 文本样式;baseline:与参照物的基准线对齐； sub：以下标形式显示； super：以上标形式显示； top：与参照物的最高部对齐； text-top：与参照物文字顶部对齐； middle：与参照物对象中间对齐；