Curso CSS

CSS (Cascading Style Sheets) se utiliza para diseñar páginas web – por ejemplo, para alterar la fuente, el color, el tamaño y el espaciado del contenido, dividirlo en múltiples columnas, o añadir animaciones y otras características decorativas.

Este módulo contiene los siguientes artículos, que le llevarán a través de toda la teoría básica de CSS, y le proporcionarán una amplia oportunidad para que pruebe algunas habilidades.

1. Cómo funciona el CSS

En este módulo comenzamos con una puesta a tierra teórica, observando qué es CSS, cómo el navegador convierte HTML en un DOM, cómo se aplica CSS a partes del DOM, algunos ejemplos sintácticos muy básicos, y qué código se utiliza para incluir realmente nuestro CSS en nuestra página web.

2. Sintaxis CSS

A continuación, .nos adentramos en la sintaxis CSS con más detalle, observando cómo las propiedades y sus valores se convierten en declaraciones, las declaraciones múltiples en bloques de declaraciones, y los bloques y selectores de declaraciones en reglas CSS completas. Completamos el artículo mirando otras características de la sintaxis CSS como comentarios y espacios en blanco.

3. Selectores

Los selectores se mencionan en el artículo anterior, pero en esta guía entramos en muchos más detalles, mostrando qué tipos de selectores están disponibles y cómo funcionan.

4. Valores y unidades de VCC

Hay muchos tipos de valores de propiedades CSS a considerar, desde valores numéricos y colores hasta funciones que realizan una determinada acción (como incrustar una imagen de fondo o girar un elemento). Algunos de estos dependen de unidades particulares para especificar los valores exactos que están representando – ¿quieres que tu caja tenga 30 píxeles de ancho, o 30 centímetros, o 30 ems? En esta guía, analizamos valores más comunes como la longitud, el color y las funciones simples, así como también exploramos unidades menos comunes como los grados, e incluso valores numéricos sin unidades.

5. Cascada y herencia

CSS tiene dos sistemas diferentes pero relacionados para resolver situaciones en las que hay conflictos de selección (diferentes selectores seleccionan los mismos elementos; ¿cuál gana y quién termina siendo aplicado?) y elementos anidados dentro de otros elementos (algunos de los estilos aplicados a los elementos padre tienen sentido que sean heredados por los elementos hijo; otros no). Este artículo cubre ambos sistemas con suficiente detalle como para ser útil pero no abrumador.

6. El modelo de caja

El modelo de caja CSS es la base del diseño en la Web: cada elemento se representa como una caja rectangular, con el contenido, el relleno, el borde y el margen de la caja construidos uno alrededor del otro como las capas de una cebolla. A medida que un navegador muestra una página web, calcula qué estilos se aplican al contenido de cada caja, qué tan grandes son las capas de cebolla que la rodean y dónde se sitúan las cajas en relación unas con otras. Antes de entender cómo crear diseños CSS, necesita entender el modelo de caja.

7. Depuración de CSS

En el artículo final de este módulo, echamos un vistazo a los fundamentos de la depuración de CSS, incluyendo la exploración del CSS aplicado a una página, y otras herramientas que pueden ayudarle a encontrar errores en su código CSS.

Descargar curso en PDF

PROXIMAMENTE

5 (100%) 1 vote[s]