Cómo anular las propiedades de una clase CSS usando otra clase CSS

Cómo anular las propiedades de una clase CSS usando otra clase CSS

CSS es un lenguaje de programación básico que permite a sus usuarios aplicar varios estilos, incluidos "Estilo de fuente","estilo de borde","margen","relleno"Y muchos más en páginas web. La primordial CSS es un proceso de predecir la prioridad de un elemento o estilo CSS por el navegador. Más específicamente, anular una clase en otra clase CSS se refiere a la anulación del estilo en CSS. En otras palabras, el elemento previamente diseñado está nuevamente diseñado por otra clase.

Esta publicación explicará el método para anular las propiedades de una clase CSS utilizando otra clase CSS.

Cómo anular las propiedades de una clase CSS usando otra clase CSS?

Para anular la propiedad de una clase CSS utilizando la otra clase CSS, pruebe las instrucciones proporcionadas.

Paso 1: crear un contenedor Div

Primero, crea un ""Elemento y asignarlo una clase por un nombre específico.

Paso 2: Agregar encabezado

A continuación, inserte un encabezado utilizando el "

"Etiqueta entre las etiquetas" div ".

Paso 3: Agregar párrafo

Agregue una etiqueta de párrafo "

" junto con "clase" atributo. La "clase" se asigna con dos valores consecutivos ",Estilo de fuente" y "mi contenido". Luego, agregue el texto entre las etiquetas del párrafo:


Linuxhint


Linuxhint el sitio web de los mejores tutoriales. Proporciona el mejor contenido sobre diferentes categorías, incluidos HTML/CSS, JavaScript, Git, Docker, Windows y muchos más.



Producción


Paso 4: encabezado de estilo

Para diseñar el encabezado, primero, acceda al encabezado por nombre de la etiqueta "H1"Y aplique las propiedades que cotizan a continuación:

H1
estilo de fuente: cursiva;
Color: azul sólido;
Text-Align: Center;


Aquí:

    • "Estilo de fuenteLa propiedad se utiliza para especificar el estilo de fuente en cursiva en el texto.
    • "color"Se usa para especificar el color del texto.
    • "texto alineado"Se usa para establecer la alineación del texto horizontalmente.

Paso 5: Elemento de estilo "div"

Después de eso, diseñe el elemento "div" accediendo a la clase ".contenido de linuxhint"Y aplica el"margen" y "estilo de borde"Propiedades para él. El "margen" se usa para agregar el espacio alrededor del elemento definido, y el "estilo de borde" se utiliza para definir el estilo de borde como cresta:

.LinuxHint-Content
margen: 50px;
estilo fronterizo: cresta;



Paso 6: Estilo Primera clase de "

" Etiqueta

Primero, acceda al "

"Elemento usando la clase".Estilo de fuente". Aquí, aplique las propiedades mencionadas a continuación:

.Estilo de fuente
Color de fondo: RGB (192, 240, 129) !importante;
Font-Family: 'Mansalva', cursiva !importante;
tamaño de fuente: 130%;


La explicación del fragmento dentado anteriormente es el siguiente:

    • "color de fondo"La propiedad especifica el color de fondo del elemento.
    • "!importante"Es una regla en CSS que se utiliza para anular o priorizar una propiedad sobre otra.
    • "Familia tipográficaLa propiedad asigna la fuente para un elemento:



Paso 7: Estilo "

"Elemento usando la segunda clase

Acceder a la otra clase asignada ".mi contenido" de "

Elemento "y aplique el"Familia tipográfica" y "color de fondo"Propiedades con diferentes valores:

.mi contenido
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;
Color de fondo: PowderBlue;


Se puede notar que no hay efecto en la salida y el navegador prioriza las propiedades de la primera clase:


Has aprendido a anular las propiedades de una clase CSS usando otro CSS.

Conclusión

Para anular la propiedad de una clase CSS usando otra clase CSS, el "!importanteSe utiliza la regla. El "!importante"Se produce después del valor de la propiedad utilizado para agregar más importancia a un valor o anular el valor de otra clase. Esta publicación ha demostrado el método para anular una clase CSS a otra clase.