Estilos CSS / CSS3

CSS, maquetación CSS Y CSS3
INDICE
Primera parte: CSS
Clase 6.- Introduccion a CSS..........................................................1
Clase 7.- Sintaxis, unidades y selectores básicos............................3
Clase 8.- Atributos de estilos para textos, párrafos, cajas...............4
Clase 9.- Selectores y pseudo elementos........................................4
Clase 10.-Trucos css: reset, jerarquía, important...........................6
Segunda parte: Maquetación CSS
Clase 11.- Modelo de caja...............................................................8
Clase 12.- Posicionamiento absoluto y relativo..............................9
Clase 13.- float..............................................................................10
Clase 14.- Layouts, anchuras fijasy adaptables............................11
Clase 15.- Buenas practicas..........................................................12
Tercera parte: CSS3
Clase 21.- Nuevos estilos CSS3....................................................13
Clase 22.- Pseudoelementos y pseudoselectores..........................15
Clase 23.- Mejoras en la maquetacion con CSS3.........................16
Clase 24.-Animacion CSS3.........................................................17
Clase 25.- Librerias y frameworks................................................20

-1-

Primera parte: CSS (6 - 10)
CLASE 6 (Introducción a CSS)
Lunes 27 Mayo 2013
NOVEDADES
1. Un pixel no se vera igual en:
• Pantalla
• CSS
• Ancho de cualquier dispositivo movil
2. Importar una hoja de estilo dentro de unaetiqueta style:
•
@import url(“a.css”);

• Es mas optimo link rel, porque @import realiza una peticion al
servidor a la par que HTML, ralentizando su carga, mientras que el
otro permite guardar en cache la hoja css a la que hace referencia en
el navegador del usuario (y no realiza peticiones)
3. Por defecto:
• Las clases tienen una alineacion inline-block
• Los ids tienen una alineacionblock
4. Resetear o normalizar:
• Crear un archivo en el cual se incluyan unas lineas que hagan que se
reseteen los estilos aplicados a una web cargada previamente.
• *{
margin:0;
padding:0;
}
RECURSOS GENERICOS (Introduccion CSS)
HERRAMIENTAS GENERICAS (Introduccion CSS)
RECURSOS GENERICOS DEL DESARROLLO WEB

-2-

HERRAMIENTAS GENERICAS DEL DESARROLLO WEB

CLASE 7 (Sintaxis,unidades y selectores básicos)
Martes 28 Mayo 2013
NOVEDADES
1. Propiedades de los elementos:
• font-strecht: Es lo que se expande o contrae una fuente de texto (no
soportada actualmente)
• font-variant: Transforma el texto a minusculas
• white-spacing: Se define el ancho de los espacios en blanco
• text-indent: Establece la tabulacion de la primera linea del texto de
un elemento
•background-attachment: Controla si la imagen de fondo se mueve
o permanece fija cuando se hace scroll en la ventana del navegador
• caption-side: Establece la posición vertical del título o leyenda de
una tabla
• speak-header: Indica si se lee el contenido de la cabecera de una
tabla para cada celda o sólo cuando la celda está asociada a una
cabecera diferente
• table-layout: Establece el algoritmoutilizado para mostrar la tabla
(si sera automatico o fijo)
• outline: Define el perfil de un elemento (lo perfila o define
exteriormente). No se encuentra en el mismo plano que el border.
2. Tamaño del modelo de caja de cualquier elemento (box model):
• Anchura = width(contenido) + borde + padding
RECURSOS GENERICOS (Sintaxis, unidades y selectores básicos)
1.http://html-color-codes.info/codigos-de-colores-hexadecimales/

HERRAMIENTAS GENERICAS (Sintaxis, unidades y selectores básicos)
RECURSOS GENERICOS DEL DESARROLLO WEB

-3-

HERRAMIENTAS GENERICAS DEL DESARROLLO WEB

CLASE 8 (Atributos de estilo para textos, parrafos, cajas)
Miércoles 29 Mayo 2013
NOVEDADES
1. Añadir más de una clase a un elemento:
• ...
2. Crear una label en un formulario asociada a un boton...