Construindo layout de sites com CSS

10,422 views
10,305 views

Published on

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

Published in: Technology
7 Comments
26 Likes
Statistics
Notes
No Downloads
Views
Total views
10,422
On SlideShare
0
From Embeds
0
Number of Embeds
387
Actions
Shares
0
Downloads
261
Comments
7
Likes
26
Embeds 0
No embeds

No notes for slide

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 />

×