DEV Community

Marina
Marina

Posted on

2

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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (2)

Collapse
 
fhmurakami profile image
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. :)

Collapse
 
marimnz profile image
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! :)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay