10/04/2013

Conhecendo o CSS - Cores e Fundos (Porcentagens em RGB)


Você também pode usar porcentagens de vermelho, verde e azul. Em 0% o valor é
preto e em 100% o valor é branco. Observe o exemplo que se segue:

color: rgb(50%, 100%, 30%);

Nesse caso a cor aplicada será um verde brilhante.


04/04/2013

Conhecendo o CSS - Cores e Fundos (Valores RGB)


Outro meio de representação de cor no CSS está em usar os próprios valores de
RGB. Estes podem ser encontrados em um programa como o Agave Free.




Clique em Agave para download.


03/04/2013

Conhecendo o CSS - Cores e Fundos (Abreviações em HexaDecimais)


Abreviações em hexadecimal permite a você encurtar qualquer cor hexadecimal
que tenha valores pares. Isto significa que cada valor de RR, GG, BB têm de ser as
mesmas, tais como: #00CC33 ou #888888. Na abreviação em hexadecimal, você toma
um dígito de cada valor par, de modo que o resultado seria #0C3 e #888. Em um caso
como o do #808080, os valores não estão emparelhados, portanto você não pode fazer a
abreviação. Exemplo:

body {color: #FC9; background-color: #808080;}

a {color: #6C3;}


Obs.:
Você pode usar a abreviação hexadecimal em qualquer documento CSS, mas não em um conteúdo HTML.

02/04/2013

Conhecendo o CSS - Cores e Fundos (Cores HexaDecimais)


Para usar bem as cores no CSS, você precisa saber das diversas maneiras que
uma cor pode ser definida. Embora uma cor possa ser aplicada usando qualquer número,
existe uma sequência de valores e opções que você precisa saber.



Hexadecimal (hex) é um sistema básico de 16 números, sendo muito útil em
computadores pois 8 bits (1 byte na memória) pode ser representado por um único
número ou letra. O sistema usa os números de 0 a 9 e as letras de a a f em qualquer
combinação de seis elementos (começando primeiro com #) para representar uma
correlação com o vermelho, verde e azul (#RRGGBB).

#FFFFFF = 255, 255, 255 = white

Qualquer combinação hexadecimal é permitida no HTML e CSS para representar
uma cor. Exemplo:

body {color: #000000; background-color: #FF99FF;}

a {color: #66CC33;}

Se você aplicar esses estilos a um documento, a cor de fundo seria rosa, o texto
cor preto, e no link a cor verde brilhante.

01/04/2013

Conhecendo o CSS - Aplicando CSS a um documento HTML


Você pode aplicar CSS a um documento de três maneiras distintas. Os três métodos de aplicação estão exemplificados a seguir.

Interno (a tag style)


Quando estamos usando estilos internos, nós simplesmente colocamos o nosso CSS dentro das tags <head></head> do nosso código (x) HTML. Abaixo temos um exemplo:

<html>
<head>
<title></title>
<style type="text/css">
"Aqui você coloca o CSS"
</style>
</head>
<body>
</body>
</html>

Nesse método cada página (x) HTML terá seu respectivo código CSS para a formatação da página. Esse método é ideal para aqueles sites de uma página ou para quem está iniciando no assunto.


Estilos In-line


Os estilos in-line são definidos ao longo do elemento (x)HTML que você
denominou: <p style="color: #ffffff;"> Esse parágrafo terá a cor branca</p>
As desvantagens de se usar estilos in-line é que você só poderá fazer alterações
nos elementos que você formatou.


Utilizando estilos externamente

O que muda aqui é que você criará um arquivo com a extensão .css e colocará em
seu (x) HTML uma chamada para esse arquivo. Ficando da seguinte forma:

<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />

Ou também utilizando o método @import:

<style type="text/css">@import url(nome_do_arquivo.css)</style>

O nosso código (x)HTML ficaria da seguinte forma:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />
</head>
<body>
</body>
</html>

Agora com @import:

<html>
<head>
<title></title>
<style type="text/css">@import url(nome_do_arquivo.css)</style>
</head>
<body>
</body>
</html>

A vantagem de se usar CSS externamente é que quando você precisar ou quiser
fazer algumas mudanças em seu site, basta fazer as alterações no arquivo CSS que é
ocorrida uma alteração global em todo o seu site.
Por exemplo, se você tem 100 páginas com um título <h2> em azul, caso queira
alterar a cor para rosa, é só alterar uma linha em seu arquivo CSS que todas as 100
páginas terão os títulos alterados. ;)