用css标记了的xml会如何在浏览器显示数据的一个小测试

原创已于 2022-06-04 01:08:45 修改 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xml #css

于 2022-06-03 23:00:58 首次发布

学习笔记同时被 2 个专栏收录

10 篇文章

订阅专栏

#网页技术

2 篇文章

订阅专栏

本文分析了XML与CSS文件如何影响学生信息在Microsoft Edge 102.0.1245.30中的显示样式变化，包括背景色、边框、字体颜色和布局调整。

xml文件内容如下：

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<?xml-stylesheet type="text/css" href="test1.css"?>
<Students>
<Student Id="101">
<Name>mark</Name>
<Gender>male</Gender>
<Birthday>20141201</Birthday>
</Student>
<Student Id="102">
<Name>rosy</Name>
<Gender>female</Gender>
<Birthday>20141201</Birthday>
</Student>
</Students>

css文件内容如下：

Students
{
background-color: #aabbcc;
width: 100%;
}
Student
{
display: block;

border-style: double;
border-color: red;
border: 3;

margin-bottom: 30pt;
margin-left: 0;

}
Name
{
display: block;
color: #FF0000;
font-size: 20pt;
}
Gender
{
display: block;
color: #0000FF;
font-size: 20pt;
}
Birthday
{
display: block;
color: #000000;
margin-left: 10pt;
}

在Microsoft Edge版本 102.0.1245.30 (64 位)上显示效果如下：

当css文件稍作修改后，如下：

Students
{
background-color: #aabbcc;
width: 100%;
}
Student
{
display: block;
border-style: double;
border-color: red;
border: 3;
margin-bottom: 30pt;
margin-left: 0;
}
Name
{
color: #FF0000;
font-size: 20pt;
}
Gender
{
color: #0000FF;
font-size: 20pt;
}
Birthday
{
color: #000000;
margin-left: 10pt;
}

显示效果如下：