10
Cores (X)HTML Professor Jolvani Aula 08

Aula 08 cores

Embed Size (px)

Citation preview

Page 1: Aula 08 cores

Cores(X)HTML

Professor Jolvani

Aula 08

Page 2: Aula 08 cores

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

Page 3: Aula 08 cores

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

Page 4: Aula 08 cores

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

Page 5: Aula 08 cores

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.

Page 6: Aula 08 cores

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.

Page 7: Aula 08 cores

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

Page 8: Aula 08 cores

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

Page 9: Aula 08 cores

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.

Page 10: Aula 08 cores

Próxima Aula: Imagens e Edição de imagens