HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Fonte e Texto

Propriedades font / text

As propriedades da fonte e texto definem aspectos estilísticos, permitindo controlar as cores, aumentar ou reduzir o espaço entre os caracteres, alinhar o texto, escolher o tipo de letra, decorá-lo, etc.

color - Define a cor do texto de um elemento

Valores válidos para cores em CSS
1-)   Código Hexadecimal -  Nesta forma utilizam-se 3 pares de dígitos hexadecimais (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)  que definem as quantidades de vermelho, verde e azul para compor uma determinada cor. O valor mais baixo de uma determinada cor é 00 na notação hexadecimal usada em CSS e o valor mais alto é FF. Assim, a cor preta (ou ausência de cor) tem 00 de vermelho, 00 de verde e 00 de azul e é expresso da seguinte forma: #000000. Já o branco (ou mistura de todas as cores) tem FF de vermelho, FF de verde e FF de azul sendo expresso como #FFFFFF.
É possível formar o código utilizando apenas 3 dígitos (notação abreviada) - exemplo: #F3A. Na notação abreviada cada um dos 3 dígitos é dobrado automaticamente pelo navegador (#FF33AA).

2-) Código RGB - r, g e b são abreviações de red (vermelho), green (verde) e blue (azul) respectivamente. O código rgb é expresso da seguinte forma:
rgb(X, Y, Z), onde X, Y e Z  assumem valores de 0 (zero) a 255 ou percentagens de 0% a 100%.
Exemplos:
rgb(0,50,255)
rgb(0%,30%,100%)

3-) Nome da cor - os nomes das 17 cores válidos são os listados nas recomendações CSS do W3C.
 

Orange                                                                            #FFA500
Aqua
#00FFFF

 
Black
#000000

 
Blue
#0000FF

 
Fuchsia
#FF00FF
Green
#008000

 
Gray
#808080

 
Lime
(#FF00FF)

 
Maroon
#800000
Navy
#
000080

 
Olive
#808000

 
Purple
#800080

 
Red
#FF0000
Silver
#C0C0C0

 
Teal
#008080

 
White
#FFFFFF

 
Yellow
#FFFF00

Além destes nomes de cores existem muitos outros que não são definidos pelos padrões do W3C mas são suportados pelos navegadores. Clique aqui para ver uma tabela mais completa de cores.

Cuidados a serem considerados ao escolher cores:

1- Apesar do fato de que praticamente todos os monitores de computador atualmente apresentem mais de 16 milhões de cores diferentes, deve-se considerar que alguns dispositivos móveis (telefones, PDAS etc..) em regra possuem paletas bastante reduzidas. Alguns conseguem mostrar apenas 256 cores, outros 4096 e outros 65536. Se desejar que as páginas sejam vistas de forma aceitável nestes dispositivos é aconselhavel usar a tabela de cores WEBSAFE para todos os browsers e plataformas.

2- Ao escolher uma cor é bom observar o simbolismo que ela exerce sobre a psique humana. Clique aqui para saber mais sobre Legibilidade e Psicologia e ver tabela que associa sensações positivas e negativas as cores.

font-family - Seleciona o tipo da fonte.
Arial, Courier, MS Sans Serif, Times New Roman, Verdana, etc.

A propriedade font-family poderá consistir numa lista com os tipos de letra na qual o navegador deverá selecionar para escrever o texto. Assim sendo, se a primeira da lista não estiver presente no computador do usuário o navegador busca a segunda da lista e assim sucessivamente até o primeiro tipo que conseguir encontrar. Na ausência de todas da lista usará o tipo de fonte padrão do sistema do usuário.

Existem duas classes de valores que podem ser usados com a propriedade font-family:

family-name: O nome da família, como "times", "courier", "arial", etc.
generic-family: O nome genérico, como "serif", "sans-serif", "cursive", "fantasy", "monospace".

Os valores dados à propriedade font-family devem ser separados por virgulas.

Sintaxe: font-family: Arial, courier, serif
exemplo: p { font-family: Arial, courier, serif }

Se o nome da fonte for composto (Times New Roman), usar aspas duplas no nome: "Times New Roman"
Se estiver definindo em um atributo onde as aspas duplas já estão presentes usar aspas simples:
exemplo: <span style="font-family: 'times new Roman'">

Embora existam inúmeros tipos de letra, é aconselhável que uma página apenas utilize o Arial, Verdana ou o Times New Roman, visto que com outros tipos de letras existe a possibilidade do visitante da página não ter essa fonte instalada no computador.

font-size - Muda o tamanho absoluto ou relativo da fonte.

1 - Absolutos - não dependem de nenhum outro elemento
a) com palavras chaves:
xx-small - Muito pequeno 2
x-small  - Muito pequeno 1
small  - Pequeno.
medium  - Médio
large  - Grande
x-large  - Muito grande 1
xx-large  - Muito grande 2

b)  Expressos com medidas css:
basicamente em pixels (px) e pontos (pt).

2 - relativos - os que tomam por base um outro elemento
smaller  - Seleciona o tamanho de letra abaixo daquele que se estava  usando
larger  - Seleciona o tamanho de letra acima daquele que se estava  usando
%  - Define o tamanho de letra como uma percentagem daquele que se estava  usando

exemplos:
p { font-size: 13px }
div.titulo { font-size: 50% }
#div1 { font-size: large }
h2 { font-size: 1.3em }

font-style - Seleciona o estilo da fonte.
italic  - Italico.
normal  - Normal.
oblique  - Obliquo.

font-weight - Define a espessura das fonte.
bold  - Negrito
normal  - Define caracteres normais
100 a 800  - Define a espessura do traço com que são desenhados os caracteres.100 (mais fino) e 800 (mais espesso). O valor normal é 400. 700 equivale a bold.

font-variant - Variação de tamanho das fontes caixa alta.
normal  - Normal.
small-caps  - Caixa alta pequena.

Fonte incorporada
Utilizando as fontes incorporadas, o visitante do site fará o download e a instalação da fonte utilizada caso ele não a tenha em seu micro. Isto acaba com o problema do html, que só reconhece fontes instaladas na maquina do cliente. A sintaxe para incorporação é a seguinte:
Exemplo:
@font-face { font-family: nome_da_fonte; font-style: estilo_da_fonte; font-weight: espessura_da_fonte; src: url_da_fonte }
 

letter-spacing - Define um espaço entre as letras.
Unidade de medidas: pixels (px), pontos (pt) ou qualquer medida válida em css.

text-align - Utilizado para o alinhamento de parágrafos.
Só funciona em elementos que definam parágrafos, como <P>, <H1>, <H2>, <BLOCKQUOTE> e <UL>.
left  - Pelo lado esquesdo.
center  - Pelo centro.
right  - Pelo lado direito.
justify  - Justificado.

text-decoration - Decoração do texto
none  - Nenhum.
underline  - Sublinhado.
overline  - Sobrelinha.
line-through  - Riscado.

text-indent - Cria um parágrafo no início do texto.
Unidade de medidas: pixels (px), pontos (pt) ou qualquer medida válida em css.

text-transform - Transformação do texto.
capitalize  - Converte a primeira letra de cada palavra em maiúscula.
lowercase  - Converte todo o texto em letras minúsculas.
uppercase  - Converte todo o texto em letras maiúsculas.

white-space - Gerencia como o navegador deve tratar os espaços em branco no código fonte.
normal - É a condição padrão e corresponde ao texto com apenas um espaço entre as palavras.
pre - Mantém os espaços em branco entre as palavras no código fonte.
nowrap - Elimina a quebra de linha, apresentando TODO o texto em uma única linha, a menos que se insira uma quebra de linha com a tag <BR>.

word-spacing - Altera o espaço entre as palavras.
Unidade de medidas: pixels (px), pontos (pt) ou qualquer medida válida em css.

Line-height - Define o espaço entre linhas.
O espaço é definido pela distância entre a base das linhas de um texto. O valor default é 100% do tamanho da letra utilizada.
normal  - Define um valor razoável para a distância entre as linhas
%  - Define a distância como uma percentagem do tamanho de letra utilizada
número - Número que será multiplicado pelo tamanho da letra utilizada a fim de estabelecer o valor da entrelinha
comprimento: Define um valor fixo, pt (pontos),  px (pixéis), etc.