8.11. Introducción a CSS: selectores, propiedades y valores: cómo utilizar el inspector de elementos para depurar CSS

Introducción a CSS: selectores, propiedades y valores

CSS (Hojas de estilo en cascada) es el lenguaje utilizado para diseñar y diseñar páginas web. CSS describe cómo se deben mostrar los elementos HTML en la pantalla, el papel u otros medios. Es un lenguaje poderoso que, cuando se combina con HTML, puede crear sitios web visualmente impresionantes y altamente funcionales. En este capítulo, exploraremos los conceptos básicos de CSS, incluidos selectores, propiedades y valores, y cómo utilizar el inspector de elementos para depurar CSS.

Selectores CSS

Los selectores de CSS son la forma de elegir qué elementos HTML desea aplicar estilo. Hay varios tipos de selectores en CSS, incluidos selectores de tipo, selectores de clase, selectores de ID y selectores de atributos.

• Selectores de tipo: seleccionan elementos según el tipo de elemento HTML. Por ejemplo, si quisiera seleccionar todos los párrafos de una página, usaría el selector de tipo p.
• Selectores de clases: seleccionan elementos basados ​​en la clase HTML. Por ejemplo, si quisiera seleccionar todos los elementos con la clase "resaltado", usaría el selector de clase .highlight.
• Selectores de ID: seleccionan un elemento específico en función del ID HTML. Por ejemplo, si desea seleccionar el elemento con el ID "mi-id", usaría el selector de ID #my-id.
• Selectores de atributos: seleccionan elementos en función de un atributo específico. Por ejemplo, si quisiera seleccionar todos los enlaces que apuntan a una URL específica, usaría el selector de atributos [href="https://www.mysite.com"].

Propiedades y valores CSS

Una vez que haya seleccionado los elementos a los que desea aplicar estilo, puede establecer propiedades y valores CSS para esos elementos. Las propiedades CSS son aspectos del elemento que desea cambiar, como color, tamaño de fuente, ancho, alto, margen, relleno, etc. Los valores CSS son los valores específicos que desea aplicar a estas propiedades. Por ejemplo, si quisiera cambiar el color del texto de todos los párrafos a rojo, usaría la propiedad CSS color con el valor red.

A continuación se muestra un ejemplo de cómo puede utilizar selectores, propiedades y valores de CSS para diseñar una página web:

<estilo>
PAG {
  color rojo;
  tamaño de fuente: 16px;
}
.énfasis {
  color de fondo: amarillo;
}
#mi identificación {
  ancho: 100px;
  altura: 100 píxeles;
}
[href="https://www.misitio.com"] {
  decoración de texto: ninguna;
}
</estilo>

Usar el inspector de elementos para depurar CSS

El Inspector de elementos es una poderosa herramienta que le permite ver y editar el HTML y CSS de una página web en el navegador. Es una herramienta esencial para cualquier desarrollador front-end, ya que le permite depurar problemas de CSS en tiempo real.

Para abrir el Inspector de elementos, haga clic derecho en cualquier lugar de la página web y seleccione "Inspeccionar" o "Inspeccionar elemento". Esto abrirá el Inspector de elementos en la parte inferior de la ventana del navegador. Verá el HTML de la página en el panel izquierdo y el CSS en el panel derecho.

Para depurar CSS, puede seleccionar cualquier elemento en el panel HTML y ver todas las reglas CSS aplicadas a ese elemento en el panel CSS. Puede editar cualquier propiedad o valor de CSS directamente en el Inspector de elementos para ver cómo los cambios afectan al elemento en tiempo real. Esto es extremadamente útil para depurar problemas con el diseño, los colores, los tamaños de fuente, etc.

Además, el Inspector de elementos también le muestra qué reglas CSS se están anulando, lo que puede ayudarle a comprender por qué ciertos estilos no se aplican como se esperaba.

En resumen, CSS es un lenguaje poderoso que le permite diseñar y diseñar páginas web. Comprender los conceptos básicos de los selectores, propiedades y valores de CSS es esencial para cualquier desarrollador front-end. Además, aprender a utilizar el Inspector de elementos para depurar CSS es una habilidad invaluable que puede ahorrarle mucho tiempo y frustración.

Siguiente página del libro electrónico gratuito:

55Estilo de texto con CSS

4 minutos