xml不显示css样式_如何使用CSS显示XML？

梦里梦外; 2023-03-05 12:40 27阅读 0赞

xml不显示css样式

**Introduction:**

**介绍：**

You must be aware of the term XML and must have dealt with these various XML files while developing a web page or website. This article focuses entirely on XML and how to display them using CSS. There are numerous steps to follow for displaying the XML using CSS, all those steps are discussed further in the article but before moving forward let us have a look at the definition and purpose of XML for a better understanding.

您必须了解术语XML，并且在开发网页或网站时必须已经处理了这些各种XML文件。 本文完全侧重于XML以及如何使用CSS显示它们。 使用CSS显示XML需要遵循许多步骤，本文将进一步讨论所有这些步骤，但是在继续进行之前，让我们先了解一下XML的定义和目的，以更好地理解。

**Definition:**

**定义：**

**XML stands for Extensible markup language**. XML is designed to store and transport data. XML is designed in a way that it becomes readable by both humans and machines.

**XML代表可扩展标记语言** 。 XML旨在存储和传输数据。 XML的设计使其可以被人类和机器读取。

Now, after getting familiar with the definition and purpose of the XML, let us keep moving forward and have a look at the steps to display XML using CSS.

现在，在熟悉XML的定义和用途之后，让我们继续前进，看看使用CSS显示XML的步骤。

Here we will discuss how to display XML using CSS but before that, why don't we go through the defining of the CSS first so that we can understand it more clearly.

在这里，我们将讨论如何使用CSS显示XML，但是在此之前，为什么不首先进行CSS的定义，以便我们可以更清楚地理解它。

**CSS stands for Cascading Style Sheet**. CSS can be used to add styles and to display information to an XML file in a clear and precise manner. It can format the whole XML document.

**CSS代表层叠样式表** 。 CSS可用于添加样式并以清晰，精确的方式将信息显示到XML文件中。 它可以格式化整个XML文档。

*  **Steps for defining CSS for XML**:
    
    **为XML定义CSS的步骤** ：
    
    For defining the CSS style sheets for XML documents following steps are to be followed,
    
    要为XML文档定义CSS样式表，请遵循以下步骤，
    
    1.  Define the styling for specific elements such as font size, font color, etc.
    2.  Define each element as a list element, block using display property of CSS.
    3.  Identify the titles and make them bold.
 *  **Linking XML with CSS**:
    
    **将XML与CSS链接** ：
    
    To display an XML document with CSS, it is of utmost importance to link that XML document with CSS.
    
    要使用CSS显示XML文档，最重要的是将XML文档与CSS链接。
    
    The syntax below can be used to link XML document to CSS.
    
    以下语法可用于将XML文档链接到CSS。
    
        <?xml-stylesheet type="text/css" href = "name_of_the_CSSFile.css"?>

**Note:**

**注意：**

Make sure that the above syntax is used on top of the XML file otherwise the XML will not be displayed and you might run into some errors.

确保在XML文件顶部使用上述语法，否则XML将不会显示，并且您可能会遇到一些错误。

**Example:**

**例：**

To understand a concept clearly, an example plays a very important role therefore an example is curated just for you that would help in making things much more clear. In this example, the XML file is created that contains the information about five subjects and displaying the XML file using CSS.

为了清楚地理解一个概念，一个示例起着非常重要的作用，因此为您精心策划一个示例，这将有助于使事情变得更加清晰。 在此示例中，将创建XML文件，其中包含有关五个主题的信息，并使用CSS显示XML文件。

**XML File:**

**XML档案：**

Creating **"Class.xml"** as XML file

创建**“ Class.xml”**作为XML文件

<?xml version="1.0" encoding="UTF-8"?> 
    <?xml-stylesheet type="text/css" href="Semester.css"?> 
    <subject> 
    	<heading>Welcome To IncludeHelp</heading> 
    	<subject> 
    		<name>Name -: Compiler Design</name> 
    		<teacher>Teacher -: Chris</teacher> 
    		<credits>Credits -: 3.0</credits> 
    	</subject> 
    	<subject> 
    		<name>Name -: Software Engineering</name>
    		<teacher>Teacher -: S.K Jha</teacher> 
    		<credits>Credits -: 2.0</credits> 
    	
    	</subject> 
    	<subject> 
    		<name>Name -: Operating System</name> 
    		<teacher>Teacher -: Sanjay</teacher> 
    	        <credits>Credits -: 3.0</credits>  
    	</subject> 
    	<subject> 
    		<name>Name -: DBMS</name>
    		<teacher>Teacher -: Aman Singh</teacher> 
    		<credits>Credits -: 4.0</credits> 
    	</subject> 
    	<subject> 
    		<name>Name -: Data Science</name>
    		<teacher>Teacher -: Hitendra Dhakarey</teacher> 
    		<credits>Credits -: 1.0</credits> 
    	</subject> 
    </subject>

**CSS File:**

**CSS文件：**

Creating **"Semester.css"** as CSS file,

创建**“ Semester.css”**作为CSS文件，

subject {
        
        color: white;
        background-color: red;
        width: 100%;
    }
    
    heading {
        
        color: green;
        font-size: 40px;
        background-color: pink;
    }
    
    heading,
    name,
    teacher,
    credits {
        
        display: block;
    }
    
    name {
        
        font-size: 25px;
        font-weight: bold;
    }

**Output:**

**输出：**

![How to display XML using CSS?][How to display XML using CSS]

In the above example, you can see that an XML file is created that contains various information about subjects and their corresponding teachers and after that displaying the XML file using CSS.

在上面的示例中，您可以看到创建了一个XML文件，其中包含有关主题及其相应教师的各种信息，然后使用CSS显示XML文件。

Now that you are aware of **how to display your XML files using CSS** why don't you go ahead and try it yourself?

既然您已经知道**如何使用CSS显示XML文件，**为什么不继续自己尝试一下呢？

> 翻译自: [https://www.includehelp.com/code-snippets/how-to-display-xml-using-css.aspx][https_www.includehelp.com_code-snippets_how-to-display-xml-using-css.aspx]

xml不显示css样式

[How to display XML using CSS]: https://www.includehelp.com/code-snippets/Images/display-xml-using-css.jpg
[https_www.includehelp.com_code-snippets_how-to-display-xml-using-css.aspx]: https://www.includehelp.com/code-snippets/how-to-display-xml-using-css.aspx