Cursos
Módulo
Uso de estilos CSS en una página web - Training
Descubra cómo usar estilos CSS en una página web.
Este explorador ya no se admite.
Actualice a Microsoft Edge para aprovechar las características y actualizaciones de seguridad más recientes, y disponer de soporte técnico.
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.
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).
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:
En el Inspect Me!
elemento , busque el valor del data-message
atributo y cópielo.
En la vista de página, escriba el data-message
valor que copió en el cuadro de texto Valor del mensaje de datos .
Haga clic con el botón derecho en el Inspect Me!
texto y, a continuación, seleccione Inspeccionar.
En DevTools, en la herramienta Elementos , seleccione el panel Estilos . El Inspect Me!
elemento se resalta en el panel Estilos.
En el Inspect Me!
elemento , busque la regla de aloha
clase. Se muestra esta regla, porque se aplica al Inspect Me!
elemento .
En la aloha
clase , busque el valor del padding
estilo y cópielo:
En la vista de página, pegue el padding
valor en el cuadro de texto Valor de relleno .
Use el panel Estilos cuando desee cambiar o agregar declaraciones CSS a un elemento.
En primer lugar, se recomienda realizar la vista anterior de CSS para un tutorial de elementos .
Abra la página de demostración De ejemplos CSS en una nueva ventana o pestaña.
Haga clic con el botón derecho en el Add A Background Color To Me!
texto y, a continuación, seleccione Inspeccionar.
Haga clic element.style
cerca de la parte superior del panel Estilos .
Escriba background-color
o selecciónelo en la lista desplegable y, a continuación, presione Entrar.
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 :
Para mostrar el aspecto de un elemento cuando se aplica o quita una clase CSS de un elemento, vea el panel Estilos .
En primer lugar, se recomienda realizar la vista anterior de CSS para un tutorial de elementos .
Abra la página de demostración De ejemplos CSS en una nueva ventana o pestaña.
Haga clic con el botón derecho en el Add A Class To Me!
texto y, a continuación, seleccione Inspeccionar.
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.
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 :
Use el panel Estilos para aplicar permanentemente un pseudoestado CSS a un elemento. DevTools admite :active
, :focus
, :hover
y :visited
.
En primer lugar, se recomienda realizar la vista anterior de CSS para un tutorial de elementos .
Abra la página de demostración De ejemplos CSS en una nueva ventana o pestaña.
Mantenga el puntero sobre el Hover Over Me!
texto. El color de fondo cambia.
Haga clic con el botón derecho en el Hover Over Me!
texto y, a continuación, seleccione Inspeccionar.
En el panel Estilos , haga clic en el botón Alternar estado del elemento (:hov).
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.
Use el diagrama interactivo Modelo de cuadro del panel Estilos para cambiar el ancho, alto, relleno, margen o longitud del borde de un elemento.
En primer lugar, se recomienda realizar la vista anterior de CSS para un tutorial de elementos .
Abra la página de demostración De ejemplos CSS en una nueva ventana o pestaña.
Haga clic con el botón derecho en el Change My Margin!
texto y, a continuación, seleccione Inspeccionar.
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.
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
.
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:
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:
Abra la página de demostración De ejemplos CSS en una nueva ventana o pestaña.
Para abrir DevTools, haga clic con el botón derecho en la página web y seleccione Inspeccionar.
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:
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.
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.
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.
Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.
Cursos
Módulo
Uso de estilos CSS en una página web - Training
Descubra cómo usar estilos CSS en una página web.
Documentación
Referencia de características CSS - Microsoft Edge Developer documentation
Características para ver y cambiar reglas CSS en Microsoft Edge DevTools.
Introducción a cómo ver y cambiar DOM - Microsoft Edge Developer documentation
Cómo ver nodos, buscar nodos, editar nodos, nodos de referencia en la consola, interrumpir los cambios de nodo, etc.
Obtenga información sobre cómo cambiar los estilos y la configuración de fuentes CSS mediante el panel Estilos de Microsoft Edge DevTools.