Aprender CSS (UFCD0154) v2

815 visualizações

Publicada em

Publicada em: Internet
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
815
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aprender CSS (UFCD0154) v2

  1. 1. PROFISSIONAL EM WEBDESIGN PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora!
  2. 2. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 2 0154 - Estilos em CSS (Cascading Style Sheets)
  3. 3. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! O QUE É O CSS - Significa Cascading Style Sheets - No HTML definimos contexto para elementos, com CSS definimos a apresentação. - Foram adicionados no HTML4 para suprir a necessidade de usar tags (ex: <font>) para formatar a apresentação permitindo o HTML ser só para contexto. - Uso de folhas externas de CSS, permite formatar estilos para a globalidade do site, poupando imenso trabalho (estas folhas são guardadas em ficheiros .css) CSS CSS2 1996 1998 2013 Inicio trabalhos no CSS3 3
  4. 4. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Esta é a sintaxe de uma regra de CSS. - Ao conjunto chamamos DECLARAÇÃO. - Ao conjunto chamamos BLOCO DA DECLARAÇÃO Vamos ver o que significa cada uma destas coisas... propriedade propriedade : ; { : ; } valor valor SINTAXE DE UMA REGRA DE CSS a CSS selector { : ; } propriedade valor 2
  5. 5. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! selector pode ser qualquer elemento do HTML (sem usar as <>), pode também ser um id, pode ser uma classe, etc etc etc. Já vamos ver exemplos... é um aspecto do selector. Num parágrafo, pode ser, por exemplo, a font- family, a color, o font-size, a margin, e muito mais ... é a definição da propriedade. color pode ser red, blue ou black ou outra qualquer cor. A font-family pode ser uma imensidão de tipos de letra, etc... propriedade valor 5 SINTAXE DE UMA REGRA DE CSS a CSS selector { : ; } propriedade valor
  6. 6. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 6 EXEMPLOS DE REGRAS CSS a CSS { : ; } { : ; : , ; } { : ; } body h1 #idvermelho color font-size font-family color blue 44px ‘Helvetica’ Arial, sans-serif red
  7. 7. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 7 ONDE INSERIMOS OS CSS? a HTML <p > </p>style=’’ : ; : ’’ O meu parágrafocolor font-sizered 12px Temos 3 opções, todas viáveis e funcionais mas uma a mais recomendada e correcta. Opção 1: Estilo in-line - Estilo inserido no próprio elemento. - Só afecta ESSE elemento. - Visto como má prática... estamos a misturar contexto apresentação
  8. 8. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 8 ONDE INSERIMOS OS CSS? a HTML <head> <style > p ... ... type red =’’text/css’’ { : ; } color </style> </head> Opção 2: Folhas de estilos INTERNAS - Inserido dentro do <head> do página - Só afecta essa PÁGINA - Também é visto como má prática... (ainda temos o CSS dentro do HTML!)
  9. 9. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 9 ONDE INSERIMOS OS CSS? a HTML <head> <link rel type href=’’stylesheet’’ =’’text/css’’ =’’css/estilos.css’’> </head> Opção 3: Folha de estilos EXTERNAS - Todos os nossos estilos armazenados num ficheiro externo - Normalmente esse ficheiro está numa pasta... chamada css - Apresentação (CSS) e contexto (HTML) estão separados - Os estilos refletem-se em todas as páginas que tenham esse ficheiro linkado (não há duplicação de código)
  10. 10. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 10 FOLHAS MULTIPLAS DE CSS a HTML <head> <link <link <link <link <link <link ... =’’stylesheet’’ =’’text/css’’ =’’css/estilos.css’’ =’’stylesheet’’ =’’text/css’’ =’’css/soparaestapagina.css’’ =’’stylesheet’’ =’’text/css’’ =’’css/slider.css’’ =’’stylesheet’’ =’’text/css’’ =’’css/print.css’’ =’’print’’ =’’stylesheet’’ =’’text/css’’ =’’css/e-outro.css’’ =’’stylesheet’’ =’’text/css’’ =’’css/e-ainda-outro.css’’ ... rel type href rel type href rel type href rel type href media rel type href rel type href > > > > > > </head> Podemos ter quantas folhas quisermos... Mas ! Cada CSS é um HTTP Request! Para velocidade do nosso site interessa-nos ter o mínimo possível de requests!!! ALTO AÍ BABALU
  11. 11. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 11 RESUMINDO a HTML Maneiras de aplicar CSS <!DOCTYPE html> <html > <head> <meta > <title> </title> <link <style > </head> <body> <p > </p> </body> </html> lang charset =’’pt’’ =’’UTF-8’’ O título =’’stylesheet’’ =’’text/css’’ =’’css/estilos.css’’ =’’text/css’’ { : ; } =’’ : ;’’ Um parágrafo rel type href type red style orange > </style>p color color
  12. 12. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 12 PARA ESTE MÓDULO SUGIRO: a HTML <!DOCTYPE html> <html > <head> <meta > <title> </title> <link <style > </head> <body> </body> </html> lang charset =’’pt’’ =’’UTF-8’’ O título =’’stylesheet’’ =’’text/css’’ =’’css/estilos.css’’ =’’text/css’’ rel type href type > </style> Termos sempre à mão um ficheiro HTML para copy&paste do código HTML
  13. 13. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 13 Uma pausa com uma coisa fácil a HTML /* Isto é um comentário em CSS */ /* Isto é OUTRO comentário mas este comentário já tem 3 linhas */ /* Os comentários de várias linhas */ /* também podem ser feitos assim */ /* Fica bonito assim em bloco! */ /* ===================== = Só para ficar bonito! = ===================== */ Comentários em CSS! a CSS
  14. 14. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 14 ATINGIR ELEMENTOS: elementos, classes e ids a CSS { : ; } { : ; } { : ; } { : ; } h1 p #elementocomid .laranja color color color color blue red blue orange a HTML <h1> </h1> <p> </p> <h1 > </h1> <p> </p> <h1> </h1> <p > </p> Heading Um parágrafo aqui Heading Outro parágrafo aqui Heading E outro parágrafo id class ="elementocomid" ="laranja" Mais tarde veremos que há mais maneiras de atingir elementos. Mas estas são as principais e mais comuns.
  15. 15. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 15 ATINGIR ELEMENTOS a CSS { : ; } { : ; } { : ; } { : ; } { : ; } h1 #verde .verde #laranja .laranja color color color color color blue green green orange orange a HTML <h1 > </h1> <p > </p> <h1> </h1> <p > </p> id class class id class ="verde" ="laranja" ="verde" ="laranja" ="laranja verde" Heading Outro parágrafo aqui Heading E outro parágrafo Fazendo um mix e observando a especificidade... Como vai ficar isto??
  16. 16. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estilos em CSS 16 ATINGIR ELEMENTOS No primeiro h1 e primeiro p: No segundo h1: No último p Um id tem mais especificidade que uma class. Logo ‘’ganha’’ sempre ... não interessa a ordem em que aparecem Simples ... Aqui vinga a cor declarada no selector de h1 : Temos 2 classes definidas... mas a laranja foi a ultima a ser declarada na nossa folha de CSS! a HTML <h1 > </h1> <p > </p> <h1> </h1> <p > </p> id class class id class ="verde" ="laranja" ="verde" ="laranja" ="laranja verde" Heading Outro parágrafo aqui Heading E outro parágrafo
  17. 17. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 17 AGRUPAMENTO a CSS { : ; } { : ; } { : ; } { : ; } { : ; } h1 #verde .verde #laranja .laranja color color color color color blue green green orange orange a CSS { : ; } , { : ; } , { : ; } h1 #verde .verde #laranja .laranja color color color blue green orange Código mais pequeno ... ficheiro mais reduzido
  18. 18. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 18 Aninhamento (NESTING) a CSS { : ; } { : ; } { : ; } #bloco #bloco h1 #bloco p width color color 600px green orange a HTML <div > <h1> </h1> <p> </p> </div> id="bloco" Bolo de chocolate Delicioso! É mesmo mesmo bom. Gosto muito! :) Em CSS bem esrtuturado precisamos de poucos ids e classes. Podemos especificar propriedades para selectores dentro de outros selectores. Neste caso, e não precisam de ter nem id nem class.h1 p
  19. 19. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 19 CORES EM CSS - Nome predefinidos - Valores Hexadecimais - RGB - RGBa - HSL - HSLa Tantas maneiras? Vamos sem medo...!
  20. 20. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 20 CORES EM CSS Nome predefinidos aqua black blue fuchsia gray green lime maroon navy olive orange purple red silver teal white yellow Todos os browsers entendem estes nomes. Foram predefinidos nos inicios do HTML (Curiosidade: existem 147 destas cores)
  21. 21. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 21 CORES EM CSS Valores Hexadecimais - Notação hexadecimal - É a notação de cores mais usada e mais segura na internet. - Vão de #000000 (preto) até #FFFFFF (branco) até - Se no conjunto os digitos forem iguais... podem ser abreviados #0000FF --> Isto é azul #00F --> Isto é o mesmo azul # R R G G B B
  22. 22. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 22 CORES EM CSS Valores Hexadecimais Browser safe colors Ja foram importantes ... Quando os ecrãs só suportavam 256 cores. Agora podemos usar as cores que quisermos! ff0000 ff0033 ff0066 ff0099 ff00cc ff00ff ff3300 ff3333 ff3366 ff3399 ff33cc ff33ff ff6600 ff6633 ff6666 ff6699 ff66cc ff66ff ff9900 ff9933 ff9966 ff9999 ff99cc ff99ff ffcc00 ffcc33 ffcc66 ffcc99 ffcccc ffccff ffff00 ffff33 ffff66 ffff99 ffffcc ffffff
  23. 23. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CORES EM CSS Cores em RGB Todos os browsers suportam esta notação para cores NOTA: Incrivelmente, se usarmos percentagens e algum valor for zero, tem que se especificar a unidade, neste caso 0%, ou a cor nao funciona. a CSS { : ; } { : ; } { : ; } { : ; } { : ; } .preto .branco .tambemsoubranco .azul .tambemsouazul color color color color color rgb(0, 0, 0) rgb(255, 255, 255) rgb(100%, 100%, 100%) rgb(0, 0, 255) rgb(0%, 0%, 100%) 23
  24. 24. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CORES EM CSS Cores em RGBa O significa Transparência Alpha Vai de 0 (totalmente transparente) até 1 (totalmente opaco) Problemas de suporte: Todos Firefox, Chrome e Safari... a só IE 9+, Opera 10+ a CSS { : ; } { : ; } { : ; } { : ; } .preto .cinza .souumacor .sououtracor color color color color rgba(0, 0, 0, 1) rgba(0, 0, 0, 0.5) rgba(0, 255, 0, 0.7) rgba(0%, 100%, 0%, 0.2) 24
  25. 25. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CORES EM CSS Cores em HSL H = Hue (é um grau na roda de cores... vai de 0 até 360) - 0 ou 360 é vermelho, 120 verde e 240 azul S = Saturação (0%-99% sobras de cinzas ... 100% é cor total) L = Lightness -> 0% luz apagada (preto) ... 100% luz total (branco) 25
  26. 26. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CORES EM CSS Cores em HSL H = Hue (é um grau na roda de cores... vai de 0 até 360) - 0 ou 360 é vermelho, 120 verde e 240 azul S = Saturação (0%-99% sobras de cinzas ... 100% é cor total) L = Lightness -> 0% luz apagada (preto) ... 100% luz total (branco) Problemas de suporte: Todos Firefox, Chrome e Safari... só IE 9+, Opera 10+ a CSS { : ; }.umaespeciedeverde color hsl(120, 65%, 75%) 26
  27. 27. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CORES EM CSS Cores em HSLa É o mesmo que o HSL ... mas inclui a transparência - Totalmente opaco - Totalmente transparente Problemas de suporte: Todos Firefox, Chrome e Safari... A= 0 A= 1 só IE 9+, Opera 10+ a CSS { : ; }.umaespeciedeverde color hsl(120, 65%, 75%, 0.7) 27
  28. 28. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CORES EM CSS Problemas de suporte?? Outra vez o raio do IE pah!! Então alguns métodos só funcionam no IE apartir da versão 9 ... Posso? E que se lixe quem usa os Internet Explorer antigos? Como faço isto?? Não os posso usar??? Quero/preciso de usar transparências nas cores... 28
  29. 29. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 29 CORES EM CSS Fake it... till you make it! Usamos as transparências... fall-backs não abdicamos! E aproximamos a cor o mais possível para que quem use IE veja uma cor «parecida». Já falamos de ? Ainda se lembram? Lembram-se de termos visto que a ?última regra de CSS é que vinga
  30. 30. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 30 CORES EM CSS Fake it... till you make it! a CSS { : ; : ; } .onossoverde color color #00FF00 rgba(0, 255, 0, 0.7)
  31. 31. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 31 CORES EM CSS Fake it... till you make it! a CSS { : ; : ; } .onossoverde color color #00FF00 rgba(0, 255, 0, 0.7) Os ... usam a última declaração. Enquanto ... O Internet Explorer a última declaração. browsers bons não entende
  32. 32. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 32 CORES EM CSS Excelente leitura sobre cores http://tableless.com.br/sobre-cor-e-webdesign http://tableless.com.br/cor-webdesign-2/
  33. 33. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 33 CORES EM CSS: OPACIDADE Outra propriedade muitas vezes útil ao trabalhar com cores é a opacity. Pode assumir valores de 0 até 1. Cuidado que, para uma opacidade de 50% escreve-se e não .0.5 0,5 a CSS { : ; : ; : ; : ; : ; /* IE9- */ } #z6 width height background-color opacity filter 200px 200px #00F 0.2 Alpha(opacity=20) a HTML <div ></div>=’’z6’’id
  34. 34. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Estilos em CSS 34 DOM & HEREDITARIEDADE Antes de falarmos de HEREDITARIEDADE é preciso perceber o . Todos os documentos de HTML geram uma DOM ( ). O DOM é uma árvore de hierarquia dos vários elementos. Todos os documentos HTML são árvores. DOM Document Object Model
  35. 35. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 35 HTML BODYHEAD META LINKTITLE LI UL LI LI - Árvores de documentos HTML são constituídas por elementos HTML. - É tal e qual a árvore genealógica da familía de cada um de nós... DOM & HEREDITARIEDADE
  36. 36. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 36 HTML BODYHEAD META LINKTITLE LI UL LI LI Um é um elemento que está conectado mas mais alto no DOM.ANCESTOR ANCESTOR DOM & HEREDITARIEDADE
  37. 37. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 37 HTML BODYHEAD META LINKTITLE LI UL LI LI Um refere-se a qualquer elemento que está conetado mas mais abaixo no DOM DESCENDANT DESCENDENTE DESCENDENTES DOM & HEREDITARIEDADE
  38. 38. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 38 HTML BODYHEAD META LINKTITLE LI UL LI LI Um (pai) é um elemento que está conectado e directamente acima de um elemento na DOM. PARENT PARENT DOM & HEREDITARIEDADE
  39. 39. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 39 HTML BODYHEAD META LINKTITLE LI UL LI LI Um (filho) é um elemento que está conectado e directamente abaixo de um elemento na DOM. CHILD CHILD DOM & HEREDITARIEDADE
  40. 40. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 40 HTML BODYHEAD META LINKTITLE LI UL LI LI Um (irmão) é um elemento que partilha o mesmo pai que outro elemento. SIBLING PARENT SIBLINGS DOM & HEREDITARIEDADE
  41. 41. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 41 Num papel, faça o DOM para o ficheiro HTML que pode encontrar em: http://cesae.afonsogomes.com/dom.html EXERCICIO: Compreendendo o DOM. HTML BODYHEAD META METATITLE UL LINK ... ...
  42. 42. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 42 HTML BODYHEAD P EM Para compreendermos heranças, vamos usar este bloco de código: a HTML <p> <em> </em> </p>Parágrafo com uma palavra enfatizada no meio Reparem que o está dentro do . Ou seja, é um filho do . <em> <p> <em> <p> HEREDITARIEDADE
  43. 43. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 43 HEREDITARIEDADE HTML BODYHEAD P EM Vamos usar também este estilo: Apareceu tudo a ? Incluindo a palavra enfatizada? O herdou a cor azul do seu elemento pai! azul <em> Vamos usar também este estilo:a CSS p { : ; }color blue Note que não criamos estilos para o !<em>
  44. 44. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 44 HEREDITARIEDADE - Implementada para facilitar a vida a quem escreve o CSS - Torna os ficheiros CSS mais leves, mais rápidos de fazer o download e mais fáceis de manter. Mas serão todas as propriedades herdadas?
  45. 45. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 45 HEREDITARIEDADE Mas serão todas as propriedades herdadas? NÃO! Nem todas são herdadas. - Se todas fossem herdadas teríamos muito mais trabalho - Muitas teriam de ser desligadas para elementos filhos - Na generalidade, só as propriedades que simplificam o nosso trabalho são herdadas
  46. 46. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 46 HEREDITARIEDADE a HTML <p> <em> </em> </p>Parágrafo com uma palavra enfatizada no meio Um exemplo, ainda no nosso parágrafo: Vamos definir uma border para o nosso parágrafo: a CSS p { : ; }border 1px solid #FF0000
  47. 47. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 47 HEREDITARIEDADE Não herdou pois não? Para o elemento também ter uma border teria de ficar assimem a CSS p em { : ; } { : ; } border border 1px solid #FF0000 1px solid #FF0000 Ou como já vimos antes ... fica melhor assim: a CSS p em, { : ; }border 1px solid #FF0000
  48. 48. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 48 HEREDITARIEDADE Então que propriedades são herdadas?
  49. 49. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 49 HEREDITARIEDADE As seguintes propriedades são herdadas: azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation, empty-cells, font-family, font-size, font-style, quotes, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-position, list-style-type, list-style, orphans, pitch-range, pitch, richness, speak-header, speaknumeral, speak-punctuation, speak, speechrate, stress, text-align, text-indent, text-transform, visibility, voice-family, volume, whitespace, widows, word-spacing Muitas não são? Podemos dividir por grupos...
  50. 50. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 50 HEREDITARIEDADE Propriedades relacionadas com TEXTO que são herdadas azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation, empty-cells, , , , quotes, , , , , , list-style-image, list-style-position, list-style-type, list-style, orphans, pitch-range, pitch, richness, speak-header, speaknumeral, speak-punctuation, speak, speechrate, stress, , , , visibility, voice-family, volume, whitespace, widows, font-family font-size font-style font-variant font-weight font letter-spacing line-height text-align text-indent text-transform word-spacing
  51. 51. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 51 HEREDITARIEDADE Propriedades relacionadas com LISTAS que são herdadas azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation, empty-cells, font-family, font-size, font-style, quotes, font-variant, font-weight, font, letter-spacing, line-height, , , , , orphans, pitch-range, pitch, richness, speak-header, speaknumeral, speak-punctuation, speak, speechrate, stress, text-align, text-indent, text-transform, visibility, voice-family, volume, whitespace, widows, word-spacing list-style-image list-style-position list-style-type list-style
  52. 52. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 52 HEREDITARIEDADE E... talvez a mais importante ... a propriedade COLOR é herdada azimuth, border-collapse, border-spacing, caption-side, , cursor, direction, elevation, empty-cells, font-family, font-size, font-style, quotes, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-position, list-style-type, list-style, orphans, pitch-range, pitch, richness, speak-header, speaknumeral, speak-punctuation, speak, speechrate, stress, text-align, text-indent, text-transform, visibility, voice-family, volume, whitespace, widows, word-spacing color
  53. 53. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 53 HEREDITARIEDADE E a propriedade font-size é herdada? A resposta simples é: . No entanto, é herdada de uma maneira diferente das outras. Os descendentes não herdam o ... herdam um Vamos ver isso mais à frente depois de falarmos de unidades. SIM valor calculadovalor
  54. 54. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 54 SELECTORES DE CSS A V A N Ç A D O S . . . Agora que vimos o que é DOM e algumas questões da hereditariedade podemos voltar aos .selectores de CSS Não podemos saber só os simples!
  55. 55. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 55 SELECTORES DE CSS AVANÇADOS a HTML <section> <div > <p> <em > </em> </p> </div> <div > <ul > <li> </li> <li> <a > </a></li> </ul> <ul > <li><a > </a></li> <li > </li> <li> </li><li> </li><li> </li><li> </li><li> </li> </ul> </div> <img > </section> id class id id href class class href class class src alt =’’caixa1’’ Parágrafo. =’’enf’’ Enfatizado aqui . =’’caixa2’’ =’’umalista’’ Coisa 1 Coisa 2 =’’#’’ =’’linktipo1’’ LINK =’’outralista’’ =’’#’’ =’’linktipo2’’ Elemento 1 =’’elem2’’ Elemento 2 3 4 5 6 7 =’’umaimagemqq.jpg’’ =’’QQ Coisa’’
  56. 56. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 56 a CSS <style type=’’text/css’’> </style> body p #umalista .outralista { : ; } { : ; } { : } { : } color color color color #FF0000 green purple pink SELECTORES DE CSS ... AVANÇADOS Já vimos os básicos: Elementos ... ids ... classes Agora vamos aos mais complexos...
  57. 57. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 57 a CSS * { : ; }border 1px solid #FF0000 SELECTORES DE CSS ... AVANÇADOS SELECTOR UNIVERSAL O selector Universal atinge TODOS os elementos do documento
  58. 58. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! a CSS p > em { : ; }font-weight bold SELECTORES DE CSS ... AVANÇADOS CHILD SELECTOR Um child selector (selector de filho) atinge o filho de um elemento. Neste exemplo, pretende-se atingir o filho doem p a CSS #caixa1 em { : ; }border 2px dotted blue DESCENDANT SELECTOR Um dos mais comuns tipos de selectores. (Não usa qq símbolo) Esta é outra maneira de atingir o mesmo elemento .em 58
  59. 59. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! a CSS .elem2 ~ li { : ; : ; }color font-weightgreen bold SELECTORES DE CSS ... AVANÇADOS General Sibling Selector Similar ao selector anterior mas... Atinge todos os elementos seguintes e não só um. a CSS .elem2 + li { : ; }color red Adjacent Sibling Selector Atinge o sibling (irmão) adjacente (seguinte) de um elemento Esta é outra maneira de atingir o mesmo elemento .em 59
  60. 60. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS 60 a CSS img[alt] { : ; }border 3px solid #000000 Selectores de Atributos (Parte 1 de 4) Atinge um elemento que possua um determinado atributo. Neste exemplo estamos a atingir todas as s que tenham um<img> alt
  61. 61. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS 61 a CSS img[src=’’umaimagemqq.jpg’’] { : ; }border 5px solid #FF0000 Selectores de Atributos (Parte 2 de 4) Atinge um elemento que possua um determinado atributo e com um valor exactamente igual ao que queremos. Neste exemplo estamos a atingir todas as s que tenham a igual a «umaimagemqq.jpg» <img> src
  62. 62. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS 62 a CSS img[src^=’’umaimagemqq’’] { : ; }border 10px solid #00FF00 Selectores de Atributos (Parte 3 de 4) Atinge um elemento que possua um determinado atributo mas que o valor do atributo comece por (no ex) umaimagemqq Neste caso estamos a atingir a do nosso exemplo<img> Adicionem outra com outro nome e vejam se atinge!
  63. 63. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS 63 a CSS img[src*=’’umaim’’] { : ; }border-bottom 20px solid #0000FF Selectores de Atributos (Parte 4 de 4) Atinge um elemento que possua um determinado atributo que no valor a expressão específica. Neste caso: estamos a atingir todas as cuja src contenham o termo ‘’umaim’’ contenha <img>
  64. 64. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS 64 PSEUDO-CLASSES (também conhecidos como: Pseudo-elementos) ‘’Pseudo-classes são usadas para providenciar estilos não para elementos, mas para vários estados de certos elementos’’ The W3C Consortium
  65. 65. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS 65 PSEUDO-CLASSES (também conhecidos como: Pseudo-elementos) Alguém consegue dar um exemplo?
  66. 66. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS 66 a CSS PSEUDO-CLASSES em links Assim podemos atingir os vários estados possíveis de um LINK Geralmente são as primeiras regras de CSS que qualquer iniciado quer saber como se faz. a:link a:visited a:hover a:focus a:active { : ; } { : ; } { : ; } { : ; } color color color color GoldenRod Fuchsia FireBrick SpringGreen ,
  67. 67. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS 67 a CSS a:link a:visited a:hover a:focus a:active { : ; } { : ; } { : ; : ; } { : ; } color color color text-decoration color GoldenRod Fuchsia FireBrick none SpringGreen , Ahh e tal ... E COMO É QUE SE TIRA AQUELE SUBLINHADO? :D
  68. 68. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS 68 a CSS PSEUDO-CLASSES em links (Continuação) Também podemos atingir links com uma determinada class... a.linktipo1:link a.linktipo1:visited a.linktipo1:hover a.linktipo1:focus a.linktipo1:active { : ; } { : ; } { : ; } { : ; } color color color color GoldenRod Fuchsia FireBrick SpringGreen ,
  69. 69. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS 69 a CSS PSEUDO-CLASSES em parágrafos Esta pseudo-class não representa bem um estado do elemento Eu acho que foi uma simpatia do W3C para facilitar e reduzir em muito o código que era necessário para coisas MUITO usadas. <p> p:first-line p:first-letter { : ; } { : ; : ; } color color font-size green red 50px
  70. 70. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS 70 a CSS Serve para discriminação!! Em CSS não é feio discriminar! Neste exemplo: a regra aponta ao elemento com class outralista que tenha elementos descendentes e aplica o estilo a todos menos ao elemento com a class elem2 <li> <li> .outralista li:not(.elem2) { : ; }color red PSEUDO-CLASSES... todas menos uma!
  71. 71. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS a CSS Atinge o primeiro filho de um conjunto de elementos irmãos .outralista li:first-child { : ; }color red O PRIMEIRO FILHO... Dizem que é o preferido! 71 Atingir ambos os primeiros filhos das nossas duas listas? Simples! a CSS ul li:first-child { : ; }color red
  72. 72. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS a CSS Atinge o último filho de um conjunto de elementos irmãos .outralista li:last-child { : ; }color green O ÚLTIMO FILHO... Dizem que costuma vir por acidente... 72
  73. 73. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS a CSS Neste caso é atingido o 4º filho (n=4) dos irmãos <li> .outralista li:nth-child(4) { : ; }color green UM FILHO QUALQUER 73 Chamamos-lhe o !Enésimo
  74. 74. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS a CSS Em inglês chama-se (= estranhos) aos números ímpares e (= certos) aos números pares ODD EVEN .outralista li:nth-child(odd) .outralista li:nth-child(even) { : ; } { : ; } font-size font-weight 30px bold FILHOS PARES ... FILHOS ÍMPARES 74
  75. 75. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS a CSS Esta é outra maneira para atingir os mesmos elementos que as regras do slide anterior. Pela matemática... .outralista li:nth-child(2n+1) .outralista li:nth-child(2n) { : ; } { : ; } font-size color 20px red FILHOS PARES ... FILHOS ÍMPARES 75
  76. 76. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS a CSS Estes pseudo-elementos servem para atingir a zona e a . imediatamente antes do elemento começar zona imediatamente depois do elemento acabar São muito, muito usados actualmente... a:before a:after { : ; } { : ; } content content ‘’Isto é um ‘’ ‘’ fantastico! ‘’ O ANTES e o DEPOIS de um elemento 76
  77. 77. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS a CSS ::selection ::-moz-selection { : ; : } { : ; : } background-color color background-color color #78A04C #FFF #78A04C #FFF SELECTION: Quando o user seleciona coisas com o rato 77 Este pseudo-estado não é aplicado a nenhum elemento em especifico Serve apenas para o caso de queremos evitar aquele azul típico que aparece . NOTE: Estes selectores ser agrupados! no texto quando o utilizador selecciona bocados não podem
  78. 78. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS www.w3.org/community/webed/wiki/Advanced_CSS_selectors www.w3.org/community/webed/wiki/CSS/Selectors INFORMAÇÕES ADICIONAIS: 78 Na W3C... entidade que regula o HTML e CSS
  79. 79. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! SELECTORES DE CSS ... AVANÇADOS (EXERCICIO) Copie este código para um ficheiro seu. As instruções encontram-se no ficheiro. :) http://cesae.afonsogomes.com/ex-selectores.html 79
  80. 80. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS DE RESET - Servem para regularizar e na visualização de sites em diferentes browsers. - Servem como ponto de partida para todo o nosso CSS. - Evitam dissabores futuros - Todos usam-nas ... e usam sempre uma de apenas 2 ou 3 possíveis! normalizar inconsistências 80 Antes de avançar .. vamos falar de folhas de RESET
  81. 81. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS DE RESET 81 O de ... Já foi a mais famosa mundialmente Já foi o padrão. Mas não está tão completa como podia estar. Actualmente, a mais usada é o Bastante completa. É usada por quem sabe muito de internet... CSS RESET Eric Meyers NORMALIZE.CSS http://meyerweb.com/eric/tools/css/reset/ http://necolas.github.io/normalize.css/ Vamos ver como podemos usar a Normalize.css
  82. 82. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! UNIDADES EM CSS px in cm mm pt pc ex - pixel - polegada - centímetro - milimetro - ponto (1pt = 1/72polegadas) - pica (1pc = 12pt) - percentagem (1ex é x-height da font... normalmente é 50% do font-size) - 1em é o actual font-size. 2em é 2 vezes o tamanho actual da font. Sempre em relação ao elemento pai (e com heranças) % em 82 Em CSS temos vários tipos de unidades de tamanhos: O meu tipo de letra x-heightRelativa Absoluta
  83. 83. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO Agora que sabemos tudo sobre selectores, cores, unidades e folhas de reset... vamos à formatação de texto 83 Vamos começar por coisas interessantes tipo: embeber no nosso site fonts que websafe vamos fugir ao banal! não são
  84. 84. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO 84 Frequentemente ve-se isto: a CSS Primeiro aprendamos a declarar uma família de fonts: p a { : ; } { : ; } font-family font-family Arial, Helvetica, sans-serif ’’Times New Roman’’, Georgia, serif a CSS body { : ; }font-family ‘Lato’, Arial, Helvetica, sans-serif
  85. 85. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO Linkamos o ficheiro da font no da página e depois no CSS:<head> a CSS body { : ; }font-family ’Lato’, sans-serif Embeber fonts ... GOOGLE STYLE: (http://www.google.com/fonts) a HTML <link > href rel =’’http://fonts.googleapis.com/css?family=Lato:300’’ =’’stylesheet’’ =’’text/css’’type 85
  86. 86. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO Neste método temos de ter os ficheiros da font no nosso servidor. a CSS { : Gentium; : url('Gentium.eot'); : url('Gentium.eot?') format('eot'), url(’Gentium.woff') format('woff'), url(’Gentium.ttf') format('truetype'), url(’Gentium.svg#Gentium') format('svg'); } @font-face font-family src src font-style font-weight /* IE9 */ /* IE6-IE8 */ /* Browsers Modernos */ /* Safari/Android/iOS */ /* Legacy iOS */ normal normal: :; ; Embeber fonts genéricamente: @font-face 86
  87. 87. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO a CSS { : Gentium; : url('Gentium.eot'); : url('Gentium.eot?') format('eot'), url(’Gentium.woff') format('woff'), url(’Gentium.ttf') format('truetype'),url(’Gentium.svg') format('svg'); } { : ; { : ; @font-face h1 p font-family src src font-style font-weight font-family font-family normal normal ‘Gentium’, ‘’Times New Roman’’, serif ‘Lato’, Arial, Helvetica, serif : :; ; Até podemos ter os dois métodos... a HTML <html> <head><link > <link ></head> <body> <h1> </h1> <p> </p></body> </html> href rel href rel =’’estilos.css’’ =’’stylesheet’’ =’’text/css’’ =’’http://fonts.googleapis.com/css?family=Lato:300’’ =’’stylesheet’’ =’’text/css’’ Um heading Um parágrafo type type 87
  88. 88. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO aCSS { : ; } p font-family Arial, Helvetica, sans-serif font-size: 13px; line-height: 15px; font-weight: bold; font-style: italic; text-align: right; text-decoration: none; text-transform: none; letter-spacing: normal; word-spacing: 2px; Propriedades de CSS para texto PODE ASSUMIR Qualquer outro tipo de letra, websafe ou não. Já vimos antes esta propriedade. Tipo de letra 88
  89. 89. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO aCSS { : ; } p font-family: Arial, Helvetica, sans-serif; line-height: 15px; font-weight: bold; font-style: italic; text-align: right; text-decoration: none; text-transform: none; letter-spacing: normal; word-spacing: 2px; font-size 13px Propriedades de CSS para texto PODE ASSUMIRPODE ASSUMIR xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller length (px, em, ...) inherit Tamanho da font 89
  90. 90. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO aCSS { : ; } p font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; font-style: italic; text-align: right; text-decoration: none; text-transform: none; letter-spacing: normal; word-spacing: 2px; line-height 15px Propriedades de CSS para texto PODE ASSUMIRPODE ASSUMIR normal number (2.5) length (px, em, ...) percentage (x%) inherit Tamanho das linhas 90
  91. 91. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO aCSS { : ; } p font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; font-style: italic; text-align: right; text-decoration: none; text-transform: none; letter-spacing: normal; word-spacing: 2px; font-weight bold Propriedades de CSS para texto PODE ASSUMIRPODE ASSUMIR normal, bold, bolder, lighter, inherit 100, 200, 300, 400 500, 600, 700, 800 900 ‘’Peso’’ da font 91
  92. 92. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO aCSS { : ; } p font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; font-weight: bold; text-align: right; text-decoration: none; text-transform: none; letter-spacing: normal; word-spacing: 2px; font-style italic Propriedades de CSS para texto PODE ASSUMIRPODE ASSUMIR Estilo da font normal italic oblique inherit 92
  93. 93. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO aCSS { : ; } p font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; font-weight: bold; font-style: italic; text-decoration: none; text-transform: none; letter-spacing: normal; word-spacing: 2px; text-align right Propriedades de CSS para texto PODE ASSUMIRPODE ASSUMIR left right center justify inherit Alinhamento 93
  94. 94. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO aCSS { : ; } p font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; font-weight: bold; font-style: italic; text-align: right; text-transform: none; letter-spacing: normal; word-spacing: 2px; text-decoration none Propriedades de CSS para texto PODE ASSUMIRPODE ASSUMIR Decoração none underline overline line-through inherit 94
  95. 95. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO aCSS { : ; } p font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; font-weight: bold; font-style: italic; text-align: right; text-decoration: none; letter-spacing: normal; word-spacing: 2px; text-transform none Propriedades de CSS para texto PODE ASSUMIRPODE ASSUMIR none capitalize lowercase uppercase inherit Transformação 95
  96. 96. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO aCSS { : ; } p font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; font-weight: bold; font-style: italic; text-align: right; text-decoration: none; text-transform: none; word-spacing: 2px; letter-spacing normal Propriedades de CSS para texto PODE ASSUMIRPODE ASSUMIR normal length inherit Espaçamento Letras 96
  97. 97. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO aCSS { : ; } p font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; font-weight: bold; font-style: italic; text-align: right; text-decoration: none; text-transform: none; letter-spacing: normal; word-spacing 2px Propriedades de CSS para texto PODE ASSUMIRPODE ASSUMIR Espaçamento palavras normal length inherit 97
  98. 98. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CSS PARA FONTS E TEXTO a CSS { : ; : ; : ; } p text-indent text-overflow font-variant 20px clip small-caps Outras propriedades para texto PODE ASSUMIR normal length inherit PODE ASSUMIR clip ellipsis PODE ASSUMIRPODE ASSUMIR normal small-caps inherit 98
  99. 99. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! FONTS: SHORTHAND NOTATIONaCSS { : ; : ; : ; : ; : ; } p.tipoletra1 font-family font-size line-height font-weight font-style Arial, Helvetica, sans-serif 20px 22px bold italic aCSS { : ; } p.tipoletra2 font italic bold 20px/22px Arial, Helvetica, sans-serif 99
  100. 100. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! EXERCICIO 100 Para treinar tipografia: Faça 3 Headings, cada um seguido de 2 parágrafos de texto Lorem Ipsum (www.lipsum.org). Para cada heading e para cada parágrafo use tipos de letra diferentes com propriedades diferentes. Deve usar 3 fonts do google.com/fonts e 3 fonts geradas no site fontsquirrel.com Alcance um bom efeito visual para cada um dos 3 conjuntos. H2 P P H2 P P H2 P P
  101. 101. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! FONTS: TEXT-SHADOWaCSS { : ; } p.comsombra ... ... text-shadow 5px 5px 5px #0000FF Permite fazer uns efeitos bonitos (ás vezes muito subtis) X Y blur cor A101
  102. 102. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! FONTS: TEXT-SHADOW ... experimentem aCSS { : ; } { : ; } { : , ; } { : ; } { : ; } h1 h1.sombra1 h1.sombra2 h1.sombra3 h1.sombra4 font text-shadow text-shadow text-shadow text-shadow 50px Arial, sans-serif 5px 5px 5px #0000FF 10px 2px #FF0000 13px 4px #FF0000 1px 1px 1px #B6B6B6 -5px -5px #FF0000 a HTML <h1 > </h1> <h1 > </h1> <h1 > </h1> <h1 > </h1> class class class class =’’sombra1’’ Heading com sombra tipo 1 =’’sombra2’’ Heading com sombra tipo 2 =’’sombra3’’ Heading com sombra tipo 3 =’’sombra4’’ Heading com sombra tipo 4 102
  103. 103. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! FONTS: TEXT-SHADOW Observem o potencial do text-shadow http://cesae.afonsogomes.com/exemp-tshadow.html 103
  104. 104. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 104 BACKGROUNDS - Incrivelmente importantes em qualquer site. Fornecem o ‘’contexto’’ geral onde os conteúdos do site se enquadram. - Podem ser cores sólidas ou fotografias ou texturas.. e até já há quem use vídeos como fundo para um website. - Use-se o que se usar... convém sempre ser de um tamanho reduzido
  105. 105. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 105 BACKGROUNDS Sem mais demoras... podemos dar uma cor de background assim: aCSS { : ; }body background-color #BDC3C7 Depois, claro, podemos definir fundos para cada área do nosso site: aCSS { : ; } { : ; } header footer background-color background-color #2c3e50 #34495e
  106. 106. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 106 BACKGROUNDS Também podemos ter imagens de fundo aCSS { : ; }body background-image url(img/fundo.png) Estas imagens são normalmente quadrados de dimensões reduzidas. Do género de 20x20px ou 50x50px... Isto porque a propriedade dá uma ajuda.background-repeat
  107. 107. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 107 BACKGROUNDS Então vejamos o background-repeat aCSS { : ; : ; } body background-image background-repeat url(img/fundo.png) repeat Pode assumir os valores: (repete horizontalmente) (repete verticalmente) (não há qualquer repetição) (repete segundo x e y) repeat-x repeat-y no-repeat repeat
  108. 108. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 108 BACKGROUNDS Também temos a propriedade background-position Usado quando temos imagens com várias «subimagens» (SPRITES) aCSS { : ; : ; } body background-image background-position url(img/fundo.png) 0 -100px Pode assumir os valores em pixeis ou percentagens ou keyords: ou ou para o primeiro valor (horizontal) ou ou para o segundo valor (vertical) right center left top center bottom
  109. 109. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 109 BACKGROUNDS Utilidade do background-position 0px-100px -130px -300px X Y aCSS { : ; : ; : ; : ; } { : ; : ; : ; : ; } #sec1 #sec2 height background-image background-position background-repeat height background-image background-position background-repeat 130px url(img/fundo.png) 0 0 repeat-x 170px url(img/fundo.png) 0 -130px repeat-x
  110. 110. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 110 BACKGROUNDS Alguns exemplos de Sprites...
  111. 111. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 111 BACKGROUNDS Para notação shorthand usamos a propriedade background aCSS { : } body background [background-color] [background-image] [background-repeat] [background-attachment] [background-position] Esta é a sintaxe! ;
  112. 112. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 112 BACKGROUNDS Para notação shorthand: background aCSS { : ; } body background #FF00FF url(imagens/fundo.png) repeat fixed center center Isto é o comum de se ver... aCSS { : ; } { : ; } #footer #header background background #FF00FF url(imagens/footer.png) repeat #56D241 url(imagens/header.png) repeat-x
  113. 113. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 113 BACKGROUNDS EXERCICIO aCSS { : ; : ; : ; : ; } { : ; : ; : ; } #sec1 #sec2 height background-image background-image background-repeat height background-image background-repeat 500px #FF00FF url(fundo1.png) repeat 500px url(fundo2.png) repeat Crie um HTML com 2 secções. Arranje 2 imagens para dar de fundo a cada secção. Faça ao seu gosto, o CSS não tem que ficar igual a este. Vá mudando as propriedades e observe as diferenças.
  114. 114. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 114 BACKGROUNDS GRADIENTS aCSS { : ; } #sec1 background-image linear-gradient(to bottom, white, blue) Podemos também criar gradientes com o background-image, assim: Ou assim: aCSS { : ; } #sec1 background-image linear-gradient(to right, #cf2b4f, #980021) A sintaxe é um pouco confusa. Este artigo está excelente: tableless.com.br/como-usar-gradient-no-css-de-forma-consciente
  115. 115. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 115 INICIO PROJECTO PESSOAL aHTML ... ... ... ... <header> </header> <section> </section> <section> </section> <footer> </footer> aHTML ... ... <nav> <ul> <li> </li> </ul> </nav> Criar um index.html (página inicial) e outras Definir tags no <head> Definir zonas na página, inserir h1s, h2s, Ps, etc.. Fazer CSS inicial (com RESET e alguma tipografia)
  116. 116. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 116 CSS BOX MODEL Antes de começarmos a ver o CSS BOX MODEL relembremos o conceito de elemento e elemento de Começa a sua renderização numa nova linha. Força uma «quebra de linha» sempre que é usado. Temos como exemplos: , , , , headings, etc... Começa a sua renderização onde quer que o ponha. Não forçam uma «quebra de linha» de linha no browser. Exemplos: , , , , etc... inline block Block Element: Inline Element: <header> <section> <div> <p> <em> <i> <strong> <span>
  117. 117. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 117 CSS BOX MODEL (Tudo em html é uma caixa!) Conteúdo Padding Border Margin width Conteúdo: Padding: Border: Margin: É a caixa do nosso elemento em si. Onde está o conteúdo. Ex: Área que rodeia o elemento. É a borda que envolve o elemento e o seu padding. Limpa a área à volta da nossa caixa. Frequente ser usada para layouts, definindo espaçamento entre caixas. É sempre transparente!! A reflete-se no elemento e no padding. <p> background height
  118. 118. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 118 Conteúdo Padding Border Margin width WIDTH e HEIGHT referem-se à largura e altura da área do conteúdo. Adicionando padding, border e margin não afecta a área do conteúdo mas aumenta o tamanho geral da caixa do elemento. height Se quisermos uma caixa com 100px no geral, com 10px de margem e 10px de padding de cada lado precisariamos de fazer a largura do conteúdo ser 70px aCSS { : ; : ; ; }#anossacaixa width margin padding:70px 10px 5px CSS DimensõesBOX MODEL
  119. 119. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 119 width: 70px Padding Border Margin Padding, borders e margens podem ser aplicados a todos os lados de um elemento ou a cada lado individualmente Margens podem ter valores negativos!! aCSS { : ; : ; ; } #acaixa width margin padding: 70px 10px 5px 70px 5 0 105010 CSS DimensõesBOX MODEL
  120. 120. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 120 Elemento Padding Border Margin width height aCSS { : ; : ; : ; } elemento width min-width max-width 50% 250px 800px width min-width max-width height min-height max-height CSS DimensõesBOX MODEL
  121. 121. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 121 CSS BOX MODEL Padding Elemento Padding Border Margin width height aCSS { : ; : ; ; : ; } elemento padding-top padding-right padding-bottom: padding-left 20px 10px 20px 10px padding padding-top padding-bottom padding-left padding-right
  122. 122. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 122 CSS BOX MODEL Padding (Exemplos de Short hands) aCSS { : ; : ; ; : ; } elemento padding-top padding-right padding-bottom: padding-left 20px 10px 20px 10px aCSS { : ; } elemento padding 20px 75px aCSS { : ; } elemento padding 20px 30px 50px aCSS { : ; } elemento padding 40px Top Bottome = 20px Left Righte = 75px TODAS = 40pxTop Right Left Bottom= 20px e = 30px = 50px
  123. 123. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 123 CSS BOX MODEL Margin Elemento Padding Border Margin width height aCSS { : ; : ; ; : ; } elemento margin-top margin-right margin-bottom: margin-left 20px 10px 20px 10px margin margin-top margin-bottom margin-left margin-right
  124. 124. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 124 CSS BOX MODEL Margin (Exemplos de Short hands) aCSS { : ; : ; ; : ; } elemento margin-top margin-right margin-bottom: margin-left 20px 10px 20px 10px aCSS { : ; } elemento margin 20px 75px aCSS { : ; } elemento margin 20px 30px 50px aCSS { : ; } elemento margin 40px Top Bottome = 20px Left Righte = 75px TODAS = 40pxTop Right Left Bottom= 20px e = 30px = 50px
  125. 125. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 125 CSS BOX MODEL Border Elemento Padding Border Margin width height aCSS { : ; : ; : ; } elemento border-width border-style border-color 5px solid red border border-width border-style (Obrigatória) border-color
  126. 126. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 126 Elemento Padding Border Margin width height aCSS { : ; } elemento border 5px solid red border border-width border-style (Obrigatória) border-color CSS BOX MODEL Border (Short Hand)
  127. 127. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 127 Para uma border surtir efeito, uma deve ser definida Sem ... nada feito! Esta propriedade pode assumir os seguintes valores: border-style border-style solid dotted dashed double groove ridge inset outset Podem ver exemplos em: http://www.w3schools.com/css/css_border.asp CSS A propriedadeBOX MODEL Border-style
  128. 128. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 128 border-left border-left-width border-left-style border-left-color Para a border, podemos querer definir individualmente cada face... border-top border-top-width border-top-style border-top-color border-right border-right-width border-right-style border-right-color border-bottom border-bottom-width border-bottom-style border-bottom-color Short hands CSS BOX MODEL Border
  129. 129. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 129 CSS BOX MODEL Dimensões totais (Exercício 1/4) aCSS : ; : ; : ; width height border 300px 100px 5px 4px 10px 15px Largura Total Altura Total 300 + 4 + 15 = 319px 100 + 5 + 10 = 115px
  130. 130. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 130 CSS BOX MODEL Dimensões totais (Exercício 2/4) aCSS : ; : ; : ; : ; width height border padding 900px 35px 0 1px 1px 10px 20px Largura Total Altura Total 900 + 1 + 10 + 20 + 20 = 951px 35 + 0 + 1 + 20 + 20 = 76px35 + 0 + 1 + 20 + 20 = 76px
  131. 131. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 131 CSS BOX MODEL Dimensões totais (Exercício 3/4) aCSS : ; : ; : ; : ; width height margin padding 900px 200px 10px 15px 20px Largura Total Altura Total 900 + 15 + 15 + 20 + 20 = 970px 200 + 10 + 10 + 20 + 20 = 260px
  132. 132. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 132 CSS BOX MODEL Dimensões totais (Exercício 4/4) aCSS : ; : ; : ; : ; : ; width height margin padding border 440px 270px 10px 15px 20px 5px 10px Largura Total Altura Total 440 + 10 + 10 + 15 + 15 + 5 + + 5 = 500px 270 + 10 + 10 + 15 + 15 + 20 + 10 = 350px
  133. 133. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 133 CSS BOX MODEL Ja vimos tudo do BOX Model ... voltemos a falar de elementos e elementos . Algumas considerações só: - respeitam todas as margins, padding e borders - não são afectados pelos propriedade - expandem em altura para alojar todos os seus conteúdos - Ignoram Top e Bottom margins (se aplicadas) - Ignoram os atributos e - podem ser afectados pela propriedade inline block Block: Inline: vertical-align width height vertical-align
  134. 134. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 134 Vertical Align Perguntam vocês... mas já tinhamos visto a ? Mas estamos a ver agora! Precisava era de falar do Box Model primeiro. Portanto: : serve para alinhar verticalmente elementos inline! vertical-align vertical-align Não! top middle bottom baseline length % sub super inherit text-top text-bottom
  135. 135. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 135 CSS BOX MODEL Border-radius (nova em CSS3) aCSS { ... : ; : ; ... } elemento border border-radius 5px solid green 5px 5px 5px 5px
  136. 136. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 136 CSS BOX MODEL Border-radius (nova em CSS3) aCSS { ... : ; : ; ... } elemento border border-radius 5px solid green 5px 5px 5px 5px 1 3 4 2 1 2 3 4
  137. 137. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 137 aCSS .cantos { : ; : ; ; : ; : ; } border background width: height border-radius 2px solid #16A085 #BDC3C7 200px 200px 5px CSS BOX MODEL Border-radius aCSS .circulo { : ; : ; ; : ; : ; } border background width: height border-radius 2px solid #16A085 #BDC3C7 200px 200px 50%
  138. 138. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 138 aCSS .caixacomestilo { : ; : ; ; : ; : ; } border background width: height border-radius 2px solid #16A085 #BDC3C7 200px 200px 5px 15px 5px CSS BOX MODEL Border-radius aCSS .elipse { : ; : ; ; : ; : ; } border background width: height border-radius 2px solid #16A085 #BDC3C7 400px 200px 50%
  139. 139. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 139 Suporte de CSS3 VENDOR PREFIXESpelos browsers e aCSS elemento { : ; : ; : ; } -moz-border-radius -webkit-border-radius border-radius 20px 10px 20px 20px 10px 20px 20px 10px 20px Alguns browsers O IE (lógico!) só as suporta a partir da versão 9. E com o IE não há volta a dar. Já alguns browsers mais antigos ( / ) não suportam, mas permitem o que chamamos .... São regras suportadas por cada browser «para testes» e podemos usa-las ou não. Depende de cada um de nós! não suportam as novas regras de CSS3 Firefox 3- Safari 5- Vendor Prefixes
  140. 140. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Propriedade nova CSS3 box-shadowaCSS { : ; } .caixacomsombra ... ... box-shadow 5px 5px 5px #0000FF Como já vimos Vendor Prefixes... podemos falar do box-shadow X Y blur cor 140
  141. 141. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Propriedade nova CSS3 box-shadowaCSS { : ; : ; : ; } .caixacomsombra ... ... -webkit-box-shadow -moz-box-shadow box-shadow 5px 5px 5px #0000FF 5px 5px 5px #0000FF 5px 5px 5px #0000FF Entao ... correctamente: 141
  142. 142. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! POSITIONING e FLOATING ... finalmente! Talvez o mais importante em CSS 142 Dizem vocês: temos aqui umas tantas divs, tipo a sidebar e o corpo como é que as podemos pôr lado a lado? É o que vamos ver agora!
  143. 143. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! POSITIONING Temos 4 tipos diferentes de posicionamentos: 143 aCSS : ; : ; : ; : ; position position position position static relative absolute fixed Que, dependendo do tipo usado, podem ter a acompanhar propriedades de coordenadas.. aCSS : ; : ; : ; : ; top bottom right left 100px 20% inherit auto
  144. 144. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! - É a configuração por padrão para todos os elementos. - Posiciona-se de acordo com o ‘’fluir normal’’ da página (ordem dos elementos HTML, etc...) - Propriedades como não funcionam top left : ; : ; 0 100px 144 aCSS : ;position static position: relative; position: absolute; position: fixed; aCSS : ; : ; : ; : ; top bottom right left 100px 20% inherit auto POSITION: STATIC
  145. 145. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! POSITION: STATIC - É a configuração por padrão para todos os elementos. - Posiciona-se de acordo com o ‘’fluir normal’’ da página (ordem dos elementos HTML, etc...) - Propriedades como não funcionamtop left: ; : ;0 100px 145 aCSS : ;position static position: relative; position: absolute; position: fixed;
  146. 146. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! POSITION: RELATIVE - Posiciona-se relativamente à sua posição por defeito. - Segue o ‘’normal fluir’’ do HTML, mantém o espaço previamente ocupado. 146 aCSS : ; position: static; position: absolute; position: fixed; position relative aCSS : ; : ; : ; position top left relative 100px 50px - A caixa move-se 100px para e 50px para a em relação ao canto superior esquerdo da sua posição anterior baixo direita
  147. 147. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! POSITION: RELATIVE ... experimentem 147 a CSS { : ; : ; : ; } .segundo position top left relative 200px 50px a HTML <p> </p> <p > </p> <p> </p> Lorem Ipsum 1 =’’segundo’’ Lorem Ipsum 2 Lorem Ipsum 3 class Gerar 2 parágrafos em lipsum.org para cada um dos s<p>
  148. 148. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! POSITION: ABSOLUTE - O elemento é removido (levantado) do elemento que o contém, e posicionado de acordo com a esquina da janela (viewport) do utilizador. 148 aCSS : ; position: static; position: relative; position: fixed; position absolute aCSS : ; : ; : ; position top left absolute 0 0 - A caixa posiciona-se no canto superior esquerdo da janela, e não em relação ao seu elemento pai.
  149. 149. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! POSITION: ABSOLUTE ... experimentem 149 aCSS { : ; : ; } { : ; : ; } { : ; : ; : ; : ; } { : ; : ; } div #box1 #box2 #box3 width height background-color height background-color position top left background-color height 200px 200px red 200px green absolute 0 0 blue 200px a HTML <div ></div> <div ></div> <div ></div> id id id =’’box1’’ =’’box2’’ =’’box3’’
  150. 150. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! POSITION: ABSOLUTE ... Falemos dos resultados... 150 - A nossa caixa #box2 efectivamente foi retirada da sua posição e colocada nas coordenadas (0,0) - Por causa da div #box2 ter saído do fluir normal do HTML, a caixa #box3 ‘’subiu’’ - O documento HTML não tem CSS de RESET! (O browser está a introduzir paddings no <body> sem lhe termos dito para o fazer. - Se o HTML estivesse normalizado, a caixa vermelha não se via... ficava exactamente por baixo da caixa verde. E se quisessemos que a #box2 ficasse por baixo da #box1?
  151. 151. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Propriedade z-index 151 A propriedade z-index serve para ordernar pilhas de elementos que se sobreponham no HTML (depois de lhe aplicarmos CSS). Valor auto é o valor por defeito e podemos atribuir números. - No fundo, define camadas. Uma camada com z-index maior é posta por cima de uma camada com um z-index mais pequeno. - Só funciona com posições explicitas. acrescentarExperimentem z-index: ; à #box11
  152. 152. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Propriedade z-index 152 Funcionou? Nós não explicitamos a posição para a #box1 !!!! Que ficou com valor por defeito a STATIC. Acrescentem NÃO! Eu disse que só se aplica quando as posições são explicitas! Resultou agora? :) position: ; também à #box1relative
  153. 153. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! POSITION: FIXED - Posição fixa de acordo com a janela do browser (o viweport) - Mantêm-se fixa todo o tempo! Não mexe se o user fizer scroll vertical na página 153 aCSS : ; position: static; position: relative; position: absolute; position fixed aCSS : ; : ; : ; position bottom right fixed 50px 50px - A caixa fica fixa no canto inferior direito a 50px do fundo e 50px da esquerda da janela.
  154. 154. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! aCSS { : ; : ; : ; : ; : ; : ; } #box width height background-color position bottom right 150px 30px #78A04C fixed 50px 50px a HTML <div ></div> <p> </p> <p> </p> id=’’box’’ Lorem Ipsum 1 Lorem Ipsum 2 Fazer 20 s com texto gerado em lipsum.org<p> POSITION: FIXED ... experimentem 154
  155. 155. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 155 FLOATING Floating (flutuar) faz com que elementos flutuem para um dos lados do seu elemento contentor, permitindo a outros elementos fluirem à sua volta Começou a ser usado para ‘’embrulhar’’ texto à volta de imagens Imaculada Com/Sem Som by Vitor Almeida
  156. 156. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 156 FLOATING Floating (flutuar) faz com que elementos flutuem para um dos lados do seu , permitindo a outros elementos fluirem à sua volta Começou a ser usado para ‘’embrulhar’’ texto à volta de imagens elemento contentor Imaculada Com/Sem Som by Vitor Almeida
  157. 157. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 157 FLOATING Floats servem para: Ter texto ao lado e abaixo de uma imagem Menus Horizontais Galerias de fotos Criar layouts completos de sites
  158. 158. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 158 FLOATING Uma caixa flutuada é posicionada dentro do fluxo do documento e depois retirada.... para então poder ser flutuada para a esquerda ou direita (da linha actual) tão longe quanto possível. Vai encostar sempre ao elemento ‘’contentor’’ dela ... o seu elemento pai, geralmente...
  159. 159. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 159 FLOATING Para onde ‘’vai’’ uma caixa flutuada? - Encosta à fronteira do viewport (esquerda ou direita) - Encosta à fronteira do elemento pai (o seu contentor) - Encosta a outro elemento que esteja flutuado. 3 opções
  160. 160. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 160 FLOATING Opções possíveis: Imaginemos isto: float float float float : ; : ; : ; : ; right left none inherit a HTML <img > <p> </p> src width height alt=’’imagem.jpg’’ =’’100’’ =’’100’’ =’’A imagem’’ Lorem Ipsum ...
  161. 161. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 161 FLOATING Vamos ficar com isto:
  162. 162. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 162 FLOATING aCSS { : ; }img float right
  163. 163. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 163 FLOATING aCSS { : ; }img float left
  164. 164. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 164 FLOATING aCSS { : ; : ; } img float margin left 0 20px 10px 0 Podemos aplicar margins, paddings e borders a elementos flutuados sem problemas!
  165. 165. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CLEAR FLOATS (limpar floats) Serve para limpar floats que venham de trás. Se não limparmos, os elementos seguintes são colocados abaixo do float anterior pois seguem o fluxo normal do documento naquele momento. Opções possíveis: OU OU OU OU Contínuamos com o mesmo exemplo: clear clear clear clear clear : ; : ; : ; : ; : ; right left none inherit both a HTML <img > <p> </p> src width height alt=’’imagem.jpg’’ =’’100’’ =’’100’’ =’’A imagem’’ Lorem Ipsum ... 165
  166. 166. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CLEAR FLOATS (limpar floats) Tinhamos visto que a nossa imagem foi flutuada à esquerda e o <p> fluiu para a direita da imagem. Se quisermos que o nosso <p> fique por baixo da nossa imagem flutuada à esquerda... aCSS { : ; } { : ; } img p float clear left left 166
  167. 167. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CLEAR FLOATS (limpar floats) Agora imaginemos que tinhamos 2 imagens, uma flutuada à esquerda e outra à direita, e queriamos que o <p> ficasse por baixo de ambas... aCSS { : ; } { : ; } { : ; } img.imagem1 img.imagem2 p float float clear left right left 167
  168. 168. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Problema comum em floats: Os caídos Por vezes os floats originam problemas, digamos, caricatos. width: 350px width: 250px width: 200px float: left float: left float: left O que será que acontece?? Não cabemos todos aqui!!! width: 700px 168
  169. 169. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Problema comum em floats: Os caídos! Por vezes os floats caem para posições que parecem esquisitas... width: 700px width: 350px width: 250px float: left float: left Parece estranho mas... está a funcionar exactamente como tem de funcionar! Não há espaço aqui! width: 200px float: left Soluções para isto???? 169
  170. 170. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Problema comum em floats: Os caídos! 3 hipóteses de resolver isto! width: 250px width: 250px float: left float: left width: 200px clear: left 1) 2) left Aumentar o contentor Diminuir um dos nossos elementos 3) Aplicar um ao contentor que anda aos trambolhões. clear: 170
  171. 171. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Problema comum em floats: O colapso do pai width: 250px width: 200px width: 200px float: left float: left float: left O elemento pai colapsou! Mais uma vez... parece estranho mas Elementos pais vão ‘’embrulhar’’ (WRAP) em volta do conteúdo somente quando este está no seu fluxo normal. Aqui estão todos flutuados está a funcionar como é suposto. 171
  172. 172. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Problema comum em floats: O colapso do pai Há imensas soluções para isto ... aqui vão 4 opções: 1) left 400px 2) both block ‘’ ‘’ Aplicar uma float e uma width ao elemento pai { : ; : ; } Criar conteúdo gerado usando o pseudo-elemento :after { : ; : ; : ; } Este conteúdo gerado, está no fluxo normal e então o bloco pai fará o wrapping em volta do conteúdo gerado e assim dos floats também! #boxpai #boxpai:after float width clear display content 172
  173. 173. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Problema comum em floats: O colapso do pai 3) inline-block 4) hidenn 1) 3) 4) Uma é que, automáticamente fazem o wrap a floats! Obrigar o pai a portar-s como inline-block { : ; } Aplicar um overflow hidden ao pai { : ; } A soluções , e geram um novo «contexto de formatação de bloco» Esta nova caixa funciona como qualquer outro tipo, com algumas excepções. #boxpai #boxpai display overflow 173
  174. 174. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! O truque do CLEARFIX O clearfix é talvez o mais famoso truque entre web developers e sem dúvida o mais usado para resolver problemas de FLOATS. A ideia é a seguinte: a seguir aos nossos elementos com floats, introduzimos um elemento vazio e o css deste nosso elemento limpa floats e aplica os truques que vimos anteriormente. Ao fazer um site (em especial o CSS do site) a regra do é sempre das primeiras coisas a pormos na nossa folha... ! clearfix Copy & Paste 174
  175. 175. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! CLEARFIX como fazer a HTML <div > </div> <div > </div> <div ></div> id id class =’’divcomfloat1’’ =’’divcomfloat2’’ =’’clearfix’’ ... ... ... ... ... ... ... ... ... ... aCSS { : ; : ; : ; : ; : ; } .clearfix visibility display content clear height hidden block ‘’ ‘’ both 0 { : ; } /* IE 6*/ 1* html .clearfix zoom { : ; } /* IE 7*/ 1 *:first-child+html .clearfix zoom 175
  176. 176. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Propriedades de visualização: DISPLAY aCSS { : ; } span.especial display block 176 É usada com 2 fins possiveis: none- Para esconder um elemento. O elemento é completamente escondido (não ocupa espaço na página) - Para obrigarmos um certo tipo de elemento a comportar-se como se fosse outro tipo. Podemos querer que um elemento inline se comporte como um elemento block. display: ; div.superespecial { : ; } display inline
  177. 177. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Propriedades de visualização: DISPLAY aCSS 177 Por vezes é também necessário fazer certas divs comportarem-se como um hibrido de elemento Inline e elemento Block Nestes casos usamos o O interior do elemento comporta-se como se fosse um bloco (Ex: <div>) e o elemento em si é formatado como se tratasse de um elemento inline (Ex: <p>) display: ;inline-block Bastante útil para lidar com floats mal-comportados! http://quirksmode.org/css/css2/display.htmlAprenda mais em: div.mesmosuperespecial { : ; } display inline-block
  178. 178. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Propriedades de visualização: VISIBILITY aCSS 178 O atributo pode ser usado para tornar um elemento invisível Difere do no sentido em que aqui, o elemento ainda mantem o espaço que lhe pertence, mesmo que esteja invisível. Também é usado para colapsar uma coluna ou linha de uma tabela. A tabela mantem o seu layout. visibility display: ;none #umelementoqq { : ; }visibility hidden aCSS #umelementoqq { : ; }visibility collapse
  179. 179. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Propriedades de visualização: OVERFLOW a CSS 179 Esta propriedade é usada quando o conteúdo de uma caixa é maior que as dimensões que essa caixa possúi. Pode adoptar os seguintes valores: overflow overflow overflow overflow overflow : ; : ; : ; : ; : ; visible hidden scroll auto inherit
  180. 180. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Propriedades de visualização: OVERFLOW 180 overflow: ;visible overflow: ;hidden
  181. 181. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! overflow: ;autooverflow: ;scroll Propriedades de visualização: OVERFLOW 181
  182. 182. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! overflow: ;autooverflow: ;scroll Propriedades de visualização: OVERFLOW 182
  183. 183. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Para o selector : : ; : ; Para o selector : : ; table caption border-collapse border-spacing caption-side colapse 10px 10px bottom A estilização de tabelas processa-se como qualquer outro elemento Algumas das propriedades especificas para tabelas são: 183 Estilização de TABELAS
  184. 184. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Mais vale aprender vendo exemplos! http://cesae.afonsogomes.com/tabelas.html Analisem o código fonte! 184 Estilização de TABELAS
  185. 185. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! ul ol #ambas-as-listas { : ; } /* Opções: , , , */ { : ; } /* Opções: , , , , , */ { : ; : ; /* Onde está a bullet */ } list-style-type list-style-type list-style-image list-style-position square none disc circle square decimal decimal decimal-leading-zero lower-alpha upper-alpha lower-roman upper-roman url(’’anossabullet.png’’) inside Podem mudar o aspecto das bullets ( ) e dos números ( ) por CSS. Já vimos como fazer por HTML, não vamos insistir nessa tecla. Estas são as propriedades só aplicaveis a listas: <ul> <ol> 185 Estilização de LISTAS
  186. 186. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Vamos fazer exemplos para o caso de um menu de <nav> 186 Estilização de LISTAS aHTML <nav> <ul> <li><a > </a></li> <li><a > </a></li> <li><a ><img ></a></li> <li><a > </a></li> <li><a > </a></li> </ul> </nav> href href href src href href =’’sobre.html’’ Sobre mim =’’cv.html’’ Curriculum =’’index.html’’ =’’logo.png’’ =’’sobre.html’’ Portfolio =’’sobre.html’’ Contactos Quais serão as primeiras considerações a fazer?
  187. 187. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 1) O normal é entrar logo a matar e arrumar com as bullets. 187 Estilização de LISTAS CSS nav ul { : ; }list-style none 2) Pôr na horizontal. 2 opções: ou tratam s como inline ou usam floats. (Se quiserem os links, dentro dos , do mesmo tamanho --> Floats) LI <li> CSS nav ul li { : ; }float left 3) Como fazemos para por todo o ‘’clicável’’ e não só o texto no ?<li> <a> CSS nav ul li a { : ; }display block
  188. 188. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 4) Daqui para a frente é estilização dos s Depende do design que desejamos para cada projecto Li 188 Estilização de LISTAS Mais vale aprender vendo exemplos! http://cesae.afonsogomes.com/navmenu.html Analisem o código fonte! (Demorou 25 minutos a fazer!)
  189. 189. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Os sistemas de grelhas foram criados para facilitar a (repetitiva) tarefa de criarmos grelhas para os sites que fazemos. Ao usarmos um, sabemos que estamos a usar um sistema coerente em termos de tamanhos e espeçamentos entre os nossos elementos no site. Existem muitos... usaremos o 960.gs 189 GRID SYSTEMS
  190. 190. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 190 GRID SYSTEMS Existem sistemas de grelhas para todos os gostos e feitios: Os mais usados são: 960.GS Twitter Bootstrap
  191. 191. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 191 GRID SYSTEMS Depois temos outros, bons ou maus, com mais ou menos funcionalidade, responsivos ou não, mais simples ou mais complexos! Há para todos os gostos... Recomendo: http://960.gs http://unsemantic.com http://foundation.zurb.com http://getbootstrap http://lessframework.com http://www.getskeleton.com
  192. 192. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 192 960.GS É, talvez, o sistema de grelhas mais fácil e intuitivo de usar. Para aprendizagem é o ideal ... Com o progredir podemos evoluir para um Bootstrap (responsive) ou até mesmo o Foundation da Zurb (também responsive)... mas comecemos com uma coisa simples. Vamos ve-lo juntos
  193. 193. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Recomendações e boas práticas 1) 2) 3) @import Evitar estilos inline (em elementos). São de difícil manutenção e aumentam o tamanho dos ficheiros Evitar estilos internos (no head). São de difícil manutenção e aumentam o tamanho dos ficheiros Evitar a regra do @import ... atrasa o carregamento do site ‘’outro-css-qq.css’’;<style> </style> 193 Já na recta da meta... Já a acabar os slides!
  194. 194. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! Recomendações e boas práticas 4) 5) 6) Evitar usar multiplas folhas de CSS. Aumenta os HTTP requests e atrasa muito o carregamento. Condense tudo numa! Agrupar selectores sempre que possível e recorrer ao nesting Usar e abusar das propriedades shorthand sempre que possível 194 Já na recta da meta... Já a acabar os slides!
  195. 195. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 195 Já na recta da meta... Já a acabar os slides! Recomendações e boas práticas 7) 8) 9) Não abusar do !important muitas vezes é desnecessário e pode causar muitas dores de cabeça no futuro Evitar selectores muito complicados. Seja tão específico quanto necessário no uso dos selectores. Evitar o selector universal. Atrasa muito a renderização em todos os browsers.
  196. 196. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 196 Já na recta da meta... Já a acabar os slides! Recomendações e boas práticas 10) 12) 13) Evite qualificar selectores, tente ser genérico! é melhor que Pode depois ser re-utilizada. Evitar a propriedade que é só para o IE. Diminui a performance da página, nos browsers bons! Seja parco no uso de IDs. Prefira as classes! .umaclasseqq div.umaclasseqq filter
  197. 197. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 197 Já na recta da meta... Já a acabar os slides! Recomendações e boas práticas 14) 15) 16) Tente não usar muitas declarações . Minifique o seu CSS antes de por o site no servidor de produção (Versão final). Há minificadores automáticos... prefira fazer por si! Optimize as IMAGENS o mais que puder! São os ficheiros de um site que mais espaço ocupam! Só não prejudique (muito) a sua visualização no site. font-size
  198. 198. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 198 Já na recta da meta... Já a acabar os slides! Recomendações e boas práticas 17) 18) 19) Sempre que possível, recorra ao uso de SPRITES para combinar imagens... Pode também recorrer a fonts de icones (glifos) se se aplicar... Prefira usar CSS3 em vez de imagens (ex: Gradientes)
  199. 199. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! 199 Já na recta da meta... Já a acabar os slides! Recomendações e boas práticas 20 Em caso de dúvidas, recorra ao Afonso. Mas sem abusos! :) 10 emails num dia ... 10 emails num mês ... tudo bem! NÃO!
  200. 200. PROFISSIONAL EM WEBDESIGN b Estilos em CSS Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! C’est Fini! 200

×