CSS Primeira letra

Uma folha de estilo em cascata desempenha um papel importante na decoração da primeira letra da palavra em HTML. Às vezes, precisamos do usuário para prestar atenção a um texto específico, de acordo com nosso requisito. Para alcançar esse objetivo, usamos a decoração e os efeitos do texto na primeira letra da palavra do parágrafo ou no cabeçalho. Isso ajuda a desviar o foco do usuário no ponto relevante. Esta seleção é feita através do seletor CSS :: Primeira letra, que é o pseudo-elemento CSS.

CSS pseudo-elemento

É a palavra -chave que é adicionada ao seletor que permite decorar ou estilizar a seção específica do item selecionado. A sintaxe básica usada para esse estilo é definida no seguinte:

O seletor neste artigo representa a primeira letra da palavra. A propriedade de estilo inclui a propriedade de fronteira, cor, fonte, margem, decoração de texto, estofamento e propriedade de fundo também. Aplicamos as três propriedades principais do estilo neste guia.

Fonte e estilo de cor na primeira letra

Primeiro, aplicamos as duas propriedades no estilo de primeira carta. Começando com a etiqueta de abertura do HTML, declaramos a cabeça e depois abrimos a etiqueta de estilo. Como precisamos aplicar qualquer efeito na primeira letra, é necessário mencioná -la no momento do estilo. Caso contrário, todo o texto do parágrafo será afetado. Então, o "P" para o parágrafo é mencionado junto com a primeira declaração de letra. A cor verde e o tamanho da fonte em porcentagem são aplicados.

Depois disso, a seção da cabeça está fechada. A etiqueta corporal é complementada pela tag alinhada central. É um exemplo de estilo embutido. Dentro do corpo, adicionamos um título novamente. O CSS embutido é aplicado para aplicar a cor a ele. No final, o parágrafo é adicionado onde aplicamos o estilo. Também podemos aplicar qualquer estilo à primeira letra do cabeçalho como no parágrafo.

Código:

Salve o código e execute -o no navegador. Você verá a página da web resultante em que a primeira letra do parágrafo é maior em comparação com o restante do texto e sua cor é alterada. Essa mudança de estilo é útil para desviar o foco do leitor.

Saída:

Estilo de fronteira na primeira letra

A segunda maneira de tornar a primeira letra proeminente é aplicar uma forma quadrada ou uma borda ao redor da primeira letra do texto. Vamos elaborar sobre como funciona.

Desta vez, pegamos as duas maneiras de modelar a primeira carta aplicando um estilo no cabeçalho e o outro no parágrafo. Dentro da etiqueta de estilo, o mesmo valor de primeira linha é declarado para o título "H3". O estilo de fronteira está definido como "sólido".

Código:

Da mesma forma, na primeira letra do parágrafo, aplicamos o estilo de fronteira como duplo. Também podemos aplicar uma borda simples ou pontilhada substituindo o nome do estilo de borda pela palavra "pontilhada". Dentro do corpo, um título e um parágrafo são declarados, ambos contendo o texto fictício para mostrar os efeitos que aplicamos neles. Salve o arquivo do editor de texto e depois execute -o no navegador padrão.

Saída:

Você verá que, no título, a primeira letra é "T" e é estilizada com uma borda sólida. Você também pode aplicar mais efeitos na fronteira, como a cor da borda, etc. Isso vai atrair mais em comparação com todo o texto. O parágrafo tem a primeira letra "L" de "Lorem". Isso é estilizado pela fronteira dupla.

Observação: Ambos os efeitos da fronteira são aplicados na primeira letra da primeira palavra, como mencionamos no CSS. Mas se a definição de primeira letra for removida, a borda será aplicada a todo o texto, seja no cabeçalho ou no parágrafo.

Estilo de decoração de texto na primeira letra

A primeira letra do texto também pode ser estilizada decorando o texto. Desta vez, usamos a primeira letra da lista. Cada lista será afetada por um estilo diferente da decoração de texto. A propriedade de decoração de texto do CSS possui vários aspectos; Vamos com a linha de decoração de texto.

Primeiro, considere a seção corporal do código HTML. Dois títulos simples são aplicados. ATER que, declaramos uma lista simples. Dos dois tipos de listas, usamos uma lista não ordenada aqui. O

A tag é declarada. Dentro das tags da lista não ordenada, declaramos as listas com a tag
• .

  1 2 3 4 5

  Shiza Ahsan

  Todas as três listas são declaradas dentro da etiqueta de

  . Cada lista é fechada separadamente e após a declaração de todas as listas,
  é aplicado. Cada lista é aplicada com um nome de identificação. O estilo da primeira letra é aplicado identificando cada exemplo à medida que aplicamos os diferentes estilos para cada linha da lista.

  Código HTML:

  Se os IDs da lista forem removidos, um único estilo será aplicado a todas as linhas da lista. Agora, feche a seção do corpo. Vá em direção à seção principal do corpo HTML.

  Dentro da etiqueta de estilo, a cor do cabeçalho é aplicada. É um efeito opcional apenas para explicar o trabalho. Todo o corpo é aplicado pelo estilo para se alinhar no lado esquerdo da página da web.

  1 2 3 4 5

  Ul li Margin-top: 15px;

  Um efeito comum que é aplicado a todas as linhas da lista é um efeito de margem. Para manter a distância entre duas linhas na lista, aplicamos esse efeito. Depois disso, cada linha da lista é aplicada nos diferentes estilos. Por exemplo, no exemplo1 ID, aplicamos o efeito da decoração de texto com um sublinhado pontilhado na primeira letra.

  1 2 3 4 5

  #Exemplo1 :: Primeira letra Decoração de texto: sublinhado pontilhado;

  Da mesma forma, o exemplo2 e o exemplo3 são aplicados pela decoração de texto de uma linha vermelha através da letra. Enquanto a terceira linha da lista tem um efeito azul superline.

  Código CSS:

  Depois de adicionar todos os efeitos, salve o código e executamos o arquivo. A primeira letra "s" da palavra 'shiza "tem uma linha pontilhada por baixo. A primeira letra "s" da segunda linha tem uma linha vermelha através dela. E o "z" de Zaroon contém uma linha azul que passa por cima.

  Saída:

  Conclusão

  A primeira letra CSS do texto em HTML desempenha um papel importante em desviar a atenção do usuário. Neste artigo, damos brevemente a introdução básica ao seletor de primeira letra, que é um elemento da propriedade CSS Pseudo. Este estilo de propriedade tem várias categorias. Podemos aplicar cada um para destacar a primeira letra. As três propriedades aplicadas são o efeito da fonte mais.