CURSO DE HOJAS DE ESTILOS CSS y Divs

UNIDAD 1 – SELECTORES DE ETIQUETAS

• WEB 2.0
• Que es la web 2.0?
• Ejemplos de Web 2.0
• Tecnologías de la web 2.0
• INTRODUCCIÓN AL LENGUAJE HTML
• Que es HTML?
• Estructura básica de un documento HTML
• XHTML
• QUE ES EL XHTML?
• Migrando de HTML a XHTML
• CSS
• Que es el CSS
• Cuales son los beneficios de trabajar con CSS
• Versiones de CSS
• TRABAJANDO CON CSS
• Declaración de reglas de estilo
• Hoja de estilo externa
• Hoja de estilo embebida en el encabezado del documento
• Estilos en línea
• Creación de una hoja de estilo
• Vinculación de una hoja de estilo
• Diferencia entre vinculación e importación de una hoja de estilo
• Reglas de estilo
• Sintaxis de las reglas de estilo
• Selectores
• Formato de comentario
• Estructura y Herencia
• Selectores de grupo
• Atributos tipográficos
• Font Family (Familia de fuente)
• Font Style (Estilo de fuente)
• Font Variant (Variante de fuente )
• Font Weight (Peso de fuente)
• Font Size (Tamaño de fuente)
• Font (Fuente) // declaración en una sola línea
• Atributos de color
• Color(color de texto)
• Text-decoration (decoración de texto)
• Text-align (alineación de texto)
• Text-tranform (transformación de texto)
• Text-indent (sangría de texto )
• Atributos de fondo
• Background-color (color de fondo)
• Background-image (imagen de fondo)
• Background-position (posición de fondo)
• Background-attachmen (anclaje de fondo)
• Background Repeat (Repetir fondo)
• Background (Fondo) (declaración de una sola línea)

UNIDAD 2 - DIAGRAMACIÓN BÁSICA

• ETIQUETA DIV
• PORQUE REEMPLAZAR LAS TABLAS POR ETIQUETAS DIV
• SELECTORES DE ID
• ATRIBUTOS DE TAMAÑO
• Width (ancho)
• height (alto)
• DIAGRAMACIÓN DE UNA COLUMNA
• DIAGRAMACIÓN DE UNA COLUMNA DE DOS Y TRES COLUMNAS POR FLOTACIÓN
• UTILIZACIÓN DEL ATRIBUTO FLOAT
• Utilización del atributo Clear
• Anidamiento de divs
• Modelo de caja
• ATRIBUTOS DE LA CAJA
• Margin (margen)
• Borde (Border)
• Relleno (Padding)
• ESCRITURA RESUMIDA (DECLARACIÓN DE UNA SOLA LÍNEA)
• Declaración una línea para el padding
• Declaración una línea para el margin
• Declaración una línea para el borde
• Diagramación centrada
• Centrado de un div dentro de otro
• Centrado de un div en el naveador

UNIDAD 3 - DIAGRAMACIÓN AVANZADA

• DIAGRAMACIÓN AVANZADA CON POSICIÓN
• Atributos de posición
• Position Static (estático)
• Position Relative (relativo)
• Position Absolute (absoluto)
• Position Fixed
• Atributo de Z-index
• DIAGRAMACIÓN CENTRADA
• Selector universal

UNIDAD 4 - BARRAS DE NAVEGACIÓN

• LISTAS
• Listas Ordenadas
• Listas desordenadas
• Atributos para las listas
• List-style-type
• List-style-image
• List-style-position
• CREACIÓN DE BARRAS DE NAVEGACIÓN
• SELECTORES DESCENDENTES
• Pseudo clases
• Pseudoclases
• La pseudo-clase a:link
• La pseudo-clase a:visited
• La pseudo-clase a:hover
• La pseudo-clase a:active
• La pseudo-clase a:focus
• PSEUDO ELEMENTOS
• El pseudo-elemento :first-line
• El pseudo-elemento :first-letter
• Los pseudo-elementos :before
• Los pseudo-elementos :after

UNIDAD 5 - CLASES Y ESTILOS EN LÍNEA

• SELECTORES DE CLASE
• Creación de selectores de clase
• Aplicación de clases
• SELECTORES DE CONTEXTO
• Orden de cascada
• Jerarquías y especificidad
• Estilos en línea
• DIAGRAMACIÓN DE INTERFAZ DE ALTURA Y ANCHO VARIABLE VARIABLE
• Atributo de overflow
• Ancho mínimo
• Ancho máximo
• Alto mínimo
• alto máximo

UNIDAD 6 - INTEGRACIÓN

• HACKS
• El hack del guión bajo
• El hack del guión bajo
• El uso de !important
• ASIGNACIÓN DE HOJAS DE ESTILO POR NAVEGADOR MEDIANTE IF
• Comentario condicional para IE
• CSS 3.0
• Que es CSS 3.0
• Compatibilidad con los navegadores
• OPACIDAD
• Opacidad en Firefox, Opera, Chrome...
• Opacidad en Internet Explorer
• Bordes Redondeados
• Propiedad border-radius
• Declaración de la propiedad border-radius para safari y firefox
• Sobra de texto
• Propiedad text-shadow
• Valores posibles para la propiedad text-shadow
• Sobra de caja
• Propiedad box-shadow
• Valores posibles para la propiedad box-shadow
• Declaración de la propiedad border-radius para safari y firefox
• Trabajo practico integrador del curso

LABORATORIOS

• LABORATORIO 01
• TP 01 - Migración de html a xhtml
• TP 02 - Etiquetas y herencia
• LABORATORIO 02
• TP 03 - Estructura de una columna con tablas
• TP 04 - Estructura de una columna con divs y css
• TP 04 Estructura de dos columna con divs y css
• TP 05 Estructura de tres columna con divs y css
• TP 06 Inserción y ubicación de contenidos
• LABORATORIO 03
• TP 07 Diagramación básica con position:relative
• TP 08 Diagramación básica con position:absolute
• TP 09 Diagramación avanzada con position:relative y absolute
• TP 10 Diagramación centrada
• LABORATORIO 04
• TP 11 Barra de navegación horizontal
• TP 12 Barra de navegación horizontal con imágenes
• TP 13 Barra de navegación vertical
• TP 14 Barra de navegación horizontal con links
• TP 15 Barra de navegación horizontal con imágenes con links
• TP 16 Barra de navegación vertical con links
• LABORATORIO 05
• TP 17 Manejo de clases
• TP 18 Manejo de contenido fijo
• TP 19 Manejo de contenido variable
• LABORATORIO 06
• TP 20 Opacidad
• TP 21 Manejo de hacks
• TP 22 Proyecto Integrador