CSS语法与xml关联一

title: Hello World

CSS语法与xml关联一

XML为 存储结构化数据提供了强大的方法，但是它没有提供关于数据如何显示地信息，（数据的结构与数据表示无关）。可以使用CSS来控制XML文档中各元素的呈现方式。

又三部分构成：选择器（selector）、属性（property）、属性值（value），基本语法个数如下：

selector {
    property1: value;
    property2: value;
    property3: value;
}

虽然在CSS中是不区分大小写的，但是在XML中区分，如Name，NAME，name都会被CSS视为同一个元素，这样就无法为这些元素分别设置不同的属性。因此应该设置完全不一样的名称来进行区分。

CSS选择器

元素选择器

按照给定的节点名称，选择所有匹配的元素。

语法：elementname

例子：input 匹配任何<input>元素。

元素 { 样式声明 }

ID选择器

按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。

语法：#idname

例子：#toc 匹配 ID 为 “toc” 的元素。

#id 属性值 { 样式声明 }

类选择器

按照给定的 class 属性的值，选择所有匹配的元素。

语法：.classname

例子：.index 匹配任何 class 属性中含有 “index” 类的元素。

.类名 { 样式声明 }

属性选择器

按照给定的属性，选择所有匹配的元素。

语法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

例子：[autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）。

id选择器：chrome，firefox正常，IE不支持

类选择器：chrome，IE不支持，firefox支持。

属性选择器：都支持

元素选择器：都支持

CSS属性

显示属性

在CSS中，通常使用display属性来控制浏览器元素的文字显示效果。

display属性值	说明
block	将元素以块方式显示，通过换行与其他元素分开显示
inline	在同一行显示元素
none	隐藏元素，使元素在页面中不可见
list-item	以列表方式显示元素

CSS规定display属性是不能别子元素继承的，所以如果将父元素的display属性设定为block，不等于其为子元素设定了该属性。但也有两种特殊情况：

• 如果将父元素的display属性设定为none,则子元素实际上继承了none的属性设定，因为当父元素被隐藏起来时，所有的子元素将同时被隐藏；
• 父元素的inline属性值也会被子元素继承，因为IE浏览器默认以inline方式显示元素内容。

示例:

1. 新建一个xml文件：employee.xml，内容如下：

   <?xml version="1.0" encoding="GB2312"?>
   <?xml-stylesheet type="text/css" href="test01.css"?>
   <Employees>
       <Employee>
           <name>张涛</name>
           <sex>男</sex>
           <age>18</age>
           <department>开发部</department>
       </Employee>
       <Employee>
           <name>李雪萍</name>
           <sex>女</sex>
           <age>34</age>
           <department>销售部</department>
       </Employee>
   </Employees>
   

2. 新建一个css文档：employee.css, 内容如下：

   Employee {
       display: block;
       margin-top: 16pt;
   }
   name {
       font-weight: bold;
   }
   Employee#1 {
       font-size: 25pt;
       font-style: italic;
   }
   Employee#2 {
       font-size: 20pt;
       font-style: bold;
   }
   department {
       display: none;
   }
   

   

字体(font)属性的设置

font的子属性	说明	取值
font-family	设置文字的字体	宋体，黑体，楷体_gb2312
font-style	设置文字的字形	normal, italic, oblique
font-weight	设置文字的粗细	normal, bold, bolder, lighter
font-variant	设置文字字母的大小写	normal, small-caps
font-size	设置文字的大小	small, medium, large / pt, cm, in…

边框属性的设置

• border-style: 设置边框四周的样式；
• none, dotted, dashed(边框线为虚线), solid, double, groove(设置边框有3D效果), inset(设置边框线具有沉入的效果), outset(设置边框线有浮出的效果)。
• border-color:
• 取值为颜色的英文名或RGB值，默认时边框和元素的颜色相同；
• border-width:
• thin, medium, thick

布局属性的设置

• 定位属性：通过CSS的定位属性可以设置元素的位置、宽度和高度；
• top, bottom, left, width, height, right;
• margin属性：默认情况下，CSS中元素的页边距为0；
• margin(同时设置元素上下左右边界的距离), margin_top, margin_bottom, margin_left, margin_right;
• padding属性：在边框属性设置完成后，元素与边框的距离可能会出现过于接近的情况，通过设置padding属性使得边框与元素之间的距离不会太靠近;
• padding, padding_top, padding_bottom, padding_left, padding_right;

背景属性的设置

background的子属性	说明	取值
backgroung-color	设置元素的背景颜色	颜色的英文名或RGB值
background-image	设置元素的背景图像	none, URL, 文件名(与CSS处于同一个目录下)
background-repeat	设置元素背景图像的重复样式	repeat, repeat-x(水平方向重复平铺), no-repeat
background-attachment	设置元素背景图像是否与元素内容一起滚动	scroll, fixed
background-position	设置元素背景图像相对于文字的位置	background-position-horizontal, background-position-vertical(top, center, bottom, left, right)

文本属性的设置

CSS中，元素文字的间距、行高、实现字母的大小写转换以及为文字添加各种修饰等。

设置文本的属性	说明	取值
letter-spacing	设置元素的字符间距	无
vertical-align	设置元素文本的垂直对齐方式	baseline, sub(文字以下标显示), super, top, middle, bottom
text-align	设置元素文本的水平对齐方式	left, center, right, justify(两端对齐)
text-transform	设置元素文本的大小写转换方式	capitalize(第一个字母大写), uppercase, lowercase, none
text-decoration	设置元素文本的修饰方式	underline, overline, line-through, blink(文字闪烁), none

CSS浮动

Float

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

xml：

<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css" href="test01.css"?>
<Employees>
    <div></div>
    <p>
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
    </p>
</Employees>

css:

div{
    display: block;
    width: 150px;
    height: 100px;
    border-radius: 5px;
    background-color: rgb(207, 232, 220);
    padding: 1em;
}
p{
    font-size: 20px;
}

为了使盒子浮动起来，向规则 div 下添加 float 和 margin-right 属性：

div{
    float: left;
    margin-right: 15px;
    width: 150px;
    height: 100px;
    border-radius: 5px;
    background-color: rgb(207, 232, 220);
    padding: 1em;
}

让我们考虑一下浮动是如何工作的——浮动元素 (这个例子中的 <div> 元素) 会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。

margin

让浮动效果可视化

我们可以在浮动元素上应用 margin，将文字推开，但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流，紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改，来观察到这个现象。

在紧随浮动盒子的第一段文字上添加 t2 类，然后在你的 CSS 文件中添加如下规则，它会赋予跟随其后的段落一个背景色。

div{
    float: left;
    margin: 10px;
    width: 150px;
    height: 200px;
    border-radius: 5px;
    background-color: rgb(207, 232, 220);
    padding: 1em;
}
#t1{
    font-size: 20px;
}

#t2{
    display: block;
    background-color: rgb(79, 185, 227);
    color: #fff;
}

<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css" href="test01.css"?>
<Employees>
    <div></div>
    <p id="t2">
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
    </p>
    <p id="t1">
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
    </p>
</Employees>

为了更清晰的看到效果，将浮动的 margin-left 改为 margin 以将周围全部空出来。如此代码效果所示，你可以看到段落的背景色处于浮动盒子之下。

清除浮动

我们看到，一个浮动元素会被移出正常文档流，且其他元素会显示在它的下方。如果我们不想让剩余元素也受到浮动元素的影响，我们需要 停止 它；这是通过添加 clear 属性实现的。

在前例的 HTML 代码中，向浮动元素下方的第二个段落添加 cleared 类，然后向 CSS 文件中添加以下样式：

#t1{
    font-size: 20px;
    display: block;
    clear: both;
}

应该看到，第二个段落已经停止了浮动，不会再跟随浮动元素排布了。clear 属性接受下列值：

• left：停止任何活动的左浮动
• right：停止任何活动的右浮动
• both：停止任何活动的左右浮动

CSS应用样式

如果不把创建好的CSS链接到XML文件中，则文档中的元素是无法按照样式表的规则在浏览器中显示的。

HTML应用样式有三种（内联，内嵌，外部引用），XML应用样式目前完全支持的应该只有外部引用

外部样式表

<?xml:stylesheet type="text/css" href="***.css"?>

示例：

<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css" href="test01.css"?>
<Employees >
    <Employee>
        <name>fwt</name>
        <sex>男</sex>
        <age>21</age>
        <department>开发部</department>
    </Employee>
</Employees>

可以在一个XML文档中使用多条xml:stylesheet语句，达到将多个样式表文件链接的目的。

内部样式表

<?xml-stylesheet type="text/css"?>
<根元素 xmlns:HTML="URL">
    <HTML:STYLE>
        <!--CSS内容-->
    </HTML:STYLE>
    <!--XML子元素-->
</根元素>

示例：

<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css"?>
<Employees xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://www.w3.org/Profiles/XHTML-transitional ">
    <HTML:STYLE>
        name{
        font-weight:bold
        }
        sex{
        font-size:200px
        }
        age{
        font-style:italic
        }
    </HTML:STYLE>
    <Employee>
        <name>fwt</name>
        <sex>男</sex>
        <age>21</age>
        <department>开发部</department>
    </Employee>
</Employees>

测试该方法在谷歌和IE浏览器已经不适配