Estruturas de estilização CSS -pt.2

Prefácio

Sobre as aulas que tive a respeito das estruturas CSS (QUE TEM ANOTAÇÕES SEM FIM!!), ficou faltando apenas comentar a respeito das estruturas de fontes, textos e algumas configurações sobre sombras, mas não vou me aprofundar.

PS: É muito clichê trazer conteúdo de estudo e ainda mais sobre desenvolvimento web que está tão sobrecarregado ultimamente?

---

Fontes

Quais tipos de fontes utilizamos?

• Serif: Fontes serifadas
• sans-serif: Sem serifa
• monospace: Letras com largura fixa
• hadwriting: Manuscritas, com aparência a caligrafia humana
• fantasy: Fontes decorativas

Configurações de fonte

• font-family: Determina quais serão as fontes que o elemento deve ter
• font-size: Determina o tamanho da fonte
• fonte-weight: Espessura da fonte
• font-style: Estilo da fonte (italic, oblique, normal, bold)
• font-variant: Maiúscula e minúscula
• font-stretch: Estreitamento do texto
• line-height: Altura da linha

Fontes importadas / personalizadas

• @font-face: Fonte personalizada
• @import: Importar fontes externas

Google fonts contém uma vasta galeria de fontes personalizadas

---

Textos

text-alingn: Alinhar os textos em um elemento
text-ident: Recuo na linha
letter-spacing: Espaçamento entre cada caractere
word-spacing: Espaçamento entre cada palavra

text-transform: Definir quais caracteres vão estar em maiúsculo ou minúsculo:

1. capitalize: Primeira letra maiúscula
2. uppercase: Todo o texto em maiúsculo
3. lowercase: Tudo minúsculo

text-decoration: Adiciona ou apaga linhas:

1. none, underline, line-through, overline
2. line, style, color, thikness

white-space: Arruma os espaços em branco:

1. normal: Os espaços são combinados em apenas 1 quebra de linha ignorada
2. nowrap: Sem quebra de linha e espaço
3. pre: Preserva o espaço em branco
4. pre-line: Sem espaço, permite quebra de linha
5. pre-wrap: Espaços preservados com quebra de linha
6. break-spaces: Quebra os espaços para a próxima linha

word-break: Definem o quanto o texto deve ter uma quebra de linha

1. normal
2. break-all/keep-all

writing-mode: Define a orientação do texto

1. horizontal-tb
2. vertical-rl
3. vertical-lr

---

Sombras

box-shadow: Sombra em caixa
drop-shadow (filter): Sombra em PNG
text-shadow: Sombra no texto

opacity: Transparência variando de 0 a 1