Cómo mostrar XML usando CSS?

Mostrando XML usando CSS | A continuación, vamos a aprender cómo XML pantalla usando CSS (Cascading Style Sheet)?

Introducción:

Usted debe ser consciente del término XML y debe haber tratado estos diversos archivos XML, mientras que el desarrollo de una página web o sitio web. Este artículo se centra enteramente en XML y cómo mostrarlo usando CSS. Hay numerosos pasos a seguir class que muestra el XML usando CSS, todos esos pasos se discuten más adelante en el artículo, pero antes de seguir adelante vamos a echar un vistazo a la definición y el propósito de XML for una mejor comprensión.

Definición:

XML significa Extensible Markup Language for . XML está diseñado para almacenar datos y de transporte. XML está diseñado de tal manera que se convierte en legible para los seres humanos y máquinas.

Ahora, después de familiarizarse con la definición y el propósito del XML, vamos a seguir adelante y echar un vistazo a los pasos a XML pantalla usando CSS.

Aquí vamos a discutir cómo mostrar XML usando CSS, pero antes de eso, ¿por qué no ir a través de la definición de la CSS primero para que podamos comprender con más claridad.

CSS significa Cascading Style Sheet for . CSS se puede utilizar para agregar estilos y para mostrar la información en un archivo XML de una manera clara y precisa. Puede dar formato a todo el documento XML.

  • Pasos for definición CSS class XML :
    for la definición de las hojas de estilo CSS for han de seguirse los documentos XML siguientes pasos,

    1. Definir los elementos de estilo For específicos, tales como tamaño de fuente, color de fuente, etc.
    2. definir cada elemento como un elemento de la lista, bloque con propiedad de presentación de CSS.
    3. Identificar los títulos y hacerlos negrita.

  • Vinculación XML con CSS :
    Para mostrar un documento XML con CSS, es de suma importancia para que el enlace de documento XML con CSS.
    La sintaxis a continuación se puede utilizar para el documento XML enlace a CSS.
        <?xml-stylesheet type="text/css" href = "name_of_the_CSSFile.css"?>

Nota:

Asegúrese de que la sintaxis anterior se utiliza en la parte superior del archivo XML de lo contrario no se mostrará el XML y usted podría encontrarse con algunos errores.

Ejemplo:

Para entender un concepto claramente, un ejemplo juega un papel muy importante, por tanto, un ejemplo es curada simplemente for usted que le ayudará a hacer las cosas mucho más claras. En este ejemplo, el archivo XML se crea que contiene la información sobre cinco temas y muestra el archivo XML usando CSS.

del archivo XML:

Creación “.xml for” como archivo 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 del archivo:

Creación “Semester.css” como archivo 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;
}

salida:

How to display XML using CSS? - 4

En el ejemplo anterior, se puede ver que un archivo XML se crea que contiene diversa información sobre los sujetos y sus profesores correspondientes y después de que muestra el archivo XML usando CSS.

Ahora que usted está enterado de forma de mostrar los archivos XML usando CSS ¿por qué no seguir adelante y tratar usted mismo?


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *