Curso FPE Diseño Web. Módulo 4. CSS

FPE Diseñador Web y MultimediaCarmina Barreiro. Curso de Adams.

Módulo 1. Teoría. Planificar y entender. Módulo 4.

CSS . El diseño con Mayúscula

CSS

CSS (Cascade Style Sheets): conjunto de reglas de formato que determinan el aspecto del contenido de una página Web.

El contenido de la página(código HTML) reside en archivo HTML

La presentación del código(reglas de formato) reside en archivo CSS

(o en el HEAD)

CSS

CSS (Cascade Style Seets): Más fácil mantener el aspecto del sitio desde una

ubicación central, no es necesario actualizar las propiedades de las distintas páginas.

Depura y simplifica el código HTML y disminuye el tiempo de carga.

Gran flexibilidad y control para lograr el aspecto exacto que desea para la página

CSS

Las Reglas CSS: Consta de: selector y declaración.

Selector: término (por ejemplo p, h1,un nombre de clase o un identificador) que identifica el elemento con formato.

Declaración, o bloque de declaraciones: define las propiedades de estilo.

Cada Declaración consta de: Propiedad y Valor

CSS

Las Reglas CSS:

h1 { font-size: 16

pixels; font-family:

Helvetica; font-weight:bold;

}

Bloques deDeclaraciones

Selector

Propiedad Valor

CSS

Hojas Estilos Externas:

CSS

Sintaxis en el documento HTML Declarados dentro del HTML

CSS

Sintaxis en el documento HTML Hoja de estilo vinculada

CSS

Sintaxis en el documento HTML Importados de una hoja de estilo

CSS

Los tipos de estilo Personalizados (clase): Similares a los de programas de edición de

texto. Añaden atributo “class” a las estiquetas. Etiquetas: Definen formatos a las etiquetas del HTML Selector (Avanzadas): Definen formato de la combinación de

etiqueta y atributo. Por ejemplo estados de un vínculo.

CSS

Introducción Concepto Cascada

1. Estilos Autor

2. Estilos Usuarios

3. Estilos Navegador Concepto Herencia:

Propiedades heredadas por los descendientes de elemetos:

Por ejemplo: tipografía en el elemento <body> se hereda a todos los otros elementos.

Body {color:black} √P, div, h1, h2, h3, ul, li {color:black} X

CSS

El Panel de Estilos de Dreamweaver: Crear una hoja estilos Crear, Modificar y Borrar Reglas de Estilo Ventanas para la Definición de Reglas

(las declaraciones de cada regla): Tipo Fondo Bloque Cuadro Borde Lista Posición Extensiones

CSS

Diseño con capas Float Clear Posición Absoluta Orden Apilamiento

Formatos con estilos: Listas Enlaces

CSS

Trucos con Fondos: Fondo de la web Cajas con esquinas redondeadas Cajas con Fondo Transparente

Consideraciones para el Diseño de Sitios de Contenido Dinámico Combinar capas con comportamientos.

CSS

RECURSOS:

Curso FPE Diseño Web. Módulo 4. CSS

Design

Transcript of Curso FPE Diseño Web. Módulo 4. CSS