Referencia 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 el cambio de CSS.

Consulte Introducción a la visualización y el cambio de CSS para conocer los conceptos básicos.

Seleccionar un elemento

El panel elementos de DevTools le permite ver o cambiar la CSS de un elemento a la vez. El elemento seleccionado está resaltado en el árbol DOM. Los estilos del elemento se muestran en el panel estilos . Vea ver las CSS de un elemento para obtener un tutorial.

Nota

En la siguiente ilustración, el h1 elemento que está resaltado 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 se resalta en la ventanilla, pero solo porque el mouse se desplaza en el árbol DOM.

Ejemplo de un elemento seleccionado

Use una de las siguientes acciones para seleccionar un elemento.

  • En su ventanilla, desplace el puntero sobre el elemento, abra el menú contextual \ (haga clic con el botón derecho ) y elija inspeccionar.
  • En DevTools, elija seleccionar un elemento \ (  Seleccione un elemento ) o \ Control + Shift + C (Windows, Linux ) o Command + Shift + C \ (MacOS ) y, a continuación, elija el elemento en la ventanilla.
  • En DevTools, elija el elemento en el árbol DOM.
  • En DevTools, ejecuta una consulta como document.querySelector('p') en la consola, coloca el puntero en el resultado, abre el menú contextual \ (Haz clic con el botón derecho del ratón ) y elige Mostrar en el panel de elementos.

Ver CSS

Ver la hoja de estilos externa donde se define una regla

En el panel estilos , elija el vínculo junto a una regla CSS para abrir la hoja de estilos externa que define la regla.

Si la hoja de estilos es minified, desplácese para hacer que un archivo minified sea legible.

Nota

En la siguiente ilustración, después de elegir, https://docs.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css:2 se le dirigirá a la línea 2 de https://docs.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css , donde .content h1:first-of-type se define la regla CSS.

Ver la hoja de estilos donde se define una regla

Ver solo la CSS que se aplica realmente a un elemento

La pestaña estilos muestra todas las reglas que se aplican a un elemento, incluidas las declaraciones que se han reemplazado. Si no está interesado en las declaraciones reemplazadas, use la pestaña calculada para ver solo la CSS que se está aplicando realmente a un elemento.

  1. Seleccione un elemento.
  2. Vaya a la pestaña calculada en el panel elementos .

Nota

En una ventana de DevTools ancha, la pestaña calculada no existe. El contenido de la pestaña calculada se muestra en la pestaña estilos .

Las propiedades heredadas son opacas. Active la casilla Mostrar todo para ver todos los valores heredados.

Nota

En la siguiente ilustración, la pestaña calculada muestra las propiedades de CSS que se aplican al elemento seleccionado actualmente h1 .

La pestaña calculada

Ver las propiedades de CSS por orden alfabético

Use la pestaña calculada . Vea ver solo la CSS que se aplica realmente a un elemento.

Ver las propiedades heredadas de CSS

Active la casilla Mostrar todo en la pestaña calculada . Vea ver solo la CSS que se aplica realmente a un elemento.

Ver el modelo de cuadro de un elemento

Para ver el modelo de cuadro de un elemento, vaya a la pestaña estilos . Si la ventana de DevTools es estrecha, el diagrama de modelo de cuadro se encuentra en la parte inferior de la pestaña.

Elija y edite en un valor para cambiar un valor.

Nota

En la siguiente ilustración, el diagrama de modelo de cuadro de la pestaña estilos muestra el modelo de cuadro para el elemento seleccionado actualmente h1 .

El diagrama de modelo de cuadro

Buscar y filtrar la CSS de un elemento

Use el cuadro de texto filtrar en los estilos y las pestañas calculadas para buscar propiedades o valores específicos de CSS.

Para buscar también las propiedades heredadas en la pestaña calculada , active la casilla Mostrar todo .

Nota

En la siguiente ilustración, la pestaña estilos se filtra para mostrar únicamente las reglas que incluyen la consulta de búsqueda color .

Filtrar la pestaña estilos

Nota

En la siguiente ilustración, la pestaña calculada se filtra para mostrar únicamente las declaraciones que incluyen la consulta de búsqueda 100% .

Filtrar la pestaña calculada

Alternar una seudoclase

Complete las acciones siguientes para cambiar una seudoclase como :active ,, :focus :hover o :visited .

  1. Seleccione un elemento.
  2. En el panel elementos , vaya a la pestaña estilos .
  3. Elija : HOV.
  4. Compruebe la pseudo-clase que desea habilitar.

Nota

En la siguiente ilustración, alterne la :hover pseudo-clase. En la ventanilla, compruebe que la background-color: cornflowerblue declaración se aplica al elemento, aunque no se esté colocando el elemento en realidad.

Activar o desactivar la seudoclase: hover

Para un tutorial interactivo, navegue para Agregar un PseudoState a una clase.

Ver una página en modo de impresión

Complete las acciones siguientes para ver una página en modo de impresión.

  1. Abrir el menú de comandos.
  2. Empiece Rendering a escribir y seleccione Show Rendering .
  3. Para la lista desplegable emular multimedia de CSS , seleccione Imprimir.

Ver las CSS usadas y sin usar con la pestaña cobertura

La pestaña cobertura le muestra qué CSS usa una página en realidad.

  1. Seleccione Control + Shift + P \ (Windows, Linux ) o Command + Shift + P \ (MacOS ) mientras DevTools el foco para abrir el menú de comandos.

  2. Empiece coverage a escribir y seleccione Mostrar cobertura. Aparece la ficha cobertura.

  3. Elija iniciar la cobertura de la instrumentación y actualice la página \ (  empezar la cobertura de la instrumentación y actualizar la página ). La página se actualiza y la pestaña cobertura proporciona una descripción general de la cantidad de CSS \ (y JavaScript ) que se usa en cada archivo que carga el explorador. El verde representa CSS usado. Rojo representa un CSS no usado.

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

  4. Elija un archivo CSS para ver un desglose línea por línea de qué usa CSS.

    Nota

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

    Un desglose línea a línea de CSS utilizadas y sin usar

Forzar el modo vista previa de impresión

Consulte forzar DevTools en el modo de vista previa de impresión.

Cambiar CSS

Agregar una declaración CSS a un elemento

El orden de las declaraciones afecta a la forma en que se aplica el estilo de un elemento, use la siguiente lista para ayudarle a agregar declaraciones de diferentes maneras.

¿Qué flujo de trabajo debe usar? En la mayoría de los casos, probablemente quieras usar el flujo de trabajo de declaración en línea. Las declaraciones en línea tienen una mayor especificidad que las externas, por lo que el flujo de trabajo insertado garantiza que los cambios se apliquen en el elemento esperado. Para obtener más información sobre la especificidad, vaya a tipos de selector.

Si depura cualquier estilo del elemento y necesita comprobar específicamente lo que ocurre cuando se define una declaración en distintos lugares, use el otro flujo de trabajo.

Agregar una declaración en línea

Complete las acciones siguientes para agregar una declaración en línea.

  1. Seleccione un elemento.
  2. En el panel estilos , elija entre los corchetes del elemento. sección Style . El cursor se centra, lo que le permite escribir texto.
  3. Escriba un nombre de propiedad y seleccione Enter .
  4. Escriba un valor válido para esa propiedad y seleccione Enter . En el árbol DOM, compruebe que se ha style agregado un atributo al elemento.

Nota

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

Agregar declaraciones en línea

Agregar una declaración a una regla de estilo

Complete las siguientes acciones para agregar una declaración a una regla de estilo existente.

  1. Seleccione un elemento.
  2. En el panel estilos , elija entre los corchetes de la regla de estilo a los que desea agregar la declaración. El cursor se centra, lo que le permite escribir texto.
  3. Escriba un nombre de propiedad y seleccione Enter .
  4. Escriba un valor válido para esa propiedad y seleccione Enter .

Agregar una declaración a una regla de estilo

Cambiar un nombre o valor de declaración

Elija y edite el nombre o el valor de una declaración para cambiarlo. Vea cambiar valores de declaración con métodos abreviados de teclado para métodos abreviados para aumentar o disminuir rápidamente un valor por 0.1 1 unidades,, 10 o 100 .

Cambiar el valor de una declaración

Cambiar los valores de declaración con métodos abreviados de teclado

Al editar el valor de una declaración, puede usar los siguientes métodos abreviados de teclado para incrementar el valor en una cantidad específica.

  • Seleccione Alt + Up \ (Windows, Linux ) o Option + Up \ (MacOS ) para incrementarlo 0.1 .
  • Seleccione Up para cambiar el valor por 1 , o por 0.1 si el valor actual se encuentra entre -1 y 1 .
  • Seleccione Shift + Up para incrementar 10 .
  • Seleccione Shift + Page Up \ (Windows, Linux ) o Shift + Command + Up \ (MacOS ) para incrementar el valor 100 .

También funciona la reducción. Solo tiene que reemplazar cada instancia de la Up mencionada anteriormente con Down .

Agregar una clase a un elemento

Complete las siguientes acciones para agregar una clase a un elemento.

  1. Seleccione el elemento en el árbol DOM.
  2. Elija . CLS.
  3. Escriba el nombre de la clase en el cuadro de texto Agregar nueva clase .
  4. Seleccione Enter .

Panel clases de elementos

Activar o desactivar una clase

Complete las siguientes acciones para habilitar o deshabilitar una clase en un elemento.

  1. Seleccione el elemento en el árbol DOM.
  2. Abra el panel clases de elementos . Vea Agregar una clase a un elemento. Debajo del cuadro de texto Agregar nueva clase se encuentran todas las clases que se están aplicando al elemento específico.
  3. Active la casilla situada junto a la clase que desea habilitar o deshabilitar.

Agregar una regla de estilo

Complete las siguientes acciones para agregar una nueva regla de estilo.

  1. Seleccione un elemento.
  2. Elija nueva regla de estilo \ (  nueva regla de estilo ). DevTools inserta una nueva regla debajo del elemento. regla de estilo.

Nota

En la siguiente ilustración, DevTools agrega la h1.devsite-page-title regla de estilo después de elegir nueva regla de estilo.

Agregar una nueva regla de estilo

Elegir la hoja de estilos a la que se va a agregar una regla

Al Agregar una nueva regla de estilo, seleccione y mantenga presionada la nueva regla de estilo \ (  nueva regla de estilo ) para elegir a qué hoja de estilos desea agregar la regla de estilo.

Elegir una hoja de estilos

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

Complete las siguientes acciones para agregar una regla de estilo a una ubicación específica en la pestaña estilos .

  1. Desplace el puntero sobre la regla de estilo que está justo encima del lugar donde desea agregar la nueva regla de estilo.
  2. Mostrar la barra de herramientas más acciones .
  3. Elija Insertar regla de estilo a continuación \ (  Insertar regla de estilo debajo del icono ).

Insertar regla de estilo a continuación

Mostrar la barra de herramientas más acciones

La barra de herramientas más acciones le permite realizar las siguientes acciones.

  • Inserte una regla de estilo directamente debajo de la que se le está concentrando.
  • Agregue una background-color color declaración, box-shadow o text-shadow a la regla de estilo en la que se concentra.

Complete las siguientes acciones para mostrar la barra de herramientas más acciones .

  1. En la pestaña estilos , desplace el puntero sobre una regla de estilo. Más acciones \ ( ... ) se muestra en la parte inferior derecha de la sección regla de estilo.

    Nota

    En la siguiente ilustración, desplace el puntero sobre la .header-holder.has-default-focus regla de estilo y se revelarán más acciones en la parte inferior derecha de la sección regla de estilo.

    Mostrar más acciones

  2. Mantenga el mouse sobre más acciones \ ( ... ) para mostrar las acciones mencionadas anteriormente.

    Nota

    La acción Insertar regla de estilo se muestra después de mantener el mouse sobre más acciones.

    La barra de herramientas más acciones

Activar o desactivar una declaración

Completa las acciones de folllwoing para cambiar una única declaración de \ (o desactivada).

  1. Seleccione un elemento.
  2. En el panel estilos , desplace el puntero sobre la regla que define la declaración. Aparece una casilla de verificación junto a cada declaración.
  3. Active \ (o desactive ) la casilla junto a la declaración. Al desactivar una declaración, DevTools la cruza para indicar que ya no está activa.

Nota

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

Activar o desactivar una declaración

Agregar una declaración de color de fondo

Complete las siguientes acciones para agregar una background-color declaración a un elemento.

  1. Pase el puntero sobre la regla de estilo a la que desea agregar la background-color declaración.
  2. Mostrar la barra de herramientas más acciones .
  3. Elija agregar color de fondo \ (  agregar color de fondo, icono ).

Agregar color de fondo

Agregar una declaración de color

Complete las siguientes acciones para agregar una color declaración a un elemento.

  1. Pase el puntero sobre la regla de estilo a la que desea agregar la color declaración.
  2. Mostrar la barra de herramientas más acciones .
  3. Elija agregar color \ (  Agregar icono de color ).

Agregar color

Agregar una declaración de sombra de cuadro

Complete las siguientes acciones para agregar una box-shadow declaración a un elemento.

  1. Pase el puntero sobre la regla de estilo a la que desea agregar la box-shadow declaración.
  2. Mostrar la barra de herramientas más acciones .
  3. Elija Agregar cuadro sombra \ (  icono de sombra del cuadro de agregar ).

Cuadro Agregar sombra

Agregar una declaración de sombra de texto

Complete las siguientes acciones para agregar una text-shadow declaración a un elemento.

  1. Pase el puntero sobre la regla de estilo a la que desea agregar la text-shadow declaración.
  2. Mostrar la barra de herramientas más acciones .
  3. Elija Agregar sombra de texto \ (  icono Agregar sombra de texto ).

Agregar sombra de texto

Cambiar los colores con el selector de colores

El selector de colores proporciona una interfaz gráfica de usuario para el cambio color y las background-color declaraciones.

Complete las siguientes acciones para abrir el selector de colores.

  1. Seleccione un elemento.

  2. En la pestaña estilos , busque la color background-color declaración similar que desea cambiar. A la izquierda del color valor, background-color o similar, hay un pequeño cuadrado, que es una vista previa del color.

    Nota

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

    Vista previa del color

  3. Elija la vista previa para abrir el selector de colores.

    El selector de colores

En la siguiente ilustración se muestra una lista de descries de cada uno de los elementos de la interfaz de usuario del selector de colores.

El selector de color, anotado

uno

Grada

 

1

Cuentagotas

Para obtener más información, vaya a la muestra de un color fuera de la página con el cuentagotas.

2

Copiar en el portapapeles

Copie el valor para mostrar en el portapapeles.

cuatro

Valor para mostrar

La representación RGBA, HSLA o hexadecimal del color.

4

Paleta de colores

Elija uno de los cuadrados para cambiar el color a ese cuadrado.

6

Altera

 

siete

Opacity

 

4,8

Display Value Switcher

Alternar entre las representaciones RGBA, HSLA y hexadecimal del color actual.

99,999

Conmutador de paleta de colores

Cambiar entre la paleta de diseño de material, 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 encuentre en las hojas de estilo.

Muestra un color de la página con el cuentagotas

Al abrir el selector de color, el cuentagotas \ (  cuentagotas ) está activado de forma predeterminada. Complete las acciones siguientes para cambiar el color seleccionado a otro color de la página.

  1. Desplace el puntero sobre el color de destino en la ventanilla.

  2. Elija confirmar.

    Nota

    En la siguiente ilustración, el selector de colores muestra un valor de color actual de rgba(0,0,0,0.7) , que está cerca del negro. El color específico debe cambiar a la versión de negro que está resaltada en la ventanilla después de elegirla.

    Usar el cuentagotas

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según las condiciones descritas en la licencia internacional de Creative Commons Atribution 4,0.
La página original se encuentra aquí y está modificada por Kayce vascos \ (redactor técnico, Chrome DevTools \ & Lighthouse ).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.