SlideShare ist ein Scribd-Unternehmen logo
1 von 10
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

Weitere ähnliche Inhalte

Andere mochten auch

Aula 11 04-14 prática html
Aula 11 04-14 prática htmlAula 11 04-14 prática html
Aula 11 04-14 prática htmlJolvani Morgan
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesJolvani Morgan
 
Aula 21 e 22 tabelas introdução th head foot
Aula 21 e 22 tabelas introdução   th head footAula 21 e 22 tabelas introdução   th head foot
Aula 21 e 22 tabelas introdução th head footJolvani Morgan
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução cssJolvani Morgan
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 
Aula 32. menu só com css
Aula 32. menu só com cssAula 32. menu só com css
Aula 32. menu só com cssJolvani Morgan
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. backgroundJolvani Morgan
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoJolvani Morgan
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryJolvani Morgan
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasJolvani Morgan
 
Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoJolvani Morgan
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeJolvani Morgan
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresJolvani Morgan
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksJolvani Morgan
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Jolvani Morgan
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresJolvani Morgan
 

Andere mochten auch (18)

Aula 11 04-14 prática html
Aula 11 04-14 prática htmlAula 11 04-14 prática html
Aula 11 04-14 prática html
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simples
 
Aula 21 e 22 tabelas introdução th head foot
Aula 21 e 22 tabelas introdução   th head footAula 21 e 22 tabelas introdução   th head foot
Aula 21 e 22 tabelas introdução th head foot
 
Aula 33. css sprite
Aula 33. css spriteAula 33. css sprite
Aula 33. css sprite
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
Aula 32. menu só com css
Aula 32. menu só com cssAula 32. menu só com css
Aula 32. menu só com css
 
Aula 20 div e spans
Aula 20 div e spansAula 20 div e spans
Aula 20 div e spans
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. background
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamento
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j query
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativas
 
Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamento
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidade
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletores
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de links
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletores
 

Ähnlich wie Aula 08 cores

Construindo sites com css e (x)html em pdf
Construindo sites com css e (x)html em pdfConstruindo sites com css e (x)html em pdf
Construindo sites com css e (x)html em pdfWilton Jr
 
Aula 09 10 e 11 imagens e edição de imagens
Aula 09 10 e 11 imagens e edição de imagensAula 09 10 e 11 imagens e edição de imagens
Aula 09 10 e 11 imagens e edição de imagensJolvani Morgan
 
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...Erick L. F.
 
Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02
Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02
Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02Jolvani Morgan
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto Filipe Rezende
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoPropriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoFilipe Rezende
 
ebook-completo c# o melhor para começar no c#
ebook-completo c# o melhor para começar no c#ebook-completo c# o melhor para começar no c#
ebook-completo c# o melhor para começar no c#biandamakengo08
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSManoel Afonso
 
Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3Fabio Moura Pereira
 
Html fontes tipos, cores, tamanhos e estilos
Html   fontes  tipos, cores, tamanhos e estilosHtml   fontes  tipos, cores, tamanhos e estilos
Html fontes tipos, cores, tamanhos e estilosValfrido Filho
 
Portifolio net
Portifolio netPortifolio net
Portifolio netlaerciopds
 
Aula 01 introdução (x)html
Aula 01 introdução (x)htmlAula 01 introdução (x)html
Aula 01 introdução (x)htmlJolvani Morgan
 

Ähnlich wie Aula 08 cores (20)

Aula 02 sintaxe css
Aula 02 sintaxe cssAula 02 sintaxe css
Aula 02 sintaxe css
 
Aula 02 sintaxe css
Aula 02 sintaxe cssAula 02 sintaxe css
Aula 02 sintaxe css
 
Construindo sites com css e (x)html em pdf
Construindo sites com css e (x)html em pdfConstruindo sites com css e (x)html em pdf
Construindo sites com css e (x)html em pdf
 
Aula 09 10 e 11 imagens e edição de imagens
Aula 09 10 e 11 imagens e edição de imagensAula 09 10 e 11 imagens e edição de imagens
Aula 09 10 e 11 imagens e edição de imagens
 
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
 
Css pra quê ?
Css pra quê ?Css pra quê ?
Css pra quê ?
 
Introdução HTML_CSS.pptx
Introdução  HTML_CSS.pptxIntrodução  HTML_CSS.pptx
Introdução HTML_CSS.pptx
 
Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02
Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02
Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoPropriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto
 
ebook-completo c# o melhor para começar no c#
ebook-completo c# o melhor para começar no c#ebook-completo c# o melhor para começar no c#
ebook-completo c# o melhor para começar no c#
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSS
 
Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
Html fontes tipos, cores, tamanhos e estilos
Html   fontes  tipos, cores, tamanhos e estilosHtml   fontes  tipos, cores, tamanhos e estilos
Html fontes tipos, cores, tamanhos e estilos
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Portifolio net
Portifolio netPortifolio net
Portifolio net
 
Cores em HTML
Cores em HTMLCores em HTML
Cores em HTML
 
Aula 01 introdução (x)html
Aula 01 introdução (x)htmlAula 01 introdução (x)html
Aula 01 introdução (x)html
 

Mehr von Jolvani Morgan

Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasJolvani Morgan
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingJolvani Morgan
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesJolvani Morgan
 
Aula 19 imagens mapeadas
Aula 19 imagens mapeadasAula 19 imagens mapeadas
Aula 19 imagens mapeadasJolvani Morgan
 
Aula 18 links email, call, chat
Aula 18 links email, call, chatAula 18 links email, call, chat
Aula 18 links email, call, chatJolvani Morgan
 
Aula 17 links internos
Aula 17 links internosAula 17 links internos
Aula 17 links internosJolvani Morgan
 
Aula 16 links relativos
Aula 16 links relativosAula 16 links relativos
Aula 16 links relativosJolvani Morgan
 

Mehr von Jolvani Morgan (8)

Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativas
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encoding
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controles
 
Aula 19 imagens mapeadas
Aula 19 imagens mapeadasAula 19 imagens mapeadas
Aula 19 imagens mapeadas
 
Aula 18 links email, call, chat
Aula 18 links email, call, chatAula 18 links email, call, chat
Aula 18 links email, call, chat
 
Aula 17 links internos
Aula 17 links internosAula 17 links internos
Aula 17 links internos
 
Aula 16 links relativos
Aula 16 links relativosAula 16 links relativos
Aula 16 links relativos
 

Aula 08 cores

  • 1. Cores (X)HTML Professor Jolvani Aula 08
  • 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.
  • 10. Próxima Aula: Imagens e Edição de imagens