2. Cores (X)HTML
Na aula passada, vocês aprenderam a trabalhar com elementos inline, boxs
inline, e nesta aula vc sairão peritos em Cores no html...
Abrindo nosso diretório de aula e criando um novo arquivo html e abrimos o
documento para edição... Aula05.html
Para visualizar o documento damos um duplo clique no arquivo que ele abre no
navegador...
Conhecendo sobre as cores... Em html. Nos temos três formas de usar
as cores. Como eu aplico uma determinada cor em um elemento?
Um atributo que será muito usado nas aulas de CSS é o atributo style.
Colocando em h1.
Opa, veja que vc pode colocar atributos nas tags.... Lembre-se que vc
usou o atributo “align center” para centralizar o título na aula anterior,
agora um novo atributo ... “style”.
Esse tributo define o estilo visual desse elemento, ou esse box, o h1
3. Cores (X)HTML
Após usar style eu uso a propriedade CSS color (existem muitas propriedades
CSS que podem ser vistas no TopStyle, Dreamwaver
Style=“color” – como eu atribuo um valor para essa
propriedade uso dois pontos (:) e como definimos
os valores.
Existem 3 formas de definir um valor para esse
atributo (propriedade), 1 – por nome, colocando
blue, red, por exemplo; 2 – valor Decimal e 3 –
Valor Hexadecimal.
Finalizando com ponto e vírgula (;) indica que eu
terminei com essa propriedade.
Atributo: style
Propriedade: color
4. Cores (X)HTML
As cores seguem o padrão RGB. R – Red, G – Green, B – Blue. E vc pode definí-las
nos formatos Nome, Decimal e hexadecimal...
rgb(val,val,val)
brown
5. Cores (X)HTML
Porém, onde eu consigo essas informações? Para isso vc pode usar o
W3Schools. Ia vc pode se aprofundar ainda mais na linguagem.
Observe uma paleta de cores
e os valores hexadecimal e
decimal ao lado.
6. Cores (X)HTML
As cores, o padrão usado na Web é o hexadecimal, então encontra-se muitas
referências nesse formato, e menos nos formatos Decimal e por Nome.
Vc pode ver que existem 16
milhões de possibilidades de
cores (256x256x256).
Por exemplo, ao lado, vemos
diversas tonalidades de
vermelho.
No site vc pode escolher as
cores pelo nome.
Existe algum recurso mais
interessante? É necessário
instalar alguma ferramenta.
7. Cores (X)HTML
Posso selecionar uma determinada cor e depois uma determinada tonalidade,
copiando e colando o valor em nosso projeto.
Coloque uma outra cor no
subtítulo...
E se vc não tiver acesso a
internet para definir uma
determinada cor, no Windows
vc possui o Paint
Façamos um exemplo para
ilustrar...
8. Cores (X)HTML
Abra o paint e selecione o editor de cores
Selecione a cor e copie os valores
Copie os valores para o seu
projeto...
Teste-o...
9. Cores (X)HTML
Então existem essas três opções e agora vc
pode usar todo esse conhecimento...
Ela também pode ser usada no
corpo do documento tag <body>.
E nele vamos usar um outro
atributo para colocar uma cor de
fundo (background-color)
Verifique que a página ficou com
uma cor de fundo diferente da
anterior, e o atributo Style permite
que nós definimos nossas
propriedades CSS. Até a px.