html5 + css3 - do zero e do jeito certo
DESCRIPTION
Slides do meu Workshop sobre HTML5 e CSS3. Nele abordo HTML do zero, com todos os recursos pré-HTML5 e as exploro as novas e fascinantes características da última versão desta linguagem. Também exponho o CSS e seus mais poderosos recursos até a sua última versão, o CSS3.TRANSCRIPT
![Page 1: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/1.jpg)
+
ALCIDES QUEIROZ
Do zero e do jeito certo
![Page 2: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/2.jpg)
@alcidesqueiroz
![Page 7: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/7.jpg)
Do zero?
![Page 8: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/8.jpg)
Do jeito certo?
![Page 9: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/9.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 10: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/10.jpg)
1957 - ARPA surge
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 11: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/11.jpg)
1957 - ARPA surge
1969 - O primeiro e-mail é transmitido em rede
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 12: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/12.jpg)
1957 - ARPA surge
1969 - O primeiro e-mail é transmitido em rede
1969 - A ARPANET entra em funcionamento
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 13: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/13.jpg)
197* - ARPANET em Universidades
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 14: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/14.jpg)
197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 15: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/15.jpg)
197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 16: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/16.jpg)
197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes1977 - Criação do TCP/IP
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 17: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/17.jpg)
197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes1977 - Criação do TCP/IP1979 - Criada a USENET
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 18: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/18.jpg)
1981 - Lançado o IBM PC
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 19: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/19.jpg)
1981 - Lançado o IBM PC
1983 - É criada a MILNET
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 20: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/20.jpg)
1981 - Lançado o IBM PC
1983 - É criada a MILNET
1983 - TCP/IP é adotado
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 21: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/21.jpg)
1981 - Lançado o IBM PC
1983 - É criada a MILNET
1983 - TCP/IP é adotado
1984 - ARPANET possui 1000 servidores
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 22: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/22.jpg)
DNS, BBS, IRC, USENET, e-mail,TCP/IP ...
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
![Page 23: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/23.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
![Page 24: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/24.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
![Page 25: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/25.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
A linguagem HTML
![Page 26: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/26.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
A linguagem HTML
O protocolo HTTP
![Page 27: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/27.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
A linguagem HTML
O protocolo HTTP
URI
![Page 28: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/28.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1980 - TBL cria o ENQUIRE
![Page 29: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/29.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1980 - TBL cria o ENQUIRE
1989 - TBL e Robert Cailliau realizam a primeira comunicação bem sucedida entre um cliente HTTP e um servidor na Internet
![Page 30: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/30.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1990 - Surge o HTML
![Page 31: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/31.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1990 - Surge o HTML
1993 - Primeiro servidor HTTP
![Page 32: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/32.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1990 - Surge o HTML
1993 - Primeiro servidor HTTP
1993 - Primeira página da Web
![Page 33: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/33.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
![Page 34: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/34.jpg)
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
Criada por Tim Berners-Lee e Robert Cailliau em 1989
![Page 35: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/35.jpg)
Criada por Tim Berners-Lee e Robert Cailliau em 1989
O piloto foi realizado no CERN
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
![Page 36: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/36.jpg)
Linguagem de marcação dehipertexto
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
![Page 37: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/37.jpg)
Linguagem de Marcação??
![Page 38: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/38.jpg)
É um conjunto de códigos aplicados a um texto ou a dados, com o fim de adicionar informações particulares sobre esse texto ou dado, ou sobre trechos específicos.
Linguagem de Marcação??
![Page 39: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/39.jpg)
Ex:
Olá, meu nome é João, sou filho de Marta e moro em Fortaleza.
Linguagem de Marcação??
![Page 40: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/40.jpg)
Ex:
Olá, meu nome é <nome>João</nome>, sou filho de <nome>Marta</nome> e moro em <cidade>Fortaleza </cidade>.
Linguagem de Marcação??
![Page 41: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/41.jpg)
Linguagem de Programação !=
Linguagem de Marcação
Linguagem de Marcação??
![Page 42: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/42.jpg)
if (idade == 18) { for (var i = 0; i < 10; i++){ alert(“Essa é uma mensagem \ sem sentido”);
}}
Linguagem de Marcação??
![Page 43: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/43.jpg)
Linguagem de marcação dehipertexto
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
![Page 44: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/44.jpg)
Hipertexto??
![Page 45: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/45.jpg)
Termo cunhado por Ted Nelson em 1965
Hipertexto??
![Page 46: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/46.jpg)
Termo cunhado por Ted Nelson em 1965
Texto não necessariamente
linear
Hipertexto??
![Page 47: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/47.jpg)
Hipermídia??
![Page 48: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/48.jpg)
Termo de autoria também atribuída a Ted Nelson
Hipermídia??
![Page 49: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/49.jpg)
Termo de autoria também atribuída a Ted Nelson
É o hipertexto que não está limitado a conter apenas texto, podendo possuir imagens, vídeos, sons, etc.
Hipermídia??
![Page 50: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/50.jpg)
Continuando...
![Page 51: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/51.jpg)
Linguagem de marcação dehipertexto
Derivada da SGML e HyTime
APRESENTAÇÃO
BREVE HISTÓRICO
![Page 52: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/52.jpg)
APRESENTAÇÃO
TAGS
Instruções que marcam e adicionam semântica ao hipertexto.
![Page 53: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/53.jpg)
APRESENTAÇÃO
ATRIBUTOS
Propriedades de um elemento
HTML
![Page 54: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/54.jpg)
APRESENTAÇÃO
SEMÂNTICA NA WEB
As tags do HTML carregam um significado.
![Page 55: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/55.jpg)
APRESENTAÇÃO
WEB STANDARDS
Normas criadas pelo W3C, a serem ser implementadas pelos browsers do mercado e seguidas pela comunidade de desenvolvimento.
![Page 56: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/56.jpg)
MÃOS NO SUBLIME TEXT!
![Page 57: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/57.jpg)
MÃOS NO SUBLIME TEXT!
OU NÃO...
![Page 58: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/58.jpg)
AS TAGS DO HTML (ATÉ 4.01)
![Page 59: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/59.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<html>
Representa um documento HTML
![Page 60: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/60.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<html> - atributo lang
<html lang=”pt-br”>
Usado para que os user-agents saibam qual é a linguagem principal do documento.
![Page 61: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/61.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<head>
Contém meta-dados a respeito do documento
![Page 62: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/62.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<title>
Representa o título da página, que constará na barra de título do navegador.
![Page 63: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/63.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<title>
<title>Don't panic!</title>
![Page 64: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/64.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<body>
Representa o corpo da página.
![Page 65: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/65.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<body>
<body>
Godfather é o melhor filme da história.
</body>
![Page 66: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/66.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<h1> a <h6> (Headings)
Representam cabeçalhos de diferentes níveis de importância no documento
![Page 67: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/67.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<h1> a <h6> (Headings)
<h1>A Linguagem Ruby</h1><h2>Introdução</h2><h3>História</h3>
![Page 68: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/68.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<a>
Representa um link para outro recurso na web, ou para um trecho específico desse recurso.
![Page 69: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/69.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<a>
<a href=”sobre.html”>Sobre a empresa</a><a href=”mailto:[email protected]”>e-mail</a><a href=”http://google.com”> Google</a>
![Page 70: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/70.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<a> - atributo href
<a href=”localizacao”>Especifica a localização do recurso
![Page 71: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/71.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<a> - atributo name
<a name=”rodape”></a>Nomeia um ponto específico de um documento para que possa ser referenciado por outros links.
<a href=”#rodape”>Rodapé</a>
![Page 72: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/72.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<a> - atributo name
Dica:
atributo name se tornou obsoleto no HTML5
![Page 73: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/73.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<img>
Representa uma imagem
![Page 74: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/74.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<img> - atributo src
<img src =”logo.png”/>
Representa o caminho (absoluto ou relativo) para a imagem
![Page 75: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/75.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<p>
Representa um parágrafo
![Page 76: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/76.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<p>
<p>Exemplo de um parágrafo qualquer, este texto não deve fazer sentido algum.
</p>
![Page 77: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/77.jpg)
Let's Code!
![Page 78: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/78.jpg)
gist.github.com/alcidesqueiroz
![Page 79: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/79.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<table>
Tag usada para apresentar dados em formato tabular.
![Page 80: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/80.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<tr>
Representa uma linha de uma tabela.
![Page 81: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/81.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<td>
Representa uma célula de uma tabela.
![Page 82: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/82.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<td> - atributo colspan
Número de colunas pelo qual a célula irá se expandir
![Page 83: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/83.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<td> - atributo rowspan
Número de linhas pelo qual a célula irá se expandir
![Page 84: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/84.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<table>, <tr> e <td><table> <tr> <td>Código</td> <td>Descrição Produto</td> </tr> <tr> <td>0001</td> <td>Camisa Polo</td> </td></table>
![Page 85: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/85.jpg)
Let's Code!
![Page 86: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/86.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<form>
Representa um formulário.
![Page 87: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/87.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<form> - atributos
action<form action=”enviar.aspx”>
Representa a URL do recurso que irá receber os dados do formulário e que realizará o processamento desejado
![Page 88: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/88.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<form> - atributos
method<form action=”enviar.aspx” method=”get”>
Representa o método HTTP que será usado para envio do formulário
![Page 89: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/89.jpg)
Método GET
Para submeter o formulário, os valores de seus campos são concatenados à URL.
![Page 90: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/90.jpg)
Método GET
Ex:
http://teste.com/processa?nome=joao&idade=32&sexo=m
![Page 91: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/91.jpg)
Método POST (default)
Os dados do formulário são enviados nos headers das solitações HTTP
![Page 92: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/92.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<input>
Representa um campo de um formulário.
![Page 93: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/93.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<input> - atributos
type button, checkbox, file, hidden, image, password, radio, reset, submit, text
![Page 94: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/94.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<select>
Representa uma caixa de seleção.
![Page 95: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/95.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<option>
Representa uma opção de um select.
![Page 96: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/96.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<option> - atributo value
O valor da opção. É o que será submetido ao servidor.
![Page 97: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/97.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<textarea>
Representa uma caixa de texto multilinha.
![Page 98: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/98.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<textarea> - atributo rows
Número de linhas
![Page 99: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/99.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<textarea> - atributo cols
Número de colunas
![Page 100: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/100.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<button>
Representa um botão.
![Page 101: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/101.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<label>
Representa um rótulo.
![Page 102: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/102.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<label> - atributo for
Especifica o ID do campo ao qual a label está associada.
![Page 103: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/103.jpg)
Let's Code!
![Page 104: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/104.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<div> e <span>
Representam uma divisão em um site.
![Page 105: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/105.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<hr>
Representa uma linha horizontal.
![Page 106: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/106.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<ol>
Representa uma lista ordenada.
![Page 107: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/107.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<li>
Representa um item de lista.
![Page 108: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/108.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<ul>
Representa uma lista não ordenada.
![Page 109: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/109.jpg)
Let's Code!
![Page 110: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/110.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<strong>
Dá ênfase a algo
![Page 111: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/111.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<iframe>
Representa uma página “embutida” em outra. [Inline Frame]
![Page 112: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/112.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<iframe> - atributo src
Localização da página
![Page 113: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/113.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<link>
Define um relacionamento entre um documento e um recurso externo.
![Page 114: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/114.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<link>
Suporte real apenas para folhas de estilo e favicons.
![Page 115: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/115.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<link> - atributo href
Especifica a localização do recurso externo
![Page 116: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/116.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<link> - atributo rel
Especifica o tipo de relacionamento
![Page 117: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/117.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<script>
Código em um linguagem de script (por padrão JavaScript), ou URI para arquivo de script externo.
![Page 118: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/118.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<script> - atributo src
Especifica a localização do script
![Page 119: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/119.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<meta>
Representa um meta-dado sobre o documento.
![Page 120: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/120.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<meta> - atributo name
Nome do meta-dado
![Page 121: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/121.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<meta> - atributo name
Valores possíveis:
author, description, keywords, reply-to
![Page 122: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/122.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<meta> - atributo content
Valor do meta-dado
![Page 123: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/123.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<pre>
Texto pré-formatado. Preserva espaços e quebras de linha e é exibido em fonte mono-espaçada.
![Page 124: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/124.jpg)
AS TAGS DO HTML (ATÉ 4.01)
<style>
Trecho de código CSS.
![Page 125: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/125.jpg)
SENDO MAIS SEMÂNTICO
![Page 126: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/126.jpg)
SENDO MAIS SEMÂNTICO
<abbr>
Define siglas e abreviações.
![Page 127: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/127.jpg)
SENDO MAIS SEMÂNTICO
<address>
Define um endereço
![Page 128: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/128.jpg)
SENDO MAIS SEMÂNTICO
<blockquote>
Define uma citação
![Page 129: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/129.jpg)
SENDO MAIS SEMÂNTICO
<caption>
Legenda para tabelas. Por padrão centralizada.
![Page 130: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/130.jpg)
SENDO MAIS SEMÂNTICO
<code>
Trecho de código
![Page 131: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/131.jpg)
SENDO MAIS SEMÂNTICO
<code>
<code>Código Inline</code><pre> <code> Código multilinha </code></pre>
![Page 132: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/132.jpg)
SENDO MAIS SEMÂNTICO
<del>
Texto que foi deletado de um documento
![Page 133: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/133.jpg)
SENDO MAIS SEMÂNTICO
<ins>
Texto que foi inserido em um documento.
Geralmente sublinhado.
![Page 134: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/134.jpg)
SENDO MAIS SEMÂNTICO
<fieldset>
Agrupa campos relacionados de um formulário
![Page 135: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/135.jpg)
SENDO MAIS SEMÂNTICO
<legend>
Adiciona uma legenda a um fieldset
![Page 136: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/136.jpg)
SENDO MAIS SEMÂNTICO
<samp>
Exemplo de saída de código
![Page 137: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/137.jpg)
SENDO MAIS SEMÂNTICO
<tfoot>
Rodapé de uma tabela
![Page 138: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/138.jpg)
SENDO MAIS SEMÂNTICO
<thead>
Cabeçalho de uma tabela
![Page 139: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/139.jpg)
SENDO MAIS SEMÂNTICO
<th>
Célula-título de uma tabela
![Page 140: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/140.jpg)
USAR COM BOM-SENSO
<br>
Na dúvida, não use.
![Page 141: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/141.jpg)
USAR COM BOM-SENSO
<b>
Prefira usar a tag <strong>
![Page 142: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/142.jpg)
USAR COM BOM-SENSO
<i>
Prefira usar a tag <em>
![Page 143: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/143.jpg)
Let's Code!
![Page 144: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/144.jpg)
COMENTÁRIOS EM HTML
<!-- Um comentário -->
![Page 145: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/145.jpg)
DOCTYPE
<!DOCTYPE html>
Define a versão do html na qual o documento foi escrito, fazendo com que o navegador renderize uma página corretamente
![Page 146: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/146.jpg)
CSS
![Page 147: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/147.jpg)
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium Lie
![Page 148: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/148.jpg)
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS1
![Page 149: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/149.jpg)
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS11996 - IE3 lança suporte parcial
![Page 150: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/150.jpg)
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS11996 - IE3 lança suporte parcial
1998 - W3C lança recomendação do CSS2
![Page 151: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/151.jpg)
A LINGUAGEM
SEPARAÇÃO DE RESPONSABILIDADES
![Page 152: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/152.jpg)
A LINGUAGEM
SEPARAÇÃO DE RESPONSABILIDADES
![Page 153: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/153.jpg)
A LINGUAGEM
FOLHA DE ESTILO
![Page 154: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/154.jpg)
A LINGUAGEM
FOLHA DE ESTILO EM CASCATA
![Page 155: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/155.jpg)
A LINGUAGEM
COMPATIBILIDADE CROSSBROWSER
![Page 156: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/156.jpg)
A LINGUAGEM
PROPRIEDADES
![Page 157: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/157.jpg)
A LINGUAGEM
REGRAS
![Page 158: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/158.jpg)
A LINGUAGEM
SELETORES
![Page 159: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/159.jpg)
A LINGUAGEM
PSEUDO-ELEMENTOS
![Page 160: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/160.jpg)
A LINGUAGEM
PSEUDO-CLASSES
![Page 161: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/161.jpg)
SELETORES DO CSS(ATÉ O 2)
* [Universal]
![Page 162: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/162.jpg)
SELETORES DO CSS(ATÉ O 2)
E > F[filhos]
![Page 163: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/163.jpg)
SELETORES DO CSS(ATÉ O 2)
E:first-child [pseudo-classe first-child]
![Page 164: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/164.jpg)
SELETORES DO CSS(ATÉ O 2)
E:link E:visited[pseudo-classes de link]
![Page 165: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/165.jpg)
SELETORES DO CSS(ATÉ O 2)
E:active E:hover E:focus[pseudo-classes dinâmicas]
![Page 166: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/166.jpg)
SELETORES DO CSS(ATÉ O 2)
E + F [adjacentes]
![Page 167: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/167.jpg)
SELETORES DO CSS(ATÉ O 2)
E[foo] [possui atributo]
![Page 168: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/168.jpg)
SELETORES DO CSS(ATÉ O 2)
E[foo="warning"] [possui atributo igual a]
![Page 169: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/169.jpg)
SELETORES DO CSS(ATÉ O 2)
E[foo~="warning"] [possui atributo que contém (independente de possuir espaços)]
![Page 170: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/170.jpg)
SELETORES DO CSS(ATÉ O 2)
DIV.classe
![Page 171: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/171.jpg)
SELETORES DO CSS(ATÉ O 2)
E#id [id]
![Page 172: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/172.jpg)
COMENTÁRIOS EM CSS(ATÉ O 2)
/*Este é um comentário*/
![Page 173: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/173.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
background
![Page 174: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/174.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
background-color
![Page 175: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/175.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
background-image
![Page 176: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/176.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
background-repeat
![Page 177: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/177.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
border
![Page 178: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/178.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
height
![Page 179: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/179.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
width
![Page 180: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/180.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
max-height
![Page 181: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/181.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
max-width
![Page 182: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/182.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
min-height
![Page 183: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/183.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
min-width
![Page 184: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/184.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
font-family
![Page 185: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/185.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
font-size
![Page 186: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/186.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
font-style
![Page 187: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/187.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
font-weight
![Page 188: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/188.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
list-style-type
square, circle, bullet, none
![Page 189: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/189.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
margin
![Page 190: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/190.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
padding
![Page 191: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/191.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
cursor
![Page 192: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/192.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
display
none, inline, block, inline-block
![Page 193: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/193.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
overflow
visible, hidden, scroll, auto
![Page 194: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/194.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
position
![Page 195: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/195.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
bottom
![Page 196: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/196.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
right
![Page 197: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/197.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
left
![Page 198: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/198.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
top
![Page 199: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/199.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
z-index
![Page 200: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/200.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
color
![Page 201: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/201.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
letter-spacing
![Page 202: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/202.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
line-height
![Page 203: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/203.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
text-align
![Page 204: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/204.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
text-decoration
underline, overline, line-through, none
![Page 205: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/205.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
text-indent
![Page 206: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/206.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
text-transform
uppercase, capitalize, lowercase
![Page 207: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/207.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
vertical-align
![Page 208: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/208.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
word-spacing
![Page 209: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/209.jpg)
PROPRIEDADES DO CSS(ATÉ O 2)
float
![Page 210: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/210.jpg)
![Page 211: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/211.jpg)
HTML5
UM NOVO FOCO
![Page 212: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/212.jpg)
HTML5
MAIS SEMÂNTICA
![Page 213: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/213.jpg)
HTML5
NOVIDADES
![Page 214: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/214.jpg)
AS TAGS DO HTML5
<canvas>
![Page 215: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/215.jpg)
AS TAGS DO HTML5
<details>
![Page 216: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/216.jpg)
AS TAGS DO HTML5
<summary>
Título de uma seção details
![Page 217: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/217.jpg)
AS TAGS DO HTML5
<header>
Título de uma section. Pode conter headings, hgroups (removido da especificação em abril/13), content tables, logos, search form
![Page 218: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/218.jpg)
AS TAGS DO HTML5
<section>
Agrupa items que possuam relação entre si, e cujo agrupamento não seja meramente para fins de posicionamento
![Page 219: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/219.jpg)
AS TAGS DO HTML5
<footer>
Rodapé, geralmente último elemento do documento
![Page 220: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/220.jpg)
AS TAGS DO HTML5
<article>
Conteúdo agrupado, importante e passível de utilização em feeds
![Page 221: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/221.jpg)
AS TAGS DO HTML5
<figure>
Uma figura, que possivelmente possuirá legenda
![Page 222: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/222.jpg)
AS TAGS DO HTML5
<figcaption>
Legenda de uma figura
![Page 223: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/223.jpg)
AS TAGS DO HTML5
<datalist>
<input list="times"><datalist id="times"> <option value="Ceará"> <option value="Fortaleza"> <option value="Uniclinic"></datalist>
![Page 224: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/224.jpg)
AS TAGS DO HTML5
<datalist> - fallbackDigite seu time: <input list="times"><datalist id="times"> <label>Ou escolha na lista a seguir</label> <select> <option value="Ceará"> <option value="Fortaleza"> <option value="Uniclinic"> </select></datalist>
![Page 225: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/225.jpg)
AS TAGS DO HTML5
<mark>
Efetua highlight de um texto e denota que o mesmo possui maior destaque
![Page 226: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/226.jpg)
AS TAGS DO HTML5
<meter>
Medidor em formato de barra
![Page 227: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/227.jpg)
AS TAGS DO HTML5
<meter> - atributo min
![Page 228: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/228.jpg)
AS TAGS DO HTML5
<meter> - atributo max
![Page 229: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/229.jpg)
AS TAGS DO HTML5
<meter> - atributo value
![Page 230: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/230.jpg)
AS TAGS DO HTML5
<nav>
Um tipo de section, que agrupa links de navegação
![Page 231: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/231.jpg)
AS TAGS DO HTML5
<aside>
Citação, sidebars, anúncios publicitários, grupos de navegação
![Page 232: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/232.jpg)
AS TAGS DO HTML5
<output>
Representa o resultado de um cálculo
![Page 233: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/233.jpg)
AS TAGS DO HTML5
<output>
<form >
<input id="a" type="text"> +<input id="b" type="text"> =<output for="a b"></output>
</form>
![Page 234: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/234.jpg)
AS TAGS DO HTML5
<progress>
Barra de progresso, geralmente usada para representar o progresso de uma determinada tarefa
![Page 235: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/235.jpg)
AS TAGS DO HTML5
<time>
Representa uma data, hora ou ambos
![Page 236: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/236.jpg)
AS TAGS DO HTML5
<time> - atributo datetime
![Page 237: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/237.jpg)
TAGS DEPRECADAS
<acronym>
![Page 238: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/238.jpg)
TAGS DEPRECADAS
<applet>
![Page 239: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/239.jpg)
TAGS DEPRECADAS
<basefont>
![Page 240: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/240.jpg)
TAGS DEPRECADAS
<big>
![Page 241: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/241.jpg)
TAGS DEPRECADAS
<center>
![Page 242: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/242.jpg)
TAGS DEPRECADAS
<font>
![Page 243: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/243.jpg)
TAGS DEPRECADAS
<frame>
![Page 244: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/244.jpg)
TAGS DEPRECADAS
<frameset>
![Page 245: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/245.jpg)
TAGS DEPRECADAS
<noframes>
![Page 246: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/246.jpg)
TAGS DEPRECADAS
<strike>
![Page 247: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/247.jpg)
TAGS DEPRECADAS
<tt>
![Page 248: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/248.jpg)
![Page 249: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/249.jpg)
CSS3 - Seletores
element1~element2 [sequenciais]
![Page 250: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/250.jpg)
CSS3 - Seletores
[attribute^=value]
Inicia exatamente com a string value
![Page 251: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/251.jpg)
CSS3 - Seletores
[attribute$=value]
Termina exatamente com a string value
![Page 252: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/252.jpg)
CSS3 - Seletores
[attribute*=value]
Contém a string value
![Page 253: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/253.jpg)
CSS3 - Seletores
:first-of-type
![Page 254: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/254.jpg)
CSS3 - Seletores
:last-of-type
![Page 255: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/255.jpg)
CSS3 - Seletores
:only-of-type
![Page 256: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/256.jpg)
CSS3 - Seletores
:only-child
![Page 257: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/257.jpg)
CSS3 - Seletores
:nth-child(n)
![Page 258: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/258.jpg)
CSS3 - Seletores
:nth-last-child(n)
![Page 259: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/259.jpg)
CSS3 - Seletores
:nth-of-type(n)
![Page 260: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/260.jpg)
CSS3 - Seletores
:nth-last-of-type(n)
![Page 261: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/261.jpg)
CSS3 - Seletores
:last-child
![Page 262: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/262.jpg)
CSS3 - Seletores
:root
![Page 263: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/263.jpg)
CSS3 - Seletores
:empty (sem filhos, nem ao menos text-nodes)
![Page 264: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/264.jpg)
CSS3 - Seletores
:enabled
![Page 265: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/265.jpg)
CSS3 - Seletores
:disabled
![Page 266: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/266.jpg)
CSS3 - Seletores
:checked
![Page 267: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/267.jpg)
CSS3 - Seletores
:not(selector)
![Page 268: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/268.jpg)
CSS3 - Seletores
::selection
![Page 269: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/269.jpg)
padding-box, content-box, border-box, text
CSS3 - Propriedades
background-clip
![Page 270: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/270.jpg)
CSS3 - Propriedades
background-position
left top, left center, left bottom, 50% 50%, 10px 200px
![Page 271: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/271.jpg)
CSS3 - Propriedades
background-origin
padding-box, content-box, border-box
![Page 272: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/272.jpg)
CSS3 - Propriedades
background-size
width height
Ex:
200px200px auto
50% 50%contain e cover
![Page 273: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/273.jpg)
CSS3 - Propriedades
border-radius
border-radius: 12px;
border-top-left-radius: 25px;
![Page 274: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/274.jpg)
CSS3 - Propriedades
box-decoration-break
slice clone
![Page 275: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/275.jpg)
CSS3 - Propriedades
box-shadow
box-shadow: hr vr blur color;
![Page 276: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/276.jpg)
CSS3 - Propriedades
overflow-x
visible, hidden, scroll, auto
![Page 277: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/277.jpg)
CSS3 - Propriedades
overflow-y
visible, hidden, scroll, auto
![Page 278: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/278.jpg)
CSS3 - Propriedades
Rotate (CSS Transformations)
transform: rotate(90deg)
![Page 279: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/279.jpg)
CSS3 - Propriedades
opacity
opacity: 0.5;
![Page 280: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/280.jpg)
CSS3 - Propriedades
text-shadow
text-shadow: hr vr blur color;
![Page 281: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/281.jpg)
CSS3 - Propriedades
transition
transition: background-color 800ms ease;
linear, ease, ease-in, ease-out
![Page 282: HTML5 + CSS3 - Do Zero e do Jeito Certo](https://reader030.vdocuments.pub/reader030/viewer/2022020919/5495464fb4795976588b48c4/html5/thumbnails/282.jpg)
Pré-processadores CSS
Sass, LESS, Stylus