Visualización de documentos XML con CSS

1. Visualización de documentos XML con CSS

2. 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 }

3. 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

4. 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.

5. MARGEN BORDE RELLENO cajas o bloques CONTENIDO

6. cajas o bloques • Posicionamiento • position:absolute • position:normal • position:relative • float:left • z-index • padding • padding-left • border • border-top • margin • margin-right • Grosores: • -width • Estilos: • -style • 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}

7. 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

8. 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}