CSS显示XML文档

一、CSS

1、概念

一个CSS文件就是由若干个样式表构成的文本文件，该文本文件可以使用＂ANSI＂或＂UTF-8＂编码来保存，文件的扩展名是＂.css＂。

一个样式表的格式如下：

选择器

{

属性1：属性值1；

属性n：属性值n

@charest "utf–8"可以处理中文乱码（因为在css中还不能支持中文属性）

2、XML关联css

2.1外联式

调用外部样式表文件是指XML文件本身不含有样式信息,而是通过引用外部CSS文件来定义XML文件的表现形式。CSS样式表文件是一个扩展名为.css的文本文件,可以在XML文档的开头加入以下处理指令将指定的CSS样式表链接进来。其格式如下:

<?xml-stylesheet type="text/css" href="css文件的URI"?>

说明:

1）<?xml-stylesheet 处理指令表示当前XML文档在显示时需要使用样式表，也可以写成<?xml:stylesheet。

2）type="text/css"表示使用CSS类型的样式表。hnef=用来指定样式表文件的路径。

---

2.2内嵌式

内部样式表是在HTML文档中使用<style>标签定义的CSS样式，只能在当前HTML页面中使用。

而xmlns：HTML="http://www.w3.org/Profiles/XHTML-transtitional"语句说明了该标记的出处。

<?xml:version="1.0">

<?xml-stylesheet type="text/css"?>

<persons  xmlns:HTML="http://www.w3.org/Profiles/X HTML-transitional">

<HTML:style>

person｛

dispaly:block

color:red

｝

</HTML:style>

</persons>

---

2.3.行内式

内联样式是在HTML标签中使用style属性定义的CSS样式，只能应用于该标签。

 <?xml version="1.0"encoding="utf-8"?>

<?xml-stylesheet type="text/css"?>

<student>

    <name style=“display:block;font-size:18 pt;font-weight:bold">李小林

        <sex style="display:line;font-size:12 pt;font-style:italic">男</sex>

        <birthday style="display:line;font–size:10 pt;font-weight:bold">1998年12月22日</birthday>

</name>

<name style="display:block;font-size:18 pt;font-weight:bold">金锦巾

    <sex style="display:line;font-size:12 pt;font-style:itable">女</sex>

    <birthday style="display:line;font-size:10 pt;font-weight:bold">1999年08月10日</birthday>

  </name>

</student>

---

2.4.混合式

还有种方法是综合应用内部CSS样式和外部CSS样式。在这种情况下，如果两种样式之间发生冲突,则以内部CSS样式为准。例如，外部CSS文件中定义的字体大小为25pt,而内部CSS样式定义的字体大小为20 pt,这时文字大小应为20 pt。

01.css文件的代码如下

name

｛

       display:block;

       font-size:18 pt;

       font-weight:bold;

｝

02.css文件的代码如下

price

｛

     display:line;

    font-size:16 pt;

    font-style:italic

｝

madeTime

｛

    display:line;

    font-size:9pt；

    font-weight:bold

｝

下面的文档同时调用多个CSS文件。

<?xml version="1.0" encoding="gb2312"?>

<?xml-stylesheet type="text/css" href="01.CSS"?>

<?xml-stylesheet type="text/css" href="02.CSS"?>

<goods>商品列表:

    <name>

          小米手机

        <price>1999元/部</price>                
        <madeTime>2020.09.28</madeTime>

    </name>

    <name>

        苹果IPad

        <price>5999元/台</price>        
        <madeTime>2020.10.10</madeTime>

</name>

</goods>

二、selector 选择器

1.类型选择器（标记/元素选择器）

title

｛

display:block;

｝

在CSS中可以使用“＊”标识选择器，它表示匹配任意元素。它可以为XML中的每个元素设置相同的样式。＊，表示通用选择器。

*

｛

    margin : 0px;

    padding:0px;

}

---

2.class属性

1）有时需要将同一类型元素的两个实例设计成不同样式，可以为需要特定样式的元素实例加上class属性。

2）XML允许为元素指定class属性。

---

3.ID属性

1）ID属性也是用来标识同一元素中特定的实例。

      ID侧重于定义一个元素的独有特性,class则侧重于定义一类元素的共有样式。

       例如,某类图书的样式应该一样,应使用class定义;如果专门指出哪些书是名著应使用ID定义。

4.成组选择器

并集

1）成组选择器可以把一个规则同时应用于多个元素。

2）例如,下列规则同时定义title、type、author元素以块级元素显示。

title,type,author

｛

    display:block

｝

---

交集

1）第一个是元素名

2）第二个是class属性值或ID属性值

title.c1

｛

    diaplay:block;

｝

---

5.后代选择器

    在CSS语句的选择器中,可在元素名称之前加上父元素的名称,甚至加上父元素的父元素名称。

1）A B｛｝称为上下文选择器,即后代选择器。

2）A>B｛｝,称为子元素选择器

---

6.伪元素

伪元素(pseudo-element)是指将文档中不能作为独立元素看待的部分作为元素对待。

6.1.首行伪元素

    一个元素的首行常被格式化成与其他部分不同的特殊效果,例如加黑显示。

     首行伪元素是在元素名后加first-line来选择的。

title:first-line
｛
     font-weight:bold;
｝

6.2首字符伪元素

 首字符伪元素是选择一个元素的首字符，在元素名后加first-letter来选择的。

例,将元素的首字符显示为下沉的大写字母效果

 title:first–letter

｛

         font-size:200%;

         vertical-align:text-top;

｝

---

6.3伪类

1） CSS中的伪类包括link，:visited,:hover,:active,:focus，:first-child等。

2） :first-child用来指定元素的第一个子元素。

book:first–child

｛

font–style:bold;

｝

---

三、CSS的样式属性

1.字体属性

1）设置文字的字体

font–family属性:用来指定字体类型。

     属性值是系统的字体名称，默认值是浏览器确定的字体，如果名称中含有空格,需要用双引号括起来。为了防止用户缺少某种字体，最好列出多个字体，用逗号分隔。在显示的时候,浏览器会从前向后依次匹配用户已安装的字体并以该字体显示。

例如:

       font-family:"Time New Rom" ;

       font-family:arial,'Time New Roman"，sans-serif;

---

2）设置文字的样式

font–style属性:用来表示指定斜体文字。

属性值:nomal（文字正常显示）

             italic（文本以斜体显示）

             obliqe（文本为倾斜）

例如:

    font–style:italic;

---

3）设置文字的大小写

font–variant属性:设置英文字体打印时大小写状态。

属性值:nomal（英文显示小写）

             small–caps（英文显示大写）

例如:

This is a paragraph      font-variant:normal

THIS IS A PARAGRAPH      font-variant:small-caps

---

4）设置文字的粗细

font–weight属性:设置字体的粗细程度。

属性值:bold（加粗）

             nomal（标准字体，默认值）

             light（较细）

例如:

 font–weight:bold

font–weight:600

font–weight:100%

---

5）设置字体大小

font–size属性:

例如:font–size:12pt

2.文本属性

1）text-align属性：设置文本的对齐方式。

属性值：left（左对齐）

              right（右对齐）

              center（文本居中）

             justify（文本两端对齐）

水平居中：text-align：center

垂直居中：line-height:行高（与快高一样）

---

2）text-indent属性：设置文本首行缩进。

---

3）text-transform属性：文本中的字母是否全部大小写或首字母大写。

属性值：uppercase、lowercase、capitalize。

---

4）text-decoration属性：给文本添加装饰。

属性值：none（不加任何画线）

              underline（加下画线）

              overline（加上画线）

              line-though（加删除线）

              blink（使文字闪烁）

---

5）vertical-align属性：是指文本的垂直对齐方式。

属性值：baseline、sub、super、top、text-top、middle、bottom、text-bottom。

---

3.颜色和背景属性

前景色：color

背景色：background-color

1.名称表示法

直接用颜色的英文名称来表示,常用的颜色有black(黑色)、blue(蓝色)、gray(灰色)、green(绿色)、orange(橙色)、purple(紫色)、red(红色)、silver(银色)、white白色)、yellow(黄色)。

color:red;

background-color:blue;

2.#" RGB"表示法

R,G, B代表红绿蓝三色

1）background–image属性:该属性用于定义背景图像，默认值取值为none。

2）background-repeat属性:该属性用于指定背景图像是否通过重复出现来平铺背景。

属性值:repeat(设置背景图像完全填充被选择元素)、

       repeat-x(设置背景图像在水平方向.上填充被选择元素)

       repeat-y(设置背景图像在垂直方向上填充被选择元素)

        no-repeat(设置背景图像不进行平铺)。默认取值是repeat.

3）luckyround-position属性:在设置背景图像后，可以用background-position属性来指定背景图像的位置。取值可以是百分比，也可以是top、center、bottom、left和right。

4.设置文本显示方式

1.block:（块显示方式），是指文本内容一块的方式来显示快的大小，取决于文本内容的大小。文本内容默认为左对齐。

属性值:position,width,height

2.line:（行显示方式），是指文本内容一行的方式来显示各标记内容按先后顺序首尾相连。

3.list–item:（列表显示方式），是指文本内容在浏览器中以列表的方式显示。

list–style–type属性来指定外观

属性值:disc(圆盘)，circle（圆圈）、square(方块)、decimal(十进制数)、lower-roman(小写的罗马数字)、upper-roman(大写的罗马数字)、lower-alpha(小写英文字母)及upper-alpha(大写英文字母)

4.diaplay:none，不显示元素的内容。（占用空间下面的内容会占上来。）

visibility:hidden:隐藏（仍然占用空间，有空白部分。）