CSS substitua o texto
Exemplo 01
Vamos começar com o uso do deslocamento "depois" para substituir um texto por um novo texto. Para criar uma página da web html, estaremos utilizando todas as suas tags padrão. A primeira e principal tag é a tag html, e todo o outro conteúdo das tags entrou nela. Então, precisamos garantir que a abertura e o fechamento desta tag não perca nosso código. Iniciamos esta etiqueta, seguida pela etiqueta "Head" que tem sido uma obrigação para executar o estilo de cabeçalho e outras coisas. Estamos adicionando a tag de estilo. Você também pode experimentar a etiqueta "título" antes da tag de estilo para dar à sua página HTML um nome simples.
Dentro da área do corpo da nossa página HTML, todos os outros elementos seriam adicionados entre a abertura e o fechamento da tag "corpo", eu.e., e . Estamos usando o
tag para adicionar um parágrafo ao nosso corpo de página HTML. Esse
A tag foi classificada com uma classe “Substitua” a ser usada para estilo. O
A tag é usada para fechar esta tag após adicionar alguns dados de texto a ela. A etiqueta de estilo foi usada dentro da etiqueta "Head" e a classe ".substituir ”foi usado para adicionar estilo ao parágrafo desta página. A propriedade de visibilidade é definida como "oculta" enquanto sua posição foi definida como relativa de acordo com o início de uma página. O deslocamento "depois" foi usado na próxima linha para a classe em particular mudar sua visibilidade para "visível" e posição para "absoluto". Isso significa que após o texto original, o novo texto será visível e sua posição será absoluta.A margem superior e esquerda foi definida como 0, enquanto a propriedade de conteúdo é usada para adicionar algum outro texto no lugar do texto original. Devido à substituição, o texto original será oculto de acordo com a "visibilidade" definida como "oculta". Agora podemos executar nosso código como está completo.
Agora, temos o resultado mostrado do solo na guia do navegador. Você pode ver que o texto original foi "eu serei substituído", enquanto o texto mostrado é "eu sou um novo texto ...". Indica que o uso da propriedade de visibilidade para "oculto" e "visível" junto com a propriedade "Conteúdo" pode fazer você substituir um texto por outro.
Exemplo # 02
Vamos dar uma olhada em outro exemplo de html para usar o deslocamento "depois" sem a propriedade "visibilidade" e ver se substitui o texto ou não. Então, usamos as mesmas tags de abertura e fechamento HTML para criar um arquivo HTML padrão para execução no navegador. Dentro da etiqueta "corpo" deste código HTML, nós usamos o
tag para criar um parágrafo em nossa página HTML e atribuí -la a uma classe "Substituir" para classificação no nível de estilo. Este parágrafo também contém uma etiqueta de extensão junto com o texto para marcar o texto. As tags de extensão e parágrafo estão fechadas uma após a outra.
Depois disso, fechamos a etiqueta corporal também. A tag de estilo usa a classe "Substitua" para a tag span para usar a propriedade "display" como nenhuma. Isso significa que nenhuma marcação será aplicada ao texto dentro do período. O deslocamento "After" foi usado com a classe "Substituir" para adicionar a propriedade "Conteúdo" com algum novo texto para substituir o texto antigo na etiqueta do parágrafo do nosso corpo HTML. Este código agora está pronto para execução.
Após a execução deste código no navegador Chrome através do menu “Executar” do Visual Studio, temos o texto substituído em vez do original na página HTML.
Exemplo # 03
Dentro deste exemplo, você entenderá o método para substituir o texto sobre pairando. A parte do corpo deste código contém uma tag de cabeçalho simples "H1" para adicionar um maior tamanho de cabeçalho padrão na página da web html após a execução. Depois de fechar a tag de título como “, Adicionamos uma tag "div" para criar um novo contêiner na página HTML. Este contêiner conteria uma tag de âncora para adicionar um link a algum texto, eu.e., O URL do Google tem sido usado para vincular. A tag de título foi usada para criar um título de tamanho 2, seguido pela tag span com texto nela para marcação. A tag de cabeçalho, a etiqueta de âncora e a etiqueta "div" foram concluídas aqui. Então, fechamos todas essas 4 tags usando suas tags de fechamento i.e. ,
, , .Depois disso, ainda não precisamos de nada a ser usado para esta página HTML. Assim, estamos fechando o corpo também, eu.e., usando a tag. O sinal de etiqueta de âncora seguido pelo deslocamento do "Hover" foi usado em sua tag "span" para definir a tela como nenhum. O deslocamento "visitado" é usado para dizer que a cor de um link seria verde nas visitas à página. O deslocamento "antes" é usado no Hover para substituir o conteúdo original pelo novo conteúdo após o mouse, eu.e., “Clique aqui para visitar o Google”. Ao pairar sobre o texto original, a cor de um novo texto será alterada para Crimson. Se você pressionar a tecla esquerda ao passar o mouse sobre o texto original sem liberar a chave, o deslocamento ativo mudará a cor de um novo texto para azul. O estilo e as tags de cabeça agora estão fechados.
Depois de executar esse código via código VS no Chrome, temos um título e um link para o Google. O link sublinhado é mostrado na cor verde.
Quando você passa o mouse seu ponteiro do mouse no texto "Toque em mim", seu texto foi substituído por um novo, e a cor do novo texto também é atualizada, eu.e., carmesim. Quando você toca no link sem liberar o botão, ele mudará sua cor para azul com certeza.
Conclusão
Terminamos as ilustrações e a explicação do conceito de substituição de texto CSS dentro do script html. Implementamos um total de 3 exemplos em html para substituir um texto por outro. Para isso, discutimos o uso do deslocamento "depois", juntamente com sua propriedade de visibilidade, propriedade de posição e propriedade de conteúdo. Depois disso, também implementamos o método para substituir um texto de algum link com outro texto junto com sua mudança de cor através das tags do pairar seguidas pelo "antes" do deslocamento e da propriedade de conteúdo.