如何使用css显示xml文档

css的优点：表达效果丰富，可读性好，利于信息检索，文档体积小。

初始css：css的一个样式表是一组规则，通过这组规则告诉浏览器用什么样式来显示数据。

 一个样式表的格式如下：

        选择器

             {

             属性1：属性值1

             .........

             属性值2：属性值2

             }

xml关联css

将当前xml文件关联到某个层叠样式表

例如：

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

此外css语句还可以直接写在xml文件内部，还有一种方式，在标记内使用”style“属性来定义样式。

一个xml文件可以同时调用多个样式表文件。

伪元素

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

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

title：first-letter

{

font-size:200%

vertical-align:text-top;

}

css中伪类有：link，visited,:hover,:active，：focus，：first-child（用于指定元素的第一个子元素）

css的属性

显示属性 display

       html默认的display属性有：inline，block，inline-block，none

block（块）：通过display将值定为”block“：display：block，使得文本在浏览器的一个区域快显示。

例如

      name

        {

         display：block；

        }

此外通过设置width和heigth来设置块区域的宽度与高度

例如：

name{display：block

                  width：200px；heigth：180px；}

特点：同级别的元素将按元素的先后顺序靠左对齐。子元素指定的块区域被包含在为父元素指定块区域中。

通过设置position属性的为absolute，改变块区域默认地靠左对齐方式，但同时设置left，top，width，heigth属性的值，以便精确的设置块区区域的位置和大小。

例如：

name

{

display：block；

position：absolute；

left=100；top=120；

width=200；heigth=120；inline

}

inline方式：通过display将值定为”inline“：display：inline，使得文本以行在浏览器显示。

例如

{

name

   display：inline；

}

特点：同级别元素使用方式来显示文本，按着元素的先后顺序首尾相接。父元素的显示方式是“block”，子元素的显示方式是inline，那么子元素将被包含在为父元素指定的块区域中以行的方式显示。

行方式：通过设置position属性的为absolute，改变某行默认地按先后顺序尾随在宁一行首尾之后，但同时设置left，top属性的值。

例如：

{name

display:inline;

position:absolute;

left-100;

top=120;

}

不显示文本:

display:none(不占用空间，不显示文本)

visibility:hidden（不显示文本。但是占用空间）

文本属性

texr-align：用来设置文本的对齐方式（left.right.....）

vertical-align:用来设置文本的垂直对齐方式，默认值为baseline.sub,,ttext-sub,bottom,text-bottom

line-height:设置行间距

text-transfrom：字母全大小写转换。

text-decoration：加下划线

tex-index:设置文本首行的缩进量。

边框

属性：

border-xxx-width属性

border-xxx-color属性

border-xxx-style属性

若border有一个值，四边为同一个值，若有2个值为上下为值1，左右为值2。若有三个值，上为值1，左右为值2，下为值3.若有四个值，上1右2左3下4.

定位显示

定位分为绝对定位和相对定位。有三种属性：static，absolute和relative。定位首先要设置偏移量，通过left和right属性来决定。

绝对定位：absolute是以父元素（设置position属性）的左上角为原点。通过偏移量来决定显示的位置，偏移后，原来的位置不再占用空间，偏移量通过left属性和top属性来决定

相对定位：reletive是指相对于自身原来位置偏移量来决定显示的位置,偏移后，原来的位置还要占用空间。偏移量通过left属性和top属性来决定。

定位显示

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

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

<root>

    root

       <frame1>

           元素1

           <frame2>

            元素2

            </frame2>

      </frame1>

      <fram3>

           元素3

       </frame3>

</root>

absolute属性值：

①以父元素(设置了position属性)左上角为基准，进行偏移。

②如果父元素没有设置position属性，则向上以父元素的父元素.....直到浏览器左，上角为基准

使用属性color和background-color可以设置文本的字符颜色和背景颜色。

环绕文本

float浮动的原则：

①上方元素不浮动,则浮动元素上不去;

②浮动元素，脱离原来的文档流;③下方元素会占据浮动元素的位置④浮动会对后续元素有影响,要清除浮动的影响

清除浮动的影响：

    兄弟元素之间：clear：left/right/both；

    父子元素之间的父元素：overflow：hidden；