CSS Substitua estilo

Introdução

Você pode ter implementado o conceito de precedência em muitos campos da vida, eu.e., priorizando seu trabalho, casa e coisas pessoais. Na programação HTML, o navegador precisa prever a prioridade dos elementos ou instruções para exibir de acordo. Este conceito é conhecido como "substituição de CSS". Parece haver várias regras que decidem se um estilo substitui outro com base no tipo de seletor usado para projetar um componente. Usando a técnica de substituição, podemos priorizar o mesmo tipo de elementos com as mesmas propriedades no arquivo html. Então, se você é novo no CSS substituindo o estilo, este artigo o ajudaria muito. Vejamos alguns dos exemplos implementados no código VS.

Exemplo 1
Vamos começar com o primeiro exemplo para ilustrar o uso de substituição para modelar em HTML com a ajuda do CSS. Neste exemplo, examinaremos a precedência primordial da folha de estilo embutida e externa e o CSS usado na tag de estilo. Então, estamos iniciando esta ilustração com a tag "html" principal. A etiqueta da cabeça contém o link e a etiqueta de estilo. Inicie a explicação deste programa a partir da tag principal "corpo". A área do corpo inclui cinco títulos para cinco tamanhos diferentes, eu.e., maior ao menor.

Depois de todos os títulos, a etiqueta corporal foi fechada e o fechamento de HTML a segue. Vamos dar uma olhada na etiqueta "Head" agora. Temos usado a tag "Title" nela para tocar a página HTML como "estilo de substituição". Depois disso, estamos usando a tag "Link" para fazer referência à folha de estilo externa chamada "Teste.CSS "da mesma pasta usando a propriedade" Href ". Depois disso, temos uma etiqueta de "estilo" do tipo "Texto/CSS". Esta tag foi utilizada para modelar a área do corpo deste arquivo html. Dentro dele, usamos títulos H1, H3 e H5 e especificando a propriedade "cor" para colori -los "marrom". Aqui, o estilo e a cabeça da cabeça estão próximos.

Agora, veja o arquivo CSS externo, “Teste.CSS ”. Usamos os títulos do elemento corporal, H2 e H4 para estilo. A cor da propriedade é usada para atribuir uma cor ao corpo HTML. A propriedade de cor e margem foi usada para exibir os títulos 1 e 4 em margens roxas e fixadas de 10 pixels. A tag de estilo no HTML contém cores diferentes para todos os títulos, enquanto este arquivo externo contém cores diferentes para o título 2 e 4.

Vamos salvar o código e depurar -o usando o botão de menu "Executar" da barra de tarefa do Código do Visual Studio. A saída mostra a página HTML com o título "Substituir estilo". Os títulos 1, 3 e 5 viram marrom, enquanto os títulos 4 e 5 giram roxo. Isso ocorre porque o estilo de tag de estilo obteve a primeira precedência e foi substituído pelo HTML em vez de uma folha de estilo externo.

Vamos atualizar o código mais uma vez. Atualizamos a cor para o cabeçalho 1, 3 e 5 deste arquivo html dentro da tag de estilo na etiqueta da cabeça. O resto ficaria inalterado agora.

Dentro da folha de estilo externo, usamos todos os cinco títulos para mudança de cor e margem para roxo e 30 pixels, respectivamente. Salve este arquivo CSS e execute o código.

Desta vez, apenas os títulos 1, 3 e 5 obtiveram a cor "verde do gramado" devido ao uso e precedência do estilo dentro do arquivo, em vez de um arquivo CSS externo.

Exemplo 2
Iniciamos este exemplo com a tag html seguida pela tag de cabeça e título. A etiqueta corporal deste arquivo html contém o título único a ser exibido na página da web html. O corpo e a etiqueta principal HTML foram fechados aqui depois de usar elementos do corpo. A etiqueta de estilo dentro da etiqueta da cabeça contém o estilo para o cabeçalho 1, eu.e., a cor especificada como "roxa". O estilo e a etiqueta de cabeça estão próximos aqui. Vamos executar este código HTML com o menu "Run" após a opção "Start Debugging".

A execução deste arquivo exibiu um título simples do tamanho 1 em roxo em nossa guia Novo navegador Chrome, conforme exibido abaixo:

Vamos realizar alguns estilos de sobrenome neste arquivo html. Então, especificamos a classe “A” para a direção 1 dentro da abertura de tags H1. Além disso, dentro da etiqueta de estilo, usamos esta classe "A" para colorir o cabeçalho marrom, eu.e., Usando a propriedade colorida. Vamos salvar e executar este código.

Agora, a saída mostra que a cor do cabeçalho foi atualizada para marrom. Isso significa que o elemento de classe substitui os elementos de estilo simples.

Agora, estamos utilizando outra classe dentro da mesma etiqueta H1 do corpo HTML deste arquivo. O nome da classe foi especificado como "B" após a classe "A". Por outro.

Depois de salvar este script de atualização HTML, executamos e obtivemos a seguinte saída. A saída mostra que a cor do cabeçalho 1 foi atualizada para "Grawn Green". É a prova de que o elemento de classe pode substituir outro elemento de classe.

Vamos atualizar o código novamente e usar o elemento "ID" no cabeçalho H1 do código HTML. Este "id" pode ser usado depois e antes dos elementos da classe, como fizemos abaixo. Depois disso, dentro da tag de estilo, especificamos a cor "azul" para o título 1 usando o id "c".

Depois de executar este código atualizado, recebemos a página HTML atualizada. A cor do cabeçalho 1 foi atualizada para azul a partir do gramado verde. Isso mostra que o elemento "id" pode substituir o estilo de elemento "classe".

Agora, usaremos o estilo embutido para este código HTML e usando a propriedade "cor" para transformar 1 em uma cor "Hotpink" sem adicioná -la à tag "estilo" externo. Esta tag de estilo embutido foi usada antes do elemento "id" do cabeçalho 1.

Depois de executar este arquivo HTML atualizado, obtivemos a cor "Hotpink" para o título que está substituindo o elemento "ID".

Usando o “!Atributo importante ”, juntamente com qualquer propriedade, daria a primeira precedência em comparação com outras propriedades. Nós usamos o “!atributo importante ”com a propriedade de cor de título 1 e salvou -o.

A precedência foi dada à propriedade de cor "roxa" especificada para o "H1".

Conclusão

Este artigo explica a precedência de elementos para demonstrar o estilo de substituição do CSS no código HTML. O parágrafo introdutório explica o que está substituindo e precedência e o uso do estilo de estilo para diferentes tipos de seletor em detalhes usando diferentes técnicas de estilo. Para isso, tentamos implementar diferentes exemplos contendo o estilo de folha de estilo em linha, esboço e de estilos externos. Tentamos diferentes tipos de elementos seletores para principalmente os mesmos elementos para executar o estilo de substituição.