Salta al contenido principal

Si estás viendo este mensaje, significa que estamos teniendo problemas para cargar materiales externos en nuestro sitio.

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Transcripción para Using inspect element for CSS styles

  • 0:00Estoy mirando una página web  que hizo una estudiante sobre  
  • 0:03Juana de Arco. Es una página web muy bonita.
  • 0:07Me gusta mucho. 
  • 0:08Así que tengo curiosidad por saber qué  estilos de CSS hacen que se vea así.
  • 0:13Ahora, aquí tengo el código, así que  podría revisarlo y darme una idea,  
  • 0:18pero también puedo usar "Inspeccionar  elemento" para encontrarlo más rápido. 
  • 0:23Déjenme mostrarlo.
  • 0:25Digamos que quiero saber sobre este texto  que tenemos aquí y por qué se ve así. 
  • 0:30Voy a hacer clic con el botón  derecho del ratón sobre él,  
  • 0:34hacer clic en "Inspeccionar elemento"  y esperar a que esto aparezca.
  • 0:38Vemos que el texto está resaltado y que hay una  etiqueta de párrafo, y tiene un nombre de clase. 
  • 0:45Y ahora puedo ver este panel de "Estilos".
  • 0:48Aquí es donde aparece todo el CSS  para un elemento en particular. 
  • 0:53Y podemos ver todas las reglas que se  aplican a él, y el orden en que se aplican.
  • 0:58Así que esta regla 'title' hace que esté  alineado al centro y en negritas, como se ve. 
  • 1:04Y esta otra regla, la ‘i1’, hace que tenga un  tamaño de fuente de .9em y una opacidad de .26.
  • 1:12Muy bien, genial. Ahora podría pensar que tal vez  debería ser más opaco para que fuera más legible. 
  • 1:19De hecho, puedo hacer clic aquí  y jugar con él, y ver cómo se ve.
  • 1:24Y esto solo actualizará la vista previa. El código no se actualiza realmente.
  • 1:29Es solo una actualización de cómo se  ve en el navegador en este momento. 
  • 1:33Si quisiera que actualizaran el  código, tendría que decirles:  
  • 1:37"Oigan, ¿por qué no prueban esto?” "Creo que sería más legible."
  • 1:41Así que puedo jugar con cualquiera  de estos valores que tenemos aquí.
  • 1:45También puedo añadir nuevas propiedades. …Oh, eso quedó muy grande.
  • 1:49Así que, si pienso que tal vez debería ser  de otro color, puedo escribir "color" y  
  • 1:55aparece un menú con colores para elegir. O, puedo escribir uno en hexadecimal,  
  • 2:00y luego puedo obtener un selector de color,  y digamos que me gusta más este verde.
  • 2:05Así puedo jugar fácilmente con  las cosas y ver cómo quedan.
  • 2:09Muy bien. ¿Para qué sirve esto? Bueno, es útil si tienes curiosidad por el CSS de  
  • 2:16la página web de otra persona y estás tratando de  entender cómo lograron algún efecto en particular. 
  • 2:22También es útil si estás trabajando en el diseño  de una página web y no tienes acceso al HTML.
  • 2:28Puedes entrar, hacer algunos cambios en el CSS,  
  • 2:32y luego enviar esas sugerencias  a quien pueda cambiar el HTML.
  • 2:36Y además es divertido jugar con  las páginas web de otras personas.