Introducción a cómo ver y cambiar CSS

Para obtener información sobre los conceptos básicos del uso de DevTools para ver y cambiar el CSS de una página, siga las secciones del tutorial interactivo de este artículo.

Ver el CSS de un elemento

1. Abra la página de demostración De ejemplos CSS en una nueva ventana o pestaña. (Para abrir un vínculo en una nueva ventana o pestaña, haga clic con el botón derecho en el vínculo. O bien, mantenga presionada la tecla Ctrl (para Windows, Linux) o Comando (para macOS) y, a continuación, haga clic en el vínculo).

2. Haga clic con el botón derecho en el Inspect Me! texto y, a continuación, seleccione Inspeccionar.

   En el panel Árbol DOM de la herramienta Elementos, el Inspect Me! elemento está resaltado:

   

3. En el Inspect Me! elemento , busque el valor del data-message atributo y cópielo.

4. En la vista de página, escriba el data-message valor que copió en el cuadro de texto Valor del mensaje de datos .

5. Haga clic con el botón derecho en el Inspect Me! texto y, a continuación, seleccione Inspeccionar.

6. En DevTools, en la herramienta Elementos , seleccione el panel Estilos . El Inspect Me! elemento se resalta en el panel Estilos.

7. En el Inspect Me! elemento , busque la regla de aloha clase. Se muestra esta regla, porque se aplica al Inspect Me! elemento .

8. En la aloha clase , busque el valor del padding estilo y cópielo:

   

9. En la vista de página, pegue el padding valor en el cuadro de texto Valor de relleno .

Adición de una declaración CSS a un elemento

Use el panel Estilos cuando desee cambiar o agregar declaraciones CSS a un elemento.

1. En primer lugar, se recomienda realizar la vista anterior de CSS para un tutorial de elementos .

2. Abra la página de demostración De ejemplos CSS en una nueva ventana o pestaña.

3. Haga clic con el botón derecho en el Add A Background Color To Me! texto y, a continuación, seleccione Inspeccionar.

4. Haga clic element.style cerca de la parte superior del panel Estilos .

5. Escriba background-color o selecciónelo en la lista desplegable y, a continuación, presione Entrar.

6. Escriba honeydew o selecciónelo en la lista desplegable de colores y, a continuación, presione Entrar. Después de elegir un color, se muestra una declaración de estilo en línea que se aplica al elemento en el árbol DOM.

   La background-color:honeydew declaración se aplica al elemento mediante la element.style sección del panel Estilos :

   

Adición de una clase CSS a un elemento

Para mostrar el aspecto de un elemento cuando se aplica o quita una clase CSS de un elemento, vea el panel Estilos .

1. En primer lugar, se recomienda realizar la vista anterior de CSS para un tutorial de elementos .

2. Abra la página de demostración De ejemplos CSS en una nueva ventana o pestaña.

3. Haga clic con el botón derecho en el Add A Class To Me! texto y, a continuación, seleccione Inspeccionar.

4. Haga clic en el botón Clases de elemento (.cls). DevTools muestra un cuadro de texto donde puede agregar clases CSS al elemento de página que está inspeccionando.

5. Escriba color_me en el cuadro de texto Agregar nueva clase y presione Entrar. Aparece una casilla debajo del cuadro de texto Agregar nueva clase , donde puede activar y desactivar la clase. Si el Add A Class To Me! elemento tiene otras clases aplicadas, también puede alternar cada clase desde aquí.

   La color_me clase se aplica al elemento mediante la sección .cls del panel Estilos :

   

Agregar un pseudoestado a una clase

Use el panel Estilos para aplicar permanentemente un pseudoestado CSS a un elemento. DevTools admite :active, :focus, :hovery :visited.

1. En primer lugar, se recomienda realizar la vista anterior de CSS para un tutorial de elementos .

2. Abra la página de demostración De ejemplos CSS en una nueva ventana o pestaña.

3. Mantenga el puntero sobre el Hover Over Me! texto. El color de fondo cambia.

4. Haga clic con el botón derecho en el Hover Over Me! texto y, a continuación, seleccione Inspeccionar.

5. En el panel Estilos , haga clic en el botón Alternar estado del elemento (:hov).

6. Active la casilla :hover . El color de fondo cambia como en el primer paso, aunque en realidad no mantenga el puntero sobre el elemento.

   En la captura de pantalla siguiente se muestra el resultado de alternar el :hover pseudoestado en un elemento.

   

Cambiar las dimensiones de un elemento

Use el diagrama interactivo Modelo de cuadro del panel Estilos para cambiar el ancho, alto, relleno, margen o longitud del borde de un elemento.

1. En primer lugar, se recomienda realizar la vista anterior de CSS para un tutorial de elementos .

2. Abra la página de demostración De ejemplos CSS en una nueva ventana o pestaña.

3. Haga clic con el botón derecho en el Change My Margin! texto y, a continuación, seleccione Inspeccionar.

4. En el diagrama Modelo de cuadro del panel Estilos , mantenga el puntero sobre el relleno. El relleno del elemento está resaltado en la ventanilla.

   Dependiendo del tamaño de la ventana DevTools, es posible que deba desplazarse hasta la parte inferior del panel Estilos para mostrar el modelo de cuadro.

5. Haga doble clic en el margen izquierdo del modelo de cuadro, que actualmente tiene un valor de -. - significa que el elemento no tiene un valor para margin-left.

6. Escriba 100px y presione Entrar. El valor predeterminado de Box Model es píxeles, pero también acepta otros valores, como 25%, o 10vw.

   Mantener el puntero sobre el relleno del elemento:

   

   Cambiar el margen izquierdo del elemento:

   

Depuración de consultas multimedia

Las consultas multimedia CSS son una manera de hacer que el sitio web reaccione a los cambios en la configuración de cada usuario. El caso de uso más común es proporcionar a la página un diseño CSS diferente en función de las dimensiones de la ventanilla.

El uso de diseños independientes permite un diseño de una columna para dispositivos móviles y diseños de varias columnas cuando hay más propiedades de pantalla disponibles.

Para depurar o probar las consultas multimedia que definió en css:

1. Abra la página de demostración De ejemplos CSS en una nueva ventana o pestaña.

2. Para abrir DevTools, haga clic con el botón derecho en la página web y seleccione Inspeccionar.

3. Haga clic en el botón Alternar emulación de dispositivo (). O bien, cuando DevTools tenga el foco, presione Ctrl+Mayús+M (Windows, Linux) o Comando+Mayús+M (macOS).

   La barra de herramientas del dispositivo se abre en la página web y la página web se representa ahora en el panel Emulación de dispositivo:

   

4. Con la barra de herramientas del dispositivo abierta, haga clic en el botón Más opciones () de la parte superior derecha y, a continuación, seleccione Mostrar consultas multimedia:

   

   Las barras coloreadas encima de la página web representan las distintas consultas multimedia.

5. Mantenga el puntero sobre los límites de las barras para mostrar los valores de las distintas consultas multimedia. Haga clic en cada valor de consulta multimedia para cambiar el tamaño de la página web para que coincida.

   

6. Para abrir el archivo CSS que contiene las consultas multimedia y editar su código fuente, haga clic con el botón derecho en una de las barras coloreadas y, a continuación, seleccione Mostrar en código fuente. Aparece la herramienta Orígenes y la consulta multimedia correspondiente se resalta en el archivo CSS:

   

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.