CSS
Tutorial CSS: Sintaxis
CSS sintaxis: reglas y ejemplos. Aprende las reglas y ejemplos básicos de sintaxis en CSS con ejemplos prácticos y detallados.
Aprende CSS GRATIS y certifícateSelección de elementos
En CSS, la selección de elementos es una tarea fundamental que se realiza mediante diversos selectores. Los selectores permiten aplicar estilos a elementos específicos en el DOM. Los principales tipos de selectores son los siguientes:
- Selectores de tipo: Se utilizan para seleccionar elementos por su nombre de etiqueta HTML. Por ejemplo, para seleccionar todos los elementos
<p>
:
p {
color: blue;
}
- Selectores de clase: Se utilizan para seleccionar elementos con una clase específica. Se identifican con un punto (
.
) seguido del nombre de la clase. Por ejemplo, para seleccionar todos los elementos con la clasemi-clase
:
.mi-clase {
font-size: 16px;
}
- Selectores de ID: Se utilizan para seleccionar un único elemento con un ID específico. Se identifican con una almohadilla (
#
) seguida del ID del elemento. Por ejemplo, para seleccionar el elemento con el IDmi-id
:
#mi-id {
margin: 20px;
}
- Selectores de atributo: Permiten seleccionar elementos en función de la presencia o valor de un atributo. Por ejemplo, para seleccionar todos los elementos con el atributo
type="button"
:
[type="button"] {
border: none;
}
- Selectores de descendientes: Seleccionan elementos que son descendientes de un elemento específico. Por ejemplo, para seleccionar todos los
<span>
que son descendientes de un<div>
:
div span {
color: red;
}
- Selectores de hijo: Seleccionan elementos que son hijos directos de un elemento específico. Se utiliza el símbolo
>
entre el selector del elemento padre y el selector del elemento hijo. Por ejemplo, para seleccionar todos los<li>
que son hijos directos de un<ul>
:
ul > li {
list-style-type: none;
}
- Selectores de hermano adyacente: Seleccionan un elemento que es adyacente a otro elemento específico. Se utiliza el símbolo
+
. Por ejemplo, para seleccionar el primer<p>
que sigue inmediatamente después de un<h1>
:
h1 + p {
margin-top: 10px;
}
- Selectores de hermanos generales: Seleccionan todos los elementos hermanos que siguen a un elemento específico. Se utiliza el símbolo
~
. Por ejemplo, para seleccionar todos los<p>
que siguen a un<div>
:
div ~ p {
color: gray;
}
- Selectores de pseudo-clase: Seleccionan elementos en función de su estado o posición en el DOM. Ejemplos incluyen
:hover
para seleccionar elementos sobre los que se está pasando el cursor:
a:hover {
text-decoration: underline;
}
y :nth-child(n)
para seleccionar el n-ésimo hijo de su elemento padre:
li:nth-child(2) {
background-color: yellow;
}
- Selectores de pseudo-elemento: Se utilizan para aplicar estilos a partes específicas de un elemento, como la primera línea o primera letra. Por ejemplo, para seleccionar la primera línea de un párrafo:
p::first-line {
font-weight: bold;
}
Estos selectores pueden combinarse y anidarse para crear reglas más complejas y específicas, ajustándose a las necesidades del diseño web. Es fundamental entender cómo utilizar y combinar estos selectores para aplicar estilos eficientemente.
Declaración de estilos
Una declaración de estilos en CSS se compone de una o más propiedades y los valores correspondientes que se aplican a un elemento seleccionado. Cada declaración aparece entre llaves {}
y está compuesta por pares de propiedad-valor separados por dos puntos :
. Cada par de propiedad-valor finaliza con un punto y coma ;
. La sintaxis básica es la siguiente:
selector {
propiedad: valor;
}
Por ejemplo, para cambiar el color de fuente y el tamaño de texto de un párrafo:
p {
color: blue;
font-size: 14px;
}
Propiedades y valores
Las propiedades en CSS definen las características de los estilos que queremos aplicar, como color
, margin
, padding
o font-size
. Cada propiedad admite uno o varios valores específicos. Algunos ejemplos de valores incluyen medidas (px
, %
, em
), colores (red
, #fff
, rgb(255, 0, 0)
) y palabras clave (auto
, none
, solid
).
Propiedades simples
En una propiedad simple, cada par de propiedad y valor es independiente. Por ejemplo:
h1 {
color: green;
text-align: center;
}
Propiedades compuestas
Algunas propiedades, como margin
, padding
y border
, pueden aceptar múltiples valores que se aplican a diferentes lados del elemento (superior, derecho, inferior e izquierdo) en una única declaración. Los valores se aplican en el orden en que aparecen: superior, derecha, inferior, izquierda (en sentido horario).
Por ejemplo, para establecer un margen de 10px en todos los lados:
div {
margin: 10px;
}
Para establecer márgenes diferentes, se pueden combinar valores:
div {
margin: 10px 5px 15px 20px; /* superior, derecha, inferior, izquierda */
}
Propiedades abreviadas (shorthand properties)
CSS permite utilizar propiedades abreviadas para simplificar la escritura de estilos, combinando varias propiedades en una sola declaración. Por ejemplo, en lugar de escribir por separado cada lado del margin
, se puede usar:
margin: 10px 5px 15px 20px;
Otra propiedad abreviada común es background
, que puede incluir color, imagen de fondo, posición, tamaño, repetición, etc.:
background: #fff url('imagen.jpg') no-repeat center/cover;
Valores especiales
CSS incluye varios valores especiales que son útiles en diferentes contextos:
- inherit: Hereda el valor de la propiedad de su elemento padre.
- initial: Aplica el valor inicial (predefinido) de la propiedad.
- unset: Reversiona la propiedad a su valor heredado o inicial si no puede ser heredado.
- revert: Reversiona al valor que hubiera aplicado el navegador de no estar modificada la propiedad.
Por ejemplo, para establecer que el color de un div
sea heredado de su padre:
div {
color: inherit;
}
Comentarios en CSS
Para mejor organización y legibilidad del código CSS, se pueden añadir comentarios:
/* Este es un comentario */
p {
color: blue; /* Esto también es un comentario */
}
Los comentarios en CSS no se muestran en el navegador y sirven únicamente para anotar y documentar el código, facilitando la colaboración y mantenimiento del mismo.
Comentarios
En CSS, los comentarios se utilizan para anotar el código y proporcionar un mejor entendimiento del mismo, tanto para el autor original como para otros desarrolladores que puedan trabajar con el código en el futuro. Los comentarios también pueden ser útiles para desactivar temporalmente líneas de código durante el proceso de depuración.
En CSS, los comentarios se delimitan por /*
y */
. Todo lo que se encuentre entre estos delimitadores será ignorado por el navegador y no afectará al comportamiento o apariencia del sitio web. A continuación, se presentan algunos ejemplos de cómo se pueden usar los comentarios en CSS:
Añadir un comentario en una nueva línea:
/* Este es un comentario en CSS */
body {
background-color: #f0f0f0;
}
Añadir un comentario al final de una línea de código:
h1 {
color: #333; /* Este color es para los encabezados */
}
Desactivar temporalmente una declaración de estilo:
p {
font-size: 16px;
/* color: red; Este color está desactivado temporalmente */
line-height: 1.5;
}
Documentar bloques de código o secciones completas de un archivo CSS:
/*
======================
Sección Principal
======================
*/
main {
width: 80%;
margin: 0 auto;
}
Es importante mencionar que los comentarios no son anidados. Esto significa que no se puede iniciar un comentario dentro de otro comentario. Por ejemplo, el siguiente código desactivará todo el comentario exterior y no reconocerá el comentario interno:
/*
Este es un comentario exterior
/* Este es un comentario interior no permitido */
*/
Debido a que usar comentarios incorrectamente puede llevar a errores de sintaxis, es esencial utilizarlos adecuadamente para garantizar que el código CSS sea validado correctamente y mantenga la funcionalidad esperada. A pesar de que los comentarios no afectan el rendimiento del sitio web ya que son ignorados por el navegador, mantener un uso claro y conciso de los mismos ayuda a la mantenibilidad y colaboración en equipo.
Selectores
Los selectores en CSS permiten especificar los elementos HTML a los que se aplicarán determinadas reglas de estilo. A continuación, se abordarán algunos selectores más avanzados y combinaciones de los conceptos previamente mencionados.
Selectores de atributo avanzado
Los selectores de atributo pueden usarse de maneras más complejas para aplicar estilos a los elementos según la presencia y el valor de sus atributos.
- Selector de atributo con contenido específico: Este selector se utiliza para seleccionar elementos cuyo atributo contiene un valor específico. Usa el operador
*=
. Por ejemplo, para seleccionar todos los elementosa
(enlaces) que contienen "ejemplo" en su atributohref
:
a[href*="ejemplo"] {
color: orange;
}
- Selector de inicio de atributo: Selecciona elementos cuyo atributo comienza con un valor específico. Usa el operador
^=
. Por ejemplo, para seleccionar todos los enlacesa
que empiezan con "http":
a[href^="http"] {
text-decoration: none;
}
- Selector de fin de atributo: Selecciona elementos cuyo atributo termina con un valor específico. Usa el operador
$=
. Por ejemplo, para seleccionar todos los enlacesa
que terminan con ".pdf":
a[href$=".pdf"] {
font-weight: bold;
}
Selectores de pseudo-clases avanzados
Las pseudo-clases permiten seleccionar elementos en función de su estado dinámico, ofreciendo gran flexibilidad en el diseño CSS.
:not(selector)
: Selecciona todos los elementos que no coinciden con el selector especificado. Por ejemplo, para seleccionar todos losinput
que no son de tiposubmit
:
input:not([type="submit"]) {
border: 1px solid #ccc;
}
:nth-of-type(n)
: Selecciona el enésimo hijo de su tipo dentro de su elemento padre. Por ejemplo, para seleccionar el tercerli
de cadaul
:
ul li:nth-of-type(3) {
color: purple;
}
:first-of-type
y:last-of-type
: Seleccionan el primer y último hijo de su tipo dentro de su elemento padre. Ejemplo para seleccionar el primerp
de cadadiv
:
div p:first-of-type {
font-style: italic;
}
div p:last-of-type {
font-weight: bold;
}
Selectores de pseudo-elemento avanzados
Los pseudo-elementos permiten aplicar estilos a partes específicas de un elemento, más allá de las típicas ::before
y ::after
.
::selection
: Personaliza el aspecto de la parte seleccionada del texto dentro de un elemento. Por ejemplo, para cambiar el fondo de cualquier texto seleccionado:
::selection {
background-color: #b3d4fc;
color: #000;
}
Combinadores avanzados
Los combinadores se utilizan para seleccionar elementos que están en una relación específica con otro elemento.
- Combinador de columna (
||
): Se utiliza principalmente en CSS grid para seleccionar columnas específicas cuando se trabaja con estructuras de tablas o grids. Por ejemplo, para seleccionar las columnas adyacentes acolgroup
:
colgroup || col {
background-color: lightgrey;
}
Selectores de estado
Estos selectores ayudan a estilizar elementos en función de su estado, como :enabled
o :disabled
.
:enabled
y:disabled
: Seleccionan elementos de formulario que están habilitados o deshabilitados, respectivamente. Por ejemplo, para estilizar todos losinput
habilitados:
input:enabled {
background-color: #fff;
}
Y para estilizar todos los input
deshabilitados:
input:disabled {
background-color: #eee;
}
:checked
: Selecciona los elementos que están en estado marcado, comocheckbox
oradio
:
input[type="checkbox"]:checked {
background-color: #2196F3;
}
El conocimiento de estos selectores avanzados y combinaciones permite crear reglas CSS más precisas y eficientes, facilitando diseños más complejos y dinámicos. Es crucial entender su correcta aplicación para mejorar la mantenibilidad y la eficacia de los estilos en un proyecto.
Agrupación de selectores
La agrupación de selectores en CSS permite aplicar el mismo conjunto de reglas de estilo a múltiples elementos sin necesidad de repetir la declaración de estilos para cada elemento individual. Para agrupar selectores, se utiliza una coma ,
que separa cada selector.
Por ejemplo, si desea aplicar el mismo conjunto de estilos a todos los elementos <h1>
, <h2>
y <h3>
, puede agrupar estos selectores como sigue:
h1, h2, h3 {
color: darkblue;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
Esto es equivalente a:
h1 {
color: darkblue;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
h2 {
color: darkblue;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
h3 {
color: darkblue;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
La agrupación de selectores no solo ayuda a mantener el código más limpio y conciso, sino que también facilita el mantenimiento, ya que cualquier cambio en el estilo solo necesita hacerse en un lugar.
Agrupación de selectores con distintas combinaciones
Puede agrupar selectores de diversos tipos y complejidad. Por ejemplo, se pueden agrupar selectores de clase, ID, tipo y atributivos:
#menu, .boton-expandir, div.articulo, [type="submit"] {
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 10px;
}
En este ejemplo, se aplica el mismo estilo a un elemento con ID menu
, a los elementos con clase boton-expandir
, a todos los elementos <div>
con clase articulo
y a todos los elementos cuyo atributo type
es "submit"
.
Agrupación de selectores de pseudo-clases y pseudo-elementos
También es posible agrupar selectores que utilizan pseudo-clases y pseudo-elementos para aplicar estilos consistentes a diferentes estados del elemento:
a:hover, a:focus, a:active {
color: red;
text-decoration: underline;
}
Aquí, a cada enlace (<a>
) se le aplicará el mismo estilo cuando esté en estado :hover
, :focus
o :active
.
Mejores prácticas
Legibilidad: Asegúrese de que la agrupación de selectores no comprometa la legibilidad del código. Agrupar selectores que tienen poca o ninguna relación puede dificultar el mantenimiento futuro.
Consistencia: Mantenga la agrupación de selectores consistente para mejoras globales del estilo de su código y facilitar los cambios masivos en el diseño.
Eficiencia: Aproveche la agrupación para reducir el tamaño del archivo CSS y aumentar la eficiencia al evitar la repetición innecesaria de reglas de estilo.
Agrupar selectores es una técnica sencilla pero muy útil que optimiza y simplifica la gestión de estilos en CSS, ofreciendo un código más limpio y fácil de mantener.
Unidades de medida
En CSS, las unidades de medida son fundamentales para definir dimensiones, márgenes, rellenos y otros aspectos relacionados con el tamaño y la posición de los elementos. Existen varias unidades que se pueden utilizar, divididas principalmente en dos categorías: unidades absolutas y unidades relativas.
Unidades absolutas
Las unidades absolutas se definen de manera fija y no cambian en relación con otros elementos o propiedades del documento. Algunos ejemplos son:
- px (píxeles): La unidad más común, basada en la visualización en pantalla. Un píxel es el tamaño más pequeño de una pantalla.
.caja {
width: 200px;
height: 150px;
}
- cm (centímetros): Utilizados principalmente en medios impresos.
.banner {
width: 10cm;
}
- mm (milímetros): Similar a los centímetros, pero con mayor precisión.
.marco {
border-width: 2mm;
}
- in (pulgadas): Común en medios de impresión.
.poster {
width: 8.5in;
height: 11in;
}
- pt (puntos): Hay 72 puntos en una pulgada. Utilizados en tipografía.
.texto {
font-size: 12pt;
}
- pc (picas): Una pica equivale a 12 puntos.
.titulo {
font-size: 1pc;
}
Unidades relativas
Las unidades relativas se definen en relación con otra propiedad o elemento del documento, ofreciendo más flexibilidad y adaptabilidad a diferentes tamaños de pantalla y dispositivos.
- % (porcentaje): Basado en el tamaño del elemento padre.
.columna {
width: 50%; /* 50% del ancho del elemento contenedor */
}
- em: Relativo al tamaño de la fuente del elemento contenedor.
.parrafo {
font-size: 1.5em; /* 1.5 veces el tamaño de la fuente del elemento padre */
}
- rem: Relativo al tamaño de la fuente del elemento raíz (
html
).
.boton {
margin: 2rem; /* 2 veces el tamaño de la fuente definida en el elemento raíz */
}
- vw (viewport width): Unidades de ancho basado en el tamaño de la ventana gráfica (1vw = 1% del ancho de la ventana).
.ancho-completo {
width: 100vw;
}
- vh (viewport height): Unidades de altura basado en el tamaño de la ventana gráfica (1vh = 1% de la altura de la ventana).
.alto-completo {
height: 100vh;
}
- vmin y vmax: Relativos al tamaño mínimo o máximo entre el ancho y la altura de la ventana gráfica.
.cuadro {
width: 50vmin; /* 50% del tamaño menor entre el ancho y la altura de la ventana gráfica */
}
.rectangulo {
height: 80vmax; /* 80% del tamaño mayor entre el ancho y la altura de la ventana gráfica */
}
- ch: Relativo al ancho del carácter "0" en la fuente actual.
.codigo {
width: 60ch; /* Ancho de 60 caracteres "0" */
}
Unidades avanzadas
- ex: Basado en la altura de la "x" minúscula de la fuente en uso.
.texto-peque{
line-height: 2ex; /* Dos veces la altura de la letra "x" */
}
- fr (fracción): Exclusiva para CSS grid, donde 1fr representa una parte equitativa del espacio disponible.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr; /* 1 parte y 2 partes del espacio disponible */
}
Consideraciones prácticas
Al seleccionar una unidad, es crucial considerar el contexto y el propósito del diseño. Las unidades relativas como em
y rem
son especialmente útiles para garantizar que el diseño sea escalable y accesible, adaptándose a diferentes dispositivos y tamaños de pantalla. Las unidades absolutas como px
proporcionan un control preciso, pero pueden no ser tan flexibles en un diseño responsivo. Las unidades de viewport (vw
, vh
, vmin
, vmax
) son útiles para diseños que deben ajustarse dinámicamente al tamaño de la ventana gráfica.
!important
La declaración !important
es una palabra que se puede añadir al final de una regla CSS para otorgar a esa regla la máxima prioridad, sobreescribiendo cualquier otra regla que pudiera entrar en conflicto, independientemente de su especificidad. Es una herramienta potente, pero debe usarse con precaución debido a que puede complicar el mantenimiento y la depuración del CSS.
Para aplicar !important
, se coloca justo antes del punto y coma (;
) que cierra la regla:
selector {
propiedad: valor !important;
}
Ejemplo básico
Supongamos que tenemos las siguientes dos reglas para un elemento con clase .texto
:
.texto {
color: blue;
}
.texto {
color: red !important;
}
En este caso, el texto aparecerá en color rojo debido a que la declaración con !important
tiene la máxima prioridad.
Sobrescribir estilos inline
Incluso puede sobrescribir estilos inline que generalmente tienen una alta prioridad:
HTML:
<div class="texto" style="color: green;">Texto ejemplo</div>
CSS:
.texto {
color: red !important;
}
El texto se mostrará en rojo, no verde.
Evitar uso excesivo
Aunque !important
otorga prioridad, su uso excesivo es desaconsejado. Puede llevar a dificultades de mantenimiento, haciendo el código CSS más complicado de entender y modificar. Debe ser utilizado principalmente como último recurso en situaciones donde no se pueda cambiar el orden del CSS o ajustar la especificidad de los selectores.
Uso en media queries
!important
se puede usar en media queries para asegurarse de que ciertos estilos específicos se apliquen en contextos de diferentes tamaños de pantalla:
@media (max-width: 600px) {
.contenedor {
font-size: 18px !important;
}
}
Comportamiento con especificidad
Incluso con !important
, la especificidad del selector sigue contando. Si dos reglas contienen !important
, la que tiene mayor especificidad se aplica:
/* Regla con especificidad baja */
div {
color: blue !important;
}
/* Regla con especificidad alta */
#contenedor .especial {
color: red !important;
}
Si un <div>
con id #contenedor
y clase .especial
existe, el color será rojo.
Evitar conflictos
Para facilitar el mantenimiento y evitar conflictos, suele ser mejor incrementar la especificidad de los selectores en lugar de usar !important
indiscriminadamente:
/* En lugar de esto */
.elemento {
color: blue !important;
}
/* Usar un selector más específico */
.padre .elemento {
color: blue;
}
Formatos heredados y !important
!important
afecta a las propiedades heredadas también. Si una propiedad que no suele ser heredada (p.ej., color
) se marca como !important
, cualquier hijo del elemento afectado también heredará esa propiedad con prioridad !important
:
.contenedor {
color: red !important;
}
.contenedor .hijo {
color: inherit; /* Heredará 'red' con !important */
}
Para evitar usos problemáticos, sigue estas buenas prácticas:
- Documentación clara: Explica claramente en los comentarios cuándo y por qué se utiliza
!important
. - Uso limitado: Restringe su uso a casos verdaderamente excepcionales.
- Modularidad: Revisa la estructura CSS para ver si un enfoque más modular puede resolver conflictos sin necesidad de usar
!important
.
En resumen, aunque !important
es una herramienta válida en CSS, se debe utilizar con criterio y moderación para mantener el código manejable y predecible.
Media queries
Las media queries (consultas de medios) en CSS permiten aplicar estilos específicos dependiendo de las características del dispositivo o entorno donde se visualiza la página. Son fundamentales para el diseño responsivo, adaptando la presentación de los elementos según el tamaño de la pantalla, la resolución y otras propiedades del dispositivo.
La sintaxis básica de una media query utiliza la regla @media
seguida de una o más condiciones y un bloque de estilo entre llaves {}
. Por ejemplo, la siguiente media query aplica estilos solo si el ancho de la pantalla es de hasta 600 píxeles:
@media (max-width: 600px) {
body {
background-color: lightgrey;
}
}
Estructura de media queries
Tipo de dispositivo (opcional): Puedes especificar el tipo de dispositivo, como screen
(pantallas), print
(impresoras) o all
(todos los dispositivos).
@media screen and (max-width: 600px) {
/* Estilos aquí */
}
Expresiones de media: Son condiciones que evalúan ciertas características del dispositivo, como width
, height
, aspect-ratio
, resolution
, orientation
, entre otras.
@media (min-width: 800px) and (orientation: landscape) {
/* Estilos aquí */
}
Tipos comunes de media queries
Ancho y alto del viewport
@media (max-width: 768px) {
/* Estilos para pantallas de 768 píxeles o menos */
}
@media (min-height: 500px) {
/* Estilos para pantallas de al menos 500 píxeles de alto */
}
Resolución de pantalla
@media (min-resolution: 300dpi) {
/* Estilos para pantallas con al menos 300 dpi de resolución */
}
Modo de color
@media (prefers-color-scheme: dark) {
/* Estilos para cuando el usuario prefiere un esquema de color oscuro */
}
@media (prefers-color-scheme: light) {
/* Estilos para cuando el usuario prefiere un esquema de color claro */
}
Orientación
@media (orientation: landscape) {
/* Estilos para pantallas en orientación horizontal */
}
@media (orientation: portrait) {
/* Estilos para pantallas en orientación vertical */
}
Uso combinado de media queries
Las media queries pueden combinarse utilizando las palabras clave and
, or
, y not
para crear condiciones más complejas. También se pueden agrupar media queries separándolas con comas para aplicar el mismo bloque de estilo en diferentes condiciones.
@media (max-width: 600px), (orientation: portrait) {
/* Estilos para pantallas de hasta 600 píxeles de ancho o en modo retrato */
body {
font-size: 14px;
}
}
@media not all and (min-width: 800px) {
/* Estilos para todos los dispositivos excepto los de 800 píxeles de ancho o más */
.sidebar {
display: none;
}
}
Ejemplo aplicado
Para ilustrar el uso práctico de las media queries, consideremos un diseño web que ajusta sus estilos en función del ancho del viewport:
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
@media (max-width: 768px) {
header {
background-color: #444;
}
nav ul {
flex-direction: column;
}
}
@media (min-width: 769px) {
header {
background-color: #222;
}
nav ul {
flex-direction: row;
}
}
En este ejemplo, la cabecera (header
) y el menú de navegación (nav ul
) cambian sus estilos dependiendo del ancho del dispositivo. Para pantallas con un ancho máximo de 768 píxeles, los estilos se adaptan para mejorar la experiencia en dispositivos móviles, mientras que para pantallas más grandes, se aplican estilos distintos.
Buenas prácticas
Mobile first: Diseñar primero para móviles y luego utilizar media queries para adaptar y optimizar el diseño para dispositivos más grandes.
body {
font-size: 14px;
}
@media (min-width: 768px) {
body {
font-size: 16px;
}
}
Agrupación y orden: Agrupar media queries que afectan los mismos elementos y ordenarlos de manera lógica para facilitar el mantenimiento.
.elemento {
color: black;
}
@media (max-width: 600px) {
.elemento {
color: blue;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
.elemento {
color: green;
}
}
Performance: Evitar el uso excesivo de media queries que pueden complicar el CSS y afectar el rendimiento del navegador.
Las media queries son esenciales en el diseño responsivo, permitiendo crear adaptaciones de estilo que mejoren la usabilidad y accesibilidad en una amplia gama de dispositivos y entornos.
Ejercicios de esta lección Sintaxis
Evalúa tus conocimientos de esta lección Sintaxis con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja Y Posicionamiento
Propiedades De Posicionamiento
Modelo Caja Y Posicionamiento
Propiedad 'Display'
Modelo Caja Y Posicionamiento
Elementos 'Float' Y 'Clear'
Modelo Caja Y Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox Y Grid
Css Grid Para Crear Layouts Y Estructuras
Flexbox Y Grid
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
Introducción A Tailwind Css
Introducción Y Entorno
Instalación De Tailwind Css
Introducción Y Entorno
Fundamentos Del Sistema De Utility-first En Tailwind Css
Fundamentos
Fundamentos Del Diseño Responsive En Tailwind Css
Fundamentos
Tipografía Y Fuentes En Tailwind Css
Clases De Utilidad
Clases De Tamaño De Tailwind Css
Clases De Utilidad
Utilidades De Espaciado Y Alineación De Tailwind Css
Clases De Utilidad
Clases De Colores Y Fondo De Tailwind Css
Clases De Utilidad
Clases De Bordes De Tailwind Css
Clases De Utilidad
Hover, Focus Y Estado De Tailwind Css
Clases De Utilidad
Transiciones Y Animaciones De Tailwind Css
Clases De Utilidad
Contenedores Y Columnas En Tailwind Css
Layout
Flexbox En Tailwind Css
Layout
Grid En Tailwind Css
Layout
Conocimiento General De Tailwind Css - Evaluación Multirespuesta
Evaluación
Conocimiento General De Tailwind Css - Evaluación Código
Evaluación
Certificados de superación de CSS
Supera todos los ejercicios de programación del curso de CSS y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender los diferentes tipos de selectores en CSS.
- Aplicar selectores para estilizar elementos específicos.
- Manipular propiedades y valores CSS.
- Utilizar selectores de pseudo-clase y pseudo-elemento.
- Implementar propiedades abreviadas para simplificar el código CSS.
- Escribir y gestionar comentarios en CSS.
- Agrupar selectores para aplicar estilos similares a múltiples elementos.
- Conocer y emplear unidades de medida adecuadas.
- Utilizar la declaración
!important
de forma eficaz y responsable. - Implementar media queries para diseño responsivo.