Introdução à formatação de texto CSS
Nos dias anteriores, você estava restrito a representar o texto usando a versão antiga do CSS. Você tinha uma tag para alterar o sombreamento e o tipo de letra do conteúdo, no entanto, a medição era obstruída utilizando as dimensões de texto pré-caracterizadas. Os vários impactos, como intensidade e strike-through, foram concebidos apenas em estruturas fundamentais com a ajuda de rótulos HTML. Atualmente, o usuário pode usar uma variedade de propriedades de formatação de texto CSS para organizar o texto nas páginas da Web de sua maneira.
Neste capítulo, você verá várias propriedades de formatação de texto CSS. As propriedades de formatação de texto CSS são utilizadas para projetar o texto, estilizar o texto, descrever alguns estilos de formatação, etc. As propriedades fornecem a representação visual dos caracteres, espaços, palavras, parágrafos e muito mais.
Lista de propriedades de formatação de texto CSS:
Detalhes das formas de formatação de texto em CSS: -
1) Cor do texto
Esta propriedade pode ser usada para alterar a cor do texto. Pode ser definido usando a propriedade color.
Exemplo : Ilustração da cor do texto
CSS Text Color Property
Olá Mundo….
Bem-vindo à EDUCBA…
Ele exibirá a seguinte saída:
2) Alinhamento de texto
Esta propriedade pode ser usada para alterar a horizontal do texto. Pode ser definido usando as propriedades esquerda, direita, central e justificativa.
Exemplo : Ilustração do Alinhamento do Texto
Text Alignment Property
Olá Mundo…
Bem-vindo à EDUCBA …
Consultor educacional…
Ele exibirá a seguinte saída:
3) Decoração de Texto
Esta propriedade pode ser usada para decorar o texto. Pode ser definido usando sublinhado, sublinhado, propriedades de linha.
Exemplo : Ilustração de decoração de texto
Text DecorationProperty
Olá Mundo…
Bem-vindo à EDUCBA …
Consultor educacional…
Ele exibirá a seguinte saída:
4) Transformação de Texto
Esta propriedade pode ser usada para alterar os casos do texto. Pode ser definido usando as maiúsculas, minúsculas e minúsculas.
Exemplo : Ilustração da Transformação de Texto
Text Transformation Property
Olá Mundo…
Bem-vindo à educba …
Consultor educacional…
Ele exibirá a seguinte saída:
5) Recuo do texto
Esta propriedade pode ser usada para recuar a primeira linha do texto. Pode ser definido usando as propriedades px, cm, pt.
Exemplo : Ilustração da indentação do texto
Text Indentation Property
Olá Mundo…
Bem-vindo à Educba …
Consultor educacional…
Ele exibirá a seguinte saída:
6) Espaçamento entre Palavras
Esta propriedade pode ser usada para dar espaço entre as palavras. Pode ser definido usando a propriedade espaçamento entre palavras.
Exemplo : Ilustração do Espaçamento entre Palavras
Word Spacing Property
Olá Mundo…
Bem-vindo à Educba …
Consultor educacional…
Ele exibirá a seguinte saída:
7) Espaçamento entre letras
Esta propriedade pode ser usada para dar espaço entre os caracteres. Pode ser definido usando a propriedade espaçamento entre letras.
Exemplo : Ilustração do Espaçamento entre Letras
Letter Spacing Property
Olá Mundo…
Bem-vindo à Educba …
Consultor educacional…
Ele exibirá a seguinte saída:
8) Altura da linha
Esta propriedade pode ser usada para dar espaço entre as linhas. Pode ser definido usando a propriedade altura da linha.
Exemplo : ilustração da altura da linha
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
A EDUCBA (Corporate Bridge Consultancy Pvt Ltd) é uma
principal fornecedor global de educação baseada em habilidades
Na eduCBA, é uma questão de orgulho para nós orientar o trabalho
cursos práticos disponíveis para qualquer pessoa, a qualquer hora e em qualquer lugar.
Ele exibirá a seguinte saída:
9) Direção do texto
Esta propriedade pode ser usada para alterar a direção do texto. Pode ser definido usando a propriedade rtl. Define a direção da direita para a esquerda.
Exemplo : Ilustração da direção do texto
Text Direction Property
Olá Mundo … Bem-vindo à Educba …
Ele exibirá a seguinte saída:
10) Sombra de texto
Esta propriedade pode ser usada para dar sombra ao texto. Pode ser definido usando a propriedade sombra de texto. Ele usa componentes como posição esquerda, posição superior, tamanho do desfoque, nome da cor.
Exemplo : Ilustração da sombra do texto
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Olá Mundo … Bem-vindo à EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) é uma educação baseada em habilidades
Ele exibirá a seguinte saída:
11) Ems
Esta é uma unidade escalável para dimensionamento. Essa propriedade em pode ser usada para definir o tamanho do texto de acordo com o texto ao redor. O tamanho padrão do texto é 1em, que é igual a 12pt. 2em é igual a 24pt e assim por diante.
Exemplo : Ilustração da Propriedade Ems
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Olá Mundo … Bem-vindo à EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) é uma educação baseada em habilidades
Ele exibirá a seguinte saída:
12) Família de fontes
Essa propriedade é usada para fornecer vários tipos de nomes de família de fontes para o texto selecionado. Por exemplo, Helvetica, Calibri, Arial, Sans Serif, Times, Courier New, etc.
Exemplo : Ilustração da Propriedade da Família de Fontes
Font Family Property
Olá Mundo…
Bem-vindo à Educba …
Consultor educacional…
Ele exibirá a seguinte saída:
Conclusão
Até agora, estudamos as formas de formatação de texto em CSS. Você pode ver que o texto é apresentado com diferentes tipos de propriedades de formatação de texto. Essas propriedades são aspectos muito importantes do CSS para exibir o texto na página da web, para que usuários ou leitores possam se atrair vendo seu texto no site. Utilize essas propriedades de texto com muita facilidade e eficácia nas páginas da web.
Artigos recomendados
Este foi um guia para formatação de texto CSS. Aqui discutimos uma introdução e uma lista de propriedades de formatação de texto CSS em detalhes com os exemplos de código de exemplo e a saída adequada. Você também pode consultar nossos outros artigos sugeridos para saber mais -
- O que é CSS?
- SASS vs CSS
- Comandos CSS
- Perguntas da entrevista do CSS3