SdevLab – Tutorial | CSS Text

Fala galera!

O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre CSS. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, visite esta página!

Boa leitura!

ATUALIZAÇÃO (14/08/2015): Este post foi escrito com base nos tutoriais do W3C para CSS (se não me engano, esta versão é a primeira que tinha no W3C (CSS 1), ou seja, veio antes do CSS 2.1). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de CSS 2.1 ou CSS 3, logo não é mais válido. Vale lembrar que o conteúdo ainda é válido, só não é a versão mais nova!

CSS Text

As propriedades de text definem as características que os textos de nossas páginas podem assumir. Segue abaixo a tabela com as possibilidades:

Propriedade Descrição Opções
color cor do texto
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green…etc
letter-spacing espaçamento entre letras
  1. normal: é o espaçamento default
  2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) São válidos valores negativos
word-spacing espaçamento entre palavras
  1. normal: é o espaçamento default
  2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) São válidos valores negativos
text-align alinhamento do texto
  1. left: alinha o texto a esquerda
  2. right: alinha o texto a direita
  3. center: alinha o texto no centro
  4. justify: força o texto a ocupar toda a extensão da linha da esquerda a direita
text-decoration decoração do texto
  1. none: nenhuma decoração
  2. underline: coloca sublinhado no texto
  3. overline: coloca um sobrelinhado no texto
  4. line-through: coloca uma linha em cima do texto
  5. blink: faz o texto piscar
text-indent recuo do texto
  1. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
  2. % : porcentagem da largura do elemento pai
text-transform forma das letras
  1. none: texto normal
  2. capitalize: todas as primeiras letras do texto em maiúsculas
  3. uppercase: todas as letras do texto em maiúsculas
  4. lowercase: todas as letras do texto em minúsculas
direction direção do texto
  1. ltr: texto escrito da esquerda para a direita
  2. rtl: texto escrito da direita para a esquerda
white-space como o browser trata os espaços em branco
  1. normal: os espaços em branco serão ignorados pelo browser
  2. pre: os espaços em branco serão preservados pelo browser
  3. nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <br>

O exemplo mostra um pouco do que a propriedade text e seus atributos podem fazer. Salve o exemplo e teste no navegador:

<html>
<head>
<style type="text/css">
<!--
p {
color: rgb(0,0,255);
letter-spacing: 1.2em;
word-spacing: 80px;
text-align: left;
text-decoration: underline;
}
-->
</style>
<title>Teste 5</title>
</head>
<body>
<p>Exemplo blablabla.</p>
</body>
</html>

Teste as outras possibilidades, de preferência juntando com o que foi apresentado no tutorial das tags font.
Até a próxima!

xD

Fonte de pesquisa: maujor.com

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-css1
Contribua!

2 comentários sobre “SdevLab – Tutorial | CSS Text

  1. Pingback: Tutorial CSS básico – Margin « Sanoj's devLab
  2. Pingback: SdevLab – Curso | Aprenda CSS 1 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s