Curso IT Fundamentos CSS 022_Texto, fontes, links

Texto

O controle de texto CSS nos ajuda a apresentar melhor as informações textuais nas páginas web e melhorar o efeito visual.

Indentação

Usado para definir a indentação da primeira linha do texto, adequado para indentação de parágrafos. Evite usar em elementos inline. A propriedade aceita valores absolutos ou relativos. Unidades absolutas incluem pixels (px), polegadas (in), centímetros (cm), milímetros (mm), etc. Unidades relativas incluem em, rem, vw, vh, etc.

Exemplo:

1
p {
2
  text-indent: 2em;
3
}

Efeito:

Modo de escrita

O modo de escrita no CSS refere-se à direção de disposição do texto, incluindo modos horizontal, vertical e misto. Na verdade, define a direção de exibição dos elementos de bloco na página — de cima para baixo, da direita para a esquerda ou da esquerda para a direita. Isso determina a direção do texto.

• horizontal-tb: Fluxo de bloco de cima para baixo. A direção de texto correspondente é horizontal.
• vertical-rl: Fluxo de bloco da direita para a esquerda. A direção de texto correspondente é vertical.
• vertical-lr: Fluxo de bloco da esquerda para a direita. A direção de texto correspondente é vertical.

Exemplo:

1
body {
2
  writing-mode: vertical-rl;
3
}

Efeito: Quando mudamos o modo de escrita, também mudamos a direção do bloco e do texto inline. No modo de escrita horizontal-tb, a direção do bloco é horizontal de cima para baixo, enquanto no modo vertical-rl, a direção do bloco é vertical da direita para a esquerda. A dimensão de bloco sempre se refere à direção de exibição do bloco no modo de escrita da página. A dimensão inline sempre se refere à direção do texto.

Esta imagem mostra as duas dimensões no modo de escrita horizontal.

Esta imagem mostra as duas dimensões no modo de escrita vertical.

Direção do texto

Use a propriedade direction para definir a direção de leitura do texto: da esquerda para a direita (ltr) ou da direita para a esquerda (rtl). Adequado para sites multilíngues, definindo a direção de leitura conforme o idioma do texto. Alguns idiomas (como o árabe) são escritos horizontalmente, mas da direita para a esquerda.

Exemplo:

1
html {
2
  direction: rtl;
3
}

Efeito:

Decoração de texto

Use a propriedade text-decoration para definir efeitos de decoração de linha no texto.

• none: Sem linha
• overline: Linha superior
• underline: Sublinhado
• line-through: Tachado

Exemplo:

1
<p style="text-decoration: none;">Sem linha de texto</p>
2
<p style="text-decoration: overline;">Tenho linha superior</p>
3
<p style="text-decoration: underline;">Tenho sublinhado</p>
4
<p style="text-decoration: line-through;">Tenho tachado</p>

Efeito:

Alinhamento de texto

Define o alinhamento horizontal do texto.

• left: Texto alinhado à esquerda, valor padrão na maioria dos idiomas.
• center: Texto centralizado horizontalmente.
• right: Texto alinhado à direita.
• justify: Texto justificado, preenchendo cada linha com espaços adicionais. Devido à disposição do texto e à largura do contêiner (texto curto, falta de espaços, poucas linhas, idioma único), em alguns casos o efeito de justificação pode não ser facilmente visível.
• justify-all (pouco comum): Semelhante a justify, mas distribui espaço adicional uniformemente no início e no fim da linha.
• start: Conforme a direção do texto do navegador, o texto é alinhado no início (geralmente à esquerda).
• end: Conforme a direção do texto do navegador, o texto é alinhado no fim (geralmente à direita).

Exemplo:

1
<p style="text-align: left;">Este texto está alinhado à esquerda</p>
2
<p style="text-align: right;">Este texto está alinhado à direita</p>
3
<p style="text-align: center;">Este texto está centralizado</p>

Efeito:

Altura da linha

Com a propriedade line-height, pode-se definir a altura entre as linhas de texto. Ajustar a altura da linha conforme o tamanho da fonte e os requisitos de design pode melhorar a legibilidade.

Exemplo:

1
<p>Esta é uma altura de linha normal <br>Esta é uma altura de linha normal</p>
2
<p style="line-height: 3;">Veja a altura de linha deste texto <br>Veja a altura de linha deste texto</p>

Efeito:

Espaçamento

Define o espaçamento entre conteúdos de texto.

• letter-spacing define o espaçamento entre letras, caracteres chineses e números.
• word-spacing define o espaçamento entre palavras (caracteres em ambos os lados dos espaços).

Exemplo:

1
<p style="letter-spacing: 10px;">Veja meu espaçamento de texto CSS</p>
2
<p style="word-spacing: 10px;">Veja meu espaçamento de texto CSS 123</p>

Efeito:

Quebra de linha

Controla a forma como o texto faz quebras de linha.

word-wrap: Controla principalmente a quebra de linha de palavras longas ou URLs, mais adequado para cenários em inglês.

• normal (valor padrão): Segue as regras normais de quebra de linha, não permite quebra dentro de palavras.
• break-word: Permite quebra dentro de palavras, pode forçar a quebra de palavras longas ou URLs.

Exemplo:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    word-wrap: normal;
7
}
8
.example2{
9
    word-wrap: break-word;
10
}

1
    <p class="base example1">Veja como faço quebra de linha HelloCSS Hello-CSS</p>
2
    <p class="base example2">Veja como faço quebra de linha HelloCSS Hello-CSS</p>

Efeito:

white-space: Controla o tratamento de caracteres de espaço em branco dentro de um elemento, incluindo espaços, quebras de linha, etc.

• normal (valor padrão): Tratamento normal de espaços em branco, combina espaços consecutivos e faz quebras de linha conforme os caracteres de nova linha.
• nowrap: Não permite quebras de linha, ignora caracteres de nova linha.
• pre: Preserva espaços em branco, não combina espaços consecutivos, o texto é exibido conforme o formato do código-fonte.
• pre-line: Preserva caracteres de nova linha, combina espaços consecutivos, outros espaços são tratados normalmente.
• pre-wrap: Preserva espaços em branco, combina espaços consecutivos, preserva caracteres de nova linha.

Exemplo:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    white-space: normal;
7
}
8
.example2{
9
    white-space: nowrap;
10
}
11
.example3{
12
    white-space: pre;
13
}

1
    <p class="base example1">Veja como faço quebra de linha HelloCSS Hello-CSS</p>
2
    <p class="base example2">Veja como faço quebra de linha HelloCSS Hello-CSS</p>
3
    <p class="base example3">Veja como faço quebra de linha HelloCSS Hello-CSS</p>

Efeito:

Sombra

Permite adicionar um ou vários (separados por vírgulas) efeitos de sombra ao texto para melhorar a legibilidade ou criar efeitos de design únicos.

• h-shadow: Posição da sombra horizontal. Pode ser um valor positivo (deslocamento para a direita) ou negativo (deslocamento para a esquerda).
• v-shadow: Posição da sombra vertical. Pode ser um valor positivo (deslocamento para baixo) ou negativo (deslocamento para cima).
• blur: Opcional. Indica o grau de desfoque da sombra, quanto maior o valor, mais desfocado. Pode ser omitido.
• color: Cor da sombra. Pode ser um valor de cor específico, uma palavra-chave ou um valor RGBA.

Exemplo:

1
<p style="text-shadow: 2px 2px black;">Veja minha sombra</p>
2
<p style="text-shadow: 1px 1px 1px red;">Veja minha sombra</p>
3
<p style="text-shadow: 3px 3px 5px darkgrey;">Veja minha sombra</p>
4
<p style="text-shadow: 2px 2px 2px black, -2px -2px 2px white;">Veja minha sombra</p>

Efeito:

Transformação

Controla a transformação de maiúsculas e minúsculas do texto.

• none: Valor padrão, mantém as maiúsculas e minúsculas originais.
• capitalize: Converte a primeira letra de cada palavra em maiúscula.
• uppercase: Converte todo o texto em maiúsculas.
• lowercase: Converte todo o texto em minúsculas.

Exemplo:

1
<p style="text-transform: none;">Veja como sou transformado hello CSS</p>
2
<p style="text-transform: capitalize;">Veja como sou transformado hello CSS</p>
3
<p style="text-transform: uppercase;">Veja como sou transformado hello CSS</p>
4
<p style="text-transform: lowercase;">Veja como sou transformado hello CSS</p>

Efeito:

Overflow de texto

No CSS, a propriedade overflow pode ser usada para tratar o overflow de texto.

• visible: O texto não transborda, é exibido completamente.
• hidden: Quando o texto transborda, é ocultado.
• scroll: Quando o texto transborda, barras de rolagem são exibidas para que o usuário possa rolar e ver todo o conteúdo.
• auto: Quando o texto transborda, a decisão de exibir barras de rolagem depende da largura e altura do elemento.

Exemplo:

1
.base{
2
    white-space: nowrap;
3
    background: #d7d8d9;
4
    width: 120px;
5
}
6
.example1{
7
    overflow: visible;
8
}
9
.example2{
10
    overflow: hidden;
11
}
12
.example3{
13
    overflow: scroll;
14
}
15
.example4{
16
    overflow: auto;
17
}

1
    <p class="base example1">Veja se meu conteúdo de texto transborda</p>
2
    <p class="base example2">Veja se meu conteúdo de texto transborda</p>
3
    <p class="base example3">Veja se meu conteúdo de texto transborda</p>
4
    <p class="base example4">Veja se meu conteúdo de texto transborda</p>

Efeito:

Fontes

Como controlar e definir fontes é uma parte importante do design web.

Família de fontes

Defina a fonte com a propriedade font-family. font-family pode especificar uma fonte, recomenda-se fornecer várias fontes alternativas. O navegador tentará essas fontes em ordem de prioridade até encontrar uma fonte disponível adequada. Se o nome da fonte contiver espaços, caracteres especiais ou caracteres chineses, recomenda-se usar aspas. Serviços de fontes web podem ser usados, observe os direitos autorais das fontes.

Exemplo:

1
<p style="font-family: Arial, sans-serif;">hello CSS hello CSS</p>
2
<p style="font-family: Gabriola; ">hello CSS hello CSS</p>

Efeito:

Tamanho

O tamanho da fonte no CSS pode ser definido com a propriedade font-size. Usado para definir o tamanho da fonte do texto. O tamanho da fonte pode ser especificado com valores absolutos ou relativos. Com valores absolutos, o tamanho da fonte é fixo e não muda com a resolução da tela. Unidades absolutas incluem: pixels (px), polegadas (in), centímetros (cm), milímetros (mm), etc. Com valores relativos, o tamanho da fonte é relativo ao tamanho da fonte do elemento pai. Unidades relativas incluem: em, rem, vw, vh, etc. Usar palavras-chave para especificar o tamanho da fonte pode melhorar a legibilidade e a consistência. Palavras-chave incluem: xx-small, x-small, small, medium, large, x-large, xx-large.

Exemplo:

1
body {
2
  font-size: 16px;
3
}

Design responsivo:

• O tamanho da fonte no design responsivo deve ser relativo para garantir uma boa experiência de leitura em diferentes tamanhos de tela e dispositivos.

Acessibilidade:

• Certifique-se de que o tamanho da fonte seja grande o suficiente para atender aos padrões de acessibilidade. Recomenda-se usar pelo menos 16px para o texto do corpo.

Escolha de unidades de fonte:

• Usar unidades relativas (em, rem, %) adapta-se melhor às preferências de tamanho de fonte do usuário no navegador, aumentando a acessibilidade do site.

Configuração da altura da linha:

• Defina a altura da linha conforme o tamanho da fonte para melhorar a legibilidade do texto. Geralmente, a altura da linha pode ser definida entre 1,4 e 1,6 vezes o tamanho da fonte.

Peso

O peso da fonte no CSS pode ser definido com a propriedade font-weight.

• normal: Peso de fonte padrão.
• bold: Fonte em negrito.
• bolder: Mais grossa que o elemento pai.
• lighter: Mais fina que o elemento pai.
• Valores numéricos: Definir o peso da fonte com valores numéricos, normalmente de 100 a 900.

Exemplo:

1
<div style="font-weight: normal;">Peso de fonte padrão</div>
2

3
<div style="font-weight: bold;">
4
    Fonte em negrito
5
    <div style="font-weight: bolder;">Mais grossa que o elemento pai</div>
6
</div>
7

8
<div style="font-weight: 700;">
9
    Fonte em negrito com valor numérico
10
    <div style="font-weight: lighter;">Mais fina que o elemento pai</div>
11
</div>

Efeito:

Estilo

O estilo da fonte no CSS pode ser definido com a propriedade font-style.

• normal: Estilo de fonte padrão.
• italic: Estilo itálico, utiliza o design itálico específico do arquivo de fonte.
• oblique: Estilo oblíquo, semelhante ao itálico. Se o arquivo de fonte não tiver um design itálico específico, força a inclinação da fonte normal.

Exemplo:

1
<div style="font-style: normal;">Estilo de fonte padrão 123 ABC</div>
2
<div style="font-style: italic;">Estilo itálico 123 ABC</div>
3
<div style="font-style: oblique;">Estilo oblíquo 123 ABC</div>

Efeito:

Cor

A cor da fonte no CSS pode ser definida com a propriedade color.

• Nomes de cores predefinidos: por exemplo, red, green, blue, etc.
• Valores de cor hexadecimais: por exemplo, #FF0000, #00FF00, #0000FF, etc.
• Valores de cor RGB, RGBA: por exemplo, rgb(255, 0, 0), rgba(0, 255, 0, 0.5), etc.
• Valores de cor HSL, HSLA: por exemplo, hsl(0, 100%, 50%), hsla(120, 100%, 50%, 0.7), etc.

Exemplo:

1
<div style="color: blue;">Cor da fonte</div>
2
<div style="color: #ff6a00;">Cor da fonte</div>
3
<div style="color: rgba(0, 128, 0);">Cor da fonte</div>
4
<div style="color: rgba(0, 128, 0, 0.5);">Cor da fonte</div>
5
<div style="color: hsla(0, 100%, 50%);">Cor da fonte</div>
6
<div style="color: hsla(0, 100%, 50%, 0.7);">Cor da fonte</div>
7
<div style="color: transparent;">Cor da fonte</div>

Efeito:

Links

No CSS, a propriedade color pode ser usada para definir a cor da fonte dos links (hiperlinks).

Definir cor do link

• a - Definir cor global do link
• a:link - Normal, link não visitado
• a:visited - Link já visitado pelo usuário
• a:hover - Quando o usuário passa o mouse sobre o link
• a:active - O momento em que o link é clicado

Exemplo:

1
/* Link global */
2
a {
3
  color: #3498db; /* Azul */
4
}
5

6
/* Link não visitado */
7
a:link {
8
    color: #3498db; /* Azul */
9
}
10

11
/* Link visitado */
12
a:visited {
13
    color: #884dff; /* Roxo */
14
}
15

16
/* Link ao passar o mouse */
17
a:hover {
18
    color: #ff6600; /* Laranja */
19
}
20

21
/* Cor do link ao clicar */
22
a:active {
23
    color: #ff0000; /* Vermelho */
24
}

Definir sublinhado do link

Exemplo:

1
a {
2
    text-decoration: none; /* Remover sublinhado */
3
}
4

5
a:hover {
6
    text-decoration: underline; /* Mostrar sublinhado ao passar o mouse */
7
}