Visualizacin de documentos XML con CSS plantilla CSS

Visualización de documentos XML con CSS

plantilla CSS: “articulo. css” titulo. P {display: block; font-size: 20 pt; fontfamily: Verdana; color: green; text-align: left } autor {display: block; font-size: 12 pt; fontfamily: Verdana; color: red; text-align: right } intro {display: block; font-family: Verdana; fontsize: 10 pt; font-style: italic } titulo. A {display: block; font-family: Arial; textalign: left; font-size: 14 pt; color: blue } comentario. F {display: block; font-style: italic; textalign: center; text-size: 10 pt} p {display: block; font-family: Verdana; fontsize: 10 pt; text-align: justify }

propiedades Display: Indica cómo visualizar el contenido. Cuando su valor es block se trata como un bloque y se termina con un punto y aparte. Font-family: Indica el tipo de letra que se debe aplicar a su contenido. Verdana es uno de los más utilizados en la red Font-size: Tamaño de letra. Si la unidad es pt, el tamaño se fija en “puntos tipográficos” Color: Color. Descripciones por nombre o decimales Text-align: alineación del texto Font-style: Estilo de letra. italic =cursiva

reglas de estilo • Descripciones de los formatos de las etiquetas • Una regla de estilo se compone de dos partes principales: • el selector (en primer lugar a la izquierda) • la declaración (a la derecha del selector entre { } • La declaración simple se compone de una pareja de entidades (la propiedad y el valor, situadas a derecha e izquierda del signo dos puntos • Los selectores se pueden agrupar en listas separados por el signo coma • Las declaraciones también se pueden agrupar separadas por el signo punto y coma • Lo más normal es encontrar los selectores aislados con sus declaraciones agrupadas.

cajas o bloques MARGEN BORDE RELLENO CONTENIDO

cajas o bloques • padding Posicionamiento • border • position: absolute • margin • position: normal • Grosores: • position: relative • Estilos: • float: left • Colores: • padding-left • border-top • margin-right • -width • -style • z-index • -color NOTA {padding: 20 px; border-left-width: thin; border-left-color: black; border-left-style: dotted; border-top-width: medium; border-top-color: blue; border-top-style: double; border-right-width: thick; border-right-color; green; border-right-style: solid; border-bottom-width: 2 px; border-bottom-color: red; border-bottom-style: groove; margin: 45 px}

unidades de medida Relativas: em se refiere al tamaño de las mayúsculas (letra M) del tipo de letra aue se toma como referencia) n ex se refiere al tamaño de las minúsculas (letra x) del tipo de letra que se toma como referencia n px se refiere a los puntos de la pantalla (píxeles) con la resolución que está en activo n % se refiere al porcentaje del valor dependiente del contexto n NOTA { font-size: 10; line-height: 1. 5 em } TITULO { font-size: 18; letter-spacing: 1 ex } SUBTITULO { font-size: 14; word-spacing: 200% } PARRAFO { font-size: 12; margin-left: 25 px } Absolutas: • in • cm • mm • pt • pc pulgadas. 1 pulgada=2, 54 cm centímetros milímetros puntos tipográficos. 1 pulgada=72 pt. 1 pt=1/72 in picas. 1 pc=12 pt

colores: • descripción por nombre: (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow • descripción RGB: • TITULO { color: rgb(255, 33, 120) } • TITULO { color: #3366 FF } • TITULO { color: #36 F } comentarios: TITULO {color: red} /*los títulos aparecen en rojo */ control de texto: • tipo de letra NOMBRE {font-family: Verdana, Arial, Tahoma, sans-serif} • tamaño de texto • estilo • alineación imágenes: CUADRO {background-image: url(http: //www. ugr. es/f 01}

<? xml version="1. 0" encoding="ISO-8859 -1"? > <? xml-stylesheet href="articulo 4. css" type="text/css"? > <articulo xmlns: html="uri: html“> <!-- Cabecera del documento --> <html: a name="principio"></html: a> <titulo. P>SGML y servicios de información</titulo. P> <autor><html: a href="mailto: epeis@ugr. es">Eduardo Peis</html: a> </autor> <intro>En este artículo se muestra la relación entre la norma SGML y los servicios de información</intro> <!-- Cuerpo del documento --> <titulo. A>Introducción</titulo. A> <p>Para entender la evolución del <html: img src="marca. gif" /> SGML hay que retroceder a la época en la que los sistemas de informática eran todos propietarios de las empresas que los creaban. </p> <p>En realidad, las ideas de esta <n>nueva</n> tecnología son de sobra conocidas desde hace muchos años y llevan décadas dando buenos resultados en múltiples proyectos. Vamos a repasar algunas de estas ideas a continuación. </p> <html: br /> <titulo. A>Sistema de marcado</titulo. A> <p>El sistema de marcado de formato se basa en marcar el texto con instrucciones precisas que describen cada una de las condiciones que se desea aplicar a las partes del texto, tales como el tipo de letra o su estilo. </p> <p>A estas marcas se las denomina <n>etiquetas</n> (<c>tags</c>) o <n>códigos</n> y son un proceso válido si se trata de reproducir un documento con un formato determinado por una pantalla o impreso en papel. </p> <html: br />

<titulo. A>Aclaración</titulo. A> <p>Las normas necesarias para el desarrollo de <html: img src="marca. gif" /> SGML van publicándose poco a poco, siendo necesaria la conexión al <html: a href="http: //www. w 3. org">W 3 C</html: a> para estar al día en este constante proceso de evolución. </p> <!-- Comentarios del documento --> <comentario. F>Última fecha de actualización: 24 de abril de 2003</comentario. F> <html: hr width="400" size="4" color="#009900"/> <p> <html: center> <html: a href="#principio">[Principio de página] </html: a> <html: font color="white">----</html: font> <html: a href="http: //www. ugr. es"> [Página principal]</html: a> </html: center> </p> <comentario_oculto>Este documento es una simplificación de otro más completo</comentario_oculto> </articulo>