Diseño web. Fundamentos de CSS. Informática 4º ESO

Transcripción

1 Diseño web Fundamentos de CSS Informática 4º ESO

2 Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido más que en el formato En la actualidad, para dar formato a las páginas web se emplea CSS (Cascading Style Sheets) Un lenguaje para dar formato basado en la definición de estilos Los estilos se almacenan en hojas, y una página puede cargar varias en cascada

3 Estilos en CSS La definición de un estilo incluye: Un descriptor, que indica a qué elementos o tipos de elementos se les aplica el estilo Una lista de propiedades y valores Propiedad y valor se separan con dos puntos (:) No se emplean comillas ( ) Cada pareja de propiedad y valor termina con punto y coma (;) Normalmente, se cambia de línea tras cada pareja (opcional) La sintaxis es la siguiente: descriptor { propiedad1: valor1; propiedad2: valor2; propiedad3: valor3; }

4 Descriptores en CSS Hay diferentes tipos de descriptores: Etiquetas HTML (por ejemplo, P) Se aplica el estilo a todas esas etiquetas Un identificador (por ejemplo, #nav) Se aplica sólo al elemento con ese identificador (nombre) Una clase (por ejemplo,.navlink) Se aplica sólo a los elementos de esa clase Descriptores más complejos No los veremos por ahora

5 Asignar clases e identificadores A cada etiqueta HTML se le puede asignar un identificador (nombre) con el atributo ID Un ID sólo puede usarse una vez en cada página web <A HREF= index.html ID= inicio > Página de inicio> </A> A cada etiquete HTML se le puede asignar una clase con el atributo CLASS Suele haber varias etiquetas de la misma clase <H2 CLASS= apartado >Título del primer apartado</h2> <H2 CLASS= apartado >Título del segundo apartado</h2>

6 Etiquetas HTML usadas conjuntamente con CSS Hay dos etiquetas HTML que se usan conjuntamente con CSS No tienen ningún efecto por sí mismas Sólo marcan una parte del documento para aplicarle un formato con CSS Esas dos etiquetas son: DIV, que crea una división (sección) del documento, a la que se aplica el formato SPAN, que marca solamente parte de un párrafo (normalmente para aplicar formato de fuente)

7 Diseño de página basado en DIVs Las páginas web modernas usan CSS para dar formato La estructura completa de la página se crea encadenando diferentes DIVs Se crean unos DIVs dentro de otros, tantas veces como haga falta Normalmente, se asigna un ID a cada DIV El ID se usa como descriptor CSS para aplicar formato sólo a un DIV concreto

8 Propiedades y valores En HTML, se pueden modificar las etiquetas con atributos Cada etiqueta tiene su propia lista de atributos En CSS, las propiedades se pueden aplicar a cualquier descriptor Todas las propiedades son válidas para todos los elementos Si una propiedad no es aplicable a un elemento concreto, el navegador hace caso omiso Sólo hay una lista de propiedades CSS

9 Tipos de valores Medidas: Normalmente se indican en píxeles (px) o porcentajes (%) Ejemplo: width: 80%; margin: 12px; Se pueden usar otras unidades: Medidas de longitud como mm, cm o pulgadas (in inches) Medidas de impresión como puntos (pt) o picas (pc) Medidas relativa al tamaño de las letras como em o ex Colores: Como en HTML, usando un código de color o un nombre Ejemplo: color: #FF33AA; URLs: Con esta sintaxis: url(archivo), donde archivo es la URL del archivo o página web deseados: Ejemplo: background-image: url(fondo.jpg);

10 El modelo de cajas de CSS CSS considera cada elemento como un bloque Los bloques se colocan usando el modelo de cajas Para cada bloque, el modelo de caja se define usando estas propiedades: margin (margen): separación entre el borde del elemento y los elementos que lo rodean padding (margen interno): separación entre los contenidos y el borde del elemento border (borde): el borde del elemento (con su anchura) El modelo de caja también define altura (height) y anchura (width) Ambos incluyen los contenidos, pero también el relleno interno y el borde

11 El modelo de cajas de CSS ELEMENTOS DE ALREDEDOR margen borde margen interno -CONTENIDOS DEL ELEMENTO- -CONTENIDOS DEL ELEMENTOborde -CONTENIDOS DEL ELEMENTO- margen margen interno altura anchura

12 Elementos flotantes Usando la propiedad float (flotar), se puede colocar a la izquierda o a la derecha de otros elementos Se usan estas propiedades: float: left; float: right; (Flotar: izquierda) (Flotar: derecha)

13 Elementos de bloque y en línea Hay dos formas básicas de mostrar los elementos en pantalla: Los elementos de bloque (block) son como párrafos: no se pueden colocar en la misma línea que otros elementos Los elementos en línea (inline) son como la etiqueta FONT; se puedec colocar junto a otros elementos en la misma línea

14 Usando la propiedad display Normalmente, cada etiqueta HTML se representa siempre como bloque o en línea; por ejemplo: P, IMG, H1, H2, son elementos de bloque FONT, A, son elementos en línea Sin embargo, esto se puede cambiar mediante la propiedad CSS display (mostrar como) con el valor deseado: display: inline; (Mostrar como: en línea) display: block; (Mostrar como: bloque)

15 Enlaces animados Hay un descriptor especial que se puede usar para animar enlaces (<A>) al mover el cursor sobre ellos El descriptor es a:hover Si definimos diferentes propiedades CSS para los descriptores a y a:hover el resultado será un enlace animado