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

FPE Diseñador Web y Multimedia
Carmina 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:
Propiedad
Selector

Bloques de
Declaraciones

Valor

h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}

CSS
 Hojas Estilos Externas:

CSS
 Sintaxis en el documento HTML
 Declarados dentro del HTML

CSS
 Hoja de estilo vinculada

CSS
 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.

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

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

Similar a Curso FPE Diseño Web. Módulo 4. CSS (20)

Más de Diseñática disenatica.com

Más de Diseñática disenatica.com (9)

Último

Último (20)

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