laboratório de informática propriedades css: cores 1º semestre 2009 > pucpr > bsi bruno c....
TRANSCRIPT
![Page 1: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/1.jpg)
Laboratório de InformáticaPropriedades CSS:Cores
1º Semestre 2009 > PUCPR > BSI
Bruno C. de PaulaBruno C. de Paula
![Page 2: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/2.jpg)
Resumo da aula
Após finalizarmos nosso trabalho com os seletores do CSS, é chegado o momento de conhecer as principais propriedades do CSS;Nosso objetivo hoje será conhecer as propriedades que lidam com cores.
![Page 3: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/3.jpg)
311/04/23
Material referente ao assunto da aulaTutorial sobre cores em CSS:–http://www.maujor.com/tutorial/cores.
phpRecomendação W3C do CSS 3 (cores)
(em Inglês):–http://www.w3.org/TR/css3-color/
Capítulo do Livro CSS – Guia de Bolso:–http://altabooks.tempsite.ws/capitulos
_amostra/00_cssbolso.pdf
![Page 4: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/4.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c
apítulo.
411/04/23
![Page 5: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/5.jpg)
Ferramentas de corColor Picker / Color WheelExtensão para Firefox:– http://www.colorzilla.com/firefox/– https://addons.mozilla.org/en-US/firefox/
addon/60Online:– http://www.colorpicker.com/– http://www.workwithcolor.com/doughnut-
color-picker-01.htm– http://www.febooti.com/products/iezoom/on
line-help/online-color-chart-picker.html– http://www.ficml.org/jemimap/style/color/w
heel.html511/04/23
![Page 6: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/6.jpg)
Ferramentas de cor
Color Blender:– http://meyerweb.com/eric/tools/color-blend/
Referências sobre cores:–http://www.morecrayons.com/
611/04/23
![Page 7: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/7.jpg)
711/04/23
Tags HTML referenciadas na aula (em Português –site Referenciando)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.
![Page 8: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/8.jpg)
811/04/23
Tags HTML referenciadas na aula (em Inglês – site SitePoint)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;
![Page 9: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/9.jpg)
911/04/23
Exemplos da aula
Cor em #RRGGBBCor em #RGBCor em rgb(rrr.rr%, ggg.gg%, bbb.bb%)Cor em rgb(rrr, ggg, bbb)Cor como palavra-chave;Cores do sistema operacional;Cores em rgba(rrr,ggg,bbb,a) ;Cores em hsl(h, s%, l%).
![Page 10: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/10.jpg)
Cada cor tem um significado e uma personalidade
1011/04/23
![Page 11: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/11.jpg)
A cor é essencial para a apresentação de um sitee pode ser representada de maneiras diferentes
1111/04/23
![Page 12: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/12.jpg)
Na tela do computador as cores são aditivas (cor luz)Mistura de intensidades de:–Vermelho (red);–Verde (green);–Azul (blue).
1211/04/23
![Page 13: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/13.jpg)
Monitores apresentam as cores de maneira diferenteCores de 8 bits (256 cores): – raro hoje em dia;–usar paleta web safe (216 cores).
Cores de 16 bits (65 mil cores):–usar paleta web smart (4096 cores).
Cores de 32 bits (16 milhões):–16 milhões de cores;–Liberdade na escolha da cor.
1311/04/23
![Page 14: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/14.jpg)
Notação de cor em CSS
#RRGGBB;#RGB;rgb(rrr.rr%, ggg.gg%, bbb.bb
%);rgb(rrr, ggg, bbb);Palavra-chave.
1411/04/23
![Page 15: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/15.jpg)
Notação de cor em CSSCSS 3
rgba(rrr,ggg,bbb,aaa);hsl(h, s%, l%);hsla(h, s%, l%, a).
1511/04/23
![Page 16: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/16.jpg)
#RRGGBB
RR:– Intensidade do vermelho em base
hexadecimal de 0 a 255 (FF);GG:– Intensidade do verde em base
hexadecimal de 0 a 255 (FF);BB:– Intensidade do azul em base
hexadecimal de 0 a 255 (FF).
1611/04/23
![Page 17: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/17.jpg)
Base hexadecimal
0 dec = 0 hex;...15 dec = F hex;16 dec = 10 hex;255 dec = FF hex;
1711/04/23
![Page 18: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/18.jpg)
1811/04/23
![Page 19: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/19.jpg)
#RGB
Forma abreviada;Cada dígito é replicado;Exemplos:–#f00 é a mesma coisa que #ff0000;–#ccc é a mesma coisa que #cccccc;–#123 é a mesma coisa que #112233;
Tons de cinza: #000, #111, #222,..., #ddd, #eee, #fff.
1911/04/23
![Page 20: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/20.jpg)
2011/04/23
![Page 21: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/21.jpg)
rgb(rrr.rr%, ggg.gg%, bbb.bb%)
Valores RGB de 0 a 100%;100% corresponde a 255 (FF);
2111/04/23
![Page 22: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/22.jpg)
rgb(rrr, ggg, bbb)
Valores RGB de 0 a 255;
2211/04/23
![Page 23: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/23.jpg)
Palavra-chave
HTML 4.01:–16 cores;
2311/04/23
Cores do Sistema:29 cores;Depende do
Sistema Operacional.
![Page 24: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/24.jpg)
Palavra-chave
Cores HTML (X11) :–http://www.w3schools.com/HTML/html
_colornames.asp
2411/04/23
![Page 25: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/25.jpg)
rgba(rrr,ggg,bbb,a)
RGB + Transparência;0 => transparente;1 => sólido.
2511/04/23
![Page 26: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/26.jpg)
hsl(h, s%, l%)H (hue): –Tonalidade de cor;–“Cores do arco-íris”;–0 a 360;
S (saturation):–Pureza da cor;–0 a 100%;
L (lightness):–Brilho;–0 a 100%;
2611/04/23
![Page 27: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/27.jpg)
2711/04/23
![Page 28: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/28.jpg)
hsla(h, s%, l%, a)
HSL + transparência;0 => transparente;1 => sólido.
2811/04/23
![Page 29: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/29.jpg)
2911/04/23
Material referente ao assunto da aulaTutorial sobre cores em CSS:–http://www.maujor.com/tutorial/
cores.phpRecomendação W3C do CSS 3 (cores)
(em Inglês):–http://www.w3.org/TR/css3-color/
Capítulo do Livro CSS – Guia de Bolso:–http://altabooks.tempsite.ws/
capitulos_amostra/00_cssbolso.pdf
![Page 30: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/30.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um
capítulo.
3011/04/23
![Page 31: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/31.jpg)
Ferramentas de corColor Picker / Color WheelExtensão para Firefox:– http://www.colorzilla.com/firefox/– https://addons.mozilla.org/en-US/firefox/addon/
60Online:– http://www.colorpicker.com/– http://www.workwithcolor.com/doughnut-color-
picker-01.htm– http://www.febooti.com/products/iezoom/online-
help/online-color-chart-picker.html– http://www.ficml.org/jemimap/style/color/
wheel.html
3111/04/23
![Page 32: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/32.jpg)
Ferramentas de cor
Color Blender:– http://meyerweb.com/eric/tools/color-blend/
Referências sobre cores:–http://www.morecrayons.com/
3211/04/23
![Page 33: Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0f8497959413d8b4b8c/html5/thumbnails/33.jpg)
3311/04/23
Próximas aulas de CSS
Propriedades CSS: –Imagens e fundos.