Introdução ao HTML e CSS

4.976 visualizações

Publicada em

0 comentários
12 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
4.976
No SlideShare
0
A partir de incorporações
0
Número de incorporações
166
Ações
Compartilhamentos
0
Downloads
368
Comentários
0
Gostaram
12
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução ao HTML e CSS

  1. 1. Introdução ao HTML e CSS Prof. Sérgio Souza Costa Obs: Alguns slides foram elaborados pela professora Vanesssa
  2. 2. O que o servidor faz ....
  3. 3. O que o cliente (navegador web) faz ....
  4. 4. O HTML, nada mais que texto
  5. 5. O navegador renderiza o HTML
  6. 6. HTML Timeline vs. 1990 1995 1996 1997 1998 1999 2000 2001 XHTML 2.0 Begins… HTML 1.0 RFC 1866 2002 Logo oficial do Html5 201 0
  7. 7. HTML Timeline vs. 1990 1995 1996 1997 1998 1999 2000 2001 XHTML 2.0 Begins… HTML 1.0 RFC 1866 2002 Logo oficial do Html5 201 0
  8. 8. HTML - Template <html> <head> <title></title> </head> <body> </body> </html>
  9. 9. HTML 4.01 - Template <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <p>Ola mundo</p> </body> </html>
  10. 10. HTML 5 - Template <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
  11. 11. XHTML - Template <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html lang=”EN” dir=”ltr” xmlns=”http://www.w3. org/1999/xhtml”> <head> <meta http-equiv=”content-type” content=”text/xml; charset=utf-8” /> <title></title> </head> <body> </body> </html>
  12. 12. HTML vs XHTML HTML: dont worry !! escreva algo que o navegador fará o seu melhor para renderizar. XHTML: se não é para fazer direito, melhor nem começar. Como vais querer que o JavaScript, CSS, AJAX funcione ? ● rigidez do XML
  13. 13. HTML ● HyperText Markup Language (HTML) ou Linguagem de Marcação de Hipertexto é a linguagem usada pelos navegadores para mostrar as páginas web ao usuário. ● Ela permite combinar textos, imagens e áudios, além introduzir referências a outras páginas por meio dos links hipertextos.
  14. 14. Tags, elementos e atributos ● A sintaxe da HTML baseia-se em um elemento chamado tag (etiqueta). ● Tags são rótulos usados para informar ao navegador como o conteúdo deve ser apresentado.
  15. 15. Tags, elementos e atributos ● A tag tem a seguinte forma geral: <tag> ..... </tag> ● Tudo que estiver contido entre uma tag de abertura <> e uma tag de fechamento </> será processado segundo o comando contido na tag. ● Algumas tags, chamadas tags de comandos isolados, não necessitam de um conteúdo para serem processados. <BR> ● Tag para pular linha
  16. 16. E quanto aos atributos ?
  17. 17. E quanto aos atributos ? Atributos modificam as tags, dizendo algo sobre os elementos < html > < head > < title > Popular Websites: Google < /title > < /head > < body > < h1 > About Google < /h1 > < p > Google is best known for its search engine, although Google now offers a number of other services. < /p > < p > Google’s mission is to organize the world’s information and make it universally accessible and useful. < /p > < p > Its founders Larry Page and Sergey Brin started Google at Stanford University. < /p > < p > < a href=”http://www.Google.com/” > Click here to visit Google’s Web site. < /a > < /p > < /body > < /html >
  18. 18. Tags, elementos e atributos Com a evolução da web, novos padrões, crescimento na complexidade dos grandes sistemas ... Algumas tags perderam o uso para outros padrões. Então temos : ● Bad tags, conheça para não usar :) ● Good tags
  19. 19. Bad Tags Tag Explanation b Presentational. Use strong instead. basefont Deprecated. big Presentational. Use CSS instead. center Deprecated. dir Deprecated. font Deprecated. hr Presentational. Use CSS instead. i Presentational. Use em instead. u Deprecated.
  20. 20. Bad Tags Tag Explanation isindex Deprecated. menu Deprecated. s Deprecated. small Presentational. Use CSS instead. strike Deprecated. Use del instead. tt Presentational. Use CSS instead.
  21. 21. Good tags: tags que tem semântica relacionada <p> , <body>, <strong>, <em>, <a>, <ul>, <li> ...
  22. 22. O que pode ter no HTML ?
  23. 23. O que pode ter no HTML ? Elementos estruturantes
  24. 24. Elementos estruturantes
  25. 25. HTML – Seção HEAD ● O elemento HEAD (Cabeçalho) define uma seção que contém informações sobre o documento HTML. ● A seção pode incluir scripts, instruções para o browser encontrar os estilos, metadados, entre outros. ● As tags que podem estar na seção HEAD são: ● <title> ● <base> ● <link> ● <meta> ● <script> ● <style>
  26. 26. HTML – Seção HEAD Elemento TITLE ● Define o título do documento ● O elemento título é obrigatório em todos os documentos HTML/XHTML. ● Esse título é referenciado em buscas pela rede, dando uma identidade ao documento. ● Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho para ela.
  27. 27. HTML – Seção HEAD Elemento TITLE <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Home Page do Sérgio Costa</title> </head> <body> </body> </html>
  28. 28. HTML – Seção HEAD Elemento BASE ● Define uma url padrão para os links do documento. ● <base href =http://meusite.com.br /> ● Define um target padrão para os links do documento. ● <base target =“_blank” />
  29. 29. HTML – Seção HEAD Elemento LINK ● Define ligações do documento HTML com outros arquivos como CSS, scripts, etc. ● Tem como atributos as tags rel, type e href ● Onde rel define o tipo de relacionamento ● Type fornece informações aos navegadores sobre o conteúdo do elemento que o contém (dado, estilo, script...) ● HREF informa a URL que o link aponta ● A tag <link> é mais usada para ligar o documento HTML com o style sheets: <link rel = “stylesheet” type = “text/css” href=“estilo.css”/>
  30. 30. HTML – Seção HEAD Elemento META ● O propósito do elemento meta é prover meta-informação sobre o documento. ● Metadados – dados sobre dados ● Usado tipicamente para especificar descrição da página, palavras-chave, autor do documento, última modificação e outros metadados. ● Muito frequentemente esse elemento é usado para prover informação que é relevante para os navegadores ou para as ferramentas de busca como a descrição do conteúdo do seu documento. <meta name = “ ” content = “ ” />
  31. 31. HTML – Seção HEAD Elemento META <!DOCTYPE html> <html> <head> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Hege Refsnes"> <meta charset="UTF-8"> </head> <body> <p>All meta information goes in the head section...</p> </body> </html>
  32. 32. HTML – Seção HEAD Elemento META ● Um dos elementos do meta é o HTTP-EQUIV. ● Uma das funcionalidades é dizer ao navegador o tipo de dado que ele encontrará no documento.
  33. 33. HTML – Seção HEAD Elemento META ● Um exemplo de uso comum do atributo HTTP-EQUIV é promover a mudança automática de páginas, atribuindolhe o valor Refresh. view-source:http://www.dpi.inpe.br/~scosta/ <meta http-equiv="refresh" content="3; URL=http://sites.google.com/site/skosta/">
  34. 34. HTML – Seção HEAD Elemento SCRIPT Usado para definir um script do lado do cliente, como um código do javascript. Torna as páginas mais dinâmicas e iterativas. Utiliza o atributo type para especificar a linguagem utilizada. <script type = “text/javascript> // código javascript </script>
  35. 35. HTML – Seção HEAD Elemento SCRIPT <!DOCTYPE html> <html> <body> <p>Click the button to display an alert box. </p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { alert("I am an alert box!"); } </script> </body> </html>
  36. 36. HTML – Seção HEAD Elemento STYLE (CSS) Incorpora ao documento HTML, a folha de estilos <style type = “text/css> grupo{nome_atributo: valor;} grupo{nome_atributo: valor;} grupo{nome_atributo: valor;} </style> CSS será visto mais a frente
  37. 37. HTML – Seção BODY ● Tudo que estiver contido em <BODY> será apresentado ao leitor na janela principal do browser. ● <BODY> pode conter títulos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos. <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  38. 38. O que pode ter no HTML ? Elementos estruturantes
  39. 39. O que pode ter no HTML ? Elementos estruturantes Elementos chaves
  40. 40. Elementos chaves
  41. 41. HTML – Seção BODY Parágrafos e Títulos Prudência com as tags de títulos.
  42. 42. HTML – Seção BODY Tags de Formatação <i> x <em> <b> x <strong> <del> x <strike>
  43. 43. HTML – Seção BODY Tags de Formatação NÃO usem tags de formatação, apenas "strong" e "em", que tem uma semântica associada. <i> x <em> <b> x <strong> <del> x <strike>
  44. 44. O que pode ter no HTML ? Elementos estruturantes Elementos chaves
  45. 45. O que pode ter no HTML ? Elementos estruturantes Elementos chaves Listas e dados
  46. 46. Listas e dados
  47. 47. HTML – Seção BODY Listas ● Em HTML, as listas podem ser itens numerados ou não. ● As listas não numeradas usam a tag <ul> de Unordered Lists para marcar o começo e fim da lista e a tag <li> para cada item da lista. ● Os itens da lista são marcados com bullets <ul> <li> ... </li> <li> ... </li> </ul>
  48. 48. HTML – Seção BODY Listas ● Em HTML, as listas podem ser itens numerados ou não. ● As listas numeradas usam a tag <ol> de Ordered Lists para marcar o começo e fim da lista e a tag <li> para cada item da lista. ● Os itens da lista são marcados com números <ol> <li> ... </li> <li> ... </li> </ol>
  49. 49. HTML – Seção BODY Listas ● As listas podem ser compostas <ul> <li> ... </li> <ul> <li> ... </li> <li> ... </li> </ul> </ul> ● Nivel 1 ● Nivel 2 ● Nível 2 ● Nível 1
  50. 50. HTML – Seção BODY Listas ● As listas podem usar o atributo type. ● Nas listas não ordenadas, o <type> altera o bullet usado e pode ter os valores CIRCLE, SQUARE e DISC (default) <ul type = square> <li> ... </li> <ul type = circle> <li> ... </li> <li> ... </li> </ul> </ul> Com CSS podemos criar outros estilos para as listas.
  51. 51. HTML – Seção BODY Tabelas ● Tabelas são definidas pela tag <table>. ● Uma tabela tem linhas (rows) e colunas. ● Em HTML, define-se uma linha com a tag <tr>, de table row. ● A linha é dividia em colunas, onde os dados são inseridos através da tag <td>, de table data. ● Dentro de um table data, pode-se inserir texto, figura, links, listas, formulários, outras tabelas, etc.
  52. 52. HTML – Seção BODY Tabelas <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
  53. 53. HTML – Seção BODY Tabelas ● Linhas de cabeçalho podem ser definidas utilizando a tag <th>, de table header, o que definirá o texto como negrito e centralizado <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
  54. 54. HTML – Seção BODY Tabelas ● Para inserir uma legenda à tabela, usa-se a tag <caption> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>
  55. 55. O que pode ter no HTML ? Elementos estruturantes Elementos chaves Listas e dados Links e imagens
  56. 56. HTML – Seção BODY Hiperlink (Anchor) ● Em HTML, um link é criado utilizando a tag <a>, de duas maneiras: ● Para criar um link para outro documento ● Atributo HREF ● Para criar um link para o próprio documento (âncora ou bookmark), criando um apelido para determinada parte do documento. ● Atributo NAME ● O endereço indicado pelo link pode ser carregado na mesma janela em que o usuário se encontra, ou em outra janela. ● Essa característica é determinada pelo atributo TARGET ● _self ● _blank <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
  57. 57. HTML – Seção BODY Imagens ● Para inserir imagens em um documento HTML, utiliza-se a tag <img>. ● Os seguintes atributos devem ser configurados: ● src ● Endereço da imagem (source) ● alt ● Texto mostrado no lugar da imagem, caso a mesma, por algum motivo não puder ser carregada ● width ● Largura da imagem ● heigh ● Altura da imagem
  58. 58. HTML – Seção BODY Imagens <!DOCTYPE html> <html> <body> <img src="smiley.gif" alt="Smiley face" width="42" height="42"> </body> </html>
  59. 59. O que pode ter no HTML ? Elementos estruturantes Elementos chaves Listas e dados Formulários Links e imagens
  60. 60. HTML – Seção BODY Formulários ● Formulários são usados para enviar dados para um servidor web. ● Os elementos de um formulário permitem o usuário entrar com informações, como campos de texto, campos de área de texto, menus drop-down, botões radiais, caixas de seleção, etc.
  61. 61. HTML – Seção BODY Formulários ● A tag <form> define uma área de formulário. <form> ... elementos de entrada ... </form>
  62. 62. HTML – Seção BODY Formulários ● A tag <input> define um elemento de entrada. ● É a tag mais utilizada em formulários. ● Um elemento de entrada pode ser um campo de texto, um checkbox, um campo de senha, um botão de radio, um botão de envio (submit), entre outros. ● Definido pelo atributo type
  63. 63. HTML – Seção BODY Formulários ● Campo de texto ● <input type = “text” name = “nome” /> <!DOCTYPE html> <html> <body> <form action="demo_form.asp"> First name: <input type="text" name="FirstName" value="Mickey" ><br> Last name: <input type="text" name="LastName" value="Mouse" ><br> <input type="submit" value="Submit"> </form> <p>Click the "Submit" button and the form-data will be sent to a page on the server called "demo_form.asp".</p> </body> </html>
  64. 64. HTML – Seção BODY Formulários - Tipos Text Radio Checked Submit
  65. 65. CSS Cascading Style Sheets
  66. 66. O que podemos fazer com CSS ?
  67. 67. Texto
  68. 68. Texto
  69. 69. Tamanho
  70. 70. Posição
  71. 71. Como usamos o CSS nas nossas paginas Web ?
  72. 72. Três maneiras Inline Embedded External (ordem: do mais fácil para o melhor)
  73. 73. Inline CSS (bad) <body> <h1 style = "color:red ;"> Ola Mundo </h1> </body>
  74. 74. Inline CSS (bad) <body> <p style = "color:red ;"> Ola Mundo </p> </body> Mistura apresentação com estrutura
  75. 75. Inline CSS (bad) <body> <p style = "color:red ;"> Ola Mundo </p> </body> É aceito no HTML Mistura 4.01 strict e no apresentação XHTML com estrutura
  76. 76. Embedded CSS (OK) <head> <style type="test/css"> p {color:red;} </style> </head>
  77. 77. Embedded CSS (OK) <head> <style type="test/css"> p {color:red;} </style> </head> Rápido e fácil. Use em pequenas aplicações.
  78. 78. External CSS: link tag (GOOD) <head> <link rel="stylesheet" href="meuestilo.css"> <head>
  79. 79. Por dentro do CSS
  80. 80. Três partes 1.Seletor
  81. 81. Três partes 1.Seletor 2.Propriedades
  82. 82. Três partes 1.Seletor 2.Propriedades 3.Valores
  83. 83. 1. Primeiro selecionamos o elemento p{}
  84. 84. 2. Então dizemos o que queremos mudar p { color: }
  85. 85. 3. Então dizemos qual o valor para essa mudança p { color: blue;}
  86. 86. Chaves Ponto e virgula h1 { color: red; font-size: 12px; } Dois pontos
  87. 87. CSS Sintaxe 1.Seleção 2.Declaração 3.Cascata
  88. 88. SELEÇÃO
  89. 89. Seleção Tipos de seleção a. element b. class c. id d. posição no documento
  90. 90. 1. Element p{} Seleciona todos elemento <p>, em todo o documento HTML
  91. 91. 2. Class .menu { } Seleciona todos os elementos da classe "menu" . significa "esse é um nome de uma classe"
  92. 92. 3. id #rodape { } Seleciona o elemento com id "rodape" # significa "esse é um nome de um id"
  93. 93. 4. posição no documento <div id ="rodape"> <p> aqui é aplicada </p> <span>aqui nao se aplica</span> </div> <p>aqui nao se aplica</p> #rodape p { color:red; } Seleciona todos elementos "p" descendentes de rodape. aqui é aplicada aqui nao se aplica aqui nao se aplica
  94. 94. 4. posição no documento <div id ="rodape"> <p class ="primeiro p" > aqui é aplicada </p> <p class ="segundo p"> aqui nao se aplica </p> </div> <p>aqui nao se aplica</p> p.primeiro { color:red; } Seleciona todos elementos "p" descendentes de rodape. aqui é aplicada aqui nao se aplica aqui nao se aplica
  95. 95. 4. posição no documento #header div.content form p em.required {} O que estamos selecionando pelo seletor acima ?
  96. 96. Pseudo classes a:link {} a:visited {} a:hover {} a:active {} /* link não visitado */ /* link visitado */ /* mouseover */ /* link selecionado */
  97. 97. DECLARAÇÃO
  98. 98. Declaração (o que está dentro das chaves) selector { property: value; }
  99. 99. Declaração É a combinação de propriedade e valor. Nos declaramos o que queremos mudar
  100. 100. CSS define diversas coisas que podemos declarar. Exemplo font color background-color border (essas são as propriedades)
  101. 101. Cada propriedade possui um conjunto de valores que pode de ser aplicado. font: 12px normal Verdana, sans-serif; color: #123; background-color: red; border: 1px solid rgb(193,193,193);
  102. 102. Propriedades tem diferentes granularidades Por exemplo a propriedade "border" ...
  103. 103. Propriedades tem diferentes granularidades Por exemplo a propriedade "border" ... border border-color border-bottom border-width border-left border-top border-right ....
  104. 104. Propriedades tem diferentes granularidades Por exemplo a propriedade "border" ... border font border-color border-bottom border-width border-left border-top border-right .... font-family font-size font-style font-weight
  105. 105. Existe uma alternativa mais simples shorthand
  106. 106. Existe uma alternativa mais simples shorthand border: 1px solid #000 É equivalente a: border-width: 1px border-style: solid border-color: #000
  107. 107. Podemos mudar especificas partes no estilo de um elemento p { border: 1px solid red; } p.intro {border-color:blue;} O que estamos fazendo aqui ?
  108. 108. Unidades Absoulta vs relativas px em %
  109. 109. Unidades absolutas Pixels (px) are unidades absolutas. Elas são sempre do mesmo “tamanho”. Independentemente do dispositivo
  110. 110. Unidades relativas em é sempre relativa ao valor corrente do tamanho da fonte. width: 2em; font-size: 2em; % é relativo a diferentes coisas em diferentes contextos width: 50% ; 50% da largura disponível font-size: 50% ; 50% do tamanho corrente da fonte
  111. 111. Unidades relativas em é sempre relativa tamanho da fonte. width: 2em; font-size: 2em; HTML5 ao valor em usaremos corrente para fonts e não mais px. % é relativo a diferentes coisas em diferentes contextos width: 50% ; 50% da largura disponível font-size: 50% ; 50% do tamanho corrente da fonte do
  112. 112. Como é calculado ?
  113. 113. Como é calculado ? body {font-size:12 px;} h1 {font-size: 200 % ;} h1 a {font-size: 75%;}
  114. 114. Como é calculado ? body {font-size:12 px;} h1 {font-size: 200% ;} O texto de h1 é 24 pixels (12*2) h1 a {font-size: 75%;} Um link dentro de um h1 é 18 pixel (12*2*.75)
  115. 115. Como é calculado ? body {font-size:100%;} h1 {font-size: .75em;}
  116. 116. Como é calculado ? body {font-size:100%;} h1 {font-size: .75em;} Considerando o tamanho de 16 pixels para o browser, temos 0.75 * 16 = 12
  117. 117. CASCATA
  118. 118. Cascata Como e quais declaração serão aplicadas aos elementos; Regras para aplicação das declarações
  119. 119. Cascata Como e quais declaração serão aplicadas aos elementos; Regras para aplicação das declarações Especificidade Herança
  120. 120. Usualmente, as declarações são aplicadas na ordem de definição p {color: red;} p {color: blue;} A ultima declaração é a valida para todos elementos “p”.
  121. 121. Usualmente, as declarações são aplicadas na ordem de definição ESPECIFICIDADE. p {color: red;} p {color: blue;} A ultima declaração é a valida para todos elementos “p”.
  122. 122. Usualmente, as declarações são aplicadas na ordem de definição p {color: red;} p {color: blue;} A ultima declaração é elementos “p”. ESPECIFICIDADE. A última a valida para declaração mais específica. todos
  123. 123. <div id =“a”> <div id =“b”> <h1> </h1> </div> </div> #a #b h1 {color:red;} #a h1 {color: blue;} Qual seletor é mais específico ? Qual será a cor de h1 dentro de #b ?
  124. 124. Regras para determinar a especificade Elemento é 1 ponto ●Uma classe é 10 pontos ●Um id é 100 pontos ●
  125. 125. Regras para determinar a especificade Elemento é 1 ponto ●Uma classe é 10 pontos ●Um id é 100 pontos ●
  126. 126. Regras para determinar a especificade ○ ○ ○ Elemento é 1 ponto Uma classe é 10 pontos Um id é 100 pontos p a {} = 2 pontos p.intro a {} = 12 pontos #about p.intro a {} = 112 pontos
  127. 127. Herança Elemento podem herdar estilos dos elementos ascendentes
  128. 128. #blog {color: red;} <div id=“blog”> <p>Ola</p> </div> O elemento “p” por ser descendente de #blog, terá cor vermelha.
  129. 129. #blog {color: red;} <div id=“blog”> <p>Ola</p> </div> O elemento “p” por ser descendente de Atenção, nem #blog, terá cor vermelha. todos os estilos são “herdáveis”.
  130. 130. Usualmente ... Propriedades relativas a texto são herdadas Propriedades relativas a layout não são herdáveis
  131. 131. .
  132. 132. Layout 1.Modelo caixa 2.Fluxo (“propriedade display”) 3.Posição 4.Flutuação
  133. 133. Modelo caixa Content Padding Border Margin
  134. 134. Modelo Caixa Content
  135. 135. Declarando margin ou padding margin: 1em; Todas as margens = 1em margin: 1em 2em; Superior e inferior = 1em e direita e esquerda = 2em margin: 1em 2em 3em 4em ; Superior = 1em, direita = 2em, inferior = 3em e esquerda = 4em
  136. 136. Declarando margin ou padding margin: 1em; Todas as margens = 1em margin: 1em 2em; Superior e inferior = 1em e direita e esquerda = 2em Movimento do relógio margin: 1em 2em 3em 4em ; Superior = 1em, direita = 2em, inferior = 3em e esquerda = 4em
  137. 137. Fluxo (“propriedade display”) Em linha (inline) Mostra na mesma linha Ex: <span>, <a>, <input>, <img> .. Nível de bloco (block) Mostra em uma linha posterior Ex: <h1>,<p>, <ul>, <div>
  138. 138. Exemplo <p> Click <a href=""> aqui </a> </p> a { display: block; } Click aqui
  139. 139. Posição static (padrão) absolute relative fixed
  140. 140. Posição static (padrão) absolute relative fixed Flutuação (float)
  141. 141. Exercícios css-walkthrough

×