Mudar a cor da etiqueta de RH CSS
”Tag usando CSS. O "
”A tag em html é usada para representar uma pausa temática entre dois parágrafos em html. Parece uma linha horizontal entre os parágrafos. Vamos mudar a cor desta tag de RH com a ajuda do CSS neste guia. Usamos propriedades diferentes para alterar a cor desta tag. Você tem que passar por esses exemplos que são elaborados neste guia para uma melhor compreensão disso.
Propriedades para mudar de cor:
Usaremos duas propriedades aqui para alterar a cor da tag de RH:
- A propriedade cor de fundo.
- A propriedade de fronteira.
Exemplo # 1: Usando a propriedade cor de fundo
Abra um novo arquivo HTML no qual usamos o “
”Tag e depois altere a cor deste
tag no arquivo CSS. Realizamos os códigos fornecidos no estúdio de código visual. Temos que criar um arquivo HTML para escrever o código HTML. Este arquivo deve ser salvo com o “.Extensão HTML ”. O código HTML é usado para projetar o
etiqueta entre dois parágrafos. Se você estiver trabalhando no código do Visual Studio para criar arquivos HTML, abra um novo arquivo e escreva o “!" marca. Em seguida, pressione Enter as tags HTML estão embutidas neste estúdio de código visual que é exibido na tela. Você tem que escrever o corpo e colocar a etiqueta do link no modelo fornecido.
Defina o tipo deste documento que é "html" aqui. Abra o And Tag. Depois disso, a tag "meta" é definida aqui como "charset = utf-8". Isso significa que nos permite usar muitos caracteres em nosso documento. E suporta muitos idiomas. Definimos o título usando a tag de abertura e fechamento "". Como queremos vincular este arquivo html ao arquivo CSS para alterar a cor do “
”Tag, usamos a tag“ ”e fechamos nossa tag“ ”. Temos que escrever dois parágrafos e colocar o
tag entre esses dois parágrafos para que possamos alterar a cor desta tag. Escrevemos o parágrafo entre as tags "". Nós temos uma "
”Tag após o primeiro parágrafo. Em seguida, escreva o segundo parágrafo e feche as tags de "" e "".
Arquivo CSS para estilo e mudança de cor:
Depois de salvar o arquivo HTML acima, crie um arquivo com o nome mencionado no link do arquivo html. Aqui vamos mudar a cor da tag de RH que criamos no arquivo html.
Primeiro, escrevemos RH e, dentro dos aparelhos encaracolados do RH, vamos dar estilo à nossa tag de RH. Nós damos a altura disso “
"Tag igual a" 4px ", então a altura da nossa tag de RH é de cerca de 4px. Usamos a propriedade cor de fundo aqui. Esta propriedade é usada para alterar a cor do elemento de RH no CSS. Nós definimos a cor da linha de RH como azul. Então, definimos a “cor de fundo” azul para isso. A fronteira para isso não é porque não queremos colocar nenhuma borda ao redor.
Recebemos a saída simplesmente pressionando o Alt+B no arquivo html ou também pressionando o botão direito do mouse e selecionando aberto no navegador padrão. Vamos obter a saída no navegador.
Aqui, a linha entre os parágrafos é renderizada "azul" porque definimos a cor desta tag de RH "Blue". Esta é a única maneira de mudar a cor da tag "HR" usando "CSS".
Exemplo # 2: usando a propriedade de borda no topo
Neste exemplo, usamos a propriedade "Border-Top" em CSS. Esta propriedade também ajuda a mudar a cor.
Aqui, apenas alteramos o link para o arquivo CSS no arquivo HTML anterior porque criamos um novo arquivo CSS para usar outra propriedade para alterar a cor. Então, não precisamos explicar este código novamente.
Arquivo CSS para alterar a cor:
Iniciamos este código CSS da mesma maneira usando o RH na primeira linha e abrindo um suporte encaracolado.
Definimos a tela como "bloco". Este bloco vai preencher toda a linha. Então, a altura desta linha é "2px". A fronteira para isso é zero "0". Agora, estamos usando a propriedade "Border-top" aqui. Esta propriedade ajuda a alterar a cor da tag de RH no CSS. Aqui, "5px" define a largura, "sólido" define o "estilo de linha" e "vermelho" é usado para a cor da tag de RH. Dessa forma, definimos a largura, o estilo de linha e a cor da tag de RH no CSS. A margem criará o espaço de "2em". E o preenchimento aqui é "0".
Como o preenchimento é usado para criar o espaço extra entre os elementos, a linha não contém elementos, então o definimos como zero. Por fim, fechamos o suporte encaracolado e salvamos. Vinculamos este arquivo ao nosso arquivo html para que todos esses estilos sejam aplicados ao arquivo html. Você pode verificar a saída disso na imagem, pois a imagem também é fornecida aqui.
Exemplo # 3:
Neste exemplo, usamos duas tags de RH em nosso arquivo html e usamos os dois métodos para alterar a cor da tag de RH. Aqui, vamos dar duas cores à tag ou linha de RH ao mesmo tempo. Vejamos este exemplo.
Aqui, criamos três parágrafos separadamente usando três pares de “
”Tags de abertura e fechamento de parágrafos. Após cada parágrafo, colocamos uma tag de RH. Então, temos duas tags de RH aqui neste código. Além disso, vincule este arquivo HTML ao novo arquivo CSS que criaremos para o estilo dessas tags de RH.
Arquivo CSS para alterar a cor:
Neste exemplo, usamos duas propriedades diferentes para alterar a cor na mesma linha. No primeiro RH, abrimos os aparelhos encaracolados e usaremos a propriedade de borda no topo da fronteira. Nisso, a altura é "2px" e a propriedade de borda é usada. Definimos a largura como "5px" e o estilo da linha que é "sólido" e também muda a cor para "verde". Em seguida, feche isso e crie uma nova "RH" na qual usaremos a propriedade "Background-Color". Então, aqui a altura é "4px" e a cor do fundo é "laranja". Então, a linha terá duas cores que são "verdes" e "laranja".
Aqui você pode notar que podemos dar mais de uma cor à nossa tag de RH usando essas propriedades.
Conclusão:
Neste guia, aprendemos a mudar a cor da tag de RH com a ajuda das propriedades do CSS. Elaboramos em três códigos diferentes neste guia. Alteramos a cor da linha de RH aplicando o atributo "cor de fundo". No próximo exemplo, usamos outra propriedade que é a propriedade "na borda" para alterar a cor. Também fornecemos capturas de tela da saída depois de executar todos os códigos e mostrar a saída no navegador. Espero que você aprenda a mudar a cor da linha de RH no CSS depois de ler este guia.