Referencia de características de CSS

Descubra nuevos flujos de trabajo en la siguiente referencia completa de las características de Microsoft Edge DevTools relacionadas con la visualización y modificación de CSS.

Para aprender los conceptos básicos, consulte Introducción a cómo ver y cambiar CSS.

Contenido detallado:

Seleccionar un elemento

La herramienta Elementos de DevTools le permite ver o cambiar el CSS de un elemento a la vez. El elemento seleccionado se resalta en el árbol del DOM. Los estilos del elemento se muestran en el panel Estilos . Para obtener un tutorial, vea Ver el CSS de un elemento.

Ejemplo de un elemento seleccionado

En la figura anterior:

  • El h1 elemento que se resalta en el árbol DOM es el elemento seleccionado.
  • A la derecha, los estilos del elemento se muestran en el panel Estilos .
  • A la izquierda, el elemento está resaltado en la ventanilla, pero solo porque el ratón está situado sobre él en el árbol del DOM:

Hay varias formas de seleccionar un elemento:

  • En una página web representada, haga clic con el botón derecho en un elemento de página y, a continuación, haga clic en Inspeccionar.

  • En DevTools, haga clic en Seleccionar un elemento (Seleccionar un elemento) o presione Ctrl+Mayús+C (Windows, Linux) o Comando+Mayús+C (macOS) y, a continuación, haga clic en el elemento de la ventanilla.

  • En DevTools, haga clic en el elemento del árbol del DOM.

  • En DevTools, ejecute una consulta document.querySelector('p') como en la Consola, haga clic con el botón derecho en el resultado y seleccione Mostrar en el panel Elementos.

Ver CSS

Use las pestañas Elementos,Estilos y Calculado> para ver reglas CSS y diagnosticar problemas de CSS.

La pestaña Estilos muestra vínculos de varios lugares a otros lugares, incluidos, entre otros:

  • Junto a las reglas CSS, a las hojas de estilo y las fuentes CSS. Estos vínculos abren la herramienta Orígenes . Si la hoja de estilos está minimizada, consulte Volver a formatear un archivo JavaScript reducido con pretty-print en las características de depuración de JavaScript.

  • En la sección Heredado de secciones, a elementos principales.

  • En var() llamadas, a declaraciones de propiedades personalizadas. Consulta Uso de propiedades personalizadas de CSS (variables) en MDN.

  • En animation las propiedades abreviadas, para @keyframes.

  • Obtenga más vínculos en la información sobre herramientas de documentación.

Los enlaces pueden tener un estilo diferente. Si no estás seguro de si algo es un vínculo, prueba a hacer clic en él para averiguarlo.

Por ejemplo:

  1. Ve a la aplicación To Do en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en el espacio en blanco sobre la cadena "Agregar una tarea" y, a continuación, haga clic en Inspeccionar.

    DevTools se abre, con la herramienta Elementos seleccionada.

  3. Seleccione la pestaña Estilos .

    Se muestran varios tipos de vínculos:

    Varios enlaces resaltados

Ver información sobre herramientas con documentación de CSS, especificidad y valores de propiedad personalizados

En la herramienta Elementos , la pestaña Estilos muestra información sobre herramientas con información útil al pasar el ratón por encima de elementos específicos.

Ver documentación de CSS

Para mostrar la descripción de una propiedad CSS, en una información sobre herramientas:

  1. Vaya a una página web, como la aplicación To Do, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en el espacio en blanco sobre la cadena "Agregar una tarea" y, a continuación, haga clic en Inspeccionar.

    DevTools se abre, con la herramienta Elementos seleccionada.

  3. Seleccione la pestaña Estilos .

  4. Mantenga el puntero sobre un nombre de propiedad CSS, como padding:.

    Se muestra información sobre herramientas:

    Información sobre herramientas con documentación sobre una propiedad CSS

    DevTools extrae las descripciones de información sobre herramientas del repositorio de datos personalizados de VS Code .

  5. En la información sobre herramientas, haga clic en el vínculo Más información .

    Se muestra la página de referencia CSS para la propiedad en MDN, como padding propiedad CSS.

Para desactivar la información sobre herramientas CSS:

  • En la información sobre herramientas, active la casilla No mostrar .

Para volver a activar CSS:

  1. En DevTools, seleccione Personalizar y controlar DevTools y, después, seleccione Configuración.

  2. En el esquema de la izquierda, seleccione Preferencias y desplácese hacia abajo hasta la sección Elementos .

  3. Active la casilla Mostrar información sobre herramientas de documentación de CSS .

Ver la especificidad del selector

Mantenga el puntero sobre un selector CSS para mostrar una información sobre herramientas que muestre el peso de especificidad del selector, por ejemplo: Especificidad: (0,0,1):

Por ejemplo:

  1. Vaya a una página web, como la aplicación To Do, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en la página web y, a continuación, haga clic en Inspeccionar.

    DevTools se abre, con la herramienta Elementos seleccionada.

  3. En el árbol DOM, seleccione el <body> elemento.

  4. En la pestaña Estilos , mantenga el puntero sobre el body selector CSS.

    Se muestra una información sobre herramientas, que muestra la especificidad: (0,0,1):

    El tooltip con el peso de especificidad de un selector coincidente

Vea también:

Ver los valores de las propiedades personalizadas

Mantenga el puntero sobre una var(--custom-property) función para ver el valor de la propiedad personalizada en una información sobre herramientas.

Por ejemplo:

  1. Vaya a una página web, como la aplicación To Do, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en la página web y, a continuación, haga clic en Inspeccionar.

    DevTools se abre, con la herramienta Elementos seleccionada.

  3. En el árbol DOM, seleccione el <body> elemento.

  4. En la pestaña Estilos , en la body regla CSS, mantenga el puntero sobre --spacing.

    El valor .3rem se muestra en una información sobre herramientas:

    El valor de una propiedad personalizada en una información sobre herramientas

Vea también:

Ver la hoja de estilos externa donde se define una regla

En el panel Estilos , haga clic en el vínculo situado junto a una regla CSS para abrir la hoja de estilos externa que define la regla. La hoja de estilos se abre en el panel Editor de la herramienta Orígenes .

Si la hoja de estilos está minimizada, haga clic en el botón Formato (Formato), en la parte inferior del panel del Editor . Para obtener más información, consulte Cambio de formato a un archivo JavaScript reducido con características dedepuración de JavaScript de impresión agradable.

Ver la hoja de estilo donde se define una regla

En la ilustración anterior, después de hacer clic en to-do-styles.css:5, se le llevará a la línea 5 de to-do-styles.css, donde se define la h1 regla CSS.

Ver CSS no válidos, invalidados, inactivos y otros

La pestaña Estilos reconoce muchos tipos de problemas de CSS y los resalta de diferentes maneras.

Ver solo el CSS que se aplica realmente a un elemento

El panel Estilos muestra todas las reglas que se aplican a un elemento, incluidas las declaraciones que se han invalidado. Cuando no esté interesado en las declaraciones invalidadas , use el panel Calculado para ver solo el CSS que realmente se está aplicando a un elemento.

Por ejemplo:

  1. Vaya a una página web, como la aplicación To Do, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en el encabezado Mis tareas y, a continuación, haga clic en Inspeccionar.

    DevTools se abre, con la herramienta Elementos seleccionada, con el <h1> elemento seleccionado en el árbol DOM.

  3. En la herramienta Elementos, seleccione la pestaña Calculado.

    Se muestran las propiedades CSS que se aplican al elemento seleccionado:

    El panel Calculado

    Un nombre de propiedad y un valor en cursiva indican un valor que se calcula en tiempo de ejecución.

  4. Para mostrar todas las propiedades, active la casilla Mostrar todo .

Ver las propiedades CSS en orden alfabético

Usar el panel Calculado . Consulte Ver solo el CSS que se aplica realmente a un elemento, más arriba.

Ver propiedades CSS heredadas

Active la casilla de verificación Mostrar todo en el panel Calculado . Consulte Ver solo el CSS que se aplica realmente a un elemento, más arriba.

Ver reglas de CSS

Las reglas son instrucciones CSS que permiten controlar el comportamiento de CSS.

En la herramienta Elementos , la pestaña Estilos muestra las siguientes reglas en secciones específicas:

Ver @property reglas

La @property regla CSS le permite definir propiedades personalizadas de CSS de tipos específicos en una hoja de estilo.

Mueva el puntero sobre el nombre de dicha propiedad en la pestaña Estilos para ver una información sobre herramientas que contiene:

  • El valor de la propiedad, como 20%.
  • Los descriptores de la propiedad, como: initial value: 40%
  • Ver propiedad registrada enlaza con su registro en la sección contraíble @property de la parte inferior de la pestaña Estilos .

Por ejemplo:

  1. Vaya a una página que use la @property regla, como Ver @property reglas, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en el párrafo del Elemento tres y, después, haga clic en Inspeccionar.

    DevTools se abre, con la herramienta Elementos seleccionada.

  3. En la pestaña Estilos , mantenga el puntero sobre esa var(--itemSize) función:

    Información sobre herramientas para la regla de CSS de la propiedad

    La información sobre herramientas contiene:

    • El valor de la propiedad, como 100px.
    • Descriptores de la propiedad, como el valor inicial.
    • Ver vínculo de propiedad registrada .

  4. Haz clic en el vínculo Ver propiedad registrada .

    La sección @property expandida se muestra, más abajo en la pestaña Estilos :

    --itemSize en la sección at-property

Para editar una @property regla, haga doble clic en su nombre o valor. Consulte Cambiar el nombre o el valor de una declaración a continuación.

Vea también:

Ver @supports reglas

La pestaña Estilos muestra las @supports reglas CSS, si se aplican a un elemento.

Por ejemplo, para ver la @supports regla:

  1. En una nueva ventana o pestaña, vaya a una página que use la @supports regla, como Ver @supports reglas de arroba.

  2. Haga clic con el botón derecho en "¡Soy compatible con el espacio de color de CIE LAB!", y luego seleccione Inspeccionar.

    Se abre DevTools. En la herramienta Elementos , en el árbol DOM, se selecciona el <div class="box"> elemento. En la pestaña Estilos , @supports se muestran las declaraciones CSS:

    Resultado de HTML para la regla at-supports at-

  • Si el explorador admite la lab() función, el elemento es verde.

  • Si el explorador no admite la lab() función, el elemento es morado.

Para ver qué versiones del explorador admiten el espacio de color CIE LAB, busque Caniuse.com "lab".

Ver @scope reglas

La pestaña Estilos muestra reglas CSS @scope si se aplican a un elemento.

Las @scope reglas de arroba le permiten abarcar estilos CSS; es decir, aplicar explícitamente estilos a elementos específicos. Ver @scope CSS at-rule en MDN.

Para ver la @scope regla:

  1. En una nueva ventana o pestaña, vaya a una página que use la @scope regla, como la demostración Ver @scope reglas :

    Resultado de HTML & CSS para la regla de en el ámbito

  2. Haga clic con el botón derecho en "Soy el texto que vive en una tarjeta" y, a continuación, seleccione Inspeccionar.

    DevTools se abre, con la herramienta Elementos seleccionada.

  3. Seleccione la pestaña Estilos .

  4. Examine la @scope regla:

    La regla de ámbito en la pestaña Estilos

    En este ejemplo, la @scope regla (color de fondo = ciruela) invalida la declaración CSS global (aguamarina) para cualquier <p> elemento que esté dentro de background-color un elemento (como un <div>) que tenga una card clase.

    Para editar la @scope regla, haga doble clic en ella:

  5. En la pestaña Estilos , haga doble clic en ciruela, presione Suprimir y, a continuación, seleccione beige.

    El texto de la tarjeta en la página web de demostración cambia de fondo ciruela a fondo beige.

Ver @font-palette-values reglas

La regla de CSS @font-palette-values le permite personalizar (invalidar) los valores predeterminados de la font-palette propiedad. En la herramienta Elementos , la pestaña Estilos muestra esta regla en una sección dedicada.

Para ver la @font-palette-values regla CSS:

  1. En una nueva ventana o pestaña, vaya a una página que use la @font-palette-values regla, como la demostración Ver @font-palette-values reglas de arroba .

  2. Haga clic con el botón derecho en "nuevos colores" y, a continuación, seleccione Inspeccionar.

    DevTools se abre, con la herramienta Elementos seleccionada.

  3. En la pestaña Estilos , busque la @font-palette-values regla CSS:

    La regla at-font-palette-values de la pestaña Estilos

    En este ejemplo, los valores de la --New paleta de fuentes invalidan los valores predeterminados de la fuente coloreada.

    Para editar un valor personalizado, haga doble clic en él como se indica a continuación:

  4. En la @font-palette-values regla CSS, en la override-colors propiedad, haga doble clic 0 gold, 1 redy escriba 0 blue, 1 red.

    En la página web inspeccionada, "nuevos colores" ahora se representa como azul y rojo.

Ver @position-try reglas

La @position-try regla CSS junto con la position-try-fallbacks propiedad le permite definir posiciones de anclaje alternativas para los elementos.

En la herramienta Elementos , la pestaña Estilos resuelve y vincula lo siguiente:

  • Los position-try-fallbacks valores de propiedad (o position-try-options valores de propiedad) se vinculan a una sección de regla CSS dedicada @position-try --name .

  • Los position-anchor valores de propiedad y anchor() los argumentos están vinculados a los elementos correspondientes que tienen popovertarget atributos.

Por ejemplo, inspeccione los valores y @position-try las position-try-fallbacks reglas CSS de la siguiente manera:

  1. En una nueva ventana o pestaña, vaya a una página que use los position-try-fallbacks valores y @position-try la regla, como la demostración Ver @position-try reglas de arroba .

  2. En la página web representada, abra el submenú; es decir, haga clic en SU CUENTA y, a continuación, haga clic en ESCAPARATE.

    Aparece el submenú, que muestra una lista de comandos: LISTADOS, OFERTAS ESPECIALES, CERRAR SESIÓN.

  3. En el submenú, haga clic con el botón derecho encima de LISTADOS y luego seleccione Inspeccionar.

    DevTools se abre, con la herramienta Elementos seleccionada. El elemento <ul id="submenu"> de submenú se selecciona en el árbol del DOM:

    Resultado de HTML & CSS para la regla at-position-try

  4. En la pestaña Estilos , en la #submenu regla CSS, busque la position-try-fallbacks propiedad y haga clic en su --bottom valor.

    La pestaña Estilos desplaza hacia abajo hasta la sección correspondiente @position-try :

    La sección de prueba de posición en la pestaña Estilos

  5. En la pestaña Estilos , en la #submenu regla CSS, haga clic en el --submenu vínculo en cualquiera de las siguientes propiedades:

    position-anchor: --submenu;
left: anchor(--submenu right);
top: anchor(--submenu top);

    El árbol DOM selecciona el elemento (<button popovertarget="submenu">) que tiene el valor de popovertarget atributo correspondiente (popovertarget="submenu"), y la pestaña Estilos muestra el CSS del elemento:

    El elemento de botón seleccionado en el árbol del DOM y su CSS

Para editar un valor, haga doble clic en él.

Vea también:

Ver un modelo de cuadro de elemento

Para ver el modelo de cuadro de un elemento, vaya al panel Estilos y desplácese hacia abajo.

Para cambiar un valor, haga doble clic en él.

En la siguiente ilustración, el diagrama de Modelo de Cuadro del panel Estilos muestra el modelo de cuadro del elemento seleccionado h1 actualmente:

Diagrama del Modelo de Caja

Vea también:

Buscar y filtrar el CSS de un elemento

Use el cuadro de texto Filtro de los paneles Estilos y Calculado para buscar propiedades o valores CSS específicos.

Para buscar también propiedades heredadas en el panel Calculado, active la casilla Mostrar todo .

En la siguiente ilustración, el panel Estilos se filtra para mostrar solo las reglas que incluyen la consulta colorde búsqueda.

Filtrar el panel Estilos

En la siguiente ilustración, el panel Calculado se filtra para mostrar solo las declaraciones que incluyen la consulta 100%de búsqueda:

Filtrar el panel Calculado

Emular una página con el foco

Si cambia el foco de la página web inspeccionada a DevTools, algunos elementos de superposición se ocultan automáticamente si son activados por el foco. Por ejemplo:

  • Listas desplegables.
  • Menús.
  • Selectores de fecha.

Para depurar un elemento como si la página tuviera el foco, realice una de las siguientes acciones:

  • En la herramienta Elementos , en la pestaña Estilos , haga clic :hov en (Alternar estado del elemento) y, a continuación, active la casilla Emular una página enfocada .
  • En la herramienta Representación , active la casilla Emular una página enfocada .

Precaución: Cuando esta opción está activada, se document.visibilityState establece en visible y el visibilitychange evento no se activa. Consulta la API de visibilidad de páginas en MDN.

Para intentar emular una página con foco:

  1. Abra la demostración Emular una página enfocada en una nueva ventana o pestaña.

  2. Haga clic en el cuadro de texto de entrada. O bien, presione Tab para colocar el foco en el cuadro de texto de entrada.

    Aparece otro elemento en el cuadro de texto de entrada que dice "Este mensaje solo aparece cuando el cuadro de texto está centrado".

  3. Haga clic con el botón derecho en el cuadro de texto de entrada y, a continuación, seleccione Inspeccionar.

    DevTools se abre y el elemento de mensaje desaparece. La ventana de DevTools ahora está en el foco, en lugar de la página web inspeccionada, por lo que el elemento de mensaje desaparece.

  4. En la herramienta Elementos , en la pestaña Estilos , haga clic :hov en (Alternar estado del elemento) y, a continuación, active la casilla Emular una página enfocada .

  5. Asegúrese de que el elemento <input id="textBox" type="text"> de cuadro de texto de entrada sigue seleccionado.

    En el cuadro de texto de entrada, el elemento de mensaje vuelve a aparecer debajo del cuadro de texto de entrada.

    Ahora puede inspeccionar el elemento de mensaje que está debajo del cuadro de texto de entrada, aunque DevTools, en lugar de la página inspeccionada, tiene el foco:

    Casilla Emular una página enfocada seleccionada

  6. Limpieza: En la herramienta Elementos , en la pestaña Estilos , haga clic :hov en (Alternar estado del elemento) y, a continuación, desactive la casilla de verificación Emular una página enfocada .

También aparece una casilla de verificación Emular una página enfocada en la herramienta Representación ; consulte Herramienta de renderización, para ver cómo se ve una página web con diferentes opciones de visualización o deficiencias de visión.

Vea también:

Alternar una pseudoclase

Para alternar una pseudoclase:

  1. Vaya a una página web, como la aplicación To Do, en una nueva ventana o pestaña.

  2. Escriba una tarea, como la tarea 1.

  3. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

    Se abre DevTools.

  4. Seleccione la herramienta Elementos .

  5. En el árbol DOM, seleccione el <li class="task"> elemento.

  6. Seleccione la pestaña Estilos .

  7. En la esquina superior derecha, haga clic en :hov.

    Se muestran las casillas de verificación.

  8. Seleccione la casilla de verificación para la pseudoclase que desea habilitar, como :hover:

    Selección de la pseudoclase :hover

    En la página web representada, el círculo junto al nombre de la tarea se rellena con una marca de verificación y aparece una X roja en un círculo rojo en el lado derecho de la tarea, como si se estuviera pasando el cursor sobre el elemento, aunque en realidad no se esté pasando el cursor sobre él.

La pestaña Estilos muestra las siguientes pseudoclases para todos los elementos:

Además, algunos elementos pueden tener pseudoclases específicas de elementos. Al seleccionar un elemento de este tipo, la pestaña Estilos muestra una sección de estado de elemento específico de Forzar que puede expandir y activar pseudoclases que son específicas del elemento, como una casilla de verificación :read-write :

Sección de estado de elemento específico de fuerza de un elemento 'textarea'

Para obtener un tutorial interactivo, consulte Agregar un pseudoestado a una clase.

Ver pseudoelementos de resaltado heredados

Los pseudoelementos le permiten aplicar estilo a partes específicas de los elementos. Los pseudoelementos resaltados son partes del documento con un estado "seleccionado" y tienen el estilo "resaltado" para indicar este estado al usuario.

Por ejemplo, estos pseudoelementos son:

  • ::selection
  • ::spelling-error
  • ::grammar-error
  • ::highlight

Cuando varios estilos entran en conflicto, la cascada CSS determina el estilo ganador. Ver Introducción a la cascada de CSS en MDN.

Para comprender mejor la herencia y la prioridad de las reglas, vea el pseudoelemento de resaltado heredado en la siguiente demostración.

Para ver los pseudoelementos de resaltado heredados:

  1. Vaya a la demostración Resaltar pseudoelementos en una nueva ventana o pestaña.

  2. Seleccione una parte del texto "Heredé el estilo del pseudoelemento resaltado de mis padres. ¡Seleccióname!"

    El texto seleccionado cambia a texto rojo sobre fondo amarillo.

  3. Haga clic con el botón derecho en el texto "Heredé el estilo del pseudoelemento resaltado de mis padres. ¡Seleccióname!", y, a continuación, selecciona Inspeccionar.

    Se abre DevTools. En la herramienta Elementos , en la pestaña Estilos , se muestra la sección: Heredado de ::selection pseudo de div.text-parent:

    Vea la sección Heredado en la pestaña Estilos

  4. En el árbol DOM, seleccione el <div class="text-parent"> elemento.

    En la pestaña Estilos , se muestra la sección: Pseudo ::selection element:

    Ver la sección Seudónima en la pestaña Estilos

Vea también:

Ver capas en cascada

Las capas en cascada permiten un control más explícito de sus archivos CSS, para evitar conflictos de especificidad de estilo. Esto es útil para:

  • Bases de código grandes.
  • Diseño del sistema.
  • Administrar estilos de terceros.

Para ver capas en cascada:

  1. Vaya a una página web que use capas en cascada, como la demostración de capas en cascada .

  2. Haga clic con el botón derecho en el elemento "¡Mis estilos están en capas!" y, a continuación, seleccione Inspeccionar.

    Se abre DevTools.

  3. En la herramienta Elementos , seleccione la pestaña Estilos .

  4. En la pestaña Estilos , vea las tres capas en cascada y sus estilos: pagey componentbase:

    Capas en cascada

  5. Para ver el orden de las capas, haga clic en el nombre de la capa (página, componente o base). O bien, haga clic en el icono Alternar vista Capas CSSBotón alternar vista Capas CSS .

    La page capa tiene la mayor especificidad, por lo tanto, el fondo del elemento es verde.

Vea también:

Ver una página en modo de impresión

Para ver una página en modo de impresión:

  1. Ir a una página web.

  2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

    Se abre DevTools.

  3. Presione Esc una o dos veces para que la barra de herramientas de Vista rápida aparezca en la parte inferior de DevTools.

  4. En la barra de herramientas de Vista rápida , seleccione Más herramientas (+).

  5. Seleccione la herramienta Representación .

    La herramienta Representación se abre en el panel Vista rápida en la parte inferior de DevTools.

  6. En la herramienta Representación , haga clic en la lista desplegable Emular tipo de medio CSS y, a continuación, seleccione imprimir.

    La página web se representa como si se imprimiera.

  7. Cuando haya terminado, en la herramienta Representación , haga clic en la lista desplegable Emular tipo de medio CSS y, a continuación, seleccione Sin emulación.

Ver CSS usado y no usado con la herramienta Cobertura

La herramienta Cobertura le muestra qué CSS usa realmente una página.

  1. Abra el menú de comandos presionando Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS), mientras DevTools tiene el foco.

  2. Comience a escribir coveragey, a continuación, seleccione Mostrar cobertura:

    Apertura de la herramienta Cobertura desde el menú de comandos

    Aparece la herramienta Cobertura :

    La herramienta Cobertura

  3. Haga clic en Iniciar instrumentación de cobertura y actualizar la página (Iniciar instrumentación de cobertura y actualizar la página). La página se actualiza y la herramienta Cobertura proporciona una visión general de la cantidad de CSS (y JavaScript) que se usa de cada archivo que carga el explorador. El verde representa el CSS usado. El rojo representa CSS sin usar.

    Información general sobre la cantidad de CSS (y JavaScript) que se usa y la que no:

    Información general sobre la cantidad de CSS (y JavaScript) que se usa y la que no se usa

  4. Para mostrar un desglose línea por línea de lo CSS que se usa, haga clic en un archivo CSS.

    En la siguiente ilustración, las líneas 145 a 147 y 149 a 151 no b66bc881.site-ltr.css se utilizan, mientras que las líneas 163 a 166 se utilizan:

    Desglose línea por línea del CSS usado y no usado

Forzar el modo de vista previa de impresión

Consulte Forzar DevTools al modo de vista previa de impresión.

Copiar CSS

Desde un solo menú desplegable en la pestaña Estilos , puede copiar reglas, declaraciones, propiedades o valores CSS separados; consulta los conceptos básicos de la sintaxis CSS en ¿Qué es CSS? en MDN.

Además, puede copiar las propiedades CSS en sintaxis de JavaScript. Esta opción es útil si está utilizando bibliotecas CSS-in-JS; consulte Edición de estilos para marcos CSS-in-JS.

Para copiar CSS:

  1. Vaya a una página web que use CSS, como la aplicación To Do, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en la página web y, a continuación, haga clic en Inspeccionar.

    DevTools se abre, con la herramienta Elementos seleccionada.

  3. En el árbol DOM, seleccione un elemento, como <h1>.

  4. En la pestaña Estilos , dentro de una regla CSS, haga clic con el botón derecho en una propiedad CSS, como text-align: center:

    Copiar menú desplegable CSS

  5. Seleccione un elemento del menú que aparece con el botón derecho:

    • Copiar declaración. Copia la propiedad y su valor en sintaxis CSS: property: value;

    • Copiar propiedad. Solo copia el property nombre.

    • Copiar valor. Solo copia el valuearchivo .

    • Copiar regla. Copia toda la regla CSS: selector[, selector] { property: value; property: value; ... }

    • Copiar declaración como JS. Copia la propiedad y su valor en sintaxis de JavaScript: propertyInCamelCase: 'value'

    • Copie todas las declaraciones. Copia todas las propiedades y sus valores en la sintaxis CSS: property: value; property: value; ...

    • Copiar todas las declaraciones como JS. Copia todas las propiedades y sus valores en la sintaxis de JavaScript: propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • Copie todos los cambios de CSS. Copia los cambios efectuados en la pestaña Estilos en todas las declaraciones. Este elemento del menú aparece condicionalmente.

    • Ver el valor calculado. Le lleva a la pestaña Calculado ; consulte Ver solo el CSS que se aplica realmente a un elemento, arriba.

Cambiar CSS

En esta sección se enumeran todas las formas en que puede cambiar CSS enEstilos de elementos>.

Además, también puede:

Dos maneras de agregar una declaración CSS a un elemento

El orden de las declaraciones afecta al estilo de un elemento. Puede agregar declaraciones agregando una declaración en línea o agregando una declaración a una regla de estilo. Estos dos enfoques se describen en las secciones siguientes.

Agregar una declaración CSS insertada a un elemento

Agregar una declaración insertada equivale a agregar un style atributo al HTML de un elemento. En la mayoría de los casos, probablemente quiera usar declaraciones insertadas.

Las declaraciones insertadas tienen una mayor especificidad que las externas, por lo que el uso de declaraciones insertadas garantiza que los cambios surtan efecto en el elemento específico esperado. Para obtener más información sobre la especificidad, consulte Tipos de selectores en Especificidad en MDN.

Para agregar una declaración insertada:

  1. Seleccione un elemento.

  2. En el panel Estilos , haga clic entre corchetes de la sección element.style . El cursor se enfoca y le permite escribir texto.

  3. Escriba un nombre de propiedad y presione Entrar.

  4. Escriba un valor válido para esa propiedad y presione Entrar. En el árbol del DOM, se ha agregado un style atributo al elemento.

Como alternativa, escriba el valor en el campo de propiedades y DevTools le sugerirá una lista de pares de propiedades: valores coincidentes entre los que seleccionar. Por ejemplo, si escribe bold en el campo de propiedades, DevTools sugiere font-weight: bold y font-weight: bolder como las posibles reglas. Presione Entrar para aplicar la regla.

En la siguiente ilustración, las margin-top propiedades and background-color se han aplicado al elemento seleccionado. En el árbol del DOM, las declaraciones se reflejan en el atributo del style elemento.

Agregar declaraciones en línea

Agregar una declaración CSS a una regla de estilo existente

Si está depurando los estilos de un elemento y necesita probar específicamente lo que sucede cuando una declaración se define en diferentes lugares, agregue una declaración a una regla de estilo existente.

Para agregar una declaración a una regla de estilo existente:

  1. Seleccione un elemento.

  2. En el panel Estilos , haga clic entre corchetes de la regla de estilo a la que desea agregar la declaración. El cursor se enfoca y le permite escribir texto.

  3. Escriba un nombre de propiedad y presione Entrar.

  4. Escriba un valor válido para esa propiedad y presione Entrar.

Agregar una declaración a una regla de estilo

Cambiar el nombre o el valor de una declaración

Para cambiar el nombre de una declaración CSS, haga doble clic en el nombre de la declaración.

Para cambiar el valor de una declaración CSS, haga doble clic en el valor de la declaración. En la captura de pantalla siguiente se muestra la selección de un valor de una lista:

Cambiar el valor de una declaración

Para cambiar un valor numérico, escríbalo o use las teclas de dirección según la sección siguiente.

Cambiar valores enumerables con métodos abreviados de teclado

Para cambiar un valor numérico de una declaración CSS, escriba el valor o use las teclas de dirección para incrementar el valor en una cantidad específica. Al editar un valor enumerable de una declaración, por ejemplo, font-size, puede usar los siguientes métodos abreviados de teclado para incrementar el valor en una cantidad fija:

Combinación de teclas Acción
Alt+Flecha arriba (Windows, Linux), Opción+Flecha arriba (macOS) Incrementa en 0,1.
Flecha arriba Incrementa en 1 o en 0,1 si el valor actual está entre -1 y 1.
Mayús+Flecha arriba Incrementar en 10.
Ctrl+Mayús+Pág (Windows, Linux), Mayús+Comando+Flecha arriba (macOS) Incrementar en 100.

Para disminuir, presione la tecla Flecha abajo (o Av Pág) en lugar de la tecla Flecha arriba (o Re Pág).

Cambiar valores de longitud

Puede usar el puntero para cambiar cualquier propiedad que tenga un valor de longitud, como width, , , paddingmargin, o borderheight.

Para cambiar la unidad de longitud:

  1. Abre una página web que use CSS, como la aplicación To Do, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en el texto: agregue una tarea y, a continuación, seleccione Inspeccionar.

    DevTools se abre, mostrando la herramienta Elementos . El <label> elemento se selecciona en el árbol del DOM.

  3. En la pestaña Estilos , en la .new-task-form regla CSS, en la max-width: propiedad, mantenga el puntero sobre 50rem.

    Aparece una información sobre herramientas, que muestra el valor equivalente y las unidades: 800px.

  4. Haga clic en el valor 50rem.

    Aparece una información sobre herramientas: "Incrementar/disminuir con la rueda del mouse o teclas arriba/abajo. Ctrl: +/-100, Mayús: +/-10, Alt: +/-0.1"

  5. Mueva la rueda del mouse o presione las teclas flecha arriba y flecha abajo mientras presiona una tecla:

    Ctrl: incrementar en 100. Mayús: incrementar en 10. Alt: Incrementa en 0,1.

    En la página web inspeccionada, el cuadro de texto Agregar una entrada para tareas cambia de ancho a medida que cambia el valor.

  6. En el campo de valor de la propiedad de ancho máximo, haga el valor 200px (cambiando de rem unidades a px unidades).

  7. Mueva de nuevo la rueda del mouse o presione las teclas flecha arriba y flecha abajo mientras mantiene presionadas las teclas Ctrl (+/-100), Mayús (+/-10) o Alt (+/-0.1).

    En la página web inspeccionada, el cuadro de texto Agregar una entrada de tarea cambia de ancho al cambiar el valor:

    Cambiar el ancho máximo del cuadro de texto de entrada

Agregar una clase a un elemento

Para agregar una clase a un elemento:

  1. Seleccione el elemento en el árbol del DOM.

  2. Haga clic en .cls.

  3. Escriba el nombre de la clase en el cuadro de texto Agregar nueva clase .

  4. Presione Entrar.

    El panel Clases de elemento

Emular las preferencias del tema claro y oscuro y habilitar el modo oscuro automático

Para activar o desactivar el modo oscuro automático o emular la preferencia del usuario de temas claros u oscuros:

  1. En la herramienta Elementos , en la pestaña Estilos , haga clic en el botón Alternar emulaciones de renderizado comunes (icono de Pincel) en la esquina superior derecha:

    Alternar emulaciones de representación comunes

  2. Selecciona una de las siguientes opciones en la lista desplegable:

    • prefiere-esquema-de-color: luz. Indica que el usuario prefiere el tema claro.

    • prefiere-es-color-scheme: oscuro. Indica que el usuario prefiere el tema oscuro.

    • Modo oscuro automático. Muestra la página en modo oscuro aunque no la haya implementado. Además, se establece prefers-color-scheme en dark automáticamente.

Esta lista desplegable es un acceso directo para la característica prefers-color-schemeEmular medios CSS y Habilitar las opciones de modo oscuro automático de la herramienta Representación.

Vea también:

Alternar una clase

Para habilitar o deshabilitar una clase en un elemento:

  1. Seleccione el elemento en el árbol del DOM.

  2. Abra el panel Clases de elemento . Consulta Agregar una clase a un elemento. Debajo de los cuadros de texto Agregar nueva clase están todas las clases que se aplican a este elemento.

  3. Active la casilla junto a la clase que desea habilitar o deshabilitar.

Agregar una regla de estilo

Para agregar una nueva regla de estilo:

  1. Seleccione un elemento.

  2. Haga clic en Nueva regla de estilo (Nueva regla de estilo). DevTools inserta una nueva regla debajo de la regla element.style .

    En la siguiente figura, DevTools agrega la regla de h1.devsite-page-title estilo después de hacer clic en Nueva regla de estilo.

    Agregar una nueva regla de estilo

Seleccionar una hoja de estilos para agregar una regla

De forma predeterminada, al agregar una regla de estilo, DevTools crea una nueva hoja de estilo denominada inspector-stylesheet en el documento y, después, agrega la nueva regla de estilo en esta hoja de estilo.

Para agregar la regla en su lugar en una hoja de estilos existente:

  • Haga clic y mantenga presionada Nueva regla de estilo (Nueva regla de estilo) y, a continuación, seleccione una hoja de estilo de la lista a la que agregar la regla de estilo.

Seleccionar una hoja de estilos

Agregar una regla de estilo a una ubicación específica en una hoja de estilos

De forma predeterminada, al agregar una regla de estilo al hacer clic en el botón Nueva regla de estilo (icono Nueva regla de estilo), se inserta la nueva regla debajo de la regla element.style en la hoja de inspector-stylesheet estilo.

Para agregar una regla de estilo en una ubicación específica de una hoja de estilos determinada empezando desde el panel Estilos :

  1. En la herramienta Elementos , en la pestaña Estilos , desplace el puntero sobre la regla de estilo que está directamente encima de donde desea agregar la nueva regla de estilo.

    Aparece un botón Insertar regla de estilo a continuación (icono Insertar regla de estilo a continuación) en el lado derecho de la regla CSS.

  2. Haga clic en el botón Insertar regla de estilo a continuación (icono Insertar regla de estilo a continuación):

    Insertar regla de estilo a continuación

Alternar una declaración

Para activar o desactivar una sola declaración:

  1. Seleccione un elemento.

  2. En el panel Estilos , mantenga el puntero sobre la regla que define la declaración. Se mostrará una casilla al lado de cada declaración.

  3. Active o desactive la casilla situada junto a la declaración. Al borrar una declaración, DevTools la tacha para indicar que ya no está activa.

    En la siguiente ilustración, se ha desactivado la margin-top propiedad del elemento seleccionado actualmente.

    Alternar una declaración

Editar los ::view-transition pseudoelementos durante una animación

Vea:

Alinear los elementos de la cuadrícula y su contenido con el editor de cuadrículas

Vea:

Cambiar los colores con el Selector de colores

El Selector de colores proporciona una interfaz de usuario para cambiar color y background-color declarar.

Para abrir el Selector de colores:

  1. Seleccione un elemento.

  2. En el panel Estilos, busque la colorbackground-color, o una declaración similar que desee cambiar. A la izquierda de , colorbackground-color, o un valor similar, hay un cuadrado pequeño, que es una vista previa del color.

    En la siguiente ilustración, el cuadrado pequeño a la izquierda es rgba(0, 0, 0, 0.7) una vista previa de ese color.

    Vista previa del color

  3. Haga clic en la vista previa para abrir el Selector de colores.

    El Selector de colores

La siguiente figura y lista describe cada uno de los elementos de la interfaz de usuario del Selector de colores.

El Selector de colores, anotado

Llamada Componente Descripción
1 Sombras
2 Cuentagotas Muestrear un color de la página con el cuentagotas
3 Copiar al portapapeles Copie el valor de visualización en el Portapapeles.
4 Valor para mostrar Representación RGBA, HSLA o hexadecimal del color.
5 Paleta de colores Haga clic en un cuadrado para cambiar el color.
6 Tono
7 Opacidad
8 Mostrar conmutador de valores Alterne entre las representaciones RGBA, HSLA y hexadecimales del color actual.
9 Conmutador de paleta de colores Alternar entre la paleta Diseño de materiales, una paleta personalizada o una paleta de colores de página. DevTools genera la paleta de colores de la página en función de los colores que encuentra en las hojas de estilo.

Vea también:

Muestrear un color de la página con el cuentagotas

Para cambiar el color seleccionado a otro color en la página:

  1. Haga clic en el icono de cuentagotas (cuentagotas). El cursor cambia a una lupa.

  2. Mantenga el puntero sobre el píxel que tenga el color que desea muestrear, en cualquier lugar de la pantalla.

  3. Haga clic para confirmar.

    En la siguiente figura, el Selector de colores muestra un valor de color actual de rgba(0,0,0,0.7), que es cercano al negro. El color específico cambia a la versión de negro que está resaltada actualmente en la ventana gráfica después de hacer clic en él.

    Uso del cuentagotas

Vea también:

Cambiar el valor del ángulo con el reloj angular

El reloj angular proporciona una interfaz de usuario para cambiar las cantidades de ángulos en los valores de propiedad CSS.

Para abrir el reloj angular:

  1. Seleccione un elemento que incluya una declaración de ángulo.

  2. En el panel Estilos , busque la transform declaración o background que desee cambiar. Haga clic en el cuadro Vista previa del ángulo situado junto al valor del ángulo.

    En la siguiente figura, el pequeño reloj a la izquierda es 100deg una vista previa del ángulo.

  3. Haga clic en la vista previa para abrir el reloj angular:

    Vista previa de ángulo

  4. Cambie el valor del ángulo haciendo clic en el círculo del reloj angular o desplace el mouse para aumentar o disminuir el valor del ángulo en 1.

Hay más métodos abreviados de teclado para cambiar el valor de ángulo. Obtenga más información en los métodos abreviados de teclado del panel Estilos.

Cambie las sombras de cuadro y texto con el Editor de instantáneas

Use el Editor de instantáneas para cambiar el valor de la box-shadow propiedad CSS o text-shadow en un elemento HTML:

  1. Seleccione un elemento con una declaración o box-shadowtext-shadow .

    Por ejemplo, abra la página de demostración de 1DIV en una pestaña o ventana nueva, haga clic con el botón derecho en la página y seleccione Inspeccionar para abrir DevTools y, a continuación, en la herramienta Elementos , seleccione el <div class="demos"> elemento.

  2. En el panel Estilos , en la .demos regla CSS, busque la box-shadow declaración y, a continuación, haga clic en el botón Abrir editor de instantáneas (icono del botón del editor de instantáneas).

    Se abrirá el Editor de instantáneas :

    El Editor de instantáneas

  3. Cambie las propiedades de la sombra como sigue:

    Propiedad Cómo cambiar
    Tipo Seleccione Principio o Recuadro. Solo para box-shadow.
    Desplazamiento X Especifique un valor en el cuadro de texto o arrastre el punto azul.
    Desplazamiento de Y Especifique un valor en el cuadro de texto o arrastre el punto azul.
    Desenfoque Especifique un valor en el cuadro de texto o arrastre el control deslizante.
    Propagación Especifique un valor en el cuadro de texto o arrastre el control deslizante. Solo para box-shadow.

    Los cambios se aplican al elemento en la página web representada en tiempo real:

    El efecto de los cambios realizados en el Editor de instantáneas

Editar tiempos de animación y transición con el Editor de aceleración

Utilice el Editor de aceleración para cambiar el valor de la propiedad animation-timing-function o transition-timing-function en un elemento HTML.

Para abrir el Editor de aceleración:

  1. En DevTools, en la herramienta Elementos , en el árbol DOM, seleccione un elemento que tenga aplicada una animación o transición CSS.

    Por ejemplo, abra la página de demostración de propiedades animadas en una pestaña o ventana nueva, haga clic con el botón derecho en el cuadro verde que contiene una animación y, a continuación, seleccione Inspeccionar.

    DevTools se abre, mostrando la herramienta Elementos .

  2. Presione Ctrl+F y busque "spinner", y luego seleccione el <div class="spinner"> elemento que está dentro<div class="animation-demo good">.

    Los cuadros rojo (malo) y verde (bueno) de esta página de demostración son dos animaciones CSS diferentes. Ambas animaciones se ejecutan con CSS mediante la animation propiedad CSS y definen una ease-in-out función de intervalos.

  3. En la pestaña Estilos, en la .good .spinner regla CSS, en la animation declaración, a la izquierda de , haga clic en el botón Abrir el editor Cubic Bezier (icono del ease-in-outeditor Cubic bezier).

    El Editor de aceleración abre:

    Editor de aceleración

Usar valores preestablecidos para ajustar los intervalos

Para ajustar los intervalos con un simple clic del mouse, use los ajustes preestablecidos en el Editor de aceleración:

  1. Abra el Editor de aceleración, como se describe en Editar animaciones e intervalos de transición con el Editor de aceleración, más arriba.

  2. Haz clic en uno de los cuatro botones del selector:

    Botón Tipo de función Palabra clave CSS
    Funciones de aceleración lineal Funciones lineales linear
    Funciones de aceleración de entrada y salida Funciones de entrada y salida lenta ease-in-out
    Funciones de aceleración lenta Funciones de entrada lenta ease-in
    Funciones de aceleración de salida lenta Funciones de salida lenta ease-out

    Al seleccionar un botón, se establece un valor de palabra clave en la regla CSS (que varía si seleccionas un ajuste preestablecido de variante en el siguiente paso), y el conmutador de ajustes preestablecidos se abre en la parte inferior del Editor de aceleración.

  3. En el conmutador de preajustes, haz clic en los botones izquierdo< o derecho> para seleccionar uno de los siguientes preajustes:

    • Ajustes preestablecidos lineales: elastic, bounce, o emphasized.

    • Valores preestablecidos de Bézier cúbico:

    Palabra clave de intervalo Valor predeterminado Bézier cúbico
    Entrada y salida lenta In Out, Sine cubic-bezier(0.45, 0.05, 0.55, 0.95)
    Entrada y salida lenta In Out, Quadratic cubic-bezier(0.46, 0.03, 0.52, 0.96)
    Entrada y salida lenta In Out, Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
    Entrada y salida lenta Salida rápida, entrada lenta cubic-bezier(0.4, 0, 0.2, 1)
    Entrada y salida lenta In Out, Back cubic-bezier(0.68, -0.55, 0.27, 1.55)
    Palabra clave de intervalo Valor predeterminado Bézier cúbico
    Entrada fácil En, Seno. cubic-bezier(0.47, 0, 0.75, 0.72)
    Entrada fácil Entrada, cuadrática cubic-bezier(0.55, 0.09, 0.68, 0.53)
    Entrada fácil In, Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
    Entrada fácil Dentro, atrás cubic-bezier(0.6, -0.28, 0.74, 0.05)
    Entrada fácil Salida rápida, entrada lineal cubic-bezier(0.4, 0, 1, 1)
    Palabra clave de intervalo Valor predeterminado Bézier cúbico
    Facilidad de salida Fuera, Seno. cubic-bezier(0.39, 0.58, 0.57, 1)
    Facilidad de salida Salida, cuadrática cubic-bezier(0.25, 0.46, 0.45, 0.94)
    Facilidad de salida Salida, cúbica cubic-bezier(0.22, 0.61, 0.36, 1)
    Facilidad de salida Salida lineal, entrada lenta cubic-bezier(0, 0, 0.2, 1)
    Facilidad de salida Fuera, atrás cubic-bezier(0.18, 0.89, 0.32, 1.28)

Vea también:

Configurar intervalos personalizados

Para establecer valores personalizados para las funciones de temporización, use los puntos de control en las líneas:

  • Para las funciones lineales, haga clic en cualquier lugar de la línea para añadir un punto de control y arrastrarlo. Para quitar un punto de control, haga doble clic en él.

    Arrastrar un punto de control de una función lineal

  • Para las funciones Bézier cúbicas, arrastre uno de los puntos de control:

    Arrastrar los puntos de control de una función Bézier cúbica

Cualquier cambio activa una animación de bola en la vista previa en la parte superior del editor de aceleración.

Vea también

Demostraciones:

MDN:

GitHub:

Web.dev:

Blog de Chrome para desarrolladores:

Documentos de Chrome:

material.io:

Nota:

Algunas partes de esta página son modificaciones que se basan en trabajo creado y compartido por Google y que se usan de acuerdo con los términos descritos en la Licencia internacional de Creative Commons Atribution 4.0. La página original se encuentra aquí y está escrita por Kayce Basques.

Licencia de Creative Commons Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.

  • Se actualizó por última vez el