Visualización de documentos XML con CSS

Presentación del tema: "Visualización de documentos XML con CSS"— Transcripción de la presentación:

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 cajas o bloques RELLENO BORDE MARGEN CONTENIDO

6 cajas o bloques Posicionamiento padding border position:absolute
padding-left border border-top margin margin-right Grosores: -width Estilos: -style Colores: -color Posicionamiento position:absolute position:normal position:relative float:left z-index 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: Absolutas:
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: comentarios: control de texto: imágenes:
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(