La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

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.

Presentaciones similares


Presentación del tema: "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."— 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. F ont-family: Indica el tipo de letra que se debe aplicar a su contenido. Verdana es uno de los más utilizados en la red F ont-size: Tamaño de letra. Si la unidad es pt, el tamaño se fija en puntos tipográficos C olor: Color. Descripciones por nombre o decimales T ext-align: alineación del texto F ont-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 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} Posicionamiento position:absolute position:normal position:relative float:left z-index

7 unidades de medida emse refiere al tamaño de las mayúsculas (letra M) del tipo de letra aue se toma como referencia) exse refiere al tamaño de las minúsculas (letra x) del tipo de letra que se toma como referencia pxse 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 } Relativas: Absolutas: inpulgadas. 1 pulgada=2,54 cm cmcentímetros mmmilímetros ptpuntos tipográficos. 1 pulgada=72pt. 1pt=1/72in pcpicas. 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}


Descargar ppt "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."

Presentaciones similares


Anuncios Google