第二课 XML文档显示CSS.pptVIP

CnGame{display:block;color:blue} CSS（Cascading Style Sheets的简称）叫级联样式表，或串联样式表，由多条规则组成，每条规则又由选择符（即标记或元素）和“样式属性名：样式属性值”组成，如： 表明CnGame元素的内容用兰色的格式进行显示。 要想利用CSS来显示XML文档只需在XML文档的序（PROLOG）部分加上下述的处理指令： ?xml-stylesheet type=text/css href=css的URI 下面是一个例子，程序清单见1.3.1.xml。XML要求的元素有： CnGame Opponent TeamName Place Date Time Star StarName Coach Name Birthday Interesting 下面是一个例子，程序清单见1.3.1.xml。定制的CSS程序清单1.3.1.css如下： CnGame {display:block;font-size:15px;background-color:yellow} TeamName {color:red} Coach {font-size:20px;color:green} Date:first-letter {font-size:300%;float:left;vertical-align:text-top} TeamName:first-letter {font-size:200%;color:green} BR {display:block} 几点说明： 由于XML文档要引用外部CSS文档，因此在第一行standalone属性值为no； 在XML文档的序中使用?xml-stylesheet TYPE=“text/css” href=“1.3.1.css”?引用CSS文档来显示； CSS文档由多条规则组成，选择符和属性之间的空格不一定是必需的。 将空标记br/的display属性设置为block，可以起到换行的作用。 IE和firefox等浏览器及其不同版本对CSS得支持不完全。 1．直接指定元素名称。 元素名{属性名1：属性值1；属性名2：属性值2；……；属性名N；属性值N} 例如：TeamName{display:block;font-size:16pt;font-weight:bold} 2．组选择符。 将应用一组相同属性及其值的元素用逗号分隔，这组元素便构成组选择符。 元素名1，元素名2，……，元素名N{属性名1：属性值1；属性名2：属性值2；……；属性名N；属性值N} 例如：TeamName,Place{display:block} 3．伪元素 CSS中有两种伪元素：首字母和首行，这是英文文章的需要。 首字母：一个元素的第一个字母称为首字母，其格式为：元素名：first-letter 例如：TeamName:first-letter{font-size:300%;float:left;vertical-align:text-top} 首行：一个元素的第一行称为首行。其格式为：元素名：first-line 例如：TeamName:first-line{font-size:200%} 4．伪类CLASS 元素.类名{标志属性名：属性值；标志属性名：属性值……} 然后在XML文档中定义类名：元素名 CLASS=类名 例如：打算让巴西队显示为棕色，土耳其队显示为兰色，采用Opponent类标志即可。 一、选择元素 程序清单1.3.2.css： CnGame {display:block;color:black} Opponent.BX {color:brown} Opponent.TRQ {color:blue} BR {display:block} 从浏览器中看到的效果如图所示。 这段代码与上面起到同样的效果： CnGame {display:block;color:black} .BX {color:brown} .TRQ {color:blue} BR {display:block} 创建CLASS并不是建立多种风格的唯一手段，ID也可以用来实现同一规则被应用到页面的不同地方，对特殊的元素施加不同的样式。 其规则为：#id名{标志属性名：属性值；标志属性名：属性值……} 在XML文件中定义ID名：元素名 ID=ID名 例如下例中让巴西队的队名显示为绿色，土耳其队队名显示为红色。 程序清单1.3.3.css： CnGame {display:block;color:black} .BX {color:brown} .TR