Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Construindo layout de sites com CSS

11.646 Aufrufe

Veröffentlicht am

Workshop ministrado durante a Jornada de Informática da UNESP-Bauru em setembro de 2010.

Veröffentlicht in: Technologie

Construindo layout de sites com CSS

  1. 1. Construindo layoutde sites comCSS<br />XI JORNADA DE INFORMÁTICA<br />UNESP - BAURU<br />Talita Pagani<br /> @talitapagani<br />
  2. 2. Agenda<br />Introdução<br />Inserindo o CSS em documentos HTML<br />Por que Folhas de Estilo em Cascata?<br />Seletores<br />Propriedades<br />O Box Model<br />Na Prática: estilizando um documento XHTML com CSS<br />Diretrizes para melhorar o desenvolvimento de layouts<br />O que vem por aí com o CSS 3<br />
  3. 3. Agenda<br />Introdução<br />Inserindo o CSS em documentos HTML<br />Por que Folhas de Estilo em Cascata?<br />Seletores<br />Propriedades<br />O Box Model<br />Na Prática: estilizando um documento XHTML com CSS<br />Diretrizes para melhorar o desenvolvimento de layouts<br />O que vem por aí com o CSS 3<br />
  4. 4. Introdução<br />Cascading Style Sheets ou Folhas de Estilo em Cascata<br />Linguagem de formatação para documentos HTML e XHTML<br />Separa o estilo do conteúdo<br />Criação e manutenção do design ficam mais fáceis e consistentes<br />
  5. 5. Introdução<br />Principais especificações do CSS<br />CSS 1 (1996, 1999): continha apenas propriedades básicas<br />CSS 2.1: versão mais utilizada atualmente<br />CSS 3: em desenvolvimento, contém novas propriedades, mas já pode ser utilizada<br />
  6. 6. Introdução<br />
  7. 7. Introdução<br />estilo.css<br />arquivo.html<br />arquivo.html<br />
  8. 8. Agenda<br />Introdução<br />Inserindo o CSS em documentos HTML<br />Por que Folhas de Estilo em Cascata?<br />Seletores<br />Propriedades<br />O Box Model<br />Na Prática: estilizando um documento XHTML com CSS<br />Diretrizes para melhorar o desenvolvimento de layouts<br />O que vem por aí com o CSS 3<br />
  9. 9. Inserindo o CSS em documento HTML<br />Inline<br />Insere as definições de estilo diretamente no elemento (não recomendado) <br /><p style=”color: #F00;”>Conteúdo</p> <br />Embeded<br />O código é embutido diretamente em um arquivo HTML <br /><style type=”text/css”> p { color: #F00; } </style> <br />Arquivo Externo<br />Todas as definições de estilo ficam centralizadas em um arquivo externo *.css que deve ser linkado aos arquivos HTML que a utilizarão, dentro da tag <head>. <br /><link rel="stylesheet" type="text/css" href="structure.css" /> <br />
  10. 10. Agenda<br />Introdução<br />Inserindo o CSS em documentos HTML<br />Por que Folhas de Estilo em Cascata?<br />Seletores<br />Propriedades<br />O Box Model<br />Na Prática: estilizando um documento XHTML com CSS<br />Diretrizes para melhorar o desenvolvimento de layouts<br />O que vem por aí com o CSS 3<br />
  11. 11. Por que Folhas de Estilo em Cascata?<br />Prioridade e precedência de estilos<br />Quando várias regras são aplicadas a uma elemento, entra em cena as regras de precedência em cascata:<br />Estilo inline (maior precedência)<br />Folha de estilo embutida<br />Folha de estilo linkada<br />Estilo padrão do navegador (menor precedência)<br />
  12. 12. Agenda<br />Introdução<br />Inserindo o CSS em documentos HTML<br />Por que Folhas de Estilo em Cascata?<br />Seletores<br />Propriedades<br />O Box Model<br />Na Prática: estilizando um documento XHTML com CSS<br />Diretrizes para melhorar o desenvolvimento de layouts<br />O que vem por aí com o CSS 3<br />
  13. 13. Seletores<br />seletor{propriedade: valor; }<br />Seletor que define<br />o elemento que<br />receberá o estilo<br />Um atributo que será<br />alterado (bordas, margem,<br />fonte, espaçamento, etc.)<br />Valor da propriedade,<br />podendo ser numérico,<br />texto, medida, código, etc.<br />Declaração<br />Bloco de Declarações<br />
  14. 14. Seletores<br />Um seletor pode ser:<br />Uma tag HTML (ex.: p {...}, div {...}, h1 {...}, etc.)<br />Uma classe<br />Definição de estilo que pode ser utilizada por mais de um elemento na mesma página, criando assim uma categoria . Começam sempre com um ponto e são utilizadas no atributo class do HTML<br />Um ID<br />constitui uma definição/identificação única e só pode ser utilizada para apenas um elemento em cada página. Começam com # e são utilizados na propriedade id do HTML<br />
  15. 15. Seletores<br />Um seletor pode ser:<br />Seletores mistos (ex.: p.destaque {...}, div#header {...})<br />Seletores agrupados (ex.: h1, p, div {...} )<br />Se vários elementos possuem as mesmas propriedades, pode-se aplicá-las em uma única declaração, separando os seletores com vírgula<br />Seletores encadeados (ex.: #coluna div p {...})<br />Também chamados de seletores contextuais, definem uma regra para especificar o estilo de um elemento dentro de outros elementos<br />Pseudo-classes (ex.: :link, :active, :hover, :visited, :first-child, etc.)<br />E combinações de todas essas formas<br />
  16. 16. Agenda<br />Introdução<br />Inserindo o CSS em documentos HTML<br />Por que Folhas de Estilo em Cascata?<br />Seletores<br />Propriedades<br />O Box Model<br />Na Prática: estilizando um documento XHTML com CSS<br />Diretrizes para melhorar o desenvolvimento de layouts<br />O que vem por aí com o CSS 3<br />
  17. 17. Principais Propriedades<br />Plano de Fundo:<br />background-color<br />background-image<br />background-repeat (repeat, repeat-x, repeat-y, no-repeat) <br />background-attachment (fixed, scroll)<br />background-position<br />Forma abreviada: background<br />background: #FC0 url(imagem.gif) no-repeat center top; <br />
  18. 18. Principais Propriedades<br />Bordas<br />border-bottom (<width> <style> <color>)<br />border-bottom-color<br />border-bottom-style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit)<br />border-bottom-width<br />border-left<br />border-right<br />border-top<br />Todas juntas: border<br />border-color<br />border-style<br />border-width<br />outline-color<br />outline-style<br />outline-width<br />border: 2px solid #FF9900;<br />border: 2px solid #FF9900;<br />border-right-color: #4A7EBB;<br />border-bottom-color: #4A7EBB;<br />border: 2px solid #FF9900;<br />outline: 1px solid #000000;<br />
  19. 19. Principais Propriedades<br />Dimensões<br />height<br />min-height<br />max-height<br />width<br />min-width<br />max-width<br />
  20. 20. Principais Propriedades<br />Texto<br />Font-style<br />Font-variant<br />font-weight<br />font-size<br />line-height<br />font-family<br />Forma abreviada: font<br />font: italic bold 12px/18px Arial, Helvetica, sans-serif;<br />
  21. 21. Principais Propriedades<br />Texto<br />color<br />color: #036;<br />letter-spacing<br />text-align (center, left, right, justify)<br />text-decoration (none, underline, overline, line-through, blink)<br />text-indent<br />text-transform (none, capitalize, uppercase, lowercase)<br />white-space (normal, pre, nowrap)<br />
  22. 22. Principais Propriedades<br />Lista<br />list-style-image (url(“imagem"))<br />list-style-position (inside, outside)<br />list-style-type (none, circle, disc, square, armenian, decimal, decimal-leading-zero, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman)<br />Forma abreviada: list-style<br />list-style: insidesquare url("/images/blueball.gif");<br />
  23. 23. Principais Propriedades<br />Margens<br />margin-bottom<br />margin-left<br />margin-right<br />margin-top<br />Forma abreviada: margin (top rightbottomleft)<br />margin: 10px 5px 2px 150px;<br />margin: 10px auto;<br />
  24. 24. Principais Propriedades<br />Espaçamento interno<br />padding-bottom<br />padding-left<br />padding-right<br />padding-top<br />Forma abreviada: padding(top rightbottomleft)<br />padding: 8px 10px 8px 20px;<br />padding: 10px 5px;<br />
  25. 25. Principais Propriedades<br />Posicionamento<br />float (left, right, none)<br />clear (left, right, both, none)<br />display (block, inline, inline-block, inline-table, list-item, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group, none)<br />overflow (visible, hidden, scroll, auto)<br />position (absolute, fixed, relative, static)<br />top<br />right<br />left<br />bottom<br />visibility (visible, hidden, collapse)<br />z-index<br />
  26. 26. Principais Propriedades<br />
  27. 27. Principais Propriedades<br />
  28. 28. Principais Propriedades<br />Pseudo-classes<br />:active<br />:focus<br />:hover<br />:link<br />:visited<br />:first-child<br />:first-letter<br />:after<br />:before<br />
  29. 29. Agenda<br />Introdução<br />Inserindo o CSS em documentos HTML<br />Por que Folhas de Estilo em Cascata?<br />Seletores<br />Propriedades<br />O Box Model<br />Na Prática: estilizando um documento XHTML com CSS<br />Diretrizes para melhorar o desenvolvimento de layouts<br />O que vem por aí com o CSS 3<br />
  30. 30. O Box Model<br />Padrão de renderização ou apresentação visual de um box (container de informações) segundo a formatação CSS.<br />
  31. 31. O Box Model<br />
  32. 32. O Box Model<br />Se uma div possuir largura e altura de 200 pixels e paddingde 10 pixels em todas as direções, o navegador irá mostrar uma caixa com 220 pixels de largura e altura <br />
  33. 33. Agenda<br />Introdução<br />Inserindo o CSS em documentos HTML<br />Por que Folhas de Estilo em Cascata?<br />Seletores<br />Propriedades<br />O Box Model<br />Na Prática: estilizando um documento XHTML com CSS<br />Diretrizes para melhorar o desenvolvimento de layouts<br />O que vem por aí com o CSS 3<br />
  34. 34. Na Prática<br />Iremos estilizar um documento HTML pronto utilizando as propriedades CSS<br />
  35. 35. Na Prática<br />
  36. 36. Na Prática<br />.wrapper<br />
  37. 37. Na Prática<br />.header<br />.navbar<br />.content<br />.footer<br />
  38. 38. Na Prática<br />.mainContent<br />.sidebar<br />
  39. 39. Na Prática<br />Baixar os arquivos do minicurso em http://www.talitapagani.com/material/site_minicurso.zip e descompactar na sua máquina<br />Abrir o Dreamweaver<br />Ctrl+N para criar um nova arquivo do tipo CSS<br />
  40. 40. Na Prática<br />Salve o arquivo com o nome estilo.css na mesma pasta do arquivo index.html<br />Abrir o arquivo index.html no Firefox, no Internet Explorer e no IETester<br />
  41. 41. Na Prática<br />Começando: Declaração Reset<br />*<br />{ border: none; margin: 0; padding: 0; }<br />
  42. 42. Na Prática<br />body<br />{ background: #069 url(images/bg_body.jpg) repeat-x 0 0; font: normal 12px/18px Arial, Helvetica, sans-serif;padding: 20px; }<br />a, a:visited<br />{ color: #069; }<br />a:hover<br />{ color: #333; text-decoration: none; }<br />
  43. 43. Na Prática<br />/* Estrutura */<br />.wrapper<br />{ background: #FFF; border: 1px solid #666; height: 100%; margin: 0 auto 0 auto; overflow: hidden;padding: 10px; width: 980px; }<br />
  44. 44. Na Prática<br />.header<br />{ height: 100%; position: relative; width: 100% }<br /> .header img<br /> { vertical-align: middle; }<br />
  45. 45. Na Prática<br />.content<br />{ height: 100%; overflow: hidden; padding: 10px 0 10px 0; }<br />.mainContent<br />{ float: left; width: 760px; }<br />.sidebar<br />{ float: left;margin: 0 0 0 20px; width: 200px; }<br />.footer<br />{ border-top: 3px solid #999; clear: both; }<br />
  46. 46. Na Prática<br />/* Caixa de Busca */<br />.search<br />{ bottom: 80px; position: absolute; right: 0px; width: 400px; }<br /> .search input<br /> { border: 1px solid #999; padding: 3px; width: 300px; }<br /> .search button<br /> { background: #F60; border: 2px outset #F60; color: #FFF; font: bold 14px Arial, Helvetica, sans-serif; margin: 0 0 0 10px; }<br />
  47. 47. Na Prática<br />/* Menu de Navegação */<br />.navbar<br />{ background: url(images/bg_navbar.jpg) repeat-x 0 0; font-size: 14px; height: 42px; margin: 0; }<br /> .navbarli<br /> { float: left;list-style: none; margin: 0 10px 0 10px; }<br /> .navbarli a, .navbarli a:visited<br /> { color: #FFF; display: block; font-weight: bold; line-height: 42px; text-decoration: none; }<br /> .navbar .menuActive<br /> { margin-top: 5px; }<br /> .navbar .menuActive a, .navbar .menuActive a:visited<br /> { background: #FFF; color: #F60; padding: 0 10px 0 10px; line-height: 37px; }<br />
  48. 48. Na Prática<br />/* Menu do footer */<br />.footerNavbar<br />{ padding: 10px 0 10px 0; }<br /> .footerNavbarli<br /> { float: left; list-style: none; margin: 0 10px 0 10px; }<br /> .footerNavbarli a, .footerNavbarli a:visited<br /> { font-size: 11px; font-weight: bold; }<br /> .footerNavbar .copyright<br /> { float: right; }<br />
  49. 49. Na Prática<br />/* Tipografia */<br />h2<br />{ color: #666; font-size: 32px; font-weight: normal; line-height: 40px; margin: 10px 0 10px 0; }<br />h2 strong<br /> { color: #000; }<br />h3<br />{ border-bottom: 1px solid #CCC; font-size: 18px; font-weight: normal; line-height: 24px; margin: 10px 0 10px 0; }<br />
  50. 50. Na Prática<br />/* Notícias */<br />.headline<br />{ background: #E1E9FF; margin: 0 0 10px 0; padding: 10px; width: 180px; }<br /> .headline p<br /> { background: #FFF; border: 1px solid #999; font-size: 11px; height: 100%; overflow: hidden; padding: 5px; }<br /> .headline img<br /> { border: 1px solid #CCC; padding: 1px; }<br />.imgSales<br />{ float: left; margin-right: 5px; }<br />.imgComputer<br />{ float: right; margin-left: 5px; }<br />
  51. 51. Na Prática<br />/* Serviços */<br />.services<br />{ float: left; list-style: none; margin: 0 0 0 10px; padding: 0; width: 31%; }<br /> .services li<br /> { background: #EEE; clear: left; float: left; padding: 0 5px 0 5px; margin: 0 0 5px 0; width: 95%; }<br /> .services li a, .services li a:visited<br /> { display: block; }<br />
  52. 52. Agenda<br />Introdução<br />Inserindo o CSS em documentos HTML<br />Por que Folhas de Estilo em Cascata?<br />Seletores<br />Propriedades<br />O Box Model<br />Na Prática: estilizando um documento XHTML com CSS<br />Diretrizes para melhorar o desenvolvimento de layouts<br />O que vem por aí com o CSS 3<br />
  53. 53. Diretrizes para melhorar o desenvolvimento de layouts<br />Construa o layout por etapas e ao concluir a etapa teste em diferentes navegadores<br />Desenvolva para os navegadores modernos e depois adapte para os antigos<br />Valide seu código HTML e CSS<br />Evite hacks para determinados navegadores<br />Modularizar CSS quando necessário<br />@import url(“estilo.css”)<br />Múltiplas folhas de estilo<br />
  54. 54. Agenda<br />Introdução<br />Inserindo o CSS em documentos HTML<br />Por que Folhas de Estilo em Cascata?<br />Seletores<br />Propriedades<br />O Box Model<br />Na Prática: estilizando um documento XHTML com CSS<br />Diretrizes para melhorar o desenvolvimento de layouts<br />O que vem por aí com o CSS 3<br />
  55. 55. O que vem por aí com CSS3<br />Maior controle de formas e efeitos<br />Maior independência do uso de imagens, principalmente PNG para criar transparências<br />Estilizar elementos de acordo com determinados atributos da tag HTML<br />Concentrar a formatação cada vez mais apenas no CSS, diminuindo o uso de imagens e scripts<br />
  56. 56. O que vem por aí com CSS3<br />Cantos arredondados: border-radius<br />#div1 {  <br />border: 1px solid #699;  <br />-moz-border-radius: 20px;  <br />-webkit-border-radius: 20px;  <br />}  <br />
  57. 57. O que vem por aí com CSS3<br />Sombras em elementos de bloco: box-shadow<br />#div2 {  <br />border: 1px solid #699;  <br />-moz-box-shadow: 5px 5px 5px #b6ebf7;  <br />-webkit-box-shadow: 5px 5px 5px #b6ebf7;  <br />} <br />
  58. 58. O que vem por aí com CSS3<br />Sombras em textos: text-shadow<br />p.shadow { <br />text-shadow: 2px 2px2px #000;<br />}<br />
  59. 59. O que vem por aí com CSS3<br />Transparência: opacity e rgba<br />#div3 {  <br />background-color: rgba(110, 142, 185, .4);  <br />}  <br />#div3 {  <br />background-color: #6e8eb9;  <br />opacity: 0.4;<br />}  <br />
  60. 60. O que vem por aí com CSS3<br />Colunas: column-count, column-gap, column-rule<br />#div4 {  <br />/* borda inserida para facilitar o entedimento */  <br />border: 1px solid #699;  <br />-moz-column-count: 2;  <br />-moz-column-gap: 20px;  <br />-moz-column-rule: 1px solid #6e8eb9;  <br />  <br />-webkit-column-count: 2;  <br />-webkit-column-gap: 20px;  <br />-webkit-column-rule: 1px solid #6e8eb9;  <br />}  <br />
  61. 61. O que vem por aí com CSS3<br />Múltiplos backgrounds: separar os backgrounds por vírgula<br />#div5 blockquote{ <br />background: url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%; <br />} <br />
  62. 62. O que vem por aí com CSS3<br />Background com gradiente: linear-gradient, gradient<br />#div8 { <br />background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%); <br />background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff)); <br />} <br />
  63. 63. O que vem por aí com CSS3<br />Rotacionar elementos: transform<br />#div9 {  <br />-moz-transform: rotate(2deg);  <br />-webkit-transform: rotate(2deg);  <br />}<br />
  64. 64. O que vem por aí com CSS3<br />Seletores por atributos<br />elemento[atributo=valor]<br />input[type=“text”]<br />div[title=“abc”]<br />:not()<br />div.teste :not(span)<br />tabletrtd :not(:last-child)<br />:last-child<br />ol.teste li:last-child<br />:empty<br />p:empty<br />E muitos outros<br />
  65. 65. Referências<br />MACEDO, Marcelo da Silva. Construindo sites adotando padrões Web. Rio de Janeiro: Editora Ciência Moderna Ltda., 2004. <br />SILVA, Maurício Samy. Criando sites com HTML: sites de alta qualidade com HTML e CSS. São Paulo: Novatec Editora, 2008.<br />VISIE. Campus Online. Textos sobre Tableless.<br />
  66. 66. Referências e sites interessantes<br />Tablelesswww.tableless.com.br<br />CSS no Lanchewww.cssnolanche.com.br<br />Maujorwww.maujor.com<br />Pinceladas da Webwww.pinceladasdaweb.com.br<br />W3Schoolshttp://www.w3schools.com/<br />
  67. 67. Referências e sites interessantes<br />CSS3.infowww.css3.info<br />10 Efeitos com Propriedades CSS<br />http://www.kadunew.com/blog/css/10-efeitos-com-propriedades-css3<br />
  68. 68. PERGUNTAS?<br />
  69. 69. OBRIGADA!<br />contato@talitapagani.com<br />talita@tableless.com.br<br />Twitter: @talitapagani<br />

×