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

Comments

[Felipe Murakami]

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

Pensei muito sobre isso antes de começar a tentar escrever alguns artigos. Mas acho que o ponto de vista de cada pessoa é diferente e a forma como abordamos o assunto pode ajudar alguém que está tendo dificuldade de assimilar algum conteúdo. Além de contribuir para os seus estudos, pois uma das formas mais eficazes de se aprender algo é tentando explicar para alguém. :)

Em comparação com conteúdos em inglês, os conteúdos em português são bem escassos. E segundo estudos do British Council apenas 5% da população brasileira fala inglês e desses 5%, apenas 1% é fluente.

Dito isso, acredito que você deveria, sim, continuar trazendo conteúdo, independente do assunto. :)

[Marina]

Concordo totalmente sobre os pontos de vista! Eu trago para cá normalmente minhas anotações da faculdade, ainda tentando passar de uma forma mais didática do que apenas jogar informações, mas o ponto é que esse justamente meu ponto de vista sobre um conteúdo que me foi passado de outra maneira, e que talvez algum leitor entenda e crie outra forma de anotação.
De toda forma, muito obrigada pelo incentivo, fico muito feliz de receber um certo feedback assim! :)