Introducción a cómo ver y cambiar CSS

Complete estos tutoriales interactivos para aprender los conceptos básicos de ver y cambiar el CSS de una página mediante Microsoft Edge DevTools.

Ejemplos de CSS abiertos

1. Mantenga Control presionado (Windows, Linux) o Command (macOS) y elija Ejemplos de CSS para abrir en una nueva ventana.

   Ejemplos de CSS

   Nota

   Si desea acoplar la ventana DevTools a la derecha de la ventanilla (que se muestra en la siguiente ilustración), elija Personalizar y controlar DevTools ... . En el menú desplegable Personalizar y controlar DevTools, en la sección Lado dock, elija Acoplar a la derecha.

Ver el CSS de un elemento

1. Abrir ejemplos de CSS.

2. Mantenga el mouse Inspect Me! sobre el texto, abra el menú contextual (haga clic con el botón secundario) y elija Inspeccionar.

   1. En DevTools, en la herramienta Elementos, en el panel Árbol DOM, se Inspect Me! resalta el elemento.

      

      El elemento inspeccionado se resalta en el árbol DOM

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

3. En la página, en el cuadro de texto Valor de data-message : , escriba el valor.

4. Mantenga el mouse Inspect Me! sobre el texto, abra el menú contextual (haga clic con el botón secundario) y elija Inspeccionar.

   1. En DevTools, en la herramienta Elementos, seleccione el panel Estilos.

   2. En el panel Estilos, el Inspect Me! elemento está resaltado.

   3. En el Inspect Me! elemento, busque la regla aloha de clase.

      Nota

      Esta regla se muestra, ya que se está aplicando al Inspect Me! elemento.

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

      

      Las clases CSS se aplican al elemento seleccionado, como , se muestran aloha en el panel Estilos

5. En la página, en el cuadro de texto Valor de padding : , escriba el valor.

Agregar una declaración CSS a un elemento

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

1. Abrir ejemplos de CSS.

2. Mantenga el mouse Add A Background Color To Me! sobre el texto, abra el menú contextual (haga clic con el botón secundario) y elija Inspeccionar.

3. Elija element.style cerca de la parte superior del panel Estilos.

4. Escriba background-color y seleccione Enter .

5. Escriba honeydew y seleccione Enter . En el árbol DOM, se muestra una declaración de estilo en línea aplicada al elemento.

   

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

Agregar una clase CSS a un elemento

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

1. Abrir ejemplos de CSS.

2. Mantenga el mouse Add A Class To Me! sobre el texto, abra el menú contextual (haga clic con el botón secundario) y elija Inspeccionar.

3. Elija .cls. DevTools muestra un cuadro de texto donde puede agregar clases al elemento seleccionado.

4. Escriba color_me en el cuadro de texto Agregar nueva clase y, a continuación, seleccione Enter . Aparece una casilla debajo del cuadro de texto Agregar nueva clase, donde puede activar y desactivar la clase. Si el elemento tiene otras clases aplicadas, también puedes alternar cada Add A Class To Me! una 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 , y :hover :visited .

1. Abrir ejemplos de CSS.

2. Mantenga el mouse sobre el Hover Over Me! texto. Cambia el color de fondo.

3. Mantenga el mouse Hover Over Me! sobre el texto, abra el menú contextual (haga clic con el botón secundario) y elija Inspeccionar.

4. En el panel Estilos, elija :hov.

5. Active la casilla :hover. El color de fondo cambia como antes, aunque no se mantenga el mouse sobre el elemento.

   

   Alternar el :hover pseudostate en un elemento

Cambiar las dimensiones de un elemento

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

1. Abrir ejemplos de CSS.

2. Mantenga el mouse Change My Margin! sobre el texto, abra el menú contextual (haga clic con el botón secundario) y elija Inspeccionar.

3. En el diagrama Modelo de cuadro del panel Estilos, mantenga el mouse sobre el relleno. El relleno de un elemento se resalta en la ventanilla.

   Nota

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

4. Haga doble clic en el margen izquierdo del Modelode cuadro , que actualmente tiene un valor que significa que el elemento - no tiene un margen izquierdo.

5. Escriba 100px y seleccione Enter . El modelo de cuadro tiene el valor predeterminado de píxeles, pero también acepta otros valores, como , o 25% 10vw .

   

   Mantenga el mouse sobre el relleno del elemento :::image-end:::

   

   Cambiar el margen izquierdo del elemento :::image-end:::

Depuración de consultas multimedia

Las consultas multimedia son una forma de hacer que el producto web reaccione a los cambios en las opciones de configuración de cada usuario. El caso de uso más significativo es proporcionar al producto 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 estado de pantalla disponible.

Si desea depurar o probar las consultas multimedia que definió en su CSS, siga estos pasos.

1. Abre las herramientas para desarrolladores y selecciona el icono alternar la barra de herramientas del dispositivo en la parte superior izquierda o Ctrl + Shift + M selecciona ( Cmd + Shift + M en macOS).

   

   Abrir la barra de herramientas del dispositivo

2. Con la barra de herramientas del dispositivo abierta, seleccione el menú de la parte superior derecha y ... elija Ver consultas multimedia. Las barras de colores que se muestran encima de la página web representan las distintas consultas multimedia.

   

   Mostrar consultas multimedia en la barra de herramientas del dispositivo

3. Mantenga el mouse sobre los límites de las barras para mostrar los valores de las distintas consultas multimedia. Elija cada una para cambiar el tamaño de la página web que desea que coincida.

   

   Elegir consulta multimedia en la barra de vista previa

4. Para depurar consultas multimedia y abrir el archivo CSS en el editor; mantenga el mouse en cualquiera de los segmentos de barra, abra el menú contextual (haga clic con el botón Sources secundario) y seleccione reveal in source code .

   

   Mostrar consultas multimedia en el Editor de orígenes

Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.