CSS sublinham a cor
Exemplo 1
Crie o arquivo HTML para iniciar este código. Vamos começar criando um novo arquivo e selecionando HTML como o idioma no código do Visual Studio. Finalmente, estamos adicionando o “!”Para o arquivo que acabamos de gerar. Este arquivo contém todas as tags fundamentais do HTML. Tudo o que precisamos fazer agora é digitar o corpo HTML e o link do arquivo CSS no “Head.”No corpo, estamos colocando um título e um parágrafo neste código. Também criamos algum texto ousado neste código. Agora, estamos nos movendo para criar o arquivo CSS no qual sublinhamos o título e o parágrafo e depois alteramos a cor desse sublinhado. Tudo isso será feito utilizando as propriedades do CSS.
Estamos alinhando todos os elementos do corpo do HTML aqui no "centro" com a ajuda da propriedade "Text-Align". Em seguida, usamos a propriedade "decoração de texto" e colocamos a palavra-chave "sublinhada" para o valor desta propriedade. Usamos esta propriedade aqui para gerar o sublinhado para o título. Também definimos a cor deste sublinhamento, utilizando a propriedade “Text-Decoration-Color”.
Aqui, definimos a cor desse sublinhado para “preto.”Também geramos outro sublinhado usando a mesma propriedade de“ decoração de texto ”, e desta vez geramos esse sublinhado para o parágrafo. Mudamos a cor deste sublinhado para "verde", utilizando a propriedade "Text-Decoration-Color". Também temos algum texto ousado, por isso vamos gerar um sublinhado para este texto em negrito com a ajuda da propriedade "Text-Decoration" e também alterar sua cor para "Red" usando a propriedade "Text-Decoration-Color".
A saída está aqui, e você pode observar que a cor do sublinhamento do cabeçalho parece "preto", o texto do parágrafo aparece em "verde" e o sublinhado do texto em negrito está em "vermelho.”
Exemplo # 2
Estamos utilizando o mesmo código HTML do Exemplo 1 aqui. Utilizamos a propriedade "Text-Align" primeiro para todos os elementos do corpo, e o "tamanho da fonte" do elemento corporal é "24px". Nós "sublinhamos" todos os elementos separadamente usando "decoração de texto", e mudamos a cor do sublinhamento com a ajuda de "cor-decoração de decoração."Aqui, estamos usando a cor" RGB "como o valor desta propriedade" Text-Decoration-Color ". Para "H1", definimos "RGB (13, 128, 13)", que é usado para a sombra "verde". Então, temos "P", no qual usamos "RGB (40. 40, 184) ”, que representa a cor“ azul ”. Para o último texto em negrito, "B", estamos usando "RGB (216, 69, 15)", que representa "Orange.”
O resultado é mostrado abaixo, e você pode ver que a cor do sublinhamento do cabeçalho é "verde", o texto do parágrafo é "azul", e o texto em negrito sublinante é "laranja.”
Exemplo # 3
Novamente, estamos usando o código HTML do Exemplo 1 e vinculando esse arquivo CSS fornecido ao arquivo html do Exemplo 1. Todo o texto do corpo HTML se alinha ao "centro" e do "24px" "tamanho da fonte.”Sublinhamos todos os elementos que estão em direção. Aqui, estamos mudando a cor desses sublinhados, utilizando “cor-decoração de decoração” e atribuindo valores da cor na forma “HSL”. O "HSL (0, 100%, 50%)" que usamos aqui para o sublinhado do cabeçalho mostra a cor "vermelha". Em seguida, estamos usando "HSL (133, 86%, 47%)" para o sublinhado do parágrafo, que aparece como "verde claro" e, para o negrito, estamos usando "HSL (327, 85%, 33%)", que é para a cor "magenta".
O resultado é dado abaixo, com a cor "vermelha" para o cabeçalho sublinhado, "verde claro" para o texto do parágrafo e "magenta" para o texto em negrito sublinhado.
Exemplo # 4
Neste exemplo, vamos alterar um pouco o código HTML acima, adicionando um link aqui neste arquivo. Agora, temos um cabeçalho, um parágrafo, um texto ousado dentro deste parágrafo e também um link. Agora vamos sublinhar tudo isso e depois aplicar cores sublinhadas diferentes para todas elas no CSS.
Criamos o sublinhado do cabeçalho utilizando a propriedade "Decoração de texto" e alterando sua cor para "laranja" com a ajuda de "cor de decoração de texto.”Depois disso, usamos a propriedade“ Decoração de texto ”para gerar o texto em negrito sublinhado e“ cor de decoração de texto ”para alterar a cor para“ azul.”Definimos o“ tamanho da fonte ”do parágrafo para“ 22px ”. Para mencionar o link, usamos "A" aqui com o "Passe" e depois alteramos a cor do sublinhamento para "Red", para que isso mude a cor do sublinhado do link quando o mouse o mouse sobre este link e também muda seu "tamanho de fonte" em pairar para "20px".
Na primeira saída, acabamos de sublinhar o cabeçalho e o texto em negrito. O sublinhado do cabeçalho aparece na cor "laranja", e o sublinhado do texto em negrito aparece aqui em "Blue.”
Na segunda imagem, você pode ver a cor sublinhada do link. Quando passamos o cursor neste link, a cor do sublinhamento do link aparece em "Red" como o colocamos em nosso código CSS, para que mude sua cor no Hover.
Exemplo # 5
Aqui, temos um cabeçalho e dois parágrafos diferentes com os nomes "P1" e "P2". Também temos algum texto ousado e um "div" e também um elemento "span". Vamos gerar o sublinhado para tudo isso e também mudar a cor desses sublinhados.
Utilizamos o "alinhamento de texto" e, para o valor desta propriedade, definimos "centro" aqui para todos os elementos presentes dentro do corpo. Também aumentamos o "tamanho da fonte" e o definimos como "25px". Estamos utilizando a propriedade "Decoração de texto" para todos os elementos que criamos no arquivo HTML usando seus nomes. Em seguida, também usamos a propriedade “Text-Decoration-Color” dentro dos nomes de todos esses elementos aqui. Usamos os nomes de cores, a cor RGB e também as cores HSL aqui. Para o cabeçalho e o primeiro parágrafo "P1", estamos usando a cor sublinhada em "RGB", para o segundo parágrafo "P2" e Bold "B", estamos utilizando a cor "HSL" para o sublinhamento e para o "" Div "e elemento" span ", estamos usando nomes de cores na propriedade" Text-Decoration-Color ". Dessa forma, geramos o sublinhado e alteramos a cor do sublinhado de todos os elementos.
Na captura de tela abaixo, o sublinhado de todos os elementos renderiza em cores diferentes, porque definimos essas cores no arquivo CSS acima.
Conclusão
Escrevemos este tutorial explicando como mudar a cor do sublinhado no CSS. Discutimos a propriedade do CSS, que é utilizada para alterar a cor do sublinhado. Explicamos em detalhes que a propriedade "Text-Decoration-Color" é utilizada para alterar a cor do sublinhamento. Exigimos exemplos diferentes aqui nos quais utilizamos esta propriedade e explicamos o código e a saída para o seu melhor entendimento. Depois de aprender este tutorial com cuidado, você utilizará esta propriedade em seus códigos.