Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Editando CSS

4/22
Recursos

Aportes 38

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Una vez que realizamos los cambios en los estilos para depurar, es com煤n olvidar cuales fueron todos los cambios que se realizaron en los estilos, para ello podemos acceder a la herramienta changes y observar estos cambios:

Aclaraci贸n:
Cuando el profesor habla sobre las pseudo-clases, dice que al seleccionar la opci贸n de :hover se pueden ver todos los elementos en el HTML que tienen unos estilos aplicados al estado de hover.
Esto es un peque帽o error, esa opci贸n solo se aplica al elemento que se est谩 manipulando, pero no a todo el HTML de la p谩gina.
El modelo de caja y el filtrado de estilos tambi茅n es algo muy 煤til en esta pesta帽a de Styles, para que le echen un vistazo.
Un saludo.

Tambi茅n tenemos shortcuts para aumentar o disminuir el tama帽o de los elementos:

Shift + flecha arriba o flecha abajo = modificas 10px el tama帽o.
Ctrl + flecha arriba o flecha abajo = modificas 100px el tama帽o.
Alt + flecha arriba o flecha abajo = modificas 0.1px el tama帽o.

脷senlo con sabidur铆a XD.

Para agregar una declaraci贸n CSS a un elemento use la pesta帽a Estilos cuando desee cambiar o agregar declaraciones CSS a un elemento.

  • Haga clic derecho en el Add A Background Color To Me!texto a continuaci贸n y seleccione Inspeccionar .
  • Haga clic element.stylecerca de la parte superior de la pesta帽a Estilos .
  • Escribe background-color y presiona Enter.
  • Escribe honeydewy presiona Enter. En el 脕rbol DOM , puede ver que se aplic贸 una declaraci贸n de estilo en l铆nea al elemento.

Esto es algo que me gusta mucho de las DevTools, puedes modificar en tiempo real y hacer todo hasta que quede a como quieres que quede. Sin embargo, hay que tener mucho cuidado al hacer esto cuando usas extensiones como Live Server, esto es porque cuando tu guardas algo en tu proyecto, Live Server recargar谩 la p谩gina autom谩ticamente, por lo que es posible que tus cambios hechos en DevTools se pierdan, as铆 que hay que estar pendientes de ello

Es interesante saber que los bordes generalmente van de 1 a 3 px 馃馃

Modificando los estilos (CSS)


En la sub-secci贸n de Styles podemos ver todos los estilos que tiene el elemento que tenemos seleccionado, aqu铆 podemos modificar los estilos que ya tienen aplicados o a帽adir nuevos estilos.

Tambi茅n podemos ver c贸mo se comporta un elemento cuando se activa una pseudo-class y tambi茅n modificarla.

En la sub-secci贸n Computed podemos ver todos los estilos que estrictamente solo se est谩 aplicando a ese elemento seleccinado y podemos ver el modelo de caja tambi茅n.

Con Live server pueden tener el servidor local desde visual studio

En Firefox hay una pesta帽a Editor de estilos en la que puedes importar y/o modificar las hojas de estilos que ya est谩n cargadas. Tambi茅n puedes crear una nueva hoja de estilos

Y tambi茅n hay una secci贸n de CSS en el Inspector con la que puedes ver los cambios que haz hecho y luego copiarlos

<h3>4. Editando CSS</h3>

1:08 Modificando Estilos. Experimentando.

4:14 Usando las flechas Up y Down para modificar valores de las propiedades.

5:44 Secci贸n :hov nos permite acceder a los estados de las pseudo clases.

<h3>- Les dejo este tutorial que resume todo el contenido del curso con marcadores para acceder rapidamente a los puntos claves que deseamos recordar.</h3>

Cu茅ntame si parece 煤til este formato de resumen, y dale 馃挌 si quieres m谩s de estos para la comunidad 馃榿馃檶

Si usas Sass, Less, Stylus o cualquier otro preprocesador de CSS, editar los archivos de salida de CSS generados en el editor Styles no te servir谩 ya que no se asignan a tu fuente original.

Un consejo que me dio un dise帽ador una vez, si no saben si realmente es el elemento que quieren modificar, por que hay muchos elementos juntos o transparentes鈥 por m谩s obvio que parezca (a m铆 no se me hab铆a ocurrido), cambien el background a un color que contraste mucho.

Una lista de cosas geniales que puedes hacer con las DevTools de Chrome:

Aqui hay una lista de cosas que puedes hacer con las herramientas que Google Chrome provee:

  • Arrastrar elementos de HTML en el panel de elementos
    Se puede arrastrar cualquier elemento y cambiar su posici贸n actual desde el panel de elementos

  • Puedes seleccionar un nodo en el panel de elementos y escribir $0 en la consola para hacer referencia a 茅l

  • Usar el valor de la 煤ltima operaci贸n en la consola
    Puedes usar $_ para referenciar el valor retornado de la operaci贸n anterior ejecutado en la consola

  • Encontrar donde est谩 definida una propiedad en CSS
    Si presionamos ctrl + click a una propiedad CSS en el panel de elementos, las DevTools nos llevaran al lugar donde est谩n definidas en el c贸digo fuente

  • Hacer screenshot a un elemento
    Seleccionar un elemento y presionar ctrl + shift + p para abrir el men煤 de comandos y seleccionar Capture node screenshot

  • Encontrar elementos usando selectores de CSS
    Si presionamos ctrl + F en el panel de elementos, se abre la barra de b煤squeda.
    Podemos buscar elementos por cadenas de texto y tambi茅n podemos buscar elementos usando selectores CSS

    Estas son algunas de las geniales funcionalidades de las DevTools, comparto un link donde podemos ver una lista m谩s extensa y detallada de ello: Lista de cosas que puedes hacer desde tus DevTools y que tal vez no sab铆as

Ayuda mucho m谩s a jugar con el CSS antes de escribir o hacer un cambio ya en el c贸digo

Consejos para editar CSS en Dev Tools

  • Para editar el CSS es necesario seleccionar el elemento HTML para que la configuraci贸n en CSS funcione.
  • Se puede dar doble click sobre un elemento num茅rico y con las flechas subir y bajar el numero.
  • Se pueden seleccionar los element state al dar click en 鈥:hov鈥 del elemento HTML en el que estas posicionado.

Profundizar en las Chrome DevTools para CSS

Es increible la forma en que se utilizan los estilos y como nos pueden ayudar a mejorar nuestras paginas web en el devtools. Ya sabia algo de CSS, pero al usar las casillas de estado, esas las desconocia por completo. Esta clase me ense帽o la forma de como podemos usarlas y modificarlas hasta que su estado sea perfecta. Increible, saludos.

jajajaja no puedo subir la imagen, pero edit茅 los estilos de platzi, genial!!! Muy buena clase.

Genial!!!

Interesante el filtro :hov, antes lo hacia de manera manual

A seguir aprendiendo CSS

Pobre Firefox me lo estan dejando de lado hahaha

deber铆an agregar una descripci贸n de los otros componentes que podemos ver en esa pesta帽a, como por ejemplo el diagrama de caja que nos muestra los tama帽os de elemento html que estamos inspeccionando.

A seguir.

Tambien me tope con esta herramientas mientras aprendia HTLM Y CSS, ahora usarlas con conceptos claros y precisos sera mucho mas util鈥

gracias por aclarar una duda que ten铆a desde hace tiempo pero que tampoco hab铆a investigado y s como encontrar los estilos de hover.

![](

Devtools - Styles
En este apartado, podremos en tiempo real cambiar los estilos de los elementos que queramos dentro de la p谩gina en que estamos, para, posteriormente modificar los estilos de nuestro archivo.css

Interesante tema permite hacer peque帽as modificaciones en el dise帽o, sin cambiar el c贸digo HTML. Esto es m谩s complejo y requerir铆a trabajar con un dise帽ador web y abrir el FTP de tu dise帽o para modificarlo.

Cuando modificas elementos CSS como mencion贸 Diego, inmediatamente se visualizan en el proyecto, cuando quieras hacer lo mismo con JavaScript debes presionar: Command+S (Mac) o Ctrl+S (Windows, Linux).

estimado profesor , podria xcompartir el proyecto ?

Hola, cuando trabajo un men煤 desplegable al quitar el puntero sobre el se esconde nuevamente, se puede trabajar con el inspector de elementos que quede visible el men煤 y pueda ajustar los estilos? He intentado pero siempre regresa a su estado inicial me ha pasado con men煤s en Boostrap.

Como dice el profe con las teclas puedes subir el tama帽o de alg煤n elemento arriba y abajo, pero si presionas SHIFT + tecla direccional te sube de a 10px por cada presi贸n

Excelente! Agradezco que desde los primeros cursos se introduce un poco a esta herramienta. realmente es muy 煤til y nos hace m谩s f谩cil el aplicar estilos y buscar bugs :D