Anexo B. Archivos CSS. tipografia.css. Anexos. Lourdes Fernandez Ramirez tipografia.css * { padding: 0; margin: 0; body { text-align: center;

Documentos relacionados
MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D)

Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales

Paquete de trabajo 3. Diseño Web del Proyecto REMERI. Manual. Enero 2013

DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D)

Resumen Rápido de CSS

Yusef Hassan Montero Francisco Jesús Martín Fernández. Referencia CSS. Todos los derechos reservados

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5.

CSS: Hojas de Estilo en Cascada

III. Hojas de estilo en cascada (CSS)

PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D)

Consejos para el correcto armado de HTML para s

Hojas de Estilos - CSS. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15

IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM TRANSICIONES. Bernardo Chenlo

H T M L. Marquesinas y Listas U.A.C.M COMPUTACIÓN II. Prácticas

Curso de Maquetación Web: HTML 5 y CSS

Introducción a las aplicaciones WEB

HTML. para . Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe

Capítulo 3 Estilo para un documento HTML: CSS

Aprendiendo Yii. Publicación. Armando Arce

Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.)

1. Temario Curso Web Design 2014

Mi primera web... Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas:

(*) Creo un directorio de trabajo llamado /bloggalpon/ en el directorio del usuario. (*) Inicializar el repositorio vacío.

Tema 2, parte II: CSS

CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos

8. Otros usos comunes

CONCEPTO FLOAT CSS. NONE, LEFT, RIGHT Y CENTRAR?. COLOCAR TEXTO ALREDEDOR DE UNA IMAGEN. EJEMPLOS DE POSICIONAMIENTO FLOTANTE (CU01034D)

HTML 2 / Atributos/etiquetas(Tags)

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.

QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un

TU NEGOCIO EN INTERNET

1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers

CSS. Cascading Style Sheets (Hojas de estilo en cascada)

Web con HTML5 Y CSS3 parte 1

Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo.

Hojas de estilo en cascada (CSS) Tecnologías Web

Yusef Hassan Montero Francisco Jesús Martín Fernández. Introducción a DOM. Todos los derechos reservados

1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES

Guía paso a paso Por Víctor Manuel Rodríguez García

Personalización plantilla Kamera. Aisha (Elai the Blogger) para El perro de papel

El fondo con CSS. La propiedad de los fondos o backgrounds. Aplicar color al fondo

CSS1. manual de referencia. Autor: Jorge Sánchez ( año 2003

(X)HTML. Tablas. Las tablas son grupos de celdas que contienen información.

Creación y uso de Hojas de Estilo

MANUAL BÁSICO CSS. Antes de empezar con CSS deberías tener por lo menos unos conocimientos básicos de HTML.

ANEXO. Documento de pautas de comunicación y diseño para el desarrollo de trámites en linea.

CSS 3. Fernando O!ega.

Manual básico de HTML

CURSO DE H.T.M.L. Parte 3/4

lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos definidos con HTML y XHTML

Índice. Introducción. Página 2 Empecemos con un ejemplo. Página 3 Crea tu site: Página 3

Práctica 4: Edición de contenidos web

Vamos a necesitar cuatro ficheros

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

Tutorial de maquetación con CSS

LESS.JS. Haz más con menos

Tecnologías Web para la presentación CSS

Tema: Estilos CSS. Combinadores. Posicionamiento.

Actividad 3: Codificación básica de un texto en HTML

Microsoft Virtual Academy

Introducción...1. Capítulo 1: Instalación de Altova XML Suite Objetivos del capítulo Instalación de Altova XML Suite...

DISEÑO WEB ADAPTATIVO

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

Creación de una página web accesible sencilla

Programación de aplicaciones WEB

Manual de Integrador.NET

CREAR TU PRIMER BLOG

PROGRAMA DE DISEÑO WEB

Diseño y Programación de Páginas Web

ESTRUCTURA DEL CÓDIGO HTML5

HTML. guía rápida de referencia. Autor: Jorge Sánchez ( año 2003

MANUAL PRACTICO DE HTML

Índice. + Manual de CSS:

Diseño de Interfaces de Usuario (Accesibilidad y Usabilidad) M.C. Juan Carlos Olivares Rojas

TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)

SOMBRAS CON CSS ver. 2

MAQUETACIÓN CON CSS. Elementos principales. Diseño fijo, líquido, elástico

Manual de Tabs con Ajax, Javascript, Html y css. La forma más fácil de crear pestañas con Javascript, css y Html

Imágenes y objetos IMÁGENES

EFECTO SOMBRA CSS CON BOX-SHADOW. SOMBRA INTERIOR INSET. BLUR O DIFUMINADO, SPREAD. EJEMPLOS Y EJERCICIOS RESUELTOS (CU01059D)

Wenceslao Zavala.

MANUAL TECNICO DE ING BIZBOX

Metodología para aplicar CSS

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

Guía de estilo básica para portales web de la Administración Pública de la Ciudad de México.

Aplicaciones Telemáticas ( )

LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B)

7.1 Estructura Básica de jas Tablas

Guía para creación de temas para editor de EditandSend

Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción

Introducción a Hojas de Estilo

Desarrollo de Aplicaciones para Internet I. Unidad III - CSS Profesor: M.C. Martín Olguín

Te r ce r a ñ o - Te cnica tura e n D iseño G r á f i co - E s p a cio i nstitucional: P á g i nas We b - P r o f. S e b astián Castro - A ñ o d o s

Widget de catálogos. Manual de Usuario. Versión 2. Madrid 13/08/2015

Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS COMPUTACIÓN

ESTILOS DE LISTAS CSS. LIST-STYLE-TYPE (DISC, NONE, ETC.) LIST-STYLE- POSITION (OUTSIDE, INSIDE), LIST-STYLE- IMAGE. SHORTAND LIST- STYLE.



Transcripción:

Anexo B. Archivos CSS tipografia.css /* */ Lourdes Fernandez Ramirez tipografia.css * { body { padding: 0; margin: 0; text-align: center; #Externo { width: 750px; margin-left: auto; margin-right: auto; #Pagina { width: 750px; #Pagina a.logo_udla { background-repeat: no-repeat; width: 250px; height: 75px; #Pagina span { display: none; #Navegacion { width: 250px; #Contenido { float: right; width: 500px; Anexos 77

#Navegacion, #posicion_global_local, #navegacion_local_2, #texto p.referencia { font-size: 90%; font-family: Tahoma; #navegacion_global { font-family: Tahoma; #navegacion_global a:hover { display: block; #navegacion_global a:hover { color: #fff; #navegacion_global a.inicio:hover { background-color: #f63; #navegacion_global a.catalogo:hover { background-color: #f90; #navegacion_global a.busquedas:hover { background-color: #099; #navegacion_global a.acerca:hover { background-color: #999; #navegacion_global h2 { display: inline; width: 100px; font-size: 90%; text-align: center; border-top: 5px solid #f63; font-weight: normal; line-height: 160%; #navegacion_global ul { 78 Usabilidad de interfaces para facilitar la lectura de colecciones digitales

#navegacion_global li { width: 100px; display: inline; font-size: 90%; text-align: center; line-height: 160%; #navegacion_global li.catalogo { border-top: 5px solid #f90; #navegacion_global li.busquedas { border-top: 5px solid #099; #navegacion_global li.construccion { border-top: 5px solid #555; #navegacion_global li.acerca { border-top: 5px solid #999; #posicion_global_local { width: 100%; #posicion_global_local p { padding: 20px 15px 30px 20px; line-height: 135%; #texto { #texto h3, #texto p { margin-left: 35px; margin-right: 50px; #texto h3 { margin-bottom: 5px; font-size: 130%; Anexos 79

#texto h4 { font-size: 110%; margin-top: 30px; margin-left: 5px; margin-right: 50px; line-height: 145%; #texto h5 { margin-left: 25px; margin-top: 30px; #texto p { margin-top: 20px; #texto ul, #texto li { line-height: 155%; #texto ul { margin-top: 5px; #texto li { margin-left: 33px; list-style-type: circle; margin-top: 7px; margin-right: 35px; #texto li.secciones { margin-left: 45px; #texto p.referencia { padding-bottom: 0; #navegacion_local_2 { margin-left: 35px; margin-right: 50px; padding-top: 40px; 80 Usabilidad de interfaces para facilitar la lectura de colecciones digitales

#navegacion_local_2 li { display: inline; margin-left: 0; margin-right: 0; padding-bottom: 30px; #navegacion_local_2 li.anterior { width: 135px; padding-right: 5px; #navegacion_local_2 li.indice{ width: 125px; text-align: center; padding-left: 5px; padding-right: 5px; #navegacion_local_2 li.siguiente { width: 135px; text-align: right; padding-left: 5px; #arriba a.imagen_arriba { background-repeat: no-repeat; float: right; height: 34px; width: 51px; margin-bottom: 30px; #navegacion_local_1 { text-align: right; #navegacion_local_1 ul { padding-right: 35px; padding-left: 35px; padding-top: 20px; line-height: 150%; Anexos 81

#adaptaciones p { padding-left: 35px; padding-top: 40px; #adaptaciones ul { padding-top: 37px; #adaptaciones li.fuente { #adaptaciones li.negativo { #adaptaciones a.serif, #adaptaciones a.sans_serif, #adaptaciones a.serif_actual, #adaptaciones a.sans_serif_actual, #adaptaciones a.positivo, #adaptaciones a.negativo, #adaptaciones a.positivo_actual, #adaptaciones a.negativo_actual { background-repeat: no-repeat; width: 25px; height: 30px; #adaptaciones a.positivo { background-image: url(../img/positivo.gif); #adaptaciones a.positivo_actual { background-image: url(../img/positivo_actual.gif); #adaptaciones a.positivo:hover { background-image: url(../img/positivo_liga.gif); #adaptaciones a.negativo { background-image: url(../img/negativo.gif); #adaptaciones a.negativo_actual { background-image: url(../img/negativo_actual.gif); #adaptaciones a.negativo:hover { background-image: url(../img/negativo_liga.gif); 82 Usabilidad de interfaces para facilitar la lectura de colecciones digitales

#referencia { #referencia p.lectura { padding: 21px 30px 10px 35px; line-height: 140%; #indice ul { #indice li { display: inline; #indice li.centro { display: none; #indice li.derecho { display: none; #toc { margin-left: 17px; margin-top: 10px; #publicacion { #publicacion p.primera_linea { padding: 20px 30px 20px 35px; line-height: 130%; serif.css #texto { font-family: Georgia, serif; line-height: 150%; font-size: 105%; Anexos 83

sans_serif.css #texto { font-family: Lucida Sans, Verdana, sans-serif; line-height: 150%; positivo.css body { background-color: #eaeadd; #Pagina { color: #666; background-color: #f3f3ea; #Pagina a { color: #099; text-decoration: none; #Pagina a:visited { color: #817157; #Pagina a:hover { color: #817157; text-decoration: underline; #Pagina a.logo_udla { background-image: url(../img/universidad_f3ea.gif); #navegacion_global a, #navegacion_global a:visited { color: #666; #navegacion_global a:hover { color: #fff; text-decoration: none; #navegacion_global a.construccion:hover { background-color: #666; #adaptaciones a.serif { background-image: url(../img/serif_positivo.gif); 84 Usabilidad de interfaces para facilitar la lectura de colecciones digitales

#adaptaciones a.serif_actual { background-image: url(../img/serif_positivo_actual.gif); #adaptaciones a.serif:hover { background-image: url(../img/serif_positivo_liga.gif); #adaptaciones a.sans_serif { background-image: url(../img/sans_serif_positivo.gif); #adaptaciones a.sans_serif_actual { background-image: url(../img/sans_serif_positivo_ actual.gif); #adaptaciones a.sans_serif:hover { background-image: url(../img/sans_serif_positivo_liga.gif); #arriba a.imagen_arriba { background-image: url(../img/arriba_f3ea.gif); negativo.css body { background-color: #333; #Pagina { background-color: #666; color: #fff; #Navegacion { background-color: #666; #Contenido { background-color: #666; #navegacion_global a.construccion:hover { background-color: #333; #Pagina a { color: #9ff; text-decoration: none; Anexos 85

#Pagina a:visited { color: #d8cfbf; #Pagina a:hover { color: #d8cfbf; text-decoration: underline; #Pagina a.logo_udla { background-image: url(../img/universidad_666.gif); #navegacion_global a, #navegacion_global a:hover, #navegacion_global a:visited { color: #fff; text-decoration: none; #adaptaciones a.serif { background-image: url(../img/serif_negativo.gif); #adaptaciones a.serif_actual { background-image: url(../img/serif_negativo_actual.gif); #adaptaciones a.serif:hover { background-image: url(../img/serif_negativo_liga.gif); #adaptaciones a.sans_serif { background-image: url(../img/sans_serif_negativo.gif); #adaptaciones a.sans_serif_actual { background-image: url(../img/sans_serif_negativo_ actual.gif); #adaptaciones a.sans_serif:hover { background-image: url(../img/sans_serif_negativo_liga.gif); #arriba a.imagen_arriba { background-image: url(../img/arriba_666.gif); 86 Usabilidad de interfaces para facilitar la lectura de colecciones digitales