[TOC]
Una lista no ordenada se utiliza para agrupar un conjunto de elementos sin un orden particular. Los elementos de una lista no ordenada suelen estar marcados con viñetas.
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>Ejemplo
<ul>
<li>Manzanas</li>
<li>Bananas</li>
<li>Cerezas</li>
</ul>Una lista ordenada se utiliza cuando el orden de los elementos es importante. Los elementos de una lista ordenada suelen estar marcados con números.
<ol>
<li>Primer Elemento</li>
<li>Segundo Elemento</li>
<li>Tercer Elemento</li>
</ol><ol>
<li>Precalentar el horno a 180°C.</li>
<li>Mezclar harina y azúcar en un tazón.</li>
<li>Hornear durante 20 minutos.</li>
</ol>Una lista de descripción se utiliza para crear una lista de términos y sus descripciones.
<dl>
<dt>Término 1</dt>
<dd>Descripción del Término 1.</dd>
<dt>Término 2</dt>
<dd>Descripción del Término 2.</dd>
</dl><dl>
<dt>HTML</dt>
<dd>Lenguaje de Marcado de Hipertexto, el lenguaje de marcado estándar para documentos diseñados para ser visualizados en un navegador web.</dd>
<dt>CSS</dt>
<dd>Hojas de Estilo en Cascada, un lenguaje de estilo utilizado para describir la presentación de un documento escrito en HTML o XML.</dd>
</dl>También puedes anidar listas dentro de otras listas. Por ejemplo:
<ul>
<li>Frutas
<ul>
<li>Manzana</li>
<li>Banana</li>
</ul>
</li>
<li>Verduras
<ul>
<li>Zanahoria</li>
<li>Brócoli</li>
</ul>
</li>
</ul>Las tablas en HTML son una herramienta esencial para organizar y presentar datos de manera estructurada en filas y columnas.
La estructura básica de una tabla en HTML incluye varios elementos:
<table>: Define el inicio y el final de la tabla.<tr>: Define una fila de la tabla.<th>: Define una celda de encabezado, que generalmente se utiliza para títulos de columnas.<td>: Define una celda de datos en la tabla.- <caption> define titulo de una tabla
Ejemplo
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
<td>Bogotá</td>
</tr>
<tr>
<td>Ana</td>
<td>30</td>
<td>Medellín</td>
</tr>
</table>
Puedes utilizar varios atributos para mejorar el aspecto y la funcionalidad de las tablas:
border: Añade un borde a la tabla.cellpadding: Establece el espacio entre el contenido de la celda y el borde de la celda.cellspacing: Establece el espacio entre las celdas.
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Manzana</td>
<td>$1</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
</tr>
</table>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>Las tablas en HTML pueden tener bordes que ayudan a definir visualmente las celdas y las filas, mejorando la legibilidad y la organización de los datos. Hay varias maneras de agregar bordes a las tablas en HTML, utilizando atributos HTML o CSS.
Una forma rápida de agregar bordes a una tabla es utilizando el atributo border en la etiqueta <table>. Este atributo acepta valores numéricos que especifican el grosor del borde.
<table border="1">
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
</tr>
<tr>
<td>Ana</td>
<td>30</td>
</tr>
</table>El método más flexible y moderno es usar CSS para definir bordes. Puedes aplicar bordes a la tabla, a las celdas y a las filas.
<style>
table {
border-collapse: collapse; /* Combina bordes adyacentes */
width: 100%;
}
th, td {
border: 1px solid black; /* Define el borde de las celdas */
padding: 8px; /* Espacio interior en las celdas */
text-align: left; /* Alineación del texto */
}
th {
background-color: #f2f2f2; /* Color de fondo para los encabezados */
}
</style>
<table>
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Manzana</td>
<td>$1</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
</tr>
</table>Puedes utilizar varias propiedades CSS para personalizar los bordes de las tablas:
border-collapse: Controla cómo se manejan los bordes de las celdas adyacentes. Puede sercollapse(combina los bordes) oseparate(mantiene los bordes separados).border-spacing: Se utiliza cuandoborder-collapseestá configurado enseparatepara definir el espacio entre las celdas.border-style: Especifica el estilo del borde (por ejemplo,solid,dashed,dotted).border-color: Define el color del borde.border-width: Establece el grosor del borde.
Ejemplo avanzado
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 2px dashed #4CAF50; /* Borde verde, estilo punteado */
padding: 10px;
}
th {
background-color: #4CAF50; /* Fondo verde para encabezados */
color: white; /* Texto en blanco */
}
</style>
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
</tr>
<tr>
<td>Ana</td>
<td>30</td>
</tr>
</table>Puedes aplicar diferentes estilos de borde a diferentes partes de la tabla:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th {
border: 2px solid black; /* Borde negro para encabezados */
background-color: #f2f2f2;
padding: 10px;
}
td {
border: 1px solid grey; /* Borde gris para celdas de datos */
padding: 8px;
}
</style>
<table>
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Manzana</td>
<td>$1</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
</tr>
</table>Las tablas en HTML pueden tener diferentes tamaños para cada columna, fila o para toda la tabla.
Para establecer el ancho de una tabla en HTML, puedes añadir el atributo style al elemento <table>. Esto te permite definir el ancho de la tabla utilizando CSS. Aquí tienes cómo hacerlo:
<table style="width: 100%;">
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
<td>Bogotá</td>
</tr>
<tr>
<td>Ana</td>
<td>30</td>
<td>Medellín</td>
</tr>
</table>Puedes especificar el ancho en diferentes unidades de medida:
- Porcentaje (%): El ancho se establecerá en relación al ancho del contenedor padre.
- Píxeles (px): El ancho se establecerá en un valor fijo de píxeles.
- Viewport Width (vw): Una unidad relativa que representa un porcentaje del ancho de la ventana de visualización.
Ejemplos:
En porcentaje
<table style="width: 50%;">
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Manzana</td>
<td>$1</td>
</tr>
</table>Ancho en Píxeles
<table style="width: 400px;">
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
</tr>
</table>Si se desea establecer el ancho de columnas específicas, puede hacerlo utilizando el atributo style en las celdas de encabezado <th> o en las celdas de datos <td>.
<table style="width: 100%;">
<tr>
<th style="width: 50%;">Nombre</th>
<th style="width: 25%;">Edad</th>
<th style="width: 25%;">Ciudad</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
<td>Bogotá</td>
</tr>
<tr>
<td>Ana</td>
<td>30</td>
<td>Medellín</td>
</tr>
</table>Para establecer la altura de una fila específica, añade el atributo style en un elemento de fila de la tabla.
Ejemplo obtenido https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_row_height
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>
<h2>Set the height of the second row to 200 pixels</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tables</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background-color: white;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>EMIL</th>
<th>TOBIAS</th>
<th>LINUS</th>
</tr>
</thead>
<tbody>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</tbody>
</table>
<table>
<tbody>
<tr><td>8:00</td><td></td><td></td></tr>
<tr><td>9:00</td><td></td><td></td></tr>
<tr><td>10:00</td><td></td><td></td></tr>
<tr><td>11:00</td><td></td><td></td></tr>
<tr><td>12:00</td><td></td><td></td></tr>
<tr><td>13:00</td><td></td><td></td></tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th></th>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
</tr>
</thead>
<tbody>
<tr><td>8:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>9:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>10:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>11:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>12:00</td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3" style="text-align: center;">DECEMBER</th>
</tr>
</thead>
<tbody>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</tbody>
</table>
</div>
</body>
</html>HTML Tabla - Colspan
Para hacer que una celda se extienda sobre varias columnas, utiliza el atributo colspan
<table border="1">
<tr>
<th colspan="3">Productos Disponibles</th>
</tr>
<tr>
<th>Nombre</th>
<th>Precio</th>
<th>Cantidad</th>
</tr>
<tr>
<td>Manzana</td>
<td>$1</td>
<td>50</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
<td>100</td>
</tr>
<tr>
<td colspan="3">Total de Productos: 150</td>
</tr>
</table>Para hacer que una celda se extienda sobre varias filas, utiliza el atributo rowspan
<table border="1">
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Cantidad</th>
</tr>
<tr>
<td rowspan="3">Frutas</td>
<td>$1</td>
<td>50</td>
</tr>
<tr>
<td>$0.50</td>
<td>100</td>
</tr>
<tr>
<td>$2</td>
<td>75</td>
</tr>
<tr>
<td>Verduras</td>
<td>$1.50</td>
<td>30</td>
</tr>
</table>Cada elemento HTML tiene un valor de visualización predeterminado, dependiendo del tipo de elemento que sea.
Los dos valores de visualización más comunes son bloque (block) y en línea (inline).
Un elemento de nivel de bloque siempre comienza en una nueva línea, y los navegadores añaden automáticamente un espacio (un margen) antes y después del elemento.
Un elemento de nivel de bloque siempre ocupa el ancho completo disponible (se extiende hacia la izquierda y la derecha tanto como puede).
Dos elementos de bloque comúnmente utilizados son: <p> y <div>.
El elemento <p> define un párrafo en un documento HTML.
El elemento <div> define una división o una sección en un documento HTML.
<div>: Se utiliza para agrupar contenido y aplicar estilos o scripts a un conjunto de elementos.
<div>
<h1>Título Principal</h1>
<p>Este es un párrafo dentro de un div.</p>
</div>
<p>: Define un párrafo.
<p>Este es un párrafo de texto.</p>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Se utilizan para definir encabezados de diferentes niveles, donde <h1> es el más importante y <h6> es el menos.
<header>: Define un encabezado para un documento o sección.
<header>
<h1>Título de la Página</h1>
</header>
<footer>: Define un pie de página para un documento o sección.
<footer>
<p>© 2024 Mi Sitio Web</p>
</footer>
Un elemento en línea no comienza en una nueva línea.
Un elemento en línea solo ocupa el ancho necesario.
Un formulario HTML se utiliza para recopilar la entrada del usuario. La entrada del usuario se envía con mayor frecuencia a un servidor para su procesamiento.
<input type="button">: Este tipo de botón se utiliza para crear un botón genérico. No envía un formulario ni realiza ninguna acción por sí mismo, a menos que se le asigne un evento a través de JavaScript.
<input type="checkbox">: Este elemento permite al usuario seleccionar uno o más elementos de un conjunto de opciones. Cada casilla de verificación puede ser activada o desactivada de manera independiente.
<input type="color">: Permite al usuario seleccionar un color de un selector de color. El valor se representará en formato hexadecimal.
<input type="date">: Se utiliza para seleccionar una fecha específica. Este input permite al usuario elegir una fecha a través de un calendario emergente.
<input type="datetime-local">: Permite al usuario seleccionar una fecha y una hora, combinando ambos en un solo campo. Esto es útil para situaciones en las que se necesita una marca de tiempo precisa.
<input type="email">: Este campo está diseñado para capturar direcciones de correo electrónico. Los navegadores pueden validar automáticamente la entrada para asegurarse de que tenga el formato correcto.
<input type="file">: Permite a los usuarios seleccionar y cargar archivos desde su dispositivo. Es comúnmente utilizado en formularios que requieren la carga de documentos, imágenes, etc.
<input type="hidden">: Este tipo de input no es visible para el usuario, pero permite almacenar información que se enviará al servidor junto con el formulario.
<input type="image">: Utiliza una imagen como un botón de envío para el formulario. Cuando el usuario hace clic en la imagen, se envía el formulario.
<input type="month">: Permite al usuario seleccionar un mes y un año específicos. Este tipo de input muestra un selector para elegir un mes del año.
<input type="number">: Permite ingresar un número, y puede incluir características como un control de incremento y decrecimiento. Se puede establecer un rango de valores permitidos.
<input type="password">: Este campo oculta la entrada del usuario (generalmente para contraseñas) al mostrar asteriscos o puntos en lugar de texto claro.
<input type="radio">: Este elemento permite al usuario seleccionar una opción de un grupo de opciones mutuamente excluyentes. Solo se puede seleccionar una opción a la vez.
<input type="range">: Se utiliza para crear un control deslizante que permite al usuario seleccionar un valor dentro de un rango específico. Se puede definir el valor mínimo, máximo y el valor por defecto.
<input type="reset">: Este tipo de botón reinicia todos los campos de un formulario a sus valores predeterminados cuando se hace clic en él.
<input type="search">: Diseñado para capturar consultas de búsqueda. Los navegadores pueden ofrecer características adicionales, como un botón para limpiar el campo.
<input type="submit">: Este botón envía el formulario al servidor para su procesamiento. Es el tipo de botón más utilizado en formularios.
<input type="tel">: Se utiliza para capturar números de teléfono. Los navegadores pueden optimizar la entrada de este tipo para facilitar la digitación en dispositivos móviles.
<input type="text">: Este es un campo de entrada de texto simple que permite al usuario escribir texto. Es el tipo más común de input.
<input type="time">: Permite al usuario seleccionar una hora específica. Este input puede mostrar un selector para elegir horas y minutos.
<input type="url">: Diseñado para capturar direcciones URL. Los navegadores validan automáticamente la entrada para asegurarse de que tenga el formato correcto.
<input type="week">: Permite al usuario seleccionar una semana específica del año. Este tipo de input muestra un selector que facilita la elección de una semana.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Formulario con Diferentes Inputs</title>
</head>
<body>
<h1>Formulario de Ejemplo</h1>
<form>
<!-- Input type="button" -->
<input type="button" value="Botón Genérico" onclick="alert('¡Botón presionado!');"><br><br>
<!-- Input type="checkbox" -->
<label>
<input type="checkbox" name="suscripcion" value="newsletter"> Suscribirse al boletín
</label><br><br>
<!-- Input type="color" -->
<label for="color">Selecciona un color:</label>
<input type="color" id="color" name="color"><br><br>
<!-- Input type="date" -->
<label for="fecha">Selecciona una fecha:</label>
<input type="date" id="fecha" name="fecha"><br><br>
<!-- Input type="datetime-local" -->
<label for="fecha-hora">Selecciona fecha y hora:</label>
<input type="datetime-local" id="fecha-hora" name="fecha-hora"><br><br>
<!-- Input type="email" -->
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" required><br><br>
<!-- Input type="file" -->
<label for="archivo">Cargar un archivo:</label>
<input type="file" id="archivo" name="archivo"><br><br>
<!-- Input type="hidden" -->
<input type="hidden" name="usuario_id" value="12345">
<!-- Input type="image" -->
<input type="image" src="https://fakeimg.pl/250x100/" alt="Enviar Formulario" style="width: 150px; height: 150px;"><br><br>
<!-- Input type="month" -->
<label for="mes">Selecciona un mes:</label>
<input type="month" id="mes" name="mes"><br><br>
<!-- Input type="number" -->
<label for="numero">Número:</label>
<input type="number" id="numero" name="numero" min="1" max="10"><br><br>
<!-- Input type="password" -->
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" required><br><br>
<!-- Input type="radio" -->
<label>Selecciona tu género:</label><br>
<label>
<input type="radio" name="genero" value="masculino"> Masculino
</label><br>
<label>
<input type="radio" name="genero" value="femenino"> Femenino
</label><br><br>
<!-- Input type="range" -->
<label for="rango">Rango de 0 a 100:</label>
<input type="range" id="rango" name="rango" min="0" max="100" value="50"><br><br>
<!-- Input type="reset" -->
<input type="reset" value="Reiniciar"><br><br>
<!-- Input type="search" -->
<label for="busqueda">Buscar:</label>
<input type="search" id="busqueda" name="busqueda" placeholder="Buscar..."><br><br>
<!-- Input type="submit" -->
<input type="submit" value="Enviar"><br><br>
<!-- Input type="tel" -->
<label for="telefono">Teléfono:</label>
<input type="tel" id="telefono" name="telefono" placeholder="555-1234"><br><br>
<!-- Input type="text" -->
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required><br><br>
<!-- Input type="time" -->
<label for="hora">Selecciona una hora:</label>
<input type="time" id="hora" name="hora"><br><br>
<!-- Input type="url" -->
<label for="url">URL:</label>
<input type="url" id="url" name="url" placeholder="https://example.com"><br><br>
<!-- Input type="week" -->
<label for="semana">Selecciona una semana:</label>
<input type="week" id="semana" name="semana"><br><br>
</form>
</body>
</html>Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS.
-
Selecciona todos los elementos que coinciden con el nombre del elemento especificado.Sintaxis:
eltnameEjemplo:inputse aplicará a cualquier elemento ``. -
Selecciona todos los elementos que tienen el atributo de
classespecificado.Sintaxis:.classnameEjemplo:.indexseleccionará cualquier elemento que tenga la clase "index". -
Selecciona un elemento basándose en el valor de su atributo
id. Solo puede haber un elemento con un determinado ID dentro de un documento.Sintaxis:#idnameEjemplo:#tocse aplicará a cualquier elemento que tenga el ID "toc". -
Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.Sintaxis:
* ns|* *|*Ejemplo:*se aplicará a todos los elementos del documento. -
Selecciona elementos basándose en el valor de un determinado atributo.Sintaxis:
[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]Ejemplo:[autoplay]seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).
-
Combinador de hermanos adyacentes
El combinador
+selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.Sintaxis:A + BEjemplo: La reglah2 + pse aplicará a todos los elementos](https://developer.mozilla.org/es/docs/Web/HTML/Element/p) que siguen directamente a un elemento [. -
Combinador general de hermanos
El combinador
~selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.Sintaxis:A ~ BEjemplo: La reglap ~ spanse aplicará a todos los elementos](https://developer.mozilla.org/es/docs/Web/HTML/Element/span) que siguen un elemento [. -
El combinador
>selecciona los elementos que son hijos directos del primer elemento.Sintaxis:A > BEjemplo: La reglaul > lise aplicará a todos los elementos](https://developer.mozilla.org/es/docs/Web/HTML/Element/li) que son hijos directos de un elemento [. -
El combinador
(espacio)selecciona los elementos que son descendientes del primer elemento.Sintaxis:A BEjemplo: La regladiv spanse aplicará a todos los elementos](https://developer.mozilla.org/es/docs/Web/HTML/Element/span) que están dentro de un elemento [. -
Combinador de columna Experimental
El combinador
||selecciona los elementos especificados pertenecientes a una columna.Sintaxis:A || BEjemplo:col || tdseleccionará todos los elementos `](https://developer.mozilla.org/es/docs/Web/HTML/Element/td) que pertenezcan al ámbito de .
El modelo de caja (box model) es un concepto fundamental en CSS que describe cómo se calculan y organizan los elementos en una página web. Cada elemento en HTML se representa como una caja, y el modelo de caja establece cómo se determina el tamaño de estos elementos, incluyendo el contenido, los bordes, el relleno (padding) y los márgenes (margins).
La propiedad box-sizing permite controlar cómo se calculan el ancho y el alto de los elementos, influyendo en si el relleno y el borde se incluyen en el cálculo de las dimensiones.
content-box(valor por defecto): Las dimensiones (widthyheight) se aplican solo al contenido, sin incluir el borde ni el relleno. Es decir, si se definewidth: 200pxy el elemento tiene un borde y relleno, el tamaño total del elemento será mayor.
.mi-caja {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 10px solid black;
}El tamaño total será: 200px (contenido) + 20px (relleno) + 10px (borde) = 250px.
border-box: El relleno y el borde se incluyen en las dimensiones (widthyheight), por lo que si se definewidth: 200px, el tamaño total del elemento será de 200px, incluyendo el relleno y el borde.
.mi-caja {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 10px solid black;
}El tamaño total será exactamente 200px, ya que el borde y el relleno están incluidos dentro de ese valor.
- Es el área donde se muestra el contenido real del elemento, como texto o imágenes. El tamaño de este área puede ajustarse utilizando propiedades como
widthyheight.
- El relleno es el espacio entre el contenido y el borde del elemento. Puedes usar la propiedad
paddingpara añadir espacio dentro del borde, pero fuera del contenido.
- El borde rodea tanto el contenido como el relleno. Puedes personalizar su grosor, estilo y color con la propiedad
border.
- El margen es el espacio exterior que separa el elemento de otros elementos a su alrededor. Puedes usar la propiedad
marginpara agregar espacio entre el borde del elemento y los elementos cercanos.
Ejemplo
1
- Quitando márgenes por defecto
- Agregando padding y border
- Agregando margenes
- Aplicando Margenes
- Centrar elemento Margin:auto (Debe ser elemento bloque y tener ancho definido)
Recomendación centrar elementos con margin auto.
Usando modo corto
https://htmlcolorcodes.com/es/nombres-de-los-colores/
La especificidad en CSS es una medida que determina qué reglas de estilo se aplicarán a un elemento cuando hay múltiples reglas que coinciden con ese elemento. El navegador utiliza esta especificidad para decidir cuál de las reglas tendrá prioridad.
La especificidad se calcula sumando diferentes valores según el tipo de selector que estés utilizando. A continuación, se detallan los tipos de selectores y cómo se les asignan puntos de especificidad:
Selectores de estilo en línea (atributo style directamente en el HTML):
- Especificidad = 1000 puntos.
Selectores de ID:
- Especificidad = 100 puntos.
Selectores de clase, pseudoclases (:hover, :nth-child) y atributos:
- Especificidad = 10 puntos.
Selectores de elementos y pseudoelementos (::before, ::after):
- Especificidad = 1 punto.
Selectores universales (\*), combinadores (+, >, ~) y pseudoclases negadas (:not()):
- No afectan la especificidad.
- Importancia (
!important): Una regla marcada con!importantsobrescribe otras reglas, independientemente de la especificidad.
- Estilos en línea: 1000
- ID: 100
- Clase, pseudoclase, atributo: 10
- Elemento, pseudoelemento: 1
La propiedad display de CSS permite modificar el comportamiento de un elemento HTML, cambiándolo al que le indiquemos, como por ejemplo inline o block
La cascada se refiere al proceso mediante el cual CSS aplica las reglas de estilo en función de su origen y orden de declaración. Este proceso sigue un conjunto de reglas para determinar qué estilo debe aplicarse, basado en los siguientes factores:
- Origen del estilo: Los estilos pueden venir de:
- CSS del navegador (estilos predeterminados).
- CSS del usuario (configuraciones que el usuario puede haber establecido en el navegador).
- CSS del autor (los estilos que defines en tu hoja de estilo).
La herencia en CSS es el mecanismo por el cual ciertos estilos aplicados a un elemento padre son transmitidos automáticamente a sus hijos. No todos los estilos se heredan, pero los que sí lo hacen permiten que puedas aplicar un estilo de forma general en un contenedor y que este se propague a los elementos dentro de él.
No todas las propiedades CSS son heredables. Las propiedades que más comúnmente se heredan incluyen:
- Propiedades relacionadas con el texto:
colorfont-familyfont-sizeline-heighttext-alignvisibility
- Propiedades relacionadas con el espaciado:
letter-spacingword-spacing
Las propiedades relacionadas con el modelo de caja (box model) y el diseño de la página no se heredan automáticamente. Estas incluyen:
marginpaddingborderwidth,heightdisplayposition
Para aplicar estas propiedades a los elementos hijos, tienes que hacerlo explícitamente en cada uno o en su selector correspondiente.
El objetivo del taller es que los participantes comprendan cómo funciona la especificidad en CSS y aprendan a utilizarla de manera efectiva para resolver conflictos de estilos.
Aproximadamente 2 horas.
- ¿Qué es la especificidad?
- Explicación de cómo el navegador decide qué reglas CSS aplicar cuando hay conflictos.
- Introducción a los selectores básicos y cómo afectan la especificidad.
- Reglas de cálculo de especificidad:
- Selectores de ID (100 puntos).
- Selectores de clase, atributos y pseudoclases (10 puntos).
- Selectores de elementos y pseudoelementos (1 punto).
!importanty cómo afecta la cascada.
Materiales:
- Diapositivas con ejemplos visuales de especificidad.
- Tabla de especificidad con diferentes tipos de selectores.
-
Ejemplo básico:
- Demuestra cómo los diferentes selectores afectan la especificidad.
<div class="container"> <p id="parrafo">Hola Mundo</p> </div>
/* Estilo por etiqueta */ p { color: blue; } /* Estilo por clase */ .container p { color: green; } /* Estilo por ID */ #parrafo { color: red; }
Resultado esperado: El color del texto será rojo, ya que el selector de ID tiene mayor especificidad que los selectores de clase y etiqueta.
-
Demostración de
!important:p { color: blue !important; } #parrafo { color: red; }
Resultado esperado: El color será azul, porque
!importanttiene prioridad, independientemente de la especificidad.
Distribuye a los participantes los siguientes ejercicios para que los realicen por su cuenta o en grupos pequeños:
Dado el siguiente código, pide a los participantes que calculen la especificidad y determinen qué estilos se aplicarán:
<div id="main" class="content">
<h1>Título</h1>
<p>Este es un párrafo.</p>
</div>
/* Estilo por etiqueta */
h1 {
color: blue;
}
/* Estilo por clase */
.content h1 {
color: green;
}
/* Estilo por ID */
#main h1 {
color: red;
}Pregunta:
- ¿Qué color tendrá el título
<h1>?
Respuesta esperada:
- El título será rojo, ya que el selector de ID tiene mayor especificidad.
Modifica el siguiente código para que el párrafo tenga color amarillo, sin usar !important.
<div id="box" class="content">
<p class="text">Texto aquí</p>
</div>
cssCopiar código#box p {
color: blue;
}
.content .text {
color: green;
}Respuesta esperada:
Una solución es agregar un selector con mayor especificidad:
#box .text {
color: yellow;
}Dales a los participantes un archivo HTML con múltiples elementos y clases, y pídeles que agreguen estilos CSS para lograr un diseño específico. Deberán aplicar todo lo aprendido sobre especificidad para resolver los conflictos y obtener el resultado correcto.
HTML:
<div class="header" id="top">
<h1>Bienvenido</h1>
<p id="intro">Este es el sitio web.</p>
</div>
<div class="content">
<h2>Contenido principal</h2>
<p class="highlight">Texto destacado</p>
</div>
<footer id="footer">
<p>Pie de página</p>
</footer>Desafío CSS:
- El
<h1>en el.headerdebe ser de color blanco. - El texto del
<p>en.contentdebe ser rojo. - El texto del
<footer>debe ser gris.
Pistas:
- Usar selectores combinados (clases y etiquetas).
- Resolver conflictos de estilo con la especificidad correcta.
- Revisar las soluciones de los participantes.
- Discutir errores comunes y cómo evitarlos.
- Aclarar dudas sobre cómo calcular la especificidad y cómo usarla correctamente.
Al final del taller, los participantes deberán:
- Entender cómo se calcula la especificidad.
- Resolver conflictos de estilo aplicando la especificidad correcta.
- Conocer cómo y cuándo usar
!importanty otras técnicas avanzadas.
Este gráfico muestra el flujo de trabajo del navegador para renderizar una página web en la pantalla, desde la carga del HTML y CSS hasta que los elementos visuales aparecen en la pantalla.
-
- Cuando el navegador carga el HTML, lo convierte en un árbol estructurado llamado DOM. Este árbol representa todos los elementos y nodos en el documento HTML.
- JavaScript puede afectar el DOM si se ejecuta en esta fase, por ejemplo, al manipular el contenido HTML.
-
- Similar al DOM, pero para los estilos. El navegador convierte las reglas CSS en una estructura que llama CSSOM.
- JavaScript también puede afectar el CSSOM si manipula los estilos dinámicamente.
-
- Una vez creados el DOM y el CSSOM, el navegador los combina para formar el árbol de representación o Render Tree.
- Este árbol contiene solo los elementos visibles y sus estilos, excluyendo aquellos que tienen
display: none.
-
- En esta etapa, el navegador calcula el tamaño y la posición de cada elemento visible en la página según el árbol de representación.
- Los cálculos son necesarios para saber cómo debe disponerse cada elemento en relación con los demás y con el tamaño de la pantalla.
-
- Finalmente, en la etapa de pintado o Paint, el navegador dibuja cada elemento en la pantalla.
- JavaScript puede afectar tanto el DOM como el CSSOM en diferentes momentos del proceso de renderizado.
- Si JavaScript modifica el DOM o CSSOM después de haber creado el Render Tree, puede provocar re-flujos o re-paints, que son costosos en términos de rendimiento.
- DOM y CSSOM: Estructuras del contenido y estilos de la página.
- Render Tree: Combina DOM y CSSOM para mostrar solo los elementos visibles.
- Layout: Calcula posición y tamaño de cada elemento.
- Paint: Renderiza en pantalla los elementos con sus estilos.
En CSS, existen varias unidades de medida que puedes utilizar para definir tamaños, márgenes, espacios, entre otros. Estas se dividen principalmente en unidades relativas y absolutas
Estas unidades tienen un tamaño fijo y no cambian en función del entorno.
- px (píxeles): es la unidad más utilizada y representa un píxel en la pantalla. Es ideal para elementos con tamaños fijos.
- cm (centímetros), mm (milímetros), in (pulgadas): unidades físicas, menos comunes en la web, pero útiles en impresión.
- pt (puntos) y pc (picas): principalmente usados en diseño gráfico e impresión. Un punto equivale a 1/72 de pulgada.
Estas unidades dependen del contexto, como el tamaño de la pantalla, el tamaño de fuente, o el tamaño del contenedor.
- % (porcentaje): es relativo al tamaño del elemento contenedor. Útil para diseños responsivos.
- em: relativo al tamaño de fuente del elemento padre. Si el elemento padre tiene
font-size: 16px, entonces1emserá igual a16px. - rem (root em): similar a
em, pero en este caso, se basa en el tamaño de fuente del elemento raíz (html). Es consistente en toda la página. - vw (viewport width) y vh (viewport height): porcentajes del tamaño de la ventana gráfica.
1vwes el 1% del ancho de la pantalla y1vhes el 1% de la altura. - vmin y vmax: son relativos a la dimensión más pequeña o más grande de la ventana gráfica, respectivamente.
1vmines el 1% de la dimensión menor, y1vmaxes el 1% de la dimensión mayor. - ch: basado en el ancho del carácter “0” de la fuente utilizada en el elemento.
- ex: basado en la altura de la “x” minúscula de la fuente del elemento.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Unidades CSS</title>
<style>
/* Estilos base */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
font-size: 16px; /* Tamaño base para cálculos rem */
}
/* Encabezado con altura fija (unidad absoluta) */
header {
background-color: #3498db;
color: white;
padding: 20px; /* Unidad absoluta */
height: 60px; /* Unidad absoluta */
}
h1 {
margin: 0;
font-size: 2rem; /* Unidad relativa al tamaño de fuente del root (html) */
}
/* Contenedor principal con ancho relativo */
.container {
width: 80%; /* Unidad relativa al ancho del contenedor padre */
margin: 0 auto;
padding: 20px;
}
/* Caja con dimensiones mixtas */
.box {
background-color: #ecf0f1;
width: 300px; /* Unidad absoluta */
height: 15em; /* Unidad relativa al tamaño de fuente del elemento */
margin-bottom: 20px;
padding: 1em; /* Unidad relativa al tamaño de fuente del elemento */
border: 2px solid #34495e;
}
/* Texto con tamaño relativo */
.text {
font-size: 1.2em; /* Unidad relativa al tamaño de fuente del elemento padre */
line-height: 1.5;
}
/* Botón con dimensiones relativas y absolutas */
.button {
display: inline-block;
padding: 10px 20px; /* Unidades absolutas */
background-color: #2ecc71;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 1rem; /* Unidad relativa al tamaño de fuente del root */
transition: background-color 0.3s;
}
.button:hover {
background-color: #27ae60;
}
/* Elemento con ancho basado en el viewport */
.viewport-width {
background-color: #e74c3c;
color: white;
padding: 10px;
width: 50vw; /* Unidad relativa al ancho del viewport */
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Ejemplo de Unidades CSS</h1>
</header>
<div class="container">
<div class="box">
<p class="text">Este es un párrafo dentro de una caja. La caja tiene un ancho fijo en píxeles y una altura en em.</p>
</div>
<a href="#" class="button">Botón de Ejemplo</a>
<div class="viewport-width">Este elemento tiene un ancho del 50% del viewport.</div>
</div>
</body>
</html>.container{
max-width: 400px;
max-height: 400px;
width: 600px;
height: 400px;
background-color: blueviolet;
margin: 30px auto;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/unidades.css">
<title>Ejemplo de Unidades CSS</title>
</head>
<body>
<header>
<h1>Ejemplo de Unidades CSS</h1>
</header>
<div class="container">
<div class="box">
<p class="text">Este es un párrafo dentro de una caja. La caja tiene un ancho fijo en píxeles y una altura en em.</p>
</div>
<a href="#" class="button">Botón de Ejemplo</a>
<div class="viewport-width">Este elemento tiene un ancho del 50% del viewport.</div>
</div>
</body>
</html>.responsive-box {
width: 80%; /* El ancho es del 80% del contenedor */
max-width: 500px; /* No puede ser mayor de 500px */
min-width: 200px; /* No puede ser menor de 200px */
height: 50vh; /* La altura es del 50% de la pantalla */
max-height: 400px; /* No puede ser mayor de 400px */
min-height: 150px; /* No puede ser menor de 150px */
background-color: lightblue;
}.column {
width: 70%;
min-width: 300px; /* Ancho mínimo de 300px */
max-width: 800px; /* Ancho máximo de 800px */
background-color: lightcoral;
}.card {
width: 90vw; /* 90% del ancho de la ventana */
max-width: 600px; /* Máximo 600px de ancho */
min-width: 280px; /* Mínimo 280px de ancho */
height: 50vh; /* 50% de la altura de la ventana */
max-height: 400px; /* Máximo 400px de alto */
min-height: 200px; /* Mínimo 200px de alto */
padding: 20px;
background-color: lightgreen;
border: 2px solid #333;
border-radius: 10px;
}.responsive-text {
font-size: clamp(1rem, 2vw + 1rem, 2.5rem);
}1rem es el tamaño mínimo.
2vw + 1rem es el tamaño preferido (una fórmula que ajusta según el ancho del viewport).
2.5rem es el tamaño máximo.
.container {
width: 150px; /* Define un ancho fijo de 150 píxeles para el contenedor */
height: 54px; /* Define una altura fija de 54 píxeles para el contenedor */
background-color: bisque; /* Establece el color de fondo del contenedor a bisque (un tono claro) */
padding: 10px; /* Añade un espacio interno de 10 píxeles en todos los lados del contenido */
border: solid 5px black; /* Aplica un borde sólido de 5 píxeles de grosor y color negro */
font-size: 28px; /* Establece el tamaño de la fuente en 28 píxeles */
box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho y alto total */
overflow: visible; /* Permite que el contenido se desborde fuera de los límites si es mayor */
}
/*------------------------------------------
.container {
width: 150px; /* Define un ancho fijo de 150 píxeles para el contenedor */
height: 54px; /* Define una altura fija de 54 píxeles para el contenedor */
background-color: bisque; /* Establece el color de fondo del contenedor a bisque (un tono claro) */
padding: 10px; /* Añade un espacio interno de 10 píxeles en todos los lados del contenido */
border: solid 5px black; /* Aplica un borde sólido de 5 píxeles de grosor y color negro */
font-size: 28px; /* Establece el tamaño de la fuente en 28 píxeles */
box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho y alto total */
overflow: hidden; /* Permite que el contenido se oculte y no se desborde si es mayor */
}.container {
width: 150px; /* Define un ancho fijo de 150 píxeles para el contenedor */
height: 54px; /* Define una altura fija de 54 píxeles para el contenedor */
background-color: bisque; /* Establece el color de fondo del contenedor a bisque */
padding: 10px; /* Añade un espacio interno de 10 píxeles en todos los lados del contenido */
border: solid 5px black; /* Aplica un borde sólido de 5 píxeles de grosor y color negro */
font-size: 28px; /* Establece el tamaño de la fuente en 28 píxeles */
box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho y alto total */
overflow: scroll; /* Agrega barras de desplazamiento si el contenido es mayor que el área visible */
}
/*-----------------------------------------------
.container {
width: 160px; /* Define un ancho fijo de 160 píxeles para el contenedor */
height: 74px; /* Define una altura fija de 74 píxeles para el contenedor */
background-color: bisque; /* Establece el color de fondo a bisque */
padding: 10px; /* Añade un espacio interno de 10 píxeles alrededor del contenido */
border: solid 5px black; /* Aplica un borde sólido de 5 píxeles de grosor y color negro */
font-size: 28px; /* Establece el tamaño de fuente en 28 píxeles */
box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho y alto total */
overflow: auto; /* Agrega barras de desplazamiento solo si el contenido excede el área visible */
}
/*----------------------------------------------------
.container {
width: 160px; /* Define un ancho fijo de 160 píxeles para el contenedor */
height: 74px; /* Define una altura fija de 74 píxeles para el contenedor */
background-color: bisque; /* Establece el color de fondo a bisque */
padding: 10px; /* Añade un espacio interno de 10 píxeles alrededor del contenido */
border: solid 5px black; /* Aplica un borde sólido de 5 píxeles de grosor y color negro */
font-size: 28px; /* Establece el tamaño de fuente en 28 píxeles */
box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho y alto total */
overflow: auto; /* Agrega barras de desplazamiento solo si el contenido excede el área visible */
text-overflow: ellipsis; /* Muestra "..." si el texto es más largo que el ancho del contenedor */
}- text-overflow: ellipsis: Esta propiedad es útil cuando tienes texto que podría desbordarse fuera de los límites del contenedor. Al agregar
text-overflow: ellipsis, el texto que no cabe en el ancho especificado será truncado y se mostrará con puntos suspensivos (...) al final, indicando que hay más contenido.
Para que esta propiedad funcione correctamente, es necesario cumplir con dos condiciones:
- overflow: hidden o overflow: auto: Debe estar definido el
overflowpara restringir el contenido del contenedor. - white-space: nowrap: El texto debe estar en una sola línea, lo que significa que el contenedor no permite el salto de línea.
.container {
width: 160px;
height: 74px;
background-color: bisque;
padding: 10px;
border: solid 5px black;
font-size: 28px;
box-sizing: border-box;
overflow: auto;
white-space: nowrap; /* Evita el salto de línea */
text-overflow: ellipsis; /* Muestra "..." si el texto es más largo que el contenedor */
}- overflow: scroll: Con esta configuración, el contenedor mostrará barras de desplazamiento (horizontal y vertical) incluso si el contenido cabe dentro de su área visible.
En CSS, puedes posicionar cajas (elementos) de varias maneras, usando diferentes valores de la propiedad position. Cada uno permite un control distinto sobre cómo se posicionan los elementos en el flujo del documento y en relación con otros elementos.
Es el valor predeterminado de position en CSS. Los elementos con position: static siguen el flujo normal del documento y no pueden ser desplazados mediante top, right, bottom, o left.
Ejemplo
.static-box {
position: static;
width: 200px;
height: 100px;
background-color: lightblue;
}Con position: relative, el elemento permanece en el flujo del documento, pero se puede mover respecto a su posición original usando top, right, bottom, y left. Sin embargo, deja su espacio en blanco en su posición original, como si no se hubiera movido.
.relative-box {
position: relative;
top: 20px; /* Se mueve 20px hacia abajo */
left: 10px; /* Se mueve 10px hacia la derecha */
width: 200px;
height: 100px;
background-color: lightcoral;
}Un elemento con position: absolute se posiciona en relación con el primer contenedor padre que tenga position distinto de static (puede ser relative, absolute o fixed). Si no tiene un contenedor padre posicionado, se posicionará en relación al body o al viewport. El elemento se saca del flujo normal del documento.
.absolute-box {
position: absolute;
top: 30px;
right: 20px;
width: 200px;
height: 100px;
background-color: lightgreen;
}Con position: fixed, el elemento se posiciona en relación con el viewport, por lo que permanecerá en la misma posición cuando se haga scroll. Como absolute, también se saca del flujo normal del documento.
.fixed-box {
position: fixed;
bottom: 10px;
right: 10px;
width: 150px;
height: 50px;
background-color: lightyellow;
}position: sticky permite que un elemento actúe como relative mientras esté dentro del viewport, pero se "pegará" a una posición específica cuando se haga scroll y esa posición sea alcanzada. Para que funcione, es necesario especificar al menos una de las propiedades top, right, bottom, o left.
.sticky-box {
position: sticky;
top: 0; /* Se pega a la parte superior cuando se alcanza */
width: 100%;
height: 50px;
background-color: lightpink;
}- Static: Para el posicionamiento estándar de elementos en el flujo normal.
- Relative: Para mover elementos en relación con su posición original.
- Absolute: Para elementos que necesitan una posición exacta dentro de un contenedor específico.
- Fixed: Para elementos que deben permanecer visibles mientras se hace scroll (ej., menús flotantes).
- Sticky: Para elementos que deben "pegarse" a la pantalla al hacer scroll (ej., cabeceras en tablas o secciones).
Cree un documento Html con el siguiente codigo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/posicion.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box static">Static</div>
<div class="box relative">Relative</div>
<div class="box absolute">Absolute</div>
<div class="box fixed">Fixed</div>
</div>
</body>
</html>Cree una hoja de estilos para lograr el siguiente aspecto de la pagina:
z-index es una propiedad en CSS que define el orden de apilamiento de elementos HTML en el eje Z, o en otras palabras, determina qué elementos se ven "encima" o "debajo" de otros cuando se superponen en una página web.
- Orden de Apilamiento: Los elementos con un
z-indexmás alto se mostrarán sobre aquellos con unz-indexmás bajo. - Necesidad de Posicionamiento: Solo funciona en elementos que tienen una propiedad
positionconfigurada en algo distinto destatic(comorelative,absolute,fixed, osticky). - Valores: Puede ser positivo, negativo o cero:
- Positivos: Colocan el elemento encima de otros con un
z-indexmenor. - Negativos: Ponen el elemento por debajo.
- Cero o Auto: Sigue el orden natural del flujo de HTML si no se especifica un valor.
- Positivos: Colocan el elemento encima de otros con un
- Contexto de Apilamiento: Un elemento con
positioncrea un nuevo "contexto de apilamiento" para sus elementos hijos, lo que significa que elz-indexsolo afectará el orden entre elementos dentro de ese contexto, sin influir fuera de él.
.cuadro1 {
position: relative;
z-index: 1; /* Se apilará debajo */
}
.cuadro2 {
position: relative;
z-index: 2; /* Se apilará encima */
}-
Cree una nueva estructura de proyecto web
-
Ingrese a la Url https://unsplash.com/es y descargue una imagen
-
Busque una letra de su preferencia.
-
En el Html Agrega el siguiente codigo
-
En el CSS agregue el siguiente código tenga en cuenta que el nombre de la fuente depende del seleccionado en google fonts
-
Ejecute el html usando Live server
Recurso web generación waves https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections
-
Construya una hoja de estilo que permita generar el siguiente diseño final
URL Recursos : https://webgradients.com
nth-of-typeen CSS permite seleccionar elementos en función de su posición dentro de su tipo específico (es decir, su etiqueta) en un contenedor. Esto es útil para aplicar estilos a elementos específicos de un mismo tipo sin tener que añadir clases adicionales.
Las pseudoclases en CSS son palabras clave que se añaden a selectores para aplicar estilos en un estado específico de un elemento. Ayudan a mejorar la interacción y la experiencia visual, ya que permiten cambiar el estilo de un elemento en función de su estado, posición, o de la interacción del usuario.
| Pseudoclase | Función |
|---|---|
:hover |
Aplica estilos cuando el usuario pasa el cursor sobre un elemento. |
:active |
Aplica estilos cuando un elemento está en estado activo, por ejemplo, al hacer clic en él. |
:focus |
Aplica estilos cuando un elemento recibe el foco (por ejemplo, al hacer clic en un input). |
:nth-child(n) |
Selecciona el enésimo hijo de un elemento padre, donde n puede ser un número o expresión. |
:first-child |
Selecciona el primer hijo de un elemento padre. |
:last-child |
Selecciona el último hijo de un elemento padre. |
:not(selector) |
Selecciona elementos que no cumplen con el selector especificado dentro de :not(). |
:checked |
Aplica estilos a elementos de formulario (checkbox o radio) cuando están marcados. |
:disabled |
Aplica estilos a elementos de formulario que están deshabilitados. |
:enabled |
Aplica estilos a elementos de formulario que están habilitados. |
:required |
Aplica estilos a elementos de formulario que son obligatorios. |
:optional |
Aplica estilos a elementos de formulario que no son obligatorios. |
:first-of-type |
Selecciona el primer elemento de su tipo dentro de su elemento padre. |
:last-of-type |
Selecciona el último elemento de su tipo dentro de su elemento padre. |
:only-child |
Selecciona elementos que son el único hijo de su elemento padre. |
:empty |
Selecciona elementos que no tienen hijos, incluyendo texto o elementos hijos. |
:root |
Selecciona el elemento raíz del documento (generalmente el elemento <html>). |
:before |
Inserta contenido antes del contenido de un elemento, usando content. |
:after |
Inserta contenido después del contenido de un elemento, usando content. |
:link |
Aplica estilos a enlaces (<a>) que aún no han sido visitados. |
:visited |
Aplica estilos a enlaces (<a>) que han sido visitados. |
Ejercicio
body {
margin: 0;
min-height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
h1 {
text-align: center;
color: #2d3436;
}
.card {
background: white;
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Hover Button */
.hover-button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #6c5ce7;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.hover-button:hover {
background-color: #5b4cdb;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.hover-button:active {
transform: translateY(0);
}
/* Custom Link */
.custom-link {
color: #0984e3;
text-decoration: none;
position: relative;
}
.custom-link:visited {
color: #6c5ce7;
}
.custom-link:hover {
color: #74b9ff;
}
.custom-link:hover::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: -2px;
left: 0;
background-color: currentColor;
transition: width 0.3s ease;
}
/* Custom Input */
.custom-input {
padding: 8px 12px;
border: 2px solid #dfe6e9;
border-radius: 4px;
width: 200px;
transition: all 0.3s ease;
}
.custom-input:focus {
outline: none;
border-color: #6c5ce7;
box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}
.custom-input:invalid {
border-color: #ff7675;
}
/* Custom List */
.custom-list {
list-style: none;
padding: 0;
}
.custom-list li {
padding: 8px 12px;
margin: 4px 0;
background-color: #f5f6fa;
border-radius: 4px;
transition: all 0.3s ease;
}
.custom-list li:first-child {
background-color: #a8e6cf;
}
.custom-list li:last-child {
background-color: #ffd3b6;
}
.custom-list li:nth-child(even) {
background-color: #dfe6e9;
}
.custom-list li:hover {
transform: translateX(10px);
background-color: #81ecec;
}
/* Checkbox and Radio Styles */
.checkbox-group, .radio-group {
margin: 1rem 0;
}
.custom-checkbox, .custom-radio {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
user-select: none;
}
.custom-checkbox input, .custom-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark, .radio-mark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 4px;
transition: all 0.2s ease;
}
.radio-mark {
border-radius: 50%;
}
.custom-checkbox:hover input ~ .checkmark,
.custom-radio:hover input ~ .radio-mark {
background-color: #ccc;
}
.custom-checkbox input:checked ~ .checkmark,
.custom-radio input:checked ~ .radio-mark {
background-color: #6c5ce7;
}
.checkmark:after,
.radio-mark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after,
.custom-radio input:checked ~ .radio-mark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.custom-radio .radio-mark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
/* Required and Optional Fields */
.form-example {
display: flex;
flex-direction: column;
gap: 1rem;
}
.input-group input {
padding: 8px 12px;
border: 2px solid #dfe6e9;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}
.input-group input:required {
border-left: 4px solid #6c5ce7;
}
.input-group input:optional {
border-left: 4px solid #00b894;
}
/* Enabled vs Disabled Buttons */
.state-button {
padding: 10px 20px;
margin: 0 10px;
border: none;
border-radius: 4px;
background-color: #00b894;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.state-button:disabled {
background-color: #b2bec3;
cursor: not-allowed;
opacity: 0.7;
}
/* Empty and Not Empty */
.empty-box {
border: 2px solid #dfe6e9;
padding: 1rem;
margin: 0.5rem 0;
min-height: 50px;
border-radius: 4px;
}
.empty-box:empty {
background-color: #ffeaa7;
border-style: dashed;
}
/* Not Selector */
.not-example p {
padding: 0.5rem;
margin: 0.5rem 0;
background-color: #dfe6e9;
border-radius: 4px;
}
.not-example p:not(.special) {
background-color: #fab1a0;
color: #2d3436;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Pseudo-classes Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>CSS Pseudo-classes Demo</h1>
<div class="card">
<h2>Hover Effects</h2>
<button class="hover-button">Hover me!</button>
</div>
<div class="card">
<h2>Links</h2>
<a href="#" class="custom-link">Click me</a>
</div>
<div class="card">
<h2>Input States</h2>
<input type="text" placeholder="Focus me!" class="custom-input">
</div>
<div class="card">
<h2>List Items</h2>
<ul class="custom-list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>
</div>
<div class="card">
<h2>Checkbox and Radio</h2>
<div class="checkbox-group">
<label class="custom-checkbox">
<input type="checkbox">
<span class="checkmark"></span>
Check me
</label>
</div>
<div class="radio-group">
<label class="custom-radio">
<input type="radio" name="radio" checked>
<span class="radio-mark"></span>
Option 1
</label>
<label class="custom-radio">
<input type="radio" name="radio">
<span class="radio-mark"></span>
Option 2
</label>
</div>
</div>
<div class="card">
<h2>Required and Optional Fields</h2>
<form class="form-example">
<div class="input-group">
<input type="text" required placeholder="Required field">
</div>
<div class="input-group">
<input type="text" placeholder="Optional field">
</div>
</form>
</div>
<div class="card">
<h2>Enabled vs Disabled</h2>
<button class="state-button">Enabled Button</button>
<button class="state-button" disabled>Disabled Button</button>
</div>
<div class="card">
<h2>Empty and Not Empty</h2>
<div class="empty-box"></div>
<div class="empty-box">Not empty</div>
</div>
<div class="card">
<h2>Not Selector</h2>
<div class="not-example">
<p class="special">Special paragraph</p>
<p>Normal paragraph 1</p>
<p>Normal paragraph 2</p>
</div>
</div>
</div>
</body>
</html>Ejemplo 2
body {
margin: 0;
min-height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #2d3436;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
h1, h2 {
color: #2d3436;
}
.card {
background: white;
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
/* Table of Contents */
.table-of-contents {
background: white;
padding: 1rem;
border-radius: 8px;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.table-of-contents a {
display: block;
color: #6c5ce7;
text-decoration: none;
padding: 0.5rem;
margin: 0.25rem 0;
border-radius: 4px;
transition: all 0.3s ease;
}
.table-of-contents a:hover {
background: #f0f2f5;
padding-left: 1rem;
}
/* Target Example */
.target-example:target {
background: #ffeaa7;
transform: scale(1.02);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* Language Example */
p[lang="en"] {
border-left: 4px solid #00b894;
}
p[lang="es"] {
border-left: 4px solid #e17055;
}
p[lang="fr"] {
border-left: 4px solid #74b9ff;
}
/* Form Styles */
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #2d3436;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 0.75rem;
border: 2px solid #dfe6e9;
border-radius: 4px;
font-size: 1rem;
transition: all 0.3s ease;
box-sizing: border-box;
}
/* Focus Within Example */
.search-wrapper {
position: relative;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
right: 1rem;
color: #b2bec3;
transition: all 0.3s ease;
}
.focus-within-demo:focus-within .search-icon {
color: #6c5ce7;
transform: scale(1.1);
}
/* Form Validation States */
input:valid {
border-color: #00b894;
}
input:invalid {
border-color: #ff7675;
}
input:optional {
border-style: dashed;
}
input:required {
border-style: solid;
}
/* Number Range */
input[type="number"]:in-range {
background-color: #a8e6cf;
}
input[type="number"]:out-of-range {
background-color: #ffb8b8;
}
/* Selection Example */
.selection-demo::selection {
background-color: #6c5ce7;
color: white;
}
/* Focus Order Example */
.focus-order {
display: flex;
gap: 1rem;
}
.focus-order button {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
background-color: #6c5ce7;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.focus-order button:hover {
background-color: #5b4cdb;
}
.focus-order button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.4);
}
/* Placeholder Styling */
input::placeholder {
color: #b2bec3;
font-style: italic;
}
/* Focus States */
input:focus {
outline: none;
border-color: #6c5ce7;
box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}
/* Hover States */
.card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>More CSS Pseudo-classes Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>More CSS Pseudo-classes</h1>
<nav class="table-of-contents">
<h2>Jump to Section:</h2>
<a href="#section1">Target Example</a>
<a href="#section2">Language Example</a>
<a href="#section3">Form Validation</a>
<a href="#section4">Number Range</a>
</nav>
<div id="section1" class="card target-example">
<h2>:target Example</h2>
<p>This section will highlight when targeted through the URL hash.</p>
</div>
<div id="section2" class="card">
<h2>:lang Example</h2>
<p lang="en">This is English text</p>
<p lang="es">Este es un texto en español</p>
<p lang="fr">C'est un texte en français</p>
</div>
<div id="section3" class="card">
<h2>Form Validation States</h2>
<form class="validation-form">
<div class="form-group">
<label>Email (required):</label>
<input type="email" required placeholder="Enter valid email">
</div>
<div class="form-group">
<label>Website (optional):</label>
<input type="url" placeholder="https://example.com">
</div>
<div class="form-group focus-within-demo">
<label>Search with icon:</label>
<div class="search-wrapper">
<input type="search" placeholder="Type to search...">
<span class="search-icon">🔍</span>
</div>
</div>
<div class="form-group">
<label>Password Strength:</label>
<input type="password" pattern=".{8,}" placeholder="Min 8 characters">
</div>
</form>
</div>
<div id="section4" class="card">
<h2>Number Range Example</h2>
<div class="form-group">
<label>Age (between 18-100):</label>
<input type="number" min="18" max="100" placeholder="Enter age">
</div>
<div class="form-group">
<label>Score (0-10):</label>
<input type="number" min="0" max="10" step="0.5" placeholder="Enter score">
</div>
</div>
<div class="card">
<h2>Selection Example</h2>
<p class="selection-demo">Try selecting this text to see custom selection colors!</p>
</div>
<div class="card">
<h2>Focus Order Example</h2>
<div class="focus-order">
<button>First</button>
<button>Second</button>
<button>Third</button>
</div>
</div>
</div>
</body>
</html>Ejercicio Hacer una pagina donde se pueda visualizar un listado de partes para computador. En el Stock hay 15 Productos. La información que se debe mostrar es la siguiente:
- Código de la parte
- Nombre de la parte
- Año de fabricación
- Descripción
La tabla debe mostrar las filas impares de color gris claro y la pares de color gris oscuro. Cuando el usuario posicione el cursor sobre el componente debe cambiar el color de fondo de la fila a negro y La letra debe ser blanca.
Los pseudoelementos en CSS son elementos especiales que permiten aplicar estilos a partes específicas de un elemento sin modificar el HTML. Son útiles para agregar contenido decorativo, personalizar marcadores, o dar estilo a la primera línea o letra de un texto, entre otros. Los pseudoelementos se identifican usando una doble colonia (::) en CSS3, aunque muchos navegadores también soportan la notación de una sola colonia (:) por razones de compatibilidad.
| Pseudoelemento | Descripción | Ejemplo de Uso |
|---|---|---|
::before |
Inserta contenido antes de un elemento. Ideal para iconos o decoraciones adicionales. | button::before { content: "🔥"; } |
::after |
Inserta contenido después de un elemento, como un decorativo o un icono de flecha. | button::after { content: " ➜"; } |
::first-line |
Aplica estilos solo a la primera línea del texto dentro de un bloque, útil para textos largos. | p::first-line { font-weight: bold; color: #4CAF50; } |
::first-letter |
Estiliza solo la primera letra de un bloque de texto, común en libros y revistas. | p::first-letter { font-size: 2em; font-weight: bold; color: #FF5733; } |
::placeholder |
Aplica estilos al texto de marcador de posición (placeholder) en campos de entrada. |
input::placeholder { color: #999; font-style: italic; } |
::selection |
Aplica estilos a la parte del texto seleccionada por el usuario con el cursor. | ::selection { background-color: #4CAF50; color: white; } |
::marker |
Estiliza los marcadores de listas en elementos <ul> y <ol>. |
li::marker { color: #FF5733; font-size: 1.2em; } |
::backdrop |
Aplica estilos al fondo de elementos de diálogo (<dialog>) en pantallas modales. |
dialog::backdrop { background-color: rgba(0, 0, 0, 0.7); } |
::cue |
Personaliza las señales visuales o subtítulos en contenido multimedia. | ::cue { color: blue; } |
::file-selector-button |
Estiliza el botón de selección de archivo en campos <input type="file">. |
input[type="file"]::file-selector-button { background: #4CAF50; color: white; } |
Los combinadores en CSS son símbolos o palabras clave que permiten seleccionar elementos en función de su relación con otros elementos dentro del documento HTML. Existen varios tipos de combinadores que se utilizan para definir relaciones específicas entre elementos en la estructura del DOM, lo que te permite aplicar estilos más precisos y específicos.
El combinador descendiente (espacio en blanco entre dos selectores) selecciona los elementos que están dentro de otro elemento, sin importar cuántos niveles de profundidad haya.
/* Selecciona todos los elementos `<p>` dentro de un elemento con clase `.container` */
.container p {
color: blue;
}*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #004080;
}
#capa {
background-color: blue;
padding: 20px;
display: flex;
gap: 20px;
border: 2px dashed #000080;
}
#capa p{
background-color: burlywood;
}
El combinador hijo selecciona los elementos que son hijos directos de otro elemento, es decir, que están un nivel directamente dentro de otro.
/* Selecciona solo los elementos `<li>` que son hijos directos de un `<ul>` con clase `.menu` */
.menu > li {
list-style-type: none;
}#capa > p{
background-color: rgb(13, 177, 68);
}
El combinador adyacente selecciona el primer elemento hermano que viene inmediatamente después de otro elemento.
/* Selecciona el primer elemento `<p>` que sigue a cualquier elemento `<h2>` */
h2 + p {
margin-top: 0;
}
El combinador de hermanos generales selecciona todos los elementos hermanos que vienen después de un elemento específico, sin importar si están directamente después o si hay otros elementos entre ellos.
/* Selecciona todos los elementos `<p>` que son hermanos de un `<h2>` y vienen después de él */
h2 ~ p {
color: gray;
}
Las variables en CSS, conocidas como Custom Properties, permiten almacenar valores reutilizables en el código CSS, facilitando el mantenimiento y la personalización de estilos. Para declarar una variable, se utiliza la sintaxis --nombre-variable, y para usarla, la función var()
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}Para aplicarlas en propiedades CSS, se usa var() seguido del nombre de la variable.
body {
font-size: var(--font-size);
color: var(--primary-color);
}
.button {
background-color: var(--secondary-color);
color: #fff;
padding: 10px 20px;
}Cree un nuevo proyecto y agregue el siguiente codigo:
Responsive Design o Diseño Responsive es una técnica de diseño web que permite que las páginas web se adapten automáticamente a diferentes tamaños de pantalla y dispositivos, como teléfonos móviles, tablets, laptops y monitores de escritorio. El objetivo es ofrecer una experiencia de usuario óptima en cualquier dispositivo, asegurando que el contenido se vea bien y sea fácil de usar, independientemente del tamaño o resolución de la pantalla.
El diseño responsive se basa en tres componentes principales:
-
Layouts Flexibles (Grid y Flexbox)
Usando unidades relativas como porcentajes,
emorem, en lugar de unidades fijas comopx, es posible ajustar el tamaño y la posición de los elementos en función del tamaño de la pantalla. CSS Grid y Flexbox son herramientas poderosas que permiten construir layouts adaptables. -
Media Queries
Las media queries en CSS permiten aplicar diferentes estilos en función de las características del dispositivo, como el ancho de la pantalla. Esto permite definir breakpoints (puntos de corte) para que el diseño cambie a diferentes tamaños.
Viewport https://whatismyviewport.com/
El viewport es el área visible de una página web en un dispositivo, como la pantalla de un teléfono móvil, tablet, laptop o monitor de escritorio. En otras palabras, es la "ventana" a través de la cual el usuario ve el contenido de una página web.
El viewport es fundamental en Responsive Design porque define el espacio disponible en el que se mostrará la página. Para asegurar que el contenido se ajuste correctamente a diferentes tamaños de pantalla, usamos el viewport para controlar y adaptar los elementos de la página de manera dinámica.
Para que el diseño de una página sea realmente adaptable, especialmente en dispositivos móviles, se utiliza la etiqueta <meta viewport> en el HTML. Esta etiqueta permite configurar cómo el navegador debe ajustar el contenido en función del ancho de la pantalla.
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="viewport" content="width=device-width, maximum-scale=1"><meta name="viewport" content="width=device-width, user-scalable=no">
Las imágenes responsivas son imágenes que se adaptan al tamaño de la pantalla y al dispositivo en el que se están viendo, para optimizar tanto la apariencia como el rendimiento. Esto es esencial para crear una buena experiencia de usuario en sitios de diseño responsive.
Usar CSS para hacer que las imágenes se adapten al ancho del contenedor sin excederlo:
img {
max-width: 100%;
height: auto;
}El atributo srcset permite definir múltiples versiones de una imagen para diferentes tamaños de pantalla o resoluciones, de modo que el navegador seleccione la mejor opción según el tamaño del viewport y la densidad de píxeles del dispositivo.
<img src="imagen-pequeña.jpg"
srcset="imagen-grande.jpg 1024w, imagen-mediana.jpg 640w, imagen-pequeña.jpg 320w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Descripción de la imagen">
srcset: Lista de imágenes y el ancho para el cual están optimizadas.
sizes: Define qué tamaño debe usar el navegador según el ancho del viewport. En el ejemplo:
- Para pantallas menores de 600px, la imagen tomará el 100% del ancho del viewport.
- Para pantallas mayores, tomará el 50% del ancho del viewport.
Cuando se usan imágenes de fondo en CSS, background-size permite ajustar cómo se muestra la imagen dentro del contenedor.
.hero {
background-image: url('imagen-grande.jpg');
background-size: cover;
background-position: center;
}cover: Hace que la imagen cubra todo el contenedor, aunque se recorte en algunos lados.
contain: Escala la imagen para que esté completamente visible en el contenedor, aunque pueda dejar espacio vacío.
Los SVGs son gráficos vectoriales escalables y se adaptan a cualquier tamaño sin perder calidad, lo cual es ideal para logotipos, iconos y gráficos. Al usar SVG, la imagen puede ajustarse automáticamente al contenedor sin necesidad de varios archivos de diferentes tamaños.
<img src="imagen.svg" alt="Logo">La etiqueta <picture> permite definir múltiples fuentes de imagen según condiciones como el tamaño de la pantalla o el tipo de dispositivo.
<picture>
<source srcset="imagen-mobile.jpg" media="(max-width: 600px)">
<source srcset="imagen-tablet.jpg" media="(max-width: 1024px)">
<img src="imagen-desktop.jpg" alt="Descripción de la imagen">
</picture>- Si el viewport es menor de 600px, se carga
imagen-mobile.jpg. - Si está entre 600px y 1024px, se carga
imagen-tablet.jpg. - Si es mayor a 1024px, se carga
imagen-desktop.jpg.
- Optimización de rendimiento: Carga versiones más ligeras en dispositivos móviles, mejorando la velocidad de carga.
- Ahorro de ancho de banda: Evita cargar imágenes innecesariamente grandes en pantallas pequeñas.
- Mejor experiencia de usuario: Asegura que las imágenes se adapten adecuadamente a cualquier pantalla.
Los media queries son una característica de CSS que permite aplicar estilos específicos a una página web en función de las características del dispositivo o el entorno en el que se visualiza, como el tamaño de la pantalla, la resolución, la orientación, entre otros. Son fundamentales en el diseño responsive porque ayudan a adaptar el diseño de una página a distintos dispositivos, como teléfonos, tablets, laptops y monitores de escritorio.
Las media queries se definen utilizando la palabra clave @media seguida de una o más condiciones, y dentro de ellas se especifican los estilos que se aplicarán cuando se cumplan esas condiciones.
/* Estilos generales aplicables a todos los dispositivos */
body {
font-size: 16px;
background-color: white;
}
/* Estilos para pantallas de hasta 768px de ancho (tablets y móviles) */
@media (max-width: 768px) {
body {
font-size: 14px;
background-color: lightgrey;
}
}
/* Estilos para pantallas mayores a 1024px de ancho (escritorios) */
@media (min-width: 1024px) {
body {
font-size: 18px;
background-color: lightblue;
}
}En este ejemplo:
- Para pantallas de hasta 768px de ancho, el fondo será gris claro y el tamaño de fuente será de 14px.
- Para pantallas mayores a 1024px, el fondo será azul claro y el tamaño de fuente será de 18px.
Permiten cambiar el diseño de una página según el ancho de la pantalla. Por ejemplo, mostrar una sola columna en pantallas pequeñas y múltiples columnas en pantallas grandes.
@media (max-width: 600px) {
.container {
display: block;
}
}
@media (min-width: 601px) {
.container {
display: flex;
}
}Se pueden aplicar estilos diferentes según si el dispositivo está en modo retrato o modo paisaje.
@media (orientation: landscape) {
body {
font-size: 18px;
}
}Permiten ajustar el diseño según la resolución de pantalla, útil para dispositivos con alta densidad de píxeles (como pantallas Retina).
@media (min-resolution: 192dpi) {
img {
width: 50%;
}
}También es posible especificar estilos solo para ciertos tipos de dispositivos, aunque hoy en día esto se usa menos ya que el enfoque se centra más en el tamaño de la pantalla.
@media screen and (max-width: 600px) {
/* Estilos específicos para pantallas de hasta 600px */
}
@media print {
/* Estilos específicos para impresión */
}- Tipos de medios (
screen,print,all): Especifican el tipo de dispositivo o contexto donde se aplican los estilos. - Características: Atributos como
width,height,orientation,resolution. - Operadores: Permiten combinar condiciones con palabras clave como
and,not, yonly.
@media only screen and (min-width: 768px) and (orientation: portrait) {
.container {
font-size: 20px;
padding: 10px;
}
}Los tipos de medios se refieren a la categoría general de un dispositivo específico. Aunque normalmente los sitios web se desarrollan pensando en pantallas, puede ser útil crear estilos adaptados a dispositivos específicos, como impresoras o lectores de pantalla de audio.
@media print {
/* … */
}También puedes considerar múltiples dispositivos. Por ejemplo, esta regla @media usa dos consultas de medios tanto para dispositivos de pantalla como de impresión:
@media screen, print {
/* … */
}Aplicable a todos los dispositivos.
Destinado a material paginado y documentos visibles en una pantalla en modo de vista previa para impresión. Por favor, consulte la sección de medios paginados, y la sección de Media en el tutorial de Introducción para más información acerca de problemas de formateo específicos para los medios paginados.
Destinado a principalmente a pantallas de computadora a color.
Cada característica de medios verifica una característica específica del navegador o dispositivo.
| Nombre | Resumen | Notas |
|---|---|---|
width |
Anchura del viewport | |
height |
Altura del viewport | |
aspect-ratio |
Relación de aspecto anchura-altura del viewport | |
orientation |
Orientación del viewport | |
resolution |
Densidad de pixeles del dispositivo | |
scan |
Proceso de escaneo del dispositivo | |
grid |
¿El dispositivo es un grid o un mapa de bits? | |
update-frequency |
Qué tan rápido (si lo hace) puede el dispositivo modificar la apariencia del contenido | Incluido en Media Queries Nivel 4 |
overflow-block |
Cómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloque | Incluido en Media Queries Nivel 4 |
overflow-inline |
¿Puede desplazarse hacia el contenido que excede los límites del viewport? | Incluido en Media Queries Nivel 4 |
color |
Componente de número de bits por color del dispositivo, o cero si el dispositivo no es a color. | |
color-index |
Número de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla. | |
display-mode |
Modo de visualización de la aplicación, según se especifique en la propiedad display del manifiesto de la aplicación web. | Definido en la especificación del Manifiesto de Aplicación Web. |
monochrome |
Bits por pixel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático. | |
inverted-colors |
¿El agente usuario o el Sistema Operativo está invirtiendo los colores? | Incluido en Media Queries Nivel 4 |
pointer |
¿El mecanismo de entrada principal es un dispositivo apuntador? y de ser así, ¿qué tan preciso es? | Incluido en Media Queries Nivel 4 |
hover |
¿El mecanismo de entrada principal permite que el usuario posicione el puntero sobre los elementos? | Incluido en Media Queries Nivel 4 |
any-pointer |
¿Hay algún mecanismo de entrada que sea dispositivo apuntador? y de ser así, ¿qué tan preciso es éste? | Incluido en Media Queries Nivel 4 |
any-hover |
¿Algún mecanismo de entrada disponible permite que el usuario posicione el puntero sobre los elementos? | Incluido en Media Queries Nivel 4 |
light-level |
Nivel de luz ambiental actual | Incluido en Media Queries Nivel 4 |
scripting |
¿Se soporta lenguaje de script (p.ej. JavaScript)? | Incluido en Media Queries Nivel 4 |
device-width Obsoleto |
Anchura de la superficie de representación del dispositivo | Descontinuado en Media Queries Nivel 4 |
device-height Obsoleto |
Altura de la superficie de representación del dispositivo | Descontinuado en Media Queries Nivel 4 |
device-aspect-ratio Obsoleto |
Relación de aspecto anchura-altura del dispositivo | Descontinuado en Media Queries Nivel 4 |
-webkit-device-pixel-ratio Non-standard |
Número de pixeles reales del dispositivo por pixel CSS | No estándar; Específica de WebKit/Blink. De ser posible, use la característica resolution en su lugar. |
-webkit-transform-3d Non-standard |
¿Se soportan transformaciones 3D? |
No estándar; Específica de WebKit/Blink |
-webkit-transform-2d Non-standard |
¿Se soportan transformaciones 2D? |
No estándar; Específica de WebKit |
-webkit-transition Non-standard |
Se soportan transiciones CSS? |
No estándar; Específica de WebKit |
-webkit-animation Non-standard |
¿Se soportan animaciones CSS? |
No estándar; Específica de WebKit |
@media print {
body {
font-size: 10pt;
}
}
@media screen {
body {
font-size: 13px;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
body {
line-height: 1.4;
}
}La media query @media (hover: hover) es una característica avanzada en CSS que detecta si el dispositivo del usuario admite el uso de la acción de "hover" (colocar el cursor sobre un elemento) o no. Esto es especialmente útil para adaptar la interfaz en dispositivos táctiles, como teléfonos móviles o tablets, que no tienen la capacidad de "hover" en el mismo sentido que un mouse en una computadora de escritorio.
En dispositivos que admiten el hover (como computadoras con ratón o ciertos tablets con lápiz), puedes aplicar efectos o cambios visuales al pasar el cursor sobre un elemento. Sin embargo, en dispositivos táctiles que no admiten hover, estos estilos son innecesarios y podrían interferir con la usabilidad.
/* Estilos generales para todos los dispositivos */
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
/* Solo aplica el efecto hover en dispositivos que soportan hover */
@media (hover: hover) {
.button:hover {
background-color: #45a049;
}
}Todos los dispositivos verán el botón con el color de fondo verde (
#4CAF50) y el texto blanco.Sin embargo, solo los dispositivos que admiten hover (como las computadoras con mouse) verán el cambio de color de fondo cuando el usuario coloque el cursor sobre el botón.
Hay algunas variaciones que se pueden usar en media queries relacionadas con hover:
@media (hover: none): Se aplica en dispositivos que no soportan hover, como la mayoría de los dispositivos móviles.
@media (hover: none) {
/* Ajusta los estilos para pantallas táctiles */
.button {
padding: 12px 24px;
}
}La media query @media (max-width: 1250px) se utiliza en CSS para aplicar estilos específicos cuando el ancho de la pantalla es igual o menor a 1250 píxeles. Esto es común en diseño responsive para ajustar el diseño de una página en función del tamaño de la pantalla, permitiendo una experiencia de usuario óptima en dispositivos como tablets, laptops y pantallas de escritorio más pequeñas.
/* Estilos generales (para pantallas mayores a 1250px) */
.navbar {
display: flex;
flex-direction: row;
font-size: 18px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
/* Estilos para pantallas de 1250px o menos */
@media (max-width: 1250px) {
.navbar {
flex-direction: column; /* Cambia a barra de navegación vertical */
}
.container {
padding: 0 20px; /* Reduce el padding para pantallas más pequeñas */
}
body {
font-size: 16px; /* Disminuye ligeramente el tamaño de la fuente */
}
}.navbar: Cambia la dirección de la barra de navegación a una columna en pantallas de hasta 1250px de ancho, ideal para ahorrar espacio en dispositivos más pequeños.
.container: Ajusta el padding para que el contenido tenga más espacio en los bordes y se vea menos comprimido en pantallas más pequeñas.
body: Disminuye el tamaño de fuente para que el texto sea más legible en pantallas más pequeñas.
Usar max-width es ideal cuando se busca que un diseño específico se aplique en tamaños de pantalla más pequeños o iguales a un límite definido. Algunos ejemplos comunes incluyen:
- 1250px o menos: Ajustes para laptops más pequeñas.
- 1024px o menos: Ajustes para tablets en posición horizontal.
- 768px o menos: Ajustes para dispositivos móviles y tablets en posición vertical.
La media query @media (color) en CSS se utiliza para verificar si el dispositivo en uso admite colores en su pantalla. Esto puede ser útil cuando se desea aplicar estilos específicos en dispositivos con capacidades de color, diferenciándolos de aquellos que solo admiten blanco y negro o escala de grises (aunque estos dispositivos son cada vez menos comunes).
/* Estilos básicos aplicables a todos los dispositivos */
body {
font-family: Arial, sans-serif;
background-color: white;
color: black;
}
/* Solo aplica si el dispositivo admite color */
@media (color) {
body {
background-color: #f0f8ff;
color: #333;
}
h1 {
color: #4CAF50;
}
a {
color: #FF5733;
}
}Dado que la mayoría de los dispositivos modernos admiten color, esta media query no es muy común hoy en día. Sin embargo, puede ser útil en entornos específicos donde el soporte de color no esté garantizado, como algunos dispositivos e-ink (pantallas de tinta electrónica) o impresoras en blanco y negro.
A veces, es posible que necesite crear una media query que dependa de múltiples condiciones. En estos casos, se utilizan operadores lógicos como not, and y only. También es posible combinar varias media queries en una lista separada por comas, lo que permite aplicar los mismos estilos en distintas circunstancias.
La media query @media (min-width: 30em) and (orientation: landscape) se utiliza para aplicar estilos específicos cuando el ancho mínimo de la pantalla es de 30em (o aproximadamente 480 píxeles en pantallas estándar) y la orientación del dispositivo es horizontal (landscape). Esto es útil para ajustar el diseño en dispositivos que se giran a modo horizontal, como tablets y teléfonos móviles.
/* Estilos generales para todos los dispositivos y orientaciones */
.container {
display: flex;
flex-direction: column;
padding: 10px;
font-size: 16px;
}
/* Estilos para dispositivos en orientación horizontal con un ancho mínimo de 30em */
@media (min-width: 30em) and (orientation: landscape) {
.container {
flex-direction: row; /* Cambia la dirección de los elementos a horizontal */
padding: 20px;
}
.sidebar {
width: 30%; /* Aumenta el ancho de la barra lateral */
}
.content {
width: 70%; /* Aumenta el ancho de la sección de contenido */
}
.footer {
font-size: 14px; /* Ajusta el tamaño de fuente en modo horizontal */
}
}.container: Cambia la dirección de los elementos dentro del contenedor a fila (horizontal) cuando el dispositivo se gira a modo landscape y tiene un ancho mínimo de 30em..sidebary.content: Ajustan sus anchos para aprovechar el espacio horizontal adicional..footer: Ajusta el tamaño de la fuente para una mejor legibilidad en orientación horizontal.
La media query @media screen and (min-width: 30em) and (orientation: landscape) se utiliza para aplicar estilos únicamente en pantallas (excluyendo otros medios como impresión), donde el ancho mínimo es de 30em (aproximadamente 480 píxeles en pantallas estándar) y la orientación del dispositivo es horizontal (landscape). Este enfoque permite adaptar el diseño específicamente en dispositivos como tablets o teléfonos móviles que se giran a modo horizontal y cumplen con el ancho mínimo.
/* Estilos generales aplicables en todas las orientaciones y tamaños */
.header {
font-size: 16px;
padding: 10px;
}
.nav {
display: none;
}
.main-content {
padding: 15px;
}
/* Estilos para pantallas con ancho mínimo de 30em y orientación horizontal */
@media screen and (min-width: 30em) and (orientation: landscape) {
.header {
font-size: 18px; /* Aumenta el tamaño de fuente de la cabecera */
}
.nav {
display: block; /* Muestra el menú de navegación en modo horizontal */
}
.main-content {
padding: 20px; /* Aumenta el padding de la sección de contenido */
display: flex;
flex-direction: row; /* Cambia el diseño a una disposición en fila */
}
.sidebar {
width: 30%; /* Define el ancho de la barra lateral */
}
.content {
width: 70%; /* Define el ancho de la sección de contenido */
}
}.header: Aumenta el tamaño de la fuente para mejor visibilidad en modo horizontal..nav: Muestra el menú de navegación solo cuando el dispositivo está en landscape y tiene al menos 30em de ancho..main-content: Cambia el diseño a disposición en fila para aprovechar el ancho horizontal, con una barra lateral (.sidebar) y una sección de contenido (.content) que se distribuyen el espacio.
Esta media query es útil en diseño responsive para optimizar el diseño específicamente en pantallas y dispositivos móviles que se giran en orientación horizontal, mejorando la usabilidad y aprovechando el espacio extra.
La media query @media (min-height: 680px), screen and (orientation: portrait) se usa para aplicar estilos en dos casos específicos:
- Cuando la altura de la pantalla es de al menos 680 píxeles, independientemente de otros factores, lo cual es útil para dispositivos con pantallas altas, como ciertos teléfonos móviles o monitores en orientación vertical.
- Cuando la pantalla está en orientación vertical (portrait), sin importar el tamaño de la pantalla, aplicándose a todos los dispositivos en modo retrato.
La coma (,) entre las condiciones actúa como un operador "OR", lo que significa que si se cumple cualquiera de las dos condiciones, los estilos dentro de la media query se aplicarán.
/* Estilos generales aplicables en todas las orientaciones y tamaños */
.header {
font-size: 16px;
padding: 10px;
}
.main-content {
display: flex;
flex-direction: row;
padding: 20px;
}
/* Estilos específicos para pantallas de altura mínima de 680px o en orientación vertical */
@media (min-height: 680px), screen and (orientation: portrait) {
.header {
font-size: 20px; /* Aumenta el tamaño de la fuente en pantallas altas o en vertical */
padding: 15px;
}
.main-content {
flex-direction: column; /* Cambia a disposición en columna en pantallas verticales */
}
.sidebar {
display: none; /* Oculta la barra lateral para pantallas verticales o con suficiente altura */
}
}.header: Aumenta el tamaño de la fuente y el padding cuando la altura de la pantalla es al menos 680px o cuando el dispositivo está en orientación vertical..main-content: Cambia la dirección de los elementos a columna en dispositivos en orientación vertical o en pantallas altas, facilitando la visualización en dispositivos móviles..sidebar: Oculta la barra lateral en estas condiciones para ahorrar espacio y mejorar la usabilidad.
Esta combinación es útil en diseño responsive para:
- Asegurar que el contenido sea más legible en dispositivos con pantallas altas o en orientación vertical.
- Reorganizar el layout para mejorar la experiencia en pantallas donde la altura es predominante o en dispositivos móviles en modo retrato.
- Optimizar la interfaz para pantallas móviles, tablets y pantallas más grandes en orientación vertical, proporcionando una experiencia de usuario coherente en distintas condiciones de visualización.
La palabra clave not invierte el significado de una media query completa. Solo negará la media query específica a la que se aplica. (Por lo tanto, no se aplicará a todas las media queries en una lista de media queries separadas por comas).
La media query @media not all and (monochrome) se usa para aplicar estilos únicamente en dispositivos que no están en modo monocromático (es decir, que no muestran solo en blanco y negro o en escala de grises). Esto significa que los estilos dentro de esta media query solo se aplicarán a dispositivos que admiten color.
not: Invierte el resultado de la consulta. En este caso,notasegura que la media query se aplique a dispositivos que no son monocromáticos.all: Indica que la media query puede aplicarse a todos los tipos de dispositivos (pantallas, impresoras, etc.), pero aquí se combina connot.(monochrome): Verifica si el dispositivo muestra contenido en escala de grises. Usado en combinación connot, esta consulta selecciona solo dispositivos que admiten color.
/* Estilos generales para todos los dispositivos */
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
/* Estilos aplicables solo en dispositivos que no son monocromáticos */
@media not all and (monochrome) {
body {
background-color: #f0f8ff;
color: #333;
}
h1 {
color: #4CAF50;
}
a {
color: #FF5733;
}
}Esta media query es útil cuando se desea evitar estilos de color en dispositivos que solo admiten monocromo, como algunas impresoras en blanco y negro o ciertos dispositivos con pantallas de tinta electrónica. En estos casos:
- Evita aplicar colores innecesarios que no se verán en dispositivos monocromáticos.
- Mejora la legibilidad al no forzar colores que podrían no mostrarse correctamente.
En el Nivel 4 de Media Queries (Media Queries Level 4) de CSS, la especificación introduce varias mejoras y ampliaciones para crear consultas de medios más potentes y precisas. Aquí están las principales novedades en la sintaxis y características:
En el Nivel 4, se introdujo una nueva sintaxis para hacer comparaciones con operadores de rango, que permite simplificar y hacer más legibles las consultas. Ahora puedes escribir comparaciones como <, <=, >, y >= para los valores de media queries.
/* Ancho mínimo de 600px */
@media (width >= 600px) {
/* Estilos para pantallas de al menos 600px de ancho */
}
/* Ancho de pantalla entre 600px y 1200px */
@media (600px <= width <= 1200px) {
/* Estilos para pantallas entre 600px y 1200px de ancho */
}Además de los nuevos operadores de rango, se pueden escribir expresiones con media features en ambas direcciones, lo cual hace que la lectura sea más flexible.
@media (width <= 800px) {
/* Estilos para pantallas de hasta 800px de ancho */
}
@media (800px <= width) {
/* Estilos para pantallas de al menos 800px de ancho */
}En el Nivel 4, las palabras clave (or, and, not) se usan en lugar de comas o palabras específicas, lo que hace la sintaxis más clara y semántica. Estas palabras clave permiten combinar varias consultas de una manera lógica.
/* Pantallas de al menos 800px de ancho o en modo landscape */
@media (min-width: 800px) or (orientation: landscape) {
/* Estilos para pantallas grandes o en orientación horizontal */
}Media Queries Level 4 también introduce algunas nuevas características para detectar la capacidad de los dispositivos, como:
scripting: Detecta si el navegador tiene JavaScript habilitado.
@media (scripting: enabled) {
/* Estilos para navegadores con JavaScript habilitado */
}pointer: Detecta la precisión del dispositivo de puntero (como ratón o pantalla táctil).
@media (pointer: coarse) {
/* Estilos para dispositivos con punteros de baja precisión, como pantallas táctiles */
}hover: Detecta si el dispositivo admite hover.
@media (hover: hover) {
/* Estilos para dispositivos que permiten hover (como ratones) */
}any-hover: Detecta si alguno de los dispositivos de entrada admite hover (por ejemplo, en un dispositivo híbrido como un laptop con pantalla táctil y mouse).
@media (any-hover: hover) {
/* Estilos para dispositivos que tienen al menos un dispositivo que permite hover */
}any-pointer: Detecta si algún dispositivo de entrada tiene cierta precisión de puntero.
@media (any-pointer: fine) {
/* Estilos para dispositivos con al menos un dispositivo de entrada de alta precisión */
}El nivel 4 también permite detectar la frecuencia de actualización de la pantalla, como si es continua o intermitente.
update: Define si el dispositivo puede actualizar visualmente de manera continua (update: fast), de manera limitada (update: slow), o si no se actualiza (update: none).
@media (update: fast) {
/* Estilos para pantallas con actualización rápida, como monitores tradicionales */
}@media (width >= 600px) and (hover: hover) and (pointer: fine) {
/* Estilos para pantallas de al menos 600px, que admiten hover y tienen punteros de alta precisión */
}
@media (600px <= width <= 1200px) or (orientation: landscape) and (update: fast) {
/* Estilos para pantallas entre 600px y 1200px de ancho, o en modo horizontal con actualización rápida */
}En lugar de usar unidades fijas como píxeles, se utilizan unidades relativas como %, em, rem, o vw y vh, que permiten que los elementos se ajusten de forma proporcional al tamaño del contenedor o de la pantalla.
CSS Flexbox y Grid son sistemas de diseño que facilitan la creación de layouts flexibles y adaptativos sin necesidad de calcular tamaños manualmente.
- Flexbox es ideal para disposiciones en una dimensión (horizontal o vertical).
- Grid permite organizar elementos en ambas dimensiones y es excelente para layouts más complejos.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap; /* Permite que los elementos salten a la siguiente fila si no caben */
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Crea columnas de al menos 200px que se expanden automáticamente */
}
En esta técnica, el diseño se estructura primero para dispositivos móviles (pantallas pequeñas) y luego se expande para pantallas más grandes. Este enfoque es más eficiente porque se añaden características y estilos solo para pantallas grandes, reduciendo el peso en dispositivos móviles.
/* Estilos base para dispositivos móviles */
.container {
padding: 10px;
font-size: 1em;
}
/* Estilos adicionales para pantallas más grandes */
@media (min-width: 768px) {
.container {
padding: 20px;
font-size: 1.2em;
}
}Usar contenedores con propiedades flexibles permite que el contenido interno se ajuste automáticamente en función de la pantalla disponible.
La etiqueta <picture> permite definir múltiples fuentes de imagen que se cargarán dependiendo del tamaño de la pantalla o de la densidad de píxeles.
<picture>
<source srcset="img-grande.jpg" media="(min-width: 800px)">
<source srcset="img-mediana.jpg" media="(min-width: 400px)">
<img src="img-pequeña.jpg" alt="Descripción de la imagen">
</picture>Es posible mostrar u ocultar componentes específicos en función del tamaño de la pantalla. Esto optimiza el diseño y mejora la experiencia del usuario en dispositivos pequeños.
@media (max-width: 768px) {
.desktop-only {
display: none; /* Oculta en pantallas pequeñas */
}
}
@media (min-width: 769px) {
.mobile-only {
display: none; /* Oculta en pantallas grandes */
}
}https://davidwalsh.name/animate-media-queries
https://developer.mozilla.org/es/docs/Web/CSS/CSS_containment/Container_queries
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries
https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions
-
Cree estructura basica de proyecto , y archivo index.html
-
En el archivo css ingrese el siguiente codigo
*{ margin: 0; padding: 0; box-sizing: border-box; } .title{ font-size: 3re; color: blueviolet; margin: 40px 0; text-align: center; font-family: monospace; }
-
En el index.html agregue el siguiente codigo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/styles.css"> <title>Document</title> </head> <body> <h1 class="title">Hey campers</h1> </body> </html>
-
Aplicando media queries
@media print{ .title{ color: brown; font-size: 5rem; text-align: right; font-family: cursive; } }
@media screen and (max-width:600px){
.title{
background-color: rgb(0, 0, 0);
color: white;
}
}
Flexbox (Flexible Box Layout) es un modelo de diseño en CSS que permite distribuir y alinear elementos dentro de un contenedor de forma eficiente y flexible. Es ideal para crear layouts adaptativos y responsivos, ya que simplifica la alineación de elementos tanto en el eje horizontal como en el vertical, y permite distribuir el espacio entre ellos.
- Contenedor Flex (
flex container): Es el elemento al que se le aplicadisplay: flex. Este contenedor actúa como un "contenedor flexible" que gestiona el diseño y alineación de sus elementos hijos (los elementos flexibles). - Elementos Flex (
flex items): Son los elementos hijos directos dentro del contenedor flex. Estos elementos se distribuyen y alinean de acuerdo con las propiedades de Flexbox.
Estas propiedades se aplican al contenedor (el elemento al que le das display: flex):
Define el contenedor como un contenedor flex. Puedes usar flex para diseño en una sola dimensión (horizontal o vertical) o inline-flex si deseas que el contenedor siga siendo un elemento en línea.
.container {
display: flex;
}Define la dirección de los elementos dentro del contenedor:
-
row: Los elementos se alinean en una fila (predeterminado). -
row-reverse: Los elementos se alinean en una fila en orden inverso. -
column: Los elementos se alinean en una columna. -
column-reverse: Los elementos se alinean en una columna en orden inverso.
Alinea los elementos flexibles a lo largo del eje principal (horizontal si flex-direction es row). Los valores comunes son:
flex-start: Alinea los elementos al inicio del contenedor.flex-end: Alinea los elementos al final.center: Centra los elementos.space-between: Deja espacio igual entre los elementos.space-around: Deja espacio igual entre los elementos, incluyendo espacio al inicio y al final.
Alinea los elementos a lo largo del eje transversal (vertical si flex-direction es row). Los valores comunes son:
flex-start: Alinea los elementos al inicio.flex-end: Alinea los elementos al final.center: Centra los elementos.stretch: Estira los elementos para llenar el contenedor.baseline: Alinea los elementos según su línea de base de texto.
Permite que los elementos flexibles se muevan a una nueva línea cuando el contenedor es demasiado pequeño:
nowrap: Los elementos permanecen en una sola línea (predeterminado).wrap: Los elementos se envuelven en múltiples líneas si es necesario.wrap-reverse: Los elementos se envuelven en líneas múltiples en orden inverso.
Estas propiedades se aplican a los elementos dentro del contenedor flex:
Es una propiedad abreviada para flex-grow, flex-shrink, y flex-basis:
flex-grow: Define cuánto crecerá un elemento en proporción a otros.flex-shrink: Define cuánto encogerá un elemento en proporción a otros.flex-basis: Define el tamaño inicial antes de que el elemento crezca o se encoja.
.item {
flex: 1; /* Ocupa el mismo espacio que otros elementos con flex: 1 */
}Permite alinear un solo elemento a lo largo del eje transversal, sobrescribiendo align-items del contenedor:
flex-start,flex-end,center,stretch,baseline.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/flex.css">
<title>Document</title>
</head>
<body>
<section class="parent">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</section>
</body>
</html>.parent {
display: block;
}
.item {
border: 1px solid;
opacity: 0.9;
width: 100px;
height: 100px;
background: rgb(108, 151, 210);
justify-content: center;
align-items: center;
font-weight: bold;
color: #000000;
}
/* Estilos específicos para el primer y último elemento */
.item:first-child {
background: yellow;
}
.item:last-child {
background: rgb(210, 12, 65);
}.parent {
display: flex; /* Flexbox para alinear los elementos en línea */
}
.item {
border: 1px solid;
opacity: 0.9;
width: 100px;
height: 100px;
background: rgb(108, 151, 210);
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #fff;
}
/* Estilos específicos para el primer y último elemento */
.item:first-child {
background: rgb(145, 145, 12);
}
.item:last-child {
background: rgb(210, 12, 65);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/flex.css">
<title>Document</title>
</head>
<body>
<section class="parent">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</section>
<section class="parent2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</section>
</body>
</html>.parent {
display: flex; /* Flexbox para alinear los elementos en línea */
flex-direction: row;
}
.parent2 {
display: flex; /* Flexbox para alinear los elementos en línea */
flex-direction: column;
}
.item {
border: 1px solid;
opacity: 0.9;
width: 100px;
height: 100px;
background: rgb(108, 151, 210);
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #fff;
}
/* Estilos específicos para el primer y último elemento */
.item:first-child {
background: rgb(145, 145, 12);
}
.item:last-child {
background: rgb(210, 12, 65);
}
.parent {
display: flex; /* Flexbox para alinear los elementos en línea */
/* flex-direction: row; */
flex-direction: row-reverse;
}
.parent2 {
display: flex; /* Flexbox para alinear los elementos en línea */
flex-direction: column-reverse;
}
.item {
border: 1px solid;
opacity: 0.9;
width: 100px;
height: 100px;
background: rgb(108, 151, 210);
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #fff;
}
/* Estilos específicos para el primer y último elemento */
.item:first-child {
background: rgb(145, 145, 12);
}
.item:last-child {
background: rgb(210, 12, 65);
}
.parent {
display: flex; /* Flexbox para alinear los elementos en línea */
flex-direction: row;
direction: rtl;
}
.parent2 {
display: flex; /* Flexbox para alinear los elementos en línea */
flex-direction: column-reverse;
direction: ltr;
}
.item {
border: 1px solid;
opacity: 0.9;
width: 100px;
height: 100px;
background: rgb(108, 151, 210);
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #fff;
}
/* Estilos específicos para el primer y último elemento */
.item:first-child {
background: rgb(145, 145, 12);
}
.item:last-child {
background: rgb(210, 12, 65);
}.parent {
display: flex; /* Flexbox para alinear los elementos en línea */
flex-direction: row;
direction: rtl;
}
.parent2 {
display: flex; /* Flexbox para alinear los elementos en línea */
flex-direction: row;
writing-mode: vertical-lr;
}
.item {
border: 1px solid;
opacity: 0.9;
width: 100px;
height: 100px;
background: rgb(108, 151, 210);
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #fff;
}
/* Estilos específicos para el primer y último elemento */
.item:first-child {
background: rgb(145, 145, 12);
}
.item:last-child {
background: rgb(210, 12, 65);
}
-
Cree el siguiente HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/flexcustom.css"> <title>Document</title> </head> <body> <div class="container"> <div class="item item1">#1</div> <div class="item item2">#2</div> <div class="item item3">#3</div> <div class="item item4">#4</div> </div> </body> </html>
-
Genere el CSS para lograr el siguiente aspecto
-
Modifique el CSS para lograr la siguiente disposición de los elementos
-
Modifique el CSS para lograr la siguiente disposición de los elementos
-
Modifique el CSS para lograr la siguiente disposicion de elementos usando align items
-
Modifique el CSS para lograr la siguiente disposicion de elementos
Taller 3 - https://flexboxfroggy.com/#es
Taller 4 - https://mastery.games/flexboxzombies/
CSS Grid Layout es una herramienta de diseño en CSS extremadamente potente. Su sistema bidimensional permite organizar tanto filas como columnas, a diferencia de Flexbox, que está más enfocado en un diseño unidimensional.
CSS Grid utiliza un sistema bidimensional que permite organizar elementos en filas y columnas. Las filas (rows) se disponen horizontalmente, mientras que las columnas (columns) se organizan de forma vertical. Un ejemplo de este tipo de disposición es una hoja de cálculo en Excel.
De la misma manera que en flexbox, para poder utilizar css grid, necesitamos un contenedor, a este contenedor se le denominará grid-container.
Teniendo creado un grid-container, es muy importantes saber, que los hijos directos del grid-container se les conoce como Grid-items.
Para comprender el sistema de GRID, es útil visualizarlo como una cuadrícula formada por múltiples celdas. En su configuración inicial, cada elemento de la cuadrícula, conocido como grid-item, ocupará una sola celda de la estructura. Esta cuadrícula permite organizar el contenido de manera estructurada, proporcionando flexibilidad para expandir o contraer los elementos según las necesidades del diseño. Cada celda actúa como una unidad básica en la que los grid-items pueden ubicarse, permitiendo que los desarrolladores controlen con precisión el posicionamiento y la alineación de los elementos dentro de un contenedor bidimensional.
El sistema CSS GRID funciona como una cuadrícula, compuesta por una serie de líneas que definen su estructura. Estas líneas incluyen tanto líneas verticales, llamadas líneas de columna (column grid lines), como líneas horizontales, conocidas como líneas de fila (row grid lines). Juntas, estas líneas forman el esqueleto sobre el cual se distribuyen los elementos de la cuadrícula, facilitando un control preciso sobre la organización y disposición del contenido en la página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="grid">
<div class="grid__item">1</div>
<div class="grid__item">2</div>
<div class="grid__item">3</div>
<div class="grid__item">4</div>
<div class="grid__item">5</div>
<div class="grid__item">6</div>
</div>
</body>
</html>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Arial';
}
.grid{
max-width: 700px;
width: 90%;
height: 500px;
margin: 20px auto;
outline: 3px solid #000;
}
.grid__item{
color: #fff;
font-size: 3rem;
text-align: center;
background: crimson;
}
.grid :nth-child(1){
background: crimson;
}
.grid :nth-child(2){
background: darkmagenta;
}
.grid :nth-child(3){
background: steelblue;
}
.grid :nth-child(4){
background: brown;
}
.grid :nth-child(5){
background: chocolate;
}
.grid :nth-child(6){
background: midnightblue;
}a la regla .grid agreguele
display: grid;Visualizar el equema grid en Chrome
Abra el inspector, seleccione el elemento definido como grid y seleccione la pestaña layout y marque la opcion .grid o haga clic en el boton rapido grid.
La propiedad grid-template-columns en CSS Grid se utiliza para definir el número y el tamaño de las columnas en una cuadrícula. Es fundamental para crear la estructura del contenedor grid y establecer cómo se distribuirá el espacio en el eje horizontal. Con esta propiedad, puedes especificar tanto el número de columnas como su ancho, ya sea con valores específicos, proporcionales, o flexibles.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
}.container {
display: grid;
grid-template-columns: repeat(3, 100px);
}.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}.container {
display: grid;
grid-template-columns: 200px 1fr 2fr;
}.container {
display: grid;
grid-template-columns: auto auto auto;
}Agregue en el css la propiedad
grid-template-columns: 100px 100px 100px;
grid-template-columns: repeat(5,10%);
Creando columnas por fracción
grid-template-columns: 1fr 1fr 1fr;
La propiedad grid-template-rows en CSS Grid define el número y el tamaño de las filas en una cuadrícula, similar a cómo grid-template-columns funciona para las columnas. Esta propiedad te permite controlar la altura de cada fila en el contenedor grid, facilitando la organización de los elementos en el eje vertical.
.container {
display: grid;
grid-template-rows: valor1 valor2 valor3 ...;
}tamaño fijo
.container {
display: grid;
grid-template-rows: 100px 200px 150px;
}.container {
display: grid;
grid-template-rows: repeat(3, 100px);
}.container {
display: grid;
grid-template-rows: 1fr 2fr 1fr;
}.container {
display: grid;
grid-template-rows: 150px 1fr 2fr;
}en el css del proyecto en la regla .grid modifique o agregue estas propiedades
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
La propiedad grid-column-start en CSS Grid se utiliza para definir el inicio de una columna específica en una cuadrícula, es decir, en qué línea de la cuadrícula comienza un elemento. Esta propiedad es útil para posicionar elementos de manera precisa dentro de una estructura grid, especialmente cuando necesitas que un elemento ocupe varias columnas o comience en un lugar específico de la cuadrícula.
La propiedad grid-column-end en CSS Grid se utiliza para especificar en qué línea de la cuadrícula (grid line) debe terminar un elemento en el eje horizontal (de izquierda a derecha). Con esta propiedad, puedes controlar cuántas columnas abarca un elemento, permitiéndote definir la posición final y el ancho del mismo en la cuadrícula.
La propiedad grid-row-start en CSS Grid especifica en qué línea de la cuadrícula (grid line) comenzará a colocarse un elemento en el eje vertical (de arriba hacia abajo). Esto te permite controlar la posición de inicio de un elemento en una cuadrícula sin tener que modificar el orden del HTML o usar márgenes.
La propiedad grid-row-end en CSS Grid especifica en qué línea de la cuadrícula (grid line) debe terminar un elemento en el eje vertical (de arriba hacia abajo). Esta propiedad es útil para controlar cuántas filas ocupa un elemento, definiendo su altura y posición en la cuadrícula.
En CSS Grid, la palabra clave span se utiliza en combinación con propiedades como grid-column-start, grid-column-end, grid-row-start y grid-row-end para hacer que un elemento abarque varias columnas o filas sin necesidad de especificar una línea de finalización exacta. Esto es útil cuando deseas que un elemento ocupe un número específico de columnas o filas sin preocuparte por el número exacto de las líneas de la cuadrícula.
-
Para abarcar varias columnas (grid-column)
Puedes usar
grid-columnpara que un elemento abarque múltiples columnas en el contenedor de cuadrícula..elemento { grid-column: span 2; /* El elemento abarcará dos columnas */ }
La propiedad row-gap en CSS Grid define el espacio (o "gap") entre las filas de una cuadrícula. Esto permite controlar el espacio vertical entre los elementos de las filas sin necesidad de aplicar márgenes individuales a cada elemento.
.container {
display: grid;
row-gap: valor;
}
La propiedad column-gap en CSS Grid define el espacio entre las columnas de una cuadrícula. Esto permite controlar el espacio horizontal entre los elementos de las columnas sin necesidad de aplicar márgenes individuales a cada elemento.
.container {
display: grid;
column-gap: valor;
}
La propiedad grid-auto-flow en CSS Grid define cómo se colocan automáticamente los elementos dentro de una cuadrícula cuando no se especifican posiciones exactas para ellos mediante grid-area, grid-column, o grid-row. Esto permite determinar si los elementos se ubicarán en filas o columnas y si se completarán en sentido horizontal o vertical.
La propiedad grid-auto-rows en CSS Grid define la altura de las filas generadas automáticamente en una cuadrícula. Esto es útil cuando tienes más elementos que filas definidas, ya que cualquier fila adicional creada automáticamente usará la altura especificada por grid-auto-rows.
.container {
display: grid;
grid-auto-rows: valor;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 150px; /* Cada fila automática tendrá una altura de 150px */
}
En CSS Grid, el valor dense se usa con la propiedad grid-auto-flow para organizar automáticamente los elementos de una cuadrícula, llenando los huecos que puedan quedar vacíos en el flujo natural de la cuadrícula. Este valor es útil cuando tienes elementos de diferentes tamaños y quieres que la cuadrícula los reorganice automáticamente para que ocupen el menor espacio posible, evitando espacios vacíos o huecos.
.container {
display: grid;
grid-auto-flow: row dense; /* o column dense */
}*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Arial';
}
.grid{
max-width: 700px;
width: 90%;
height: 500px;
margin: 20px auto;
outline: 3px solid #000;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(4,1fr);
/* row-gap: 15px;
column-gap: 10px; */
gap: 10px;
grid-auto-rows: 100px;
}
.grid__item{
color: #fff;
font-size: 3rem;
text-align: center;
background: crimson;
}
.grid :nth-child(1){
background: crimson;
}
.grid :nth-child(2){
background: darkmagenta;
grid-row: span 2;
}
.grid :nth-child(3){
background: steelblue;
/* grid-column: 2 / span 2;
grid-row: 1 / span 3; */
}
.grid :nth-child(4){
background: brown;
grid-column: span 2;
}
.grid :nth-child(5){
background: chocolate;
}
.grid :nth-child(6){
background: midnightblue;
}
La propiedad grid-template-areas en CSS Grid permite crear una cuadrícula nombrando áreas específicas dentro de la misma, lo que facilita la organización visual y el posicionamiento de los elementos. Con esta propiedad, puedes definir el diseño de la cuadrícula de forma visual usando nombres de área en lugar de especificar filas y columnas para cada elemento individualmente.
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}- La cuadrícula se divide en áreas que se definen como cadenas de texto.
- Cada nombre de área representa una región de la cuadrícula y puede estar formada por una o varias celdas.
- Los nombres se asignan a los elementos hijos mediante la propiedad
grid-area, ubicándolos en la cuadrícula según el diseño especificado engrid-template-areas.
Cree html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Areas</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body class="grid">
<div class="grid__item header">Header</div>
<div class="grid__item main">Main</div>
<div class="grid__item sidebar">Sidebar</div>
<div class="grid__item footer">Footer</div>
</body>
</html>cree css llamado estilos
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Arial';
}
.grid{
height: 100vh;
display: grid;
}
.grid__item{
font-size: 2rem;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.header{
background: crimson;
}
.main{
background: steelblue;
}
.sidebar{
background: purple;
}
.footer{
background: chocolate;
}Modifique el css agregue las siguientes reglas
Definiendo areas
La propiedad grid-area en CSS Grid tiene dos usos principales:
- Asignar nombres a áreas específicas dentro de la cuadrícula (cuando se utiliza junto con
grid-template-areas). - Definir simultáneamente las líneas de inicio y fin de un elemento en la cuadrícula, especificando su ubicación y tamaño en términos de filas y columnas.
En este caso, grid-area se usa junto con grid-template-areas para ubicar elementos en áreas de la cuadrícula que se han nombrado previamente. Esto facilita la organización visual de los elementos.
modifique el css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Arial';
}
.grid{
height: 100vh;
display: grid;
gap: 5px;
grid-template-columns:repeat(5,1fr) ;
grid-template-rows: repeat(5,1fr);
grid-template-areas:
"header header header header header"
"main main main main sidebar"
"main main main main sidebar"
"main main main main sidebar"
"footer footer footer footer footer ";
}
.grid__item{
font-size: 2rem;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.header{
background: crimson;
grid-area: header;
}
.main{
background: steelblue;
grid-area: main;
}
.sidebar{
background: purple;
grid-area: sidebar;
}
.footer{
background: chocolate;
grid-area: footer;
}
@media screen and (max-width:800px){
.grid{
grid-template-areas:
"header header header header header"
"main main main sidebar sidebar"
"main main main sidebar sidebar"
"main main main sidebar sidebar"
"footer footer footer footer footer ";
}
}
@media screen and (max-width:500px){
.grid{
grid-template-columns: 1fr;
grid-template-rows: repeat(4,1fr);
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}