Aula 08 cores
-
Upload
jolvani-morgan -
Category
Documents
-
view
128 -
download
0
Transcript of Aula 08 cores
Cores(X)HTML
Professor Jolvani
Aula 08
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
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
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
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.
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.
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...
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...
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.
Próxima Aula: Imagens e Edição de imagens