Tutorial de HTML y CSS para principiantes

Fundamentos de HTML

Introducción Lenguaje HTML Etiquetas HTML Atributos Estilos Estructura básica de la página Etiquetas básicas Párrafos Encabezados Texto en negrita Texto en cursiva Listas desordenadas Listas ordenadas Enlaces Enlaces internos Imágenes Ancho de la imagen Altura de la imagen Establecer ancho y altura de la imagen Tablas Ancho y altura de la tabla Celdas de encabezado Practicum

Fundamentos de CSS

Introducción a CSS Cómo trabajar con CSS Valores para el color Cualquier color Ancho y alto Alineación del texto Alineación del texto a la derecha Alineación del texto al centro Alineación del texto a la izquierda Alineación del texto justificada Práctica de alineación de texto Negrita Cursiva Tamaño de fuente Familia de fuente Interlineado Valor de line-height sin unidades Propiedad abreviada font Sangría de la primera línea Efectos de texto Subrayado inferior del texto Subrayado superior del texto Tachado del texto Cancelación de efectos para el texto Practicum

Selectores

Relaciones entre etiquetas Herencia de propiedades Agrupación de selectores Propiedades comunes Selectores de descendientes Selector de hijo Selector de clase Etiqueta span Etiqueta div Agrupación de clases Etiqueta con clase específica Selector de descendientes y clases Combinaciones complejas de selectores de descendientes y clases Error común en selectores de descendientes Elemento con múltiples clases Selector por id Selector por id y clases Uso de id Selector por múltiples clases Múltiples selectores de forma conjunta Error con múltiples selectores Agrupación de selectores complejos Error al agrupar Práctica con combinaciones de selectores Prioridad de selectores Nota sobre conflicto de propiedades Reglas de especificidad Prioridad de selectores de descendientes Selector de hermano adyacente Selector de hermano general Selector universal Selectores de atributos Estados de los enlaces Matices de la secuencia de estados de los enlaces Estados link y visited Uso común de los estados de los enlaces Selectores complejos con enlaces Enlace con clase Selección de elementos finales Selección por posición Selección de hijo único Selección de elementos vacíos Selección por posición y tipo de elementos Negación not

Decoración

Color de fondo Fundamentos de los bordes Borde sólido Borde punteado Borde discontinuo Borde en relieve Borde doble Propiedad abreviada para el borde Bordes para lados diferentes Redondeo de bordes del bloque Redondeo de bordes del fondo Crear un círculo Redondeo para esquinas diferentes Cuatro valores Dos valores Tres valores Redondeo en porcentaje Crear un círculo con redondeo en porcentaje Imagen de fondo Repetición de la imagen de fondo Otras propiedades para el fondo Marcadores de listas ul Marcadores cuadrados para listas ul Marcadores de listas ul en forma de círculos Marcadores de listas ul en forma de círculos rellenos Sin marcadores para listas ul Marcadores de listas ol Números romanos en minúscula para listas ol Números romanos en mayúscula para listas ol Letras latinas en minúscula para listas ol Letras latinas en mayúscula para listas ol Letras griegas en minúscula para listas ol Números con cero inicial para listas ol

Modelo de Caja

Margen exterior margin Márgenes margin para diferentes lados Múltiples valores en margin Cuatro valores en margin Dos valores en margin Tres valores en margin Relleno interior padding Rellenos padding para diferentes lados Múltiples valores en padding Expansión de elementos Influencia del borde en la expansión de elementos Influencia conjunta de padding y borde en la expansión de elementos Cancelación de la expansión de elementos Elementos de bloque Anchura y altura de un elemento de bloque Anchura de un elemento de bloque Altura de un elemento de bloque Altura sin contenido Múltiples elementos de bloque adyacentes Elementos en línea Anchura y altura de un elemento en línea Múltiples elementos en línea adyacentes Espaciado entre elementos en línea Definición del modelo de caja Propiedad display Elementos en línea-bloque Anchura y altura de un elemento en línea-bloque Anchura de un elemento en línea-bloque Altura de un elemento en línea-bloque Múltiples elementos en línea-bloque adyacentes Alineación de elementos de bloque Alineación de un elemento de bloque con margen izquierdo Alineación de un elemento de bloque con margen derecho Alineación de elementos en línea Centrado de elementos en línea Centrado de múltiples elementos en línea Alineación de elementos en línea a la derecha Alineación de elementos en línea-bloque Centrado de elementos en línea-bloque Alineación de elementos en línea-bloque a la derecha Elementos flex Altura del padre de elementos flex Anchura del padre de elementos flex Padre en línea-bloque Rellenos padding del padre Márgenes margin a los descendientes Alineación de elementos flex Alineación de elementos flex al centro Alineación de elementos flex a lo largo del padre Alineación de elementos flex a lo largo del padre con márgenes Alineación de elementos flex a lo largo del padre con márgenes iguales

Posicionamiento

Absoluto Relativo Absoluto respecto al padre Absoluto respecto al absoluto Absoluto sin coordenadas Centrado mediante absolute Valores negativos en absolute Posicionamiento fijo Bloque de ancho completo de pantalla Superposición de elementos en el eje Z Regulación de la superposición de elementos en el eje Z Matices de la aplicación de valores negativos de z-index

Flotantes

Introducción a la propiedad float Propiedad float y etiquetas Combinación de float y margin Combinación de float y padding Elementos flotantes bajo etiquetas Efecto de los flotantes en el padre Altura del padre de los flotantes Texto en el padre de los flotantes Ajuste de texto Cancelación del ajuste de texto Div separado con clearfix Altura del padre y clearfix Propiedad float para bloques Propiedad float y varios bloques Propiedad float y padre sin texto

Flexbox

Colocación en fila o columna Colocación de elementos flex en fila invertida Colocación de elementos flex en columna Inversión de columna con elementos flex Eje principal y eje transversal Alineación en el eje principal Alineación en el eje transversal Valor center de la propiedad align-items Centrado sin altura de bloques Centrado con diferente altura de bloques Valor stretch de la propiedad align-items Práctica en alineación de ejes Alineación de elemento individual Orden de bloques flex

Cuadrículas

Introducción a las cuadrículas Pistas y líneas Visualización en el depurador Columnas Unidad fr fr fraccionales Píxeles y fr Porcentajes y fr Función repeat Valor auto Valor auto-fill Función minmax Valor auto-fit Filas Propiedad abreviada para filas y columnas Combinación de filas Combinación de columnas Combinaciones de uniones Superposición de columnas Espacio entre columnas Espacio entre filas Espacio entre columnas y filas Mosaico

Maquetas

Creación de Menús Maquetas de Sitio Sencillas de Una Columna Esquema de Maquetas con Múltiples Contenedores Bloques Estructurales del Sitio Esquema de Maqueta de Dos Columnas Esquema de Maqueta de Sitio de Tres Columnas Etiquetas Especiales para Elementos de Maquetación Etiquetas Principales de Maquetación Etiqueta para Secciones Práctica con Maquetas
↑
bydeenesfrptru