Como substituir as propriedades de uma classe CSS usando outra classe CSS

CSS é uma linguagem de programação básica que permite que seus usuários apliquem vários estilos, incluindo “estilo de fonte","estilo de borda","margem","preenchimento”E muito mais em páginas da web. A substituição do CSS é um processo de previsão da prioridade de um estilo de elemento ou CSS pelo navegador. Mais especificamente, substituindo uma classe em outra classe CSS refere -se à substituição do estilo no CSS. Em outras palavras, o elemento anteriormente estilizado é novamente estilizado por outra classe.

Este post explicará o método para substituir as propriedades de uma classe CSS usando outra classe CSS.

Como substituir as propriedades de uma classe CSS usando outra classe CSS?

Para substituir a propriedade de uma classe CSS, utilizando a outra classe CSS, experimente as instruções fornecidas.

Etapa 1: Crie um contêiner div

Primeiro, crie um “”Elemento e atribua uma classe por um nome específico.

Etapa 2: Adicionar cabeçalho

Em seguida, insira um título utilizando o “

”Tag entre as tags“ div ”.

Etapa 3: Adicione o parágrafo

Adicione uma tag de parágrafo “
" juntamente com o "aula”Atributo. A "classe" é atribuída com dois valores consecutivos, "estilo de fonte" e "meu conteúdo”. Em seguida, adicione o texto entre as tags do parágrafo:

Linuxhint

Linuxhint O melhor site de tutoriais. Ele fornece o melhor conteúdo sobre diferentes categorias, incluindo HTML/CSS, JavaScript, Git, Docker, Windows e muito mais.

Saída

Etapa 4: cabeçalho de estilo

Para estilizar o cabeçalho, primeiro, acesse o título por nome da tag "H1”E aplique as propriedades abaixo da listada:

H1
estilo de fonte: itálico;
Cor: azul sólido;
Alinhamento de texto: centro;

Aqui:

- ““estilo de fonte”A propriedade é utilizada para especificar o estilo de fonte itálica para o texto.
- ““cor”É usado para especificar a cor do texto.
- ““alinhamento de texto”É usado para definir o alinhamento do texto horizontalmente.

Etapa 5: Elemento de estilo “div”

Depois disso, estilize o elemento “div” acessando a classe “.Conteúdo do Linuxhint”E aplique o“margem" e "estilo de borda”Propriedades para isso. A "margem" é usada para adicionar o espaço ao redor do elemento definido, e o "estilo de borda" é utilizado para definir o estilo de fronteira como cume:

.Linuxhint-Content
margem: 50px;
estilo de fronteira: cume;

Etapa 6: estilo primeira classe de “

" Marcação

Primeiro, acesse o “

”Elemento usando a classe“.estilo de fonte”. Aqui, aplique as propriedades abaixo mencionadas:

.estilo de fonte
Background-Color: RGB (192, 240, 129) !importante;
Fonte-família: 'Mansalva', cursiva !importante;
tamanho de fonte: 130%;

A explicação do snippet acima é a seguinte:

- ““cor de fundo”Propriedade especifica a cor de fundo do elemento.
- ““!importante”É uma regra no CSS que é utilizada para substituir ou priorizar uma propriedade sobre outra.
- ““família de fontes”Propriedade aloca a fonte para um elemento:

Etapa 7: estilo “

”Elemento usando a segunda classe

Acesse a outra classe designada “.meu conteúdo" de "

”Elemento e aplique o“família de fontes" e "cor de fundo”Propriedades com valores diferentes:

.meu conteúdo
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;
cor de fundo: póblue;

Pode -se notar que não há efeito na saída e o navegador prioriza as propriedades da primeira classe:

Você aprendeu a substituir as propriedades de uma classe CSS usando outro CSS.

Conclusão

Para substituir a propriedade de uma classe CSS usando outra classe CSS, o “!importante”A regra é utilizada. O "!importante”Vem após o valor da propriedade usado para acrescentar mais importância a um valor ou substituir o valor de outra classe. Este post demonstrou o método para substituir uma classe CSS para outra classe.