CSS3
CSS, siglas en ingles para Hoja de estilos en cascada es un lenguaje utilizado, para especificar el aspecto de una pagina web para diferentes dispositivos. Realmente, el HTML le dice al navegador la estructura de un documento, mientras que el CSS le dice como renderizarlo.
CSS3 añade muchas capacidades nuevas a la especificacion anterior. auqnue aun esta en proceso de estandarizado. Los procesos que otorga CSS3 son excelentes bordes,fondos, color, textos, transformaciones, transiciones,cajas, contenido, opacidad. son elementos esencial para el diseño y su estructua para cualquier web.
El nombre de hojas de estilo en cascada se debe a que los estilos aplicados se heredan de forma Jerarquica, es decir que si aplicamos un font-size:10px; a la etiqueta body, todos los elementos de texto de nuestra pagina tendran este tamaño de letra a menos que les especifiquemos otro tamaño.
1. Maquetación basica
- Width: Especifica el ancho que debe tener un elemento.
- Height: Especifica el alto que debe tener un elemento.
- Margin: Especifica el espacio de separacion que toma el elemento respecto a los demas. Se puede especificar por separado arriba, abajo, izquierda y derecha.
- Padding: Especifica un margen interno del objeto el cual aumenta su tamaño, este se puede especificar por separado arriba, abajo, izquierda y derecha.
2. Texto y fuentes
- Font-family: Permite especificar el tipo de letra a usar.
- Font-size: Permite especificar el tamaño de la letra
- Font-style: Permite elejir el estilo de letra (normal, cursiva, etc.)
- text-decoration: Permite dar decoracion al texto como subrayado, tachado, linea superior, etc.
- Text-align: Permite centrar, justificar, alinear a la izquierda y derecha el texto
3. Color y fondo
- Color: Permite dar un color al elemento, este color se puede indicar mediante palabras preestablecidas como red, blue, etc., mediante combinacion rgb como tambien por medio de valores de color hexadecimales.
- Backgroud-color: Permite definir el color de fondo que tenra un objeto, al igual que color puede ser una palabra, una combinacion rgb o un valor hexadecimal
- Backgroud-image: Permite definir una imagen como fondo del elemento
- Background-repeat: Permite determinar como se adapta la imagen de fondo con respecto al tamaño del elemento
- box-shadow: Permite dar una sombra al elemento, esta sombra puede ser interna y externa.
4. Listas
- List-style-image: Permite elegir una imagen como viñeta a una lista
- List-style-type: Permite elegir el tipo de viñeta que usara una lista (circulo, cuadrado, etc.
5. Bordes
- border: Anade un borde al elemento
- border-color: Permte definir el color del borde
- border-style: Permite definir el estilo del borde(solido, punteado, etc.
- border-radius: Permite redondear las esquinas de un elemento