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






Propriedades

COLOR

A propriedade color define a cor do texto de um elemento.

Exemplo


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.




FUNDO DOS ELEMENTOS

A propriedade background permite controlar a cor de fundo de um elemento, usar uma imagem como fundo, repetir a imagem de fundo verticalmente e horizontalmente, posicionar a imagem dentro da página.

background-color
Define a cor de fundo de um elemento.

Exemplo


background-image
Define uma imagem de fundo na página, parágrafo ou texto.
url Indica o endereço do arquivo de imagem

Exemplo

background-attachment
Determina se a imagem de fundo deve permanecer fixa na janela do navegador  ou se rola com o conteúdo.
fixed - fixa a imagem de fundo.
Scroll - acompanha o conteúdo quando rolamos a janela

Exemplo

background-repeat
Estabelece se a imagem deverá ser repetida e em qual direção.
no-repeat É posicionada no canto superior esquerdo.
repeat-x A imagem irá se repetir na horizontal.
repeat-y A imagem irá se repetir na vertical.

background-position
Determina uma posição onde a imagem de fundo deve aparecer.
top left Topo e esquerda
top center
Topo e centro
top right
Topo e direita
center left
Centro e esquerda
center center
Centro e centro
center right
Centro e direita
bottom left
Pé e esquerda
bottom center
Pé e centro
bottom right
Pé e direita
Se omitir os dois valores acima a imagem será posicionada no canto superior esquerdo, e caso se omita apenas um valor o outro será definido por padrão como center
x% y% Horizontal e vertical em percentagem. 0% 0% corresponde ao canto superior esquerdo e 100% 100%
             ao canto inferior direito
x y
Horizontal e vertical em pixels (px) ou outra medida definida em CSS. É permitido misturar posições
      absolutas com  percentuais. Se definir apenas um valor o navegador definirá o outro em 50%.

Exemplo

background
Permite escrever de forma abreviada numa só declaração todos os parâmetros relativos ao fundo de um elemento.

Exemplo


BORDAS

border
Define uma borda que irá envolver o elemento.

Em algumas versões de navegadores as propriedades abaixo assim como a propriedade border-width não são aplicadas corretamente quando usadas isoladamente. Para evitar este fato devemos definir primeiro um valor para a propriedade border-style.

Borda base.
border-bottom-color Cor da borda base.
border-bottom-style Estilo da borda base.
border-bottom-width Largura da borda base.

Borda esquerda.
border-left-color Cor da borda esquerda.
border-left-style Estilo da borda esquerda.
border-left-width Largura da borda esquerda.

Borda direita.
border-right-color Cor da borda direita.
border-right-style Estilo da borda direita.
border-right-width Largura da borda direita.

Borda topo.
border-top-color Cor da borda topo.
border-top-style Estilo da borda topo.
border-top-width Largura da borda topo.

Exemplo

border-color A propriedade border-color define a cor das quatro linhas da borda.
Ela aceita no mínimo uma cor e no máximo quatro cores.
Exemplos:
table { border-color: red } todas as quatro linhas da borda serão vermelhas (red)
table { border-color: red green } as linhas  do topo e da base serão vermelhas e as linhas esquerda e direita serão verdes
table { border-color: red green blue } a linha de topo será vermelha, as linhas esquerda e
direita serão verdes e a linha da base será azul
table { border-color: red green blue yellow } a linha de topo será vermelha, a linha direita será
verde, a linha da base será azul e a linha da esquerda será amarela.

border-width
notação abreviada para definir a largura das quatro linhas da borda em uma única declaração
thin Fina.
medium Média.
thick Grossa.
px Determina a espessura em pixels
color Especifica a cor do texto.

border-style
define o estilo das quatro linhas da borda em uma única declaração e pode assumir quatro valores diferentes.
Exemplo:
table {border-style: dotted} todas as quatro linhas da borda serão pontilhadas
table {border-style: dotted dashed} as linhas do topo e da base serão pontilhadas e as linhas esquerda e direita
serão tracejadas
table {border-style: dotted dashed solid} a linha de topo será pontilhada, as linhas
esquerda e direita serão tracejadas e a linha da base será sólida
table {border-style: dotted dashed solid double} a linha de topo será pontilhada, a linha direita
será tracejada, a linha da base será sólida e a linha da esquerda será dupla

solid Sólida.
dashed Tracejada.
dotted Pontilhada.
double Dupla.
groove Entalhada.
ridge Eriçada.
inset Baixo relevo.
outset Alto relevo.
none Sem borda.
Click aqui para visualizar estilos de borda

Modo abreviado para declarar uma regra para as propriedades das bordas (border-width, border-style e border-color)
Para declarar as três propriedades das bordas  em uma regra única a sintaxe geral é:
border: size style color; em qualquer ordem.
Exemplo:
p { border: thin dotted #00FF00 }
Nota: Esta notação afeta todas os quatro lados da borda.
 

Exemplo

border-collapse
collapse Borda em alto relevo refinada.

  TABELA PADRÃO
     
 <table border="1">
   
   
     
TABELA COM COLLAPSE
    
  <table style="BORDER-COLLAPSE: collapse" border="1">
    
    
    


TEXTO

font
forma abreviada para definir numa única declaração todas as propriedades relativas ao tipo de letra

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".

Nota: Os valores dados à propriedade font-family devem ser separados por virgulas. Como precaução escreva sempre como última opção um nome genérico (generic-family).

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:
<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 (pt) 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 da fonte.
extra-bold Extra negrito
bold Negrito
semi-bold Semi negrito
medium Médio
semi-light Semi leve
light Leve
extra-light Extra leve

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

Exemplo

letter-spacing
Define um espaço entre as letras.
Unidade de medidas: pt Pontos,  px Pixels, etc.

Exemplo

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
Altera o atributo 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: pt Pontos,  px Pixels, etc.

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.
normal - É a condição padrão e corresponde ao texto com apenas um espaço entre as palavras.
pre - Mantem 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: pt Pontos,  px Pixels, etc.

Exemplo

writing-mode + filtro fliph & flipv
técnica para orientar o modo de escrita .

Exemplo:
<SPAN STYLE="writing-mode:tb-rl; filter:flipv fliph; color:#ff0000; font-size:12px"> este efeito se consegue usando o código acima</SPAN>
Resultado: este efeito se consegue usando o código destacado em vermelho acima
Acrescentando esta definição white-space:nowrap  o texto será apresentado em uma única linha vertical.


EFEITOS EM TEXTOS DE LINKS

Cada um dos 4 estados poderá ser estilizado por regras CSS aplicadas em 4 pseudo-elementos, conforme mostradas abaixo:

a:link Cor do link quando a página é carregada no navegador do usuário
a:visited Altera a cor do texto dos links já clicados por um visitante do site.
a:hover Altera a cor do texto de um link quando um visitante coloca o mouse sobre o mesmo.
a:active
Altera a cor do texto de um link quando um visitante do site clica nele.
exemplo:
a:link { color: #FF0000 }   -   link ainda não visitado
a:visited { color: #00FF00 }   -  link já visitado
a:hover { color: #FF00FF }   -  link com mouse sobre
a:active { color: #0000FF }   -   link selecionado

A seqüência acima é a recomendada e adotada em projetos CSS para links, pelos seguintes argumentos:
a: link é o estado inicial dos links, portanto deverá ser a primeira declaração
a: active deverá acontecer mesmo em links já visitados, portanto deverá ser declarado depois de a:visited
a: hover não precisa funcionar em a:active, então a:active pode ser declarado depois de a:hover.

Outra justificativa para a ordem acima é baseada na parte CASCADING do CSS, isto é, a prioridade sempre se dará na seqüência de cima para baixo. Este regra garante que o segundo estilo tem maior prioridade que o primeiro estilo, porém tem menor prioridade que o estilo que for definido à seguir.
Pelo exposto acima, nunca use o estado HOVER antes do VISITED, pois assim sendo, o estado HOVER não será mais visto após a primeira visita.

Exemplo


TAMANHO - MARGEM - POSICIONAMENTO

Line-height
Define a distancia 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 usado
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 Pixels, etc.
Obs: se não quiser aplicar a regra a todos os elementos crie classes e aplique aos elementos desejados

Exemplo

Margin
Permite controlar o espaçamento entre os elementos.
margin-bottom Define uma margem da base.
margin-left Define uma margem esquerda.
margin-right Define uma margem direita.
margin-top Define uma margem de topo.
margin Maneira abreviada para definir todas as propriedades relativas às quatro margens de um elemento.
Valores possíveis:
auto Determinado automaticamente pelo Navegador.
comprimento Define um comprimento fixo (dado em px, pt, pc, cm, etc.)
%
Define o comprimento da margem como uma percentagem da altura do documento (para bottom e top) ou como uma percentagem da largura do documento (para left e right.).

Exemplo

Overflow
Define o que ocorre quando o conteúdo de um elemento excede a sua área
visible
hidden
scroll
auto

Exemplo

padding
Cria um espaçamento entre o conteúdo e as suas quatro bordas.
padding-bottom Espaço entre o conteúdo e a borda da base.
padding-left Espaço entre o conteúdo e a borda esquerda.
padding-right Espaço entre o conteúdo e a borda direita.
padding-top Espaço entre o conteúdo e a borda do topo.
Valores válidos:
comprimento
%

Exemplo

position
Posicionamento de objetos.
A ordem de colocação dos elementos numa página consiste em desenhá-los à medida que eles vão surgindo. Este método é designado por posicionamento relativo.

No posicionamento absoluto os elementos de bloco podem ser colocados em qualquer local da página podendo, inclusive, sobreporem-se. Tudo se passa como se a página fosse uma mesa na qual podemos sobrepor camadas de filmes transparentes. A hierarquia de sobreposição obedece a regra geral, isso é, os objetos definidos por último irão sobrepor os anteriores.

absolute O posicionamento é definido pelas margens superior e esquerda da tela
relative A referência é o canto superior esquerdo da tela e o ponto que ocupa a posição definida é o canto superior esquerdo do elemento posicionado.
Static O posicionamento é definido pelo próximo espaço disponível no canto esquerdo da tela.

Exemplo

vertical-align
Alinhamento vertical de objetos em relação ao texto
baseline Alinhamento pela base.
bottom 
middle Alinhamento pelo meio.
percentage Especifica uma porcentagem vertical no alinhamento.
sub Cria um texto sub-escrito.
super Cria um texto sobre-escrito.
text-bottom< br> text-top
top Alinhamento pelo topo.

Exemplo

width e heigh
Define a largura e altura do objeto.
Unidade de medidas: pt Pontos,  px Pixels, etc.

Exemplo

z-index
Define uma hierarquia na sobreposição dos objetos.

Exemplo


CURSOR

A) Alterar o formato do cursor ao passar sobre um link.

Basta acrescentar ao comando HREF o parâmetro STYLE="cursor:tipo"
Exemplo: <a href="kithomepage.com" STYLE="cursor:help">kithomepage</a>

Valores:
help Interrogação.
crosshair Cruz.
default Padrão
hand Mão padrão.
move Cruz com setas.
n-resize Seta para o norte.
ne-resize Seta para o nordeste.
e-resize Seta para o leste.
se-resize Seta para o sudeste.
s-resize Seta para o sul.
sw-resize Seta para o sudoeste.
w-resize Seta para o oeste.
nw-resize Seta para o noroeste.
text Inserção.
wait Ampulheta.
progress Tempo progressivo
not-allowed Acesso proibido
no-drop
all-scroll
col-resize
row-resize
url(.......) Endereço de um arquivo

B) Alterar o formato do cursor sem criar link.
Basta acrescentar o parâmetro STYLE="cursor:tipo"

Exemplo:

<h4 style="cursor: wait">Ampulheta</h4>


Para estilizar o cursor em uma página insira o código a seguir entre as tags Head alterando o endereço do cursor.
<STYLE TYPE="text/css">
body {cursor:url(endereçodocursor.cur)}
</STYLE>

Para inserir uma imagem que segue o cursor:
1) Insira o código a seguir na seção Head
<script type="text/javascript">
function cursor()
{
trail.style.visibility="visible"
trail.style.position="absolute"
trail.style.left=event.clientX+10
trail.style.top=event.clientY
}
</script>

2) Cole dentro da tag Body o evento: onmousemove="cursor()"

3) Cole a linha a seguir na seção Body, alterando o endereço da image.gif
<IMG ID="trail" STYLE="visibility:hidden" SRC="endereçoimage.gif">


BARRA DE ROLAGEM COLORIDA

Os códigos das cores devem seguir as orientações dos valores válidos.

<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX;
scrollbar-3dlight-color: #XXXXXX;
scrollbar-darkshadow-color: #XXXXXX;
scrollbar-shadow-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
scrollbar-track-color: #XXXXXX;
}
-->
</STYLE>

 


Valores Normalmente Usados em Cascading Style Sheets

pt
pc in
cm
mm
px
%
em
ex

 ponto - (1/72 in) medida tipográfica destinada essencialmente para definir as diversas fontes
 pica - 1 pc é o mesmo que 12pt
 polegada - medida do sistema métrico americano
 centímetro
 milímetro
 pixel - unidade de medida ideal para o monitor, é a mais usada e de fácil compreensão
 porcentagem - em relação a outro valor de mesma natureza
 altura da fonte do elemento - 1 em é igual ao tamanho do tipo de fonte que está sendo usado
 1 ex é igual à altura da letra "x" no tipo de fonte que está sendo usado

Obs: não deixe espaço entre o valor e a unidade de medida pois alguns navegadores não saberão interpretar corretamente a medida expressa dessa forma. Ex: o correto é 15px e não 15 px
Quando o valor for zero não é necessário indicar a unidade de medida