Visualización de documentos XML con CSS

							Visualización de documentos XML con CSS
plantilla CSS: “articulo.css”

tituloP {display:block; font-size:20pt; font-
family:Verdana; color:green; text-align:left }

autor {display:block; font-size:12pt; font-
family:Verdana; color:red; text-align:right }

intro {display:block; font-family:Verdana; font-
size:10pt; font-style:italic }

tituloA {display:block; font-family:Arial; text-
align:left; font-size:14pt; color:blue }

comentarioF {display:block; font-style:italic; text-
align:center; text-size:10pt}

p    {display:block; font-family:Verdana; font-
size:10pt; 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
    • padding-left       Posicionamiento
 • border                • position:absolute
    • border-top
 • margin                • position:normal
    • margin-right
 • Grosores:             • position:relative
    • -width
 • Estilos:              • float:left
    • -style
                         • z-index
 • Colores:
    • -color
NOTA {padding:20px; 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:2px; border-bottom-color:red;
       border-bottom-style:groove;
       margin:45px}
    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)
    ex se refiere al tamaño de las minúsculas (letra x) del tipo
     de letra que se toma como referencia
    px se refiere a los puntos de la pantalla (píxeles) con la
     resolución que está en activo
    % se refiere al porcentaje del valor dependiente del
     contexto
NOTA { font-size:10; line-height:1.5em }
TITULO { font-size:18; letter-spacing:1ex }
SUBTITULO { font-size:14; word-spacing:200% }
PARRAFO { font-size:12; margin-left:25px }

    Absolutas:
    • in   pulgadas. 1 pulgada=2,54 cm
    • cm   centímetros
    • mm   milímetros
    • pt   puntos tipográficos. 1 pulgada=72pt. 1pt=1/72in
    • pc   picas. 1pc=12pt
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: #3366FF }
    • TITULO { color: #36F }

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/f01}
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="articulo4.css" type="text/css"?>
<articulo xmlns:html="uri:html“>
<!-- Cabecera del documento -->
<html:a name="principio"></html:a>
<tituloP>SGML y servicios de información</tituloP>
<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 -->
<tituloA>Introducción</tituloA>
<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 />
<tituloA>Sistema de marcado</tituloA>
<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 />
<tituloA>Aclaración</tituloA>
<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.w3.org">W3C</html:a> para estar al día en este
constante proceso de evolución.</p>
<!-- Comentarios del documento -->
<comentarioF>Última fecha de actualización: 24 de abril de
2003</comentarioF>
<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>