Como destacar o texto usando CSS
O resultado deste blog é:
- Método 1: Destaque o texto usando tag html
- Método 2: Destaque o texto usando tag html
- Método 3: Destaque o texto usando as cores do gradiente CSS
Método 1: Destaque o texto usando tag html
O html “”A tag é utilizada para destacar ou marcar o texto que fornece informações importantes. Por padrão, os navegadores renderizam o texto marcado com uma cor amarela de fundo.
Sintaxe
A sintaxe de usar o “”O elemento HTML é mencionado abaixo:
Exemplo: como adicionar elemento em html?
Em HTML, primeiro, crie uma div com o nome da classe “caixa”. Então,
é adicionado para incluir o título e o
A tag é usada para adicionar um parágrafo à página da web. Dentro do
elemento, use o “”Elemento para destacar o texto necessário:
Elemento de marca HTML
O elemento Mark é usado para definir o marcadotexto.
Em seguida, aplique propriedades CSS aos elementos HTML.
Caixa de estilo div
.caixafronteira: 5px Solid #9A1663;
Background-Color: #fdf0e0;
largura: 90%;
Altura: 200px;
margem: automático;
preenchimento: automático;
Alinhamento de texto: centro;
Size da fonte: 20px;
Aqui, ".caixaӃ usado para acessar o elemento div com a caixa de classe e aplicar as seguintes propriedades: -
- ““fronteira”A propriedade pode ter mais de dois valores para especificar o estilo de borda, como largura, tipo de linha e cor.
- ““largura”O atributo é utilizado para especificar a largura do elemento.
- ““cor de fundo”A propriedade é utilizada para especificar a cor do fundo do elemento.
- ““alturaA propriedade define a altura do elemento HTML.
- ““margem”Propriedade define o espaço fora do elemento.
- ““preenchimento”Propriedade define o espaço dentro do elemento.
- ““alinhamento de texto”A propriedade é utilizada para ajustar o alinhamento do texto.
- ““tamanho da fonte”Especifica o tamanho das fontes.
O código fornecido acima gerará o seguinte resultado:
Também podemos aplicar estilos diferentes ao elemento com CSS.
Elemento HTML de estilo
Por padrão, o “”Tag mostra uma cor amarela. Mas com a ajuda do CSS, você pode aplicar propriedades diferentes para mudar o estilo do elemento HTML Mark.
Neste exemplo, usamos CSS embutido para estilizar a tag HTML:
O elemento Mark é usado para definir o marcado texto.
Pode -se observar que agora o texto é destacado usando a cor vermelha:
Método 2: Destaque o texto usando tag html
O html “”O elemento é um elemento embutido utilizado para marcar alguma parte de um documento.
Exemplo: como adicionar elemento ao html?
Primeiro um
A tag é colocada para adicionar um parágrafo. Dentro de
tag, o "”A tag é usada para marcar uma parte específica do parágrafo. Cada etiqueta de extensão recebe um ID como “S1”.
Html
Linuxhint é o melhor tutorial online local na rede Internet.
Se você quiser aprender Programação Bash, Então você está no lugar certo.
Agora, aplique estilos CSS nos elementos do Span acima.
CSS
#S1cor de fundo: RGB (235, 247, 6);
O "#S1”Refere -se ao ID do span. Aqui, a propriedade “cor de fundo”Com o valor RGB (233, 247, 6) é aplicado ao elemento de span.
Pode ser observado a partir da saída que o texto dentro do elemento de span é marcado com a cor especificada:
Método 3: Destaque o texto usando as cores do gradiente CSS
Em html, adicione um id como “principal”. Então, dentro deste elemento div, coloque
tag para adicionar conteúdo. Dentro do conteúdo de
Tag, coloque a tag com o nome da classe como “destaque”. Por fim, aplicaremos o CSS “gradiente”Propriedade para esta área de extensão.
Html
O preço do sucesso é trabalho duro e dedicação.
Classe de estilo destaque do elemento
.destaqueAntecedentes de imagem: gradiente linear (à direita, #06283D, #8BBCCC, #47B5FF, #256D85);
Radio de fronteira: 6px;
preenchimento: 3px 6px;
A descrição das propriedades do CSS acima é fornecida abaixo:
- ““.destaque”É usado para acessar o destaque da classe do
elemento.
- ““imagem de fundo"Propriedade como"Gradiente linear”Usa os parâmetros como direção, depois duas ou mais cores.
- ““Radio de fronteira”A propriedade é utilizada para fazer as bordas dos elementos redondos.
- ““preenchimento”É usado para fornecer espaço em torno do conteúdo do elemento.
Estilo div
#principalmargem: 10px automático;
largura: 90%;
Altura: 150px;
borda: 5px sólido #fb2576;
Radio de fronteira: 10px;
Background-Color: Black;
preenchimento: 5px;
As propriedades CSS descritas abaixo são aplicadas ao elemento div com ID como "Main":
- ““#principal”É referido ao ID principal do elemento div.
- ““margem”A propriedade aplica espaçamento fora do elemento div.
- ““largura”A propriedade é usada para definir a largura do contêiner.
- ““altura”Define a altura do contêiner.
- ““fronteira”Especifica a largura, tipo e cor da fronteira.
- ““Radio de fronteira”Aplica -se para fazer as bordas dos elementos redondos.
- ““cor de fundo”É usado para aplicar a cor ao fundo do elemento div.
- ““preenchimento”É aplicado para dar espaço ao redor do conteúdo da div.
Estilo elemento
Cor: #FFF;
Alinhamento de texto: centro;
Font-Family: Sans-Serif;
Espacamento de cartas: 2px;
preenchimento: 20px 0;
Size da fonte: 2em;
O
Elemento do Div Main é estilos aplicados com as propriedades CSS listadas:
- ““cor”Propriedade especifica a cor do texto.
- ““alinhamento de texto”A propriedade aplica o alinhamento ao texto, como centro, esquerda e muito mais.
- ““família de fontes”É utilizado para definir a família de fontes do texto.
- ““espaçamento de cartas”A propriedade maximiza ou minimiza o espaçamento entre os personagens do texto.
- ““preenchimento”Representa espaço em torno do conteúdo de um elemento.
- ““tamanho da fonte”Indica o tamanho da fonte.
Depois de salvar o código acima, a página da web em nosso navegador da Web ficará assim:
Discutimos alguns métodos para destacar o texto usando CSS.
Conclusão
Para destacar o texto, HTML e CSS nos facilitam com muitas técnicas. Html “" e "”As tags são usadas para marcar o texto, mas podemos personalizar o estilo de destaque usando CSS. Este blog discutiu o procedimento de destacar o texto usando HTML, e cores de gradiente.