Minicursos - CSS

Propriedades de Texto


Agora que já vimos as unidades, os seletores, herança e os estilos de folhas, vamos começar a falar um pouco sobre as propriedades relacionadas às formatações dos textos. A tabela abaixo mostra algumas propriedades bastante importantes e os valores que podem ser atribuídos a elas.

Propriedade Breve Descrição Exemplo de Valores Aceitáveis
     
font-size Altera o tamanho da fonte Pode aceitar qualquer número seguido de uma das unidades já discutidas, como, por exemplo, 20px
font-family Define qual fonte será usada para exibição dos textos. Você pode selecionar mais de uma, seguida por vírgula. Dessa forma o navegador vai procurando uma a uma, da esquerda para a direita, até encontrar uma fonte que o usuário possua. Se não encontrar, ele utiliza uma fonte padrão, que varia de navegador para navegador. Georgia, "Times New Roman", Times, serif
font-weight Aplica negrito às letras Normal, bold, bolder, lighter
font-style Formata o texto de modo itálico. Normal, italic, oblique
text-decoration Modifica os textos, inserindo sublinhados, riscados, linha superior e texto piscando. Underline, overline, blink, line-through
text-transform Pode inserir ou remover caracteres maiúsculos Uppercase, lowercase
text-indent Provoca recuo no texto Qualquer valor numérico seguido de uma das unidades já discutidas, como, por exemplo, 30px ou 2em.
text-align Define o alinhamento do texto. Center, justify, left, right


Existem também algumas propriedades que interferem diretamente no texto, que são:

Line-Height = Determina a espessura da linha.

Vou colocar alguns exemplos de sua utilização, já aproveitando para demonstrar outros parâmetros, mas vou colorir a linha, para ficar fácil visualizar.

Vertical-align = Define o alinhamento vertical do texto. É bastante útil caso você esteja usando uma tabela ou um parágrafo cuja dimensão da linha seja muito maior do que o tamanho da fonte. No entanto, para que esse parâmetro funcione corretamente é necessário tomar cuidado com alguns detalhes. Vejam alguns exemplos:

Vertical Align CSS

Apesar de o comando estar direcionando o posicionamento para cima, o texto apareceu no meio da linha. Isso acontece porque o único parâmetro que define a espessura desse parágrafo é a própria espessura da linha e, por padrão o navegador sempre posicionará o texto no meio da linha. Existem algumas alternativas para se contornar isso. Vou citar as duas: a primeira é criar outro parâmetro que determine um valor maior para o parágrafo, para que a linha fique contida nele. Para isso vamos usar o parâmetro height, que determina a altura de um objeto.

Vertical Align CSS

Percebam que o texto permaneceu centralizado em relação à linha onde está inserido, mas essa linha foi deslocada para cima, graças ao parâmetro height:200px;

Se reduzirmos o tamanho da linha para um tamanho igual ou próximo ao tamanho da fonte, o texto aparecerá posicionado na parte superior, vejam:

Vertical Align CSS

Outra alternativa seria usarmos um parâmetro chamado de display: table-cell; Ele faz com que o navegador enxergue o parágrafo como se fosse uma célula de uma tabela. Dessa forma o texto pode ser alinhado sem que seja necessário inserir o parâmetro line-height, vejam:

Vertical Align CSS

Nesse exemplo não existe o parâmetro que determina o tamanho da linha e, apenas para diferenciar, desloquei o texto para baixo, com o valor bottom.

Para explicar a função do vertical-align acabei tendo que falar do height e um pouco do display, mas como vocês puderam perceber, tudo é bastante simples.


Word-spacing = Define o espaço que o navegador colocará entre uma palavra e outra.

Exemplos de utilização:
h2 {word-spacing: 1.8em;}
p {word-spacing: 80px;}

Word Spacing CSS

Letter-spacing = É o espaço entre cada uma das letras das palavras. Essa propriedade, assim como a word-spacing, aceita qualquer uma das unidades já vistas.

Exemplos:
h2 {letter-spacing: 1.2em;}
p {letter-spacing: 0.4cm;}

Letter Spacing CSS

A curiosidade é que ela aceita valores negativos, que provocarão a sobreposição de letras. Vejam abaixo um espaçamento negativo de 2px.

p {letter-spacing: -2px;}


Letter Spacing CSS

Na sequência veremos as propriedades de listas



Algumas notícias

As memórias DDR5 estão chegando e trarão muitas melhorias

A próxima geração de memórias RAM já possui especificações definidas e promete grande melhoria em relação às atuais DDR4. E o mais importante: mesmo com desempenho bastante superior, elas consumirão menos energia. A tensão de trabalho das memórias DDR5 será de apenas 1.1V contra os 1.2V das atu...

Ler Notícia Completa

Google Chrome consumirá menos memória RAM em breve

O navegador da gigante de buscas da Internet é, sem dúvida, um dos melhores disponíveis, mas é inegável que o consumo de memória RAM por parte dele é exagerado. Este problema já se estende por anos, mas parece que em breve ele terá uma solução. Um novo recurso do Windows 10, chamado SegmentHeap...

Ler Notícia Completa

Sites e vídeos sem propagandas? Sim, é possível através da exploração de uma falha!

Seguramente você já se deparou com sites que bloqueiam o conteúdo da página e te obrigam a assinar determinado serviço para ler o conteúdo, certo? Ou foi tentar assistir aquele vídeo e as propagandas em tela cheia não pararam de surgir. Bem, todos já nos deparamos com isso, no entanto, um bug de...

Ler Notícia Completa

Inteligência Artificial cria antibiótico super potente

Pesquisadores do MIT (EUA) identificaram um novo e poderoso composto antibiótico usando um algoritmo de aprendizado de máquina, uma técnica de inteligência artificial. Em testes de laboratório, a droga matou algumas das bactérias causadoras de doenças mais problemáticas do mundo, incluindo algu...

Ler Notícia Completa

Google lança programa para capacitar profissionais brasileiros e com direito a bolsas

O Google iniciou nesta terça-feira (17) o Certificado Profissional de Suporte em TI para brasileiros. Trata-se de um curso desenvolvido pela gigante de tecnologia em parceria com a Coursera. Inicialmente, o módulo de ensino foi anunciado a um valor de US$ 39 por mês. Entretanto, sofreu uma redu...

Ler Notícia Completa
Você gostará destes vídeos!