Estilo de anulación de CSS

Introducción

Es posible que haya implementado el concepto de precedencia en muchos campos de la vida, yo.mi., priorizar su trabajo, hogar y cosas personales. Dentro de la programación HTML, el navegador necesita predecir la prioridad de los elementos o instrucciones para mostrar en consecuencia. Este concepto se conoce como "anulación de CSS". Parece haber varias reglas que deciden si un estilo reemplaza a otro basado en el tipo selector utilizado para diseñar un componente. Usando la técnica primaria, podemos priorizar el mismo tipo de elementos con las mismas propiedades en el archivo HTML. Entonces, si eres nuevo en el estilo de anulación de CSS, este artículo te ayudaría mucho. Veamos algunos de los ejemplos implementados en VS Code.

Ejemplo 1
Comencemos con el primer ejemplo para ilustrar el uso de la anulación para el estilo en HTML con la ayuda de CSS. Dentro de este ejemplo, analizaremos la precedencia primordial de la hoja de estilo en línea y externa y el CSS utilizado en la etiqueta de estilo. Entonces, hemos estado iniciando esta ilustración con la etiqueta principal "HTML". La etiqueta de la cabeza contiene el enlace y la etiqueta de estilo dentro de él. Inicie la explicación de este programa desde la etiqueta principal "cuerpo". El área del cuerpo incluye cinco encabezados para cinco tamaños diferentes, yo.mi., más grande a más pequeño.

Después de todos los encabezados, la etiqueta del cuerpo se ha cerrado y el cierre de HTML lo sigue. Vamos a echar un vistazo a la etiqueta de "cabeza" ahora. Hemos estado usando la etiqueta de "título" dentro de ella para titular la página HTML como "Estilo de anulación". Después de esto, hemos estado utilizando la etiqueta "Enlace" para hacer referencia a la hoja de estilo externa llamada "Prueba.CSS "de la misma carpeta utilizando la propiedad" href ". Después de esto, tenemos una etiqueta de "estilo" de tipo "texto/CSS". Esta etiqueta se ha utilizado en aras de diseñar el área del cuerpo de este archivo HTML. Dentro de él, hemos estado usando encabezados H1, H3 y H5 y especificando la propiedad "color" para colorearlos "granate". Aquí, el estilo y la etiqueta de la cabeza están cerca.

Ahora, mire el archivo CSS externo, “Prueba.CSS ". Hemos usado los encabezados del elemento corporal, H2 y H4 para el estilo. El color de fondo de la propiedad se usa para asignar un color al cuerpo HTML. El color y la propiedad de margen-izquierda se han utilizado para mostrar los encabezados 1 y 4 en púrpura y establecer márgenes izquierdos de 10 píxeles. La etiqueta de estilo en el HTML contiene diferentes colores para todos los encabezados, mientras que este archivo externo contiene diferentes colores para encabezar 2 y 4.

Guardemos el código y lo depugemos usando el botón de menú "Ejecutar" en la barra de tareas del código de Visual Studio. La salida muestra la página HTML con el título de "Estilo de anulación". Los encabezados 1, 3 y 5 giran granate, mientras que los encabezados 4 y 5 se vuelven morados. Esto se debe a que el estilo de la etiqueta de estilo obtuvo la primera precedencia y fue anulado por el HTML en lugar de una hoja de estilo externo.

Actualicemos el código una vez más. Hemos estado actualizando el color para encabezar 1, 3 y 5 de este archivo HTML dentro de la etiqueta de estilo en la etiqueta de la cabeza. El resto no estaría cambiado en este momento.

Dentro de la hoja de estilo externo, hemos estado utilizando los cinco encabezados para el cambio de color y el margen de púrpura y 30 píxeles, respectivamente. Guarde este archivo CSS y vuelva a ejecutar el código.

Esta vez, solo los encabezados 1, 3 y 5 obtuvieron el color "verde del césped" debido al uso y la precedencia del estilo dentro del archivo en lugar de un archivo CSS externo.

Ejemplo 2
Hemos comenzado este ejemplo con la etiqueta HTML seguida de la cabeza y la etiqueta de título. La etiqueta corporal de este archivo HTML contiene el encabezado único 1 que se mostrará en la página web HTML. El cuerpo y la etiqueta principal HTML se cerraron aquí después de usar elementos corporales. La etiqueta de estilo dentro de la etiqueta de la cabeza contiene el estilo para encabezar 1, yo.mi., El color especificado como "púrpura". El estilo y la etiqueta de la cabeza están cerca aquí. Ejecutemos este código HTML con el menú "Ejecutar" después de la opción "Iniciar depuración".

La ejecución de este archivo mostró un encabezado simple de tamaño 1 en púrpura en nuestra nueva pestaña del navegador Chrome como se muestra a continuación:

Realicemos algunos estilos primordiales en este archivo HTML. Entonces, hemos especificado la clase "A" para encabezar 1 dentro de la apertura de la etiqueta H1. Además, dentro de la etiqueta de estilo, hemos usado esta clase "A" para colorear el Brown, yo.mi., Usando la propiedad de color. Guardemos y ejecutemos este código.

Ahora, la salida muestra que el color del encabezado se ha actualizado a Brown. Esto significa que el elemento de clase anula los elementos de estilo simples.

Ahora, hemos estado utilizando otra clase dentro de la misma etiqueta H1 del cuerpo HTML de este archivo. El nombre de la clase se ha especificado como "B" después de la clase "A". Por otro lado, hemos estado usando la clase "B" para especificar el color, "Green Green", para encabezar 1.

Después de guardar este script de actualización HTML, lo ejecutamos y obtuvimos el siguiente resultado. La salida muestra que el color del encabezado 1 se ha actualizado a "Lawn Green". Es una prueba de que el elemento de clase puede anular otro elemento de clase.

Actualicemos nuevamente el código y usemos el elemento "ID" dentro del encabezado H1 del código HTML. Esta "identificación" se puede usar después y antes de los elementos de la clase, como lo hicimos a continuación. Después de esto, dentro de la etiqueta de estilo, hemos especificado el color "azul" para encabezar 1 usando la identificación "C".

Después de ejecutar este código actualizado, obtuvimos la página HTML actualizada. El color del encabezado 1 se ha actualizado hasta el azul de Lawn Green. Esto muestra que el elemento "ID" puede anular el estilo del elemento "Clase".

Ahora, utilizaremos el estilo en línea para este código HTML y usaremos la propiedad de "color" para convertir el encabezado 1 en un color "hotpink" sin agregarlo a la etiqueta externa de "estilo". Esta etiqueta de estilo en línea se ha utilizado antes del elemento "ID" del encabezado 1.

Después de ejecutar este archivo HTML actualizado, hemos obtenido el color "hotpink" para el encabezado que ha estado anulando el elemento "ID".

Utilizando el "!El atributo importante "junto con cualquier propiedad daría a esa propiedad la primera precedencia en comparación con otras propiedades. Hemos usado el "!Atributo importante "con la propiedad de color de encabezado 1 y lo guardó.

La precedencia se ha dado a la propiedad de color "púrpura" especificada para el "H1".

Conclusión

Este artículo explica la precedencia de elementos para demostrar el estilo de anulación de CSS en el código HTML. El párrafo introductorio explica lo que es primordial y precedencia y el uso del estilo anular para diferentes tipos selectores en detalle utilizando diferentes técnicas de estilo. Para esto, hemos tratado de implementar diferentes ejemplos que contienen el estilo de hoja de estilo en línea, contorno y externa. Hemos probado diferentes tipos de elementos selectores para que principalmente los mismos elementos realicen un estilo de anulación.