Mostrar XML usando CSS – Barcelona Geeks

XML significa Lenguaje de Marcado Extensible . Es un lenguaje de marcado dinámico. Se utiliza para transformar datos de un formulario a otro formulario.
Un archivo XML se puede mostrar de dos maneras. Estos son los siguientes:-

Hoja estilo cascada
Transformación del lenguaje de hoja de estilo extensible

Mostrar archivo XML usando CSS:
CSS se puede usar para mostrar el contenido del documento XML de una manera clara y precisa. Da el diseño y el estilo a todo el documento XML.

Pasos básicos para definir una hoja de estilo CSS para XML:
para definir las reglas de estilo para el documento XML, se deben hacer las siguientes cosas:
1. Defina las reglas de estilo para los elementos de texto, como tamaño de fuente, color, grosor de fuente, etc.
2. Defina cada elemento como un elemento de bloque, en línea o de lista, utilizando la propiedad de visualización de CSS.
3. Identifica los títulos y ponlos en negrita.
Vinculación de XML con CSS:
Para mostrar el archivo XML usando CSS, vincule el archivo XML con CSS. A continuación se muestra la sintaxis para vincular el archivo XML con CSS:
```
<?xml-stylesheet type="text/css" href="name_of_css_file.css"?>
```

Ejemplo 1.
En este ejemplo, se crea el archivo XML que contiene la información sobre cinco libros y muestra el archivo XML usando CSS.

Archivo XML:
Creando Books.xml como: –

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Rule.css"?>
<books>
    <heading>Welcome To GeeksforGeeks </heading>
    <book>
        <title>Title -: Web Programming</title>
        <author>Author -: Chrisbates</author>
        <publisher>Publisher -: Wiley</publisher>
        <edition>Edition -: 3</edition>
        <price> Price -: 300</price>
    </book>
    <book>
        <title>Title -: Internet world-wide-web</title>
        <author>Author -: Ditel</author>
        <publisher>Publisher -: Pearson</publisher>
        <edition>Edition -: 3</edition>
        <price>Price -: 400</price>
    </book>
    <book>
        <title>Title -: Computer Networks</title>
        <author>Author -: Foruouzan</author>
        <publisher>Publisher -: Mc Graw Hill</publisher>
        <edition>Edition -: 5</edition>
        <price>Price -: 700</price>
    </book>
    <book>
        <title>Title -: DBMS Concepts</title>
        <author>Author -: Navath</author>
        <publisher>Publisher -: Oxford</publisher>
        <edition>Edition -: 5</edition>
        <price>Price -: 600</price>
    </book>
    <book>
        <title>Title -: Linux Programming</title>
        <author>Author -: Subhitab Das</author>
        <publisher>Publisher -: Oxford</publisher>
        <edition>Edition -: 8</edition>
        <price>Price -: 300</price>
    </book>
</books>

En el ejemplo anterior, Books.xml está vinculado con Rule.css, que contiene las reglas de hoja de estilo correspondientes.

ARCHIVO CSS:
Creando Rule.css como: –

books {
     color: white;
     background-color : gray;
     width: 100%;
}
 heading {
     color: green;
     font-size : 40px;
     background-color : powderblue;
}
 heading, title, author, publisher, edition, price {
     display : block;
}
 title {
     font-size : 25px;
     font-weight : bold;
}

Producción :

Ejemplo 2.
En este ejemplo, se crea el archivo XML que contiene la información sobre varias secciones en Geeks for Geeks y los temas que contienen y luego se muestra el archivo XML usando CSS.

Archivo XML:
Creación de Section.xml como: –

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Geeks.css"?>
<Geeks_for_Geeks>
    <title>Hello Everyone! Welcome to GeeksforGeeks</title>
    <geeks_section>
        <name>Algo</name>
        <topic1>Greedy Algo</topic1>
        <topic2>Randomised Algo</topic2>
        <topic3>Searching Algo</topic3>
        <topic4>Sorting Algo</topic4>
    </geeks_section>
    <geeks_section>
        <name>Data Structures</name>
        <topic1>Array</topic1>
        <topic2>Stack</topic2>
        <topic3>Queue</topic3>
        <topic4>Linked List</topic4>
    </geeks_section>
    <geeks_section>
        <name>Web Technology</name>
        <topic1>HTML</topic1>
        <topic2>CSS</topic2>
        <topic3>Java Script</topic3>
        <topic4>Php</topic4>
    </geeks_section>
    <geeks_section>
        <name>Languages</name>
        <topic1>C/C++</topic1>
        <topic2>Java</topic2>
        <topic3>Python</topic3>
        <topic4>Ruby</topic4>
    </geeks_section>
    <geeks_section>
        <name>DBMS</name>
        <topic1>Basics</topic1>
        <topic2>ER Diagram</topic2>
        <topic3>Normalization</topic3>
        <topic4>Transaction Concepts</topic4>
    </geeks_section>
</Geeks_for_Geeks>

En el ejemplo anterior, Section.xml está vinculado con Geeks.css, que contiene las reglas de hoja de estilo correspondientes.

ARCHIVO CSS:
Creando Geeks.css como: –

Geeks_for_Geeks 
              {
              font-size:80%;
              margin:0.5em;
              font-family: Verdana;
              display:block;
              }
geeks_section {
              display:block; 
              border: 1px solid silver;
              margin:0.5em; 
              padding:0.5em; 
              background-color:whitesmoke;
              }
title {
      display:block;
      font-weight:bolder;
      text-align:center;
      font-size:30px;
      background-color: green;
      color: white;
  
      }
name, topic1, topic2, topic3, topic4 {
                                 display:block;
                                 text-align:center;
                                 }
name {
     color:green; 
     text-decoration: underline  ;
     font-weight:bolder;
     font-size:20px;
     }
topic1 {
       color:green
       }
topic2 {
       color:brown
       }
topic3 {
       color:blue
       }
topic4 { 
       color:orange
       }

Producción :

Ventajas de mostrar XML usando CSS:

CSS se usa en XML o HTML para decorar las páginas.
CSS se utiliza para la interfaz interactiva, por lo que es comprensible para el usuario.
CSS permite que varias páginas compartan formato y reducen la complejidad y la repetición en el contenido estructural. Entonces el cargador de páginas es más rápido.

Desventajas de mostrar XML usando CSS:

Con CSS, no se puede aplicar ninguna transformación a los documentos XML.
CSS usa diferentes dimensiones con diferentes navegadores. Entonces, el programador tiene que ejecutar el código en un navegador diferente y probar su compatibilidad para publicarlo en vivo.
CSS tiene diferentes niveles de versiones, por lo que es confuso para el navegador y el usuario.

CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .

Publicación traducida automáticamente

Artículo escrito por AniketSingh1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta