Formadr:

Pedro Vasco
Índice
Introdução ao HTML ................................................................................................................. 3
Conceito de HTML ................................................................................................................. 3
Função do HTML? .............................................................................................................. 3
Tags .................................................................................................................................. 3
HTML5 .................................................................................................................................. 4
Qual a diferença com o HTML5?......................................................................................... 4
A relação entre HTML, CSS e JavaScript .............................................................................. 4
Cabeçalhos: ....................................................................................................................... 7
Parágrafos:........................................................................................................................ 8
Listas: ............................................................................................................................... 9
Imagens: ........................................................................................................................... 9
Links: .............................................................................................................................. 11
Formulário: ..................................................................................................................... 11
Vídeos............................................................................................................................. 13
Tags Semânticas .............................................................................................................. 14
Tarefas ............................................................................................................................... 15
Introdução ao CSS3 ................................................................................................................. 16
1. Como integrar o CSS no HTML? .................................................................................. 16
2. Elementos Básicos do CSS .......................................................................................... 17
2.1. Tags HTML ............................................................................................................. 17
2.2. Classes CSS ............................................................................................................ 18
2.3. Usando ID’s em CSS................................................................................................ 19
3. Propriedades CSS3 ..................................................................................................... 19
4. Formatando o link como um botão ............................................................................. 37
5. @media – layouts responsivos ................................................................................... 43
6. Introdução ao FexBox ................................................................................................ 43
6.1. FlexBox - Conceitos ................................................................................................ 43
7. Display ...................................................................................................................... 44
8. Exercício de Flexbox ................................................................................................... 55

HTML5 & CSS3, Formador 2

Pedro Vasco
 Introdução ao HTML

Conceito de HTML
Sigla para HyperText Markup Language — Linguagem de Marcação de Hipertexto —, o
HTMLé o componente base da web. Isso quer dizer que ele permite a construção de websites
e a inserção de novos conteúdos, como imagens e vídeos, por meio dos hipertextos.
Por exemplo, ao visitar um website, você encontra diversas informações com
formatações diferentes, como parágrafos, bullets e fontes distintas. Pois então, essa
estruturação é realizada por meio do HTML.

Função do HTML?
Imagine que você precisa construir um site do zero com informações da sua empresa.
Nessecaso, você precisará conhecer a estrutura do HTML, criando um documento no bloco
de notas e acrescentando códigos — tags —, que indicarão parágrafos, quebra de texto,
espaçamento, imagens, entre outros.
Em geral, em um único site, existem diversos documentos HTML, criando páginas
como homepage, página de produto e informações sobre a empresa. Em cada aba, existe um
código diferente.

Tags
Cada página de um site é composta por tags de HTML. Elas são códigos que orientam
a estrutura do documento, como o tamanho, a fonte e as quebras de linhas.
Com essas marcações, o código de HTML cria estruturas e hierarquização das
informações, dividindo-as em seções, o que ajuda na jornada do cliente. Ademais, ele pode
ser feito em qualquer editor de texto, até mesmo com o bloco de notas.
Atualmente, o HTML pode ser feito com mais de 140 opções de códigos para estruturar
um conteúdo na web, porém, algumas caíram em desuso. Então, confira as principais tags
HTML:
• <.!DOCTYPE>: Informa em qual versão do HTML a pagina está sendo escrita;
• <head>: define o início do HTML;

• <title>: indica o título;

• <body>: é usado para demonstrar o início do conteúdo;
• <h1>, <h2>, <h3>…: tags utilizadas para indicar títulos e subtítulos;
• <strong>: acrescenta o negrito ao texto;
• <italic>: sinaliza a formatação do conteúdo em itálico;
• <p>: insere o parágrafo;
• <a href=’LINK>: tag usada para inserir um link.

HTML5 & CSS3, Formador 3

Pedro Vasco
 A estrutura básica de um documento HTML:

HTML5
Qual a diferença com o HTML5?
Desde a primeira versão criada por Tim Berners-Lee, o HTML evoluiu e já está em sua
quinta versão: HTML5, que incluiu novos recursos à linguagem. Antes que essa última
atualização fosse feita em 2014, a quarta versão só havia sido alterada em 1999.
Com a versão antiga do HTML, era possível introduzir vídeos e áudios, porém, era
necessárioque o Flash Player intermediasse esse processo. Depois, com o HTML5, isso pôde
ser feito com a utilização de algumas tags.
Além de incorporar vídeos e arquivos de áudio ao código, essa nova versão introduziu
melhorias na semântica. Ou seja, as novas tags conseguem se comunicar com o navegador,
indicando o significado do conteúdo e ajudando na localização pelos mecanismos de busca.

A relação entre HTML, CSS e JavaScript

Agora que você sabe o que é HTML, vamos entender a relação entre JavaScript, HTML
eCSS (Cascading Style Sheets). Apesar de o HTML ser uma linguagem que possui diversas
funções, ela não consegue criar estruturas dinâmicas de conteúdo.
Por isso, em geral, os websites das empresas costumam incluir duas outras
linguagens: CSSe JavaScript. Enquanto o primeiro fica responsável por incluir cor, layout e
animações, o JavaScript permite a inclusão de galerias de fotos e pop-ups, por exemplo.

HTML5 & CSS3, Formador 4

Pedro Vasco
 Para começarmos a executar os nossos códigos em HTML vamos criar uma pasta onde
vamoscolocar os arquivos do nosso curso. Vamos no ambiente de trabalho (no Mac Mesa)
criamos uma pasta com nome “Aulas-html” dentro dessa pasta criamos uma outra pasta com
nome aula1. Como mostram os passos a seguir:

Passo 1:

Passo 2:

Com o Visual Studio Code aberto vamos abrir a pasta que criamos no ambiente de
trabalho. No menu na opção Arquivos>Abrir Pasta, vamos no ambiente de trabalho e
selecionamos a pasta “Aulas-html” e clicamos em abrir. Como mostram as imagens:

HTML5 & CSS3, Formador 5

Pedro Vasco
 Depois de selecionarmos a pasta, agora podemos criar o nosso arquivo HTML. Na
barra onde aparecem as pastas no canto esquerdo clicamos na pasta aula1 e depois clicamos
no ícone de documento com o sinal de mais para criar um novo arquivo e damos a ele o
nomede index.html e clicamos ENTER.

No index.html digitamos o código que aparece abaixo e salvamos o arquivo

clicando emCTRL + S

HTML5 & CSS3, Formador 6

Pedro Vasco
 Código:

Resultado:

Com isso temos a nossa primeira página HTML.

Cabeçalhos:
Os elementos de cabeçalhos permitem especificar que certas partes do seu conteúdo
são títulos ou subtítulos. Da mesma forma que um livro tem o título principal e os capítulos
possuem títulos e subtítulos, um documento HTML também tem. HTML contém 6 níveis de
título que vai de e <h1> à <h6>, onde <h1> é o nível de seção mais alto e <h6> é o mais baixo.

HTML5 & CSS3, Formador 7

Pedro Vasco
 Exemplo:

Parágrafos:
Os elementos <p>, são para conter parágrafos de texto; você os usará com
frequência aomarcar um conteúdo de texto regular.

HTML5 & CSS3, Formador 8

Pedro Vasco
 Listas:

Muito do conteúdo da web é de listas e o HTML tem elementos especiais para elas.
Listas demarcação sempre consistem em pelo menos 2 elementos. Os tipos mais comuns de
lista sãoordenados e não ordenados:

1. Listas não ordenadas são para listas onde a ordem dos itens não importa, como
uma lista de compras, por exemplo. Essas são envolvidas em um elemento <ul>
2. Listas ordenadas são para listas onde a ordem dos itens importa, como uma receita.
Essas são envolvidas em um elemento <ol>

Cada item dentro das listas é posto dentro de um elemento <li> (List item).

Imagens:

AS imagens em HTML são representadas pela tag <img> essa tag incorpora uma
imagem na nossa página na posição que aparece. Isso é feito pelo atributo src (Source), que
contém o caminho para nosso arquivo de imagem.

Incluímos também um atributo alt(Alternative). Neste atributo, você especifica um

texto descritivo para usuários que não podem ver a imagem, possivelmente devido aos
seguintes motivos:

HTML5 & CSS3, Formador 9

Pedro Vasco
 1. Eles são deficientes visuais. Usuários com deficiências visuais significativas costumam
usar ferramentas chamadas leitores de tela para ler o texto alternativo para eles.
2. Algo deu errado, fazendo com que a imagem não seja exibida. Por exemplo, tente
alterar deliberadamente o caminho dentro do atributo src para torná-lo incorreto. Se
você salvar e recarregar a página, você deve ver algo assim no lugar da imagem:

Esta tag recebe os atributos dos atributos:

Scr: Onde se encontra o arquivo (internet, ou local).
Alt: Texto caso a imagem não apareça (opcional).
Width: Largura da imagem (opcional).
Heigth: Altura da imagem (opcional).

Exemplo:

Alguns elementos não possuem conteúdo e são chamados de elementos vazios.

A tag de imagem não tem </img> de fechamento, e não há conteúdo interno. Isso
acontece porque um elemento de imagem não envolve conteúdo para ter efeito em si
mesmo. Sua proposta é incorporar uma imagem na página HTML no lugar que o código
aparece.

HTML5 & CSS3, Formador 10

Pedro Vasco
 Links:

São muito importantes — eles são o que faz da web ser de fato uma REDE! Para
adicionar umlink, precisamos usar um elemento simples - <a>- “a” é a forma abreviada de
"âncora".

Esta tag recebe atributos os atributos:

href: o endereço URL.
target: especifica aonde abrir o documento (opcional).
_self: Padrão, abre o documento na mesma janela ou aba.
_blank: Abre o documento em outra janela ou aba.

Exemplo:

Formulário:

Formulários HTML são um dos principais pontos de interação entre um usuário e um

web siteou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior
parte do tempo, os dados são enviados para o servidor da web, mas a página da web também
podeintercetar para usá-los por conta própria.

Para construir o nosso formulário, vamos utilizar os seguintes elementos <form>, <label>,
<input>, <textarea> e <button>.

HTML5 & CSS3, Formador 11

Pedro Vasco
 Todos formulários HTML começam com um elemento <form> como este:

Este elemento define um formulário. É um elemento de container como um elemento

<div> ou <p>, mas ele também suporta alguns atributos específicos para configurar a forma
como o formulário se comporta. Todos os seus atributos são opcionais, mas é considerada a
melhorprática sempre definir pelo menos o atributo action e o atributo method.

 O atributo action define o local (uma URL) em que os dados recolhidos do formulário
devem ser enviados.
 O atributo method define qual o método HTTP para enviar os dados (ele pode ser
"GET" ou "POST" (veja as diferenças aqui).

Adicionar campos com os elementos <label> e <input>.

O nosso formulário de contato é muito simples e contém três campos de texto, cada
um comuma etiqueta. O campo de entrada para o nome será um campo básico texto de linha
única("input"); o campo de entrada do e-mail será um campo de texto com uma única
linha("input") que vai aceitar apenas um endereço de e-mail; o campo de entrada para a
senha será um campo de texto com uma única ("input").

Em termos de código HTML, teremos algo assim:

HTML5 & CSS3, Formador 12

Pedro Vasco
 Os elementos <div> estão lá para estruturar nosso código e deixar a estilização mais
fácil. Observe o uso do atributo for em todos os elementos <label>; é uma maneira para
vincular uma label à um campo do formulário. Este atributo faz referência ao id do campo
correspondente. Há algum benefício para fazer isso, é a de permitir que o usuário clique no
rótulo para ativar o campo correspondente.
No elemento <input>, o atributo mais importante é o atributo type. Esse atributo é
extremamente importante porque define a forma como o elemento <input> se comporta. Ele
pode mudar radicalmente o elemento, então preste atenção a ele. Em nosso exemplo, nós
usamos somente o type="text", valor padrão para este atributo. Ele representa um campo de
texto com uma única linha que aceita qualquer tipo de texto sem controle ou validação. Nós
também usamos o type="email" que define um campo de texto com uma única linha que só
aceita um endereço de e-mail bem-formados.

Para permitir que o usuário envie seus dados depois de ter preenchido o formulário
usamos o elemento <button>

Um botão pode ser de três tipos: submit, reset ou

button.

1. Um clique sobre um botão de submit envia os dados do formulário para a página de

web definida pelo atributo action do elemento <form>.
2. Um clique sobre um botão de **reset **redefine imediatamente todos os campos do
formulário para o seu valor padrão.
3. Um clique em um botão do tipo button faz ...ops, nada! Mas é útil para construir
botões personalizados com JavaScript, ou seja, ele pode assumir qualquer
comportamento através desta linguagem.

Vídeos
A tag <vídeo> é usada para embutir um vídeo na página.

HTML5 & CSS3, Formador 13

Pedro Vasco
 Explicação:
<vídeo> A tag de vídeo.
width atributo que define a largura do vídeo.
height atributo altura do vídeo.
<source> tag que define o local onde está o vídeo.
src atributo que que define o local do
vídeo. type a extensão ou o formato do
vídeo. controls mostra os controles na tela.
autoplay play automático.

muted o vídeo começa sem som.

loop repete o vídeo infinitas vezes.
O texto aparece caso o navegador não suporte o vídeo.

Tags Semânticas

O HTML semântico tem como

objetivo descrever o significado do
conteúdo presente em documentos HTML,
tornando- o mais claro tanto para
programadores quanto para browsers e
outras engines que processam essa
informação.

<header> é utilizado para

representar o cabeçalho de um documento
ou seção declarado no HTML.

<nav> O elemento é utilizado

quando precisamos representar um
agrupamento de links de navegação, que,
por sua vez, são criados com os elementos
<ul>, <li> e <a>.
<article> Utilizamos o elemento quando
precisamos declarar um conteúdo que não precisa de outro para fazer sentido em um
documento HTML, por exemplo, um artigo em um blog.
<section> O elemento representa uma seção dentro de um documento e geralmente
contémum título, o qual é definido por meio de um dos elementos entre <h1> e <h6>.

HTML5 & CSS3, Formador 14

Pedro Vasco
 <footer> O elemento representa um rodapé de um documento, como a área presente
no finalde uma página web. Normalmente é utilizado para descrever informações de autoria,
como nome e contato do autor, e data de criação do conteúdo

Tarefas

1. Criar uma página html para exposição de vídeos por meio de fotos e um breve título,
e uma página externa para reprodução dos vídeos, a mesma deve conter o vídeo
selecionado, descrição e título para maior interesse. Atenção: as duas páginas devem
estar devidamente ligadas.
2. Crie uma página de Cadastro e outra de Login contendo todas entidades básicas
necessárias, não se preocupe com estilo, foque num futuro funcionamento.

HTML5 & CSS3, Formador 15

Pedro Vasco
 Introdução ao CSS3

CSS é a sigla para o termo em inglês Cascading Style Sheets que, traduzido para o
português, significa Folha de Estilo em Cascatas. O CSS é fácil de aprender e entender e é
facilmente utilizado com as linguagens de marcação HTML.

A relação entre HTML e CSS é bem forte. Como o HTML é uma linguagem de marcação
(o alicerce de um site) e o CSS é focado no estilo (toda a estética de um site), eles andam
juntos.

CSS não é tecnicamente uma necessidade, mas provavelmente você não gostaria de
olhar para um site que usa apenas HTML, pois isso pareceria completamente abandonado.

1. Como integrar o CSS no HTML?

Após salvar como estilo.css precisamos colocar o arquivo em nosso arquivo HTML,
porque é ele quem vai carregar o CSS, o CSS sozinho não faz site! E é com tags de referência
que você avisa ao HTML que existe um arquivo de estilo para ele, veja:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

Esta tag vai indicar ao HTML que tem um arquivo CSS para ser adicionado à página.
Isto deve ser adicionado dentro da tag <head> </head> do seu HTML, como pode ver nesse
print abaixo.

Agora abra o documento style.css com o Visual Studio Code, está na mesma
pasta comoAdicionarCSS, onde está também o index.html e o logo.png.

HTML5 & CSS3, Formador 16

Pedro Vasco
 A partir desta última imagem, vamos entender como o CSS funciona com três
parâmetros básicos:

2. Elementos Básicos do CSS

Os elementos são tags do HTML, #id e .classe.

2.1. Tags HTML

HTML5 & CSS3, Formador 17

Pedro Vasco
 2.2. Classes CSS

Criar e usar uma classe CSS é simples. No documento CSS basta colocar .nome-da-
classe-que-deseja. Abaixo criamos a classe título:

Note que existe um ponto (.) antes do nome da classe. Isso faz com que o CSS entenda
que se está criando uma classe para ser usada no HTML.

Para se adicionar essa classe que criamos dentro do CSS, basta que na
tag HTML tenha o parâmetro class=””.

Observação: dentro das aspas, não precisa usar o ponto (.) antes da classe pois o nome
class no HTML já avisa para o CSS que é para ele buscar pelo nome da classe com “.”

Lembrando que uma tag HTML, como h1 ou qualquer outra, pode ter mais de uma
classe, basta separá-las com espaço como mostra no exemplo abaixo:

<h1 class=”titulo fonte-grande sublinhado”>Melhor site</h1>

Nesta tag foram usadas três classes: “titulo”, “fonte-grande” e “sublinhado”. Mas para
que todas estas classes tenham efeito é preciso criá-las no CSS. Veja como criamos estas
classes:

Quando abrirmos nosso HTML o título deverá ficar assim:

HTML5 & CSS3, Formador 18

Pedro Vasco
 2.3. Usando ID’s em CSS

O uso dos ID’s em CSS é parecido com as classes, mas as principais

diferenças são que os id’s são identificados com # e só podem ser usados um
id por tag html. Para adicionar um ID ao HTML, adicione como parâmetro
id=””.

Veja que a quando usamos no HTML, também excluímos o (#) do id da mesma forma
que excluímos o (.) da classe.

Dessa forma, o botão deverá ficar assim:

3. Propriedades CSS3

HTML5 & CSS3, Formador 19

Pedro Vasco
 No ficheiro estilo.css usamos o selector de class para que tem o nome de quadrado,
nesse quadrado aplicamos uma cor no texto e demos uma cor no fundo da minha tag div que
tem como nome da class quadrado.

background-color: A propriedade background-color permite configurar uma cor de

fundo a um elemento, podemos aplicar praticamente a qualquer elementos que desejamos
mudar a cor do fundo, body, p, div, h1 a h6, header, section, etc.

Color: A propriedade permite configurar cor do texto de um elemento, como parágrafo

e outros elementos.

Esse é o resultado do que nós fizemos até agora. O nosso fundo está ocupado a tela
inteira, porque não definimos um tamanho no fundo.

width – largura : A propriedade width define a largura de um elemento, pode usar

várias unidades de medida, px, %, em, rem etc.

height - Altura – Altura Já a propriedade height define a altura de um determinado

elemento, vamos usar o mesmo código anterior.

Esse é o resultado do que nós fizemos até agora. O nosso fundo está ocupado a tela
inteira, porque não definimos um tamanho no fundo.

width – largura : A propriedade width define a largura de um elemento, pode usar

várias unidades de medida, px, %, em, rem etc.

height - Altura – Altura Já a propriedade height define a altura de um determinado

elemento, vamos usar o mesmo código anterior.

max-width & min-width

HTML5 & CSS3, Formador 20

Pedro Vasco
 Podemos configurar um valor para largura máxima e mínima, em caso de uso de
unidades de medida relativas como %, o elemento será aumentado ou diminuído de acordo
do a largura da tela, mas nunca será menor que min-width ou maior que max-width. Mas essa
propriedade é mais utilizada quando estivermos a trabalhar com página responsiva.

Logo em seguida, vamos abrir o nosso navegador e ver se sofreu alguma alteração, na
nossa página.

Podemos notar que diminuímos a largura, que ocupa um tamanho de 300px e uma
altura de 200px. Caso queira usar um tamanho que ocupa a tela inteira usa a unidade %. A
tela do nosso computador é de 100%. As outras unidades de medida como rem e em, são
usadas quando estamos a usar o tamanho de um título ou parágrafo. 1 rem é igual ao
tamanho padrão da fonte da raiz(root) do documento, normalmente 16px, logo 1 rem é igual
à 16px. Já o em Essa medida se comporta semelhante ao rem, a diferença dela é que 1 em se
baseia no tamanho do elemento pai de um parágrafo.

HTML5 & CSS3, Formador 21

Pedro Vasco
 De acordo com a imagem estamos ver a nossa tag raiz(*) ou global que tem um tamanho
da fonte de letra de 100%, que quer dizer que todos os elementos vai receber um tamanho de 16px.
Se nós prestar bem atenção, o nosso título está com um tamanho de 1rem, que quer dizer que tem
um tamanho de 16px. se nós colocarmos 2rem, quer dizer que ele será 32px. porque ele faz uma
multiplicação entre o elemento raiz com a tag que pretendemos dar um tamanho.

Podemos perceber que o tamanho do nosso texto diminuiu. Para nós aumentar, basta
colocar uma font-size: 2rem. em outra palavras, esse 2rem, será 32px.

HTML5 & CSS3, Formador 22

Pedro Vasco
 Agora vamos ver o resultado.

O mesmo acontece com a unidade de medida, a única que muda é que ele não
depende do elemento raiz, mas sim do seu pai.

HTML5 & CSS3, Formador 23

Pedro Vasco
 De acordo com a imagem, podemos perceber que a classe é elemento pai do h1. Nesse
caso o elemento h1 é o elemento filho, quando aplicarmos uma medida no elemento pai, o
elemento filho também vai obedecer o mesmo tamanho do elemento pai que é de font-size:
30px. para que nós mexermos no elemento filho, devemos usar a unidade de medida (em).

HTML5 & CSS3, Formador 24

Pedro Vasco
 De acordo com o resultado do navegador, podemos ver que o título aumentou. Além
do quadrado ter um tamanho de 30px, quando aplicarmos um tamanho título de 3em, ele
multiplicou 30x3 = 90px. Isso quer dizer que o nosso título terá um tamanho de 90px.

background-image: Caso precise adicionar uma imagem de fundo basta usar

background-image, veja o código a seguir onde inserimos a imagem “cfb.jpg” como imagem
de fundo da página.

Assim como estamos a ver na imagem, temos um body que é o corpo do html está a
receber uma imagem de fundo. isso quer dizer que toda nossa pagina terá essa imagem. a
url() é o caminho onde está a nossa pasta imagem.

Esse é o resultado por nós colocar a imagem no fundo. Isso não quer dizer que só podemos colocar
imagem de fundo no body, podemos colocar em qualquer tag html.

HTML5 & CSS3, Formador 25

Pedro Vasco
 background-size: Com a propriedade background-size podemos configurar o tamanho da imagem de
fundo. Adicionando esta propriedade podemos controlar o tamanho da largura e altura da imagem, em nosso
código de exemplo usamos o valor 800px para definir a largura, quando usamos somente um valor para
largura, automaticamente a altura aumenta ou diminui na proporção devida.

Agora vamos ver o resultado no navegador.

Podemos notar que o tamanho da nossa imagem aumentou, porque aplicamos um tamanho de 800px.

background-repeat: Esta propriedade configura a repetição da imagem, por padrão a imagem de

fundo se repete até que preencha toda área da janela, mas podemos controlar se vai repetir somente na
horizontal, vertical ou sem repetição.

HTML5 & CSS3, Formador 26

Pedro Vasco
 Quando aplicamos um no-repeat, fica apenas uma única. A imagem só tende a repetir quando é
pequena, então ela repete, para ocupar inteira do computador.

Podemos notar que só tem agora uma única imagem. Se nós queremos colocar que a imagem ocupa a
tela inteira devemos usar a propriedade cover.

HTML5 & CSS3, Formador 27

Pedro Vasco
 Agora vamos ver o resultado no navegador.

border – bordas / linhas de contorno : A metapropriedade border define as configurações das bordas
do elemento, podemos definir o estilo da borda, largura e cor de forma simples.

A sintaxe é a seguinte: border: estilo largura cor;

HTML5 & CSS3, Formador 28

Pedro Vasco
 Existem vários estilos que podemos aplicar, veja a seguir.

dotted – Bordas pontilhadas

dashed – Bordas tracejadas
solid – Bordas com linha sólida / contínua
double – Bordas com linhas duplas
groove – Bordas em estilo 3D
ridge – Bordas em estilo 3D com as cores ao contrário de groove
inset – Efeito 3D no estilo baixo relevo.
outset – Efeito 3D no estilo alto relevo.
none – Sem bordas.
hidden – Bordas ocultas

Podemos trabalhar com as bordas de forma individual, ou seja cada borda com sua própria configuração,
neste caso devemos usar uma propriedade para cada borda.

border-top = Borda superior.

border-right = Borda direita.
border-bottom = Borda inferior.
border-left: esquerda.

HTML5 & CSS3, Formador 29

Pedro Vasco
 Agora vamos ver o resultado no navegador.

border-radius / Cantos arredondada: Uma novidade de CSS3 em relação aos cantos

arredondados, onde podemos trabalhar de forma que cada canto tenha um arredondamento
ou de forma que todos os os cantos tenham o mesmo valor.

O uso da propriedade é bem simples, basta informar o valor do arredondamento com

a unidade de medida desejada, pixel, %, em, etc.

HTML5 & CSS3, Formador 30

Pedro Vasco
 margin – margens: Os elementos HTML possuem margens externas que podem ser
controladas para configurar em certo espaço entre os elementos.

Também podemos usar os parâmetros separadamente.

margin-top= Margem superior

margin-right = Margem direita
margin-bottom = Margem inferior
margin-left = Margem esquerda

padding - margens internas : Padding são as margens internas dos elementos, usamos
o padding da mesma forma que usamos margin, porém, na parte interna dos elementos, veja
a ilustração.

Note que a margem “cresce” para o lado de fora da borda e padding para o lado de
dentro.

padding-top = Espaçamento interno superior

padding-right=Espaçamento interno direito
padding-bottom= Espaçamento interno inferior
padding-left = Espaçamento interno esquerdo

HTML5 & CSS3, Formador 31

Pedro Vasco
 No html criamos um botão que tem como nome. Agora vamos mexer no css.

HTML5 & CSS3, Formador 32

Pedro Vasco
 No botão que acabamos de criar, demos um fundo de cor rosa, padding inteiro que vai
receber dois valores de medida. o primeiro valor : 20px vai ser tanto para top(superior) e
bottom(inferior) e 50px vai ser tanto para left (esquerda) e right(direita). Agora no caso da
margin, estamos a especificar que queremos mexer na margin-top(margin-superior) que vai
receber um tamanho de 50px. Agora o border-radius é para tornar o nosso botão em formato
de círculo, e está a receber um tamanho de 15px(left,top,right, bottom). aplicarmos uma cor
branca na letra do texto e um tamanho de 20px. Agora vamos ver o resultado no navegador.

Esse é o resultado que nós fizemos.

box-shadow: A propriedade box-shadow tem a mesma sintaxe de text-shadow, porém aplica

sombras aos outros elementos diferentes de texto, como <div> por exemplo.

HTML5 & CSS3, Formador 33

Pedro Vasco
Agora aplicamos uma sombra no botão. Agora vamos visualizar no navegador como ficou.

HTML5 & CSS3, Formador 34

Pedro Vasco
 Agora estamos ver o efeito da sombra que aplicamos. isso não quer dizer que o único
elemento ou tag que merece sombra é o buttom. os texto também podem receber sombra,
basta aplicar text-shadow e usar as mesma propriedade do box-shadow.

text-align - alinhamento : Esta propriedade define o alinhamento do texto.

Quando aplicarmos o text-align:center; o nosso texto vai ficar no centro. Vamos ver o
resultado no navegador.

Nesse momento estamos a ver o título seja bem vindo centralizado no meu quadrado.
Os valores possíveis para text-align são:
left = Esquerda
right = Direita
center = Centro

HTML5 & CSS3, Formador 35

Pedro Vasco
 justify = Justificado

text-decoration – Decoração: Configura o método de decoração do texto, a decoração

são tipos de linhas como abaixo do texto, acima do texto ou riscado.

text-decoration:underline; - sublinhado o texto em baixo

text-decoration:overline; - sublinhado o texto em cima
text-decoration:line-through; - sublinhado o texto no meio
text-decoration:none - tirar o texto caso esteja sublinhado.

text-transform – Transformações: Com esta propriedade podemos configurar letras

em maiúsculas, minúsculas e primeiras letras em maiúsculo.

text-transform:uppercase; Converte o texto em maiúsculo

text-transform:lowercase; Converte o texto em minúsculo
text-transform:capitalize; Converte as primeiras letras do texto em maiúsculo.

De acordo com a página, estamos a ver o texto todo em maiúsculo. porque aplicarmos
text-transform:uppercase;

font-family: Com parâmetro font-family podemos configurar grupos de fontes para

serem usadas em um determinado texto, a vantagem de especificar grupos de fontes é tentar
garantir que sejam usadas somente fontes definidas pelo programador, o que não é 100%
garantido.

HTML5 & CSS3, Formador 36

Pedro Vasco
 Aplicamos um tipo de tipo de letra diferente do que estamos a usar na nossa página.
É de realçar que os navegadores não entendem todos os tipos de letras.

4. Formatando o link como um botão

Podemos usar as propriedades CSS para transformar o link na tag normal como se
fosse um botão.

Assim que aplicamos o link <a> a nossa página vai ficar assim.

HTML5 & CSS3, Formador 37

Pedro Vasco
 O saber mais está com cor azul e texto sublinhado como padrão. Para nós podermos
tirar isso, devemos usar o css.

HTML5 & CSS3, Formador 38

Pedro Vasco
 De acordo com o código, a única coisa nova é o hover. O :hover é uma pseudo-classe
CSS que ao ser utilizada ativa estilos em um elemento. O :hover possibilita um elemento ter
o seu estilo alterado através da ação do usuário, quando o próprio passa o cursor do mouse
sobre o elemento.

Até ao momento ainda não aproximamos o cursor até ao botão. Assim que nós
encostarmos o cursor no botão, a cor do botão vai trocar.

Nesse momento estamos a ver que a cor mudou. Porque aproximamos o cursor no
botão.

HTML5 & CSS3, Formador 39

Pedro Vasco
 list-style: A meta propriedade list-style nos permite colocar e tirar o estilo da lista. Mas
por padrão já vem com estilo de lista definido

Nesse momento já criamos a nossa lista, que é nosso menu. agora vamos ver como
está no navegador.

Estamos a ver que a nossa lista de estilo vem como pontos por padrão. para tirar isso,
devemos mexer no css. nesse caso devemos mexer na tag ul para tirar esses pontos.

HTML5 & CSS3, Formador 40

Pedro Vasco
 Não aplicamos nenhuma lista de estilo. Por isso tem um list-style:none. Agora vamos
ver como está no navegador.

Agora, caso queira meter todos em formato de linha, devemos aplicar a propriedade
display: inline-block; na tag <li>.

HTML5 & CSS3, Formador 41

Pedro Vasco
 Vamos ver o resultado no navegador.

HTML5 & CSS3, Formador 42

Pedro Vasco
5. @media – layouts responsivos
As regras media permitem configurar diferentes regras CSS para diferentes tipos de
mídia, diante da necessidade de facilitar a configuração do site para se adaptar bem em
dispositivos de diferentes tamanhos, daí vem o conceito de design responsivo ou layout
responsivo.

Os valores que podemos usar para os tipos de mídia são:

all = Todos os tipos de dispositivos

print = Usado para impressoras
screen = usado para telas, computador, celulares, tablets, etc.
speech = Usado para telas de leitores de conteúdo, leitores de ebook por exemplo, em
voz alta.

Estrutura básica do media query.

6. Introdução ao FexBox

O Flexbox é um conceito do CSS3 que visa organizar os elementos de uma página

HTML dentro de seus containers de forma dinâmica. Ou seja, independente das suas
dimensões eles sempre manterão um layout flexível dentro do seu elemento pai,
reorganizando-se de acordo com a necessidade.

6.1. FlexBox - Conceitos

O Flexbox é um conjunto de propriedades que tem por objetivo organizar itens dentro
de um elemento pai, normalmente chamado de container, conforme ilustra a Figura1.

HTML5 & CSS3, Formador 43

Pedro Vasco
 Portanto, para utilizar esse recurso é necessário ter no HTML ao menos um elemento
(container) contendo outros (itens), como no código abaixo:

Conforme veremos a seguir, algumas propriedades serão aplicadas ao container,

enquanto outras serão aplicadas aos itens.

7. Display
O primeiro passo para utilizar o Flexbox é definir a propriedade display do container
com o valor flex. Isso é necessário para que as demais propriedades apresentem o resultado
esperado.
A sintaxe de uso dessa propriedade é a seguinte:

HTML5 & CSS3, Formador 44

Pedro Vasco
 Para nós ver bem como está funcionando as propriedades do flexbox, vamos mexer
nas classes filhas do container do html, que são os itens

Nesse momento já demos um tamanho no elemento pai que é o container, colocamos

fundo, e utilizamos a propriedade fundamental que é display:flex; de modo que o flexbox
funciona.

HTML5 & CSS3, Formador 45

Pedro Vasco
 Esse é o resultado do código que acabamos de fazer em css.

Flex-direction: A propriedade flex-direction deve ser aplicada ao container e define o

eixo/fluxo de exibição em que os elementos serão organizados. A sintaxe e os valores
possíveis para essa propriedade são apresentados a seguir:

HTML5 & CSS3, Formador 46

Pedro Vasco
 Usando o flex-direction: row; ele vai colocar todos os elementos filhos em forma de
linha. vamos ver como está no navegador.

● row (padrão): Os itens são organizados em forma de linha da esquerda para a direita;
● row-reverse: Os itens são organizados em forma exibição em linha da direita para a
esquerda;
● column: Os itens são organizados em forma de colunas iniciando de cima para baixo;
column-reverse: Os itens são organizados em forma de colunas iniciando de baixo para
cima

A Figura 3 ilustra o funcionamento de cada valor.

Figura 3. Funcionamento da propriedade flex-direction

Flex-wrap: Por padrão os itens do container tentarão se ajustar em uma única linha
dentro do container, mas para isso a sua largura original pode ser ajustada para que todos

HTML5 & CSS3, Formador 47

Pedro Vasco
caibam na largura do elemento pai. Com a propriedade flex-wrap aplicada ao container
podemos alterar esse comportamento, fazendo com que ocorra a “quebra de linha” nos itens.

A sintaxe e os valores possíveis para essa propriedade são apresentados a seguir:

Flex-wrap só funciona quando os elementos filhos ficam com mais tamanho que o
elemento pai. Quando isso acontece deve-se usar a propriedade flex-wrap: wrap; de modo a
fazer quebra de linha. Porque ele passou do tamanho do seu pai e isso não pode acontecer.

HTML5 & CSS3, Formador 48

Pedro Vasco
 Nesse momento houve uma quebra de linha. O item número 3 não pode ficar ai em
cima, devido ao tamanho que ele tem.

● nowrap (padrão): Todos os itens serão dispostos em uma linha;

● wrap: Ocorrerá a quebra de linha e os itens mais à direita serão deslocados para a
linha de baixo;
● wrap-reverse: Ocorrerá a quebra de linha e os itens mais à direita serão deslocados
para a linha de cima;

Justify-content: A propriedade justify-content define o alinhamento dos itens ao

longo do eixo principal do container. A sintaxe e os valores possíveis para essa propriedade
são apresentados a seguir:

HTML5 & CSS3, Formador 49

Pedro Vasco
 Aplicando essa propriedade justify-content: flex-end; ele coloca todos os
elementos filhos à direita, temos que eliminar a propriedade quebra de linha. Agora
vamos ver o resultado no navegador.

HTML5 & CSS3, Formador 50

Pedro Vasco
 ● flex-start (padrão): Os itens são alinhados a partir do início do eixo principal;
● flex-end: Os itens são alinhados a partir do fim do eixo principal;
● center: Os itens são alinhados ao centro do eixo principal;
● space-between: O primeiro item é deslocado para o início do eixo principal, o último
é deslocado para o final do eixo principal e os demais são
distribuídos uniformemente entre eles;
● space-around: Os itens são uniformemente distribuídos ao longo do eixo principal.
Aqui, porém, são atribuídas margens iguais à esquerda e à direita (ou acima e abaixo,
dependendo da direção do eixo principal). Por isso o primeiro e o último item não
ficam “colados” nas bordas do container.

A Figura 4 ilustra o funcionamento de cada valor:

HTML5 & CSS3, Formador 51

Pedro Vasco
 Figura 4 Representação da propriedade justify-content

Align-items: Essa propriedade define como os itens são distribuídos ao longo do eixo
transversal do container. A sintaxe e os valores possíveis para essa propriedade são
apresentados a seguir:

HTML5 & CSS3, Formador 52

Pedro Vasco
 Aplicamos a propriedade align-items:center; de modo a deixar os elementos
filhos no centro.

Nesse momento estamos a ver o resultado. os elementos filhos está no centro.

HTML5 & CSS3, Formador 53

Pedro Vasco
 ● stretch (padrão): Os itens serão esticados para preencher toda a dimensão do eixo
transversal (altura ou largura);
● flex-start: Os itens são deslocadas para o início do eixo transversal;
● flex-end: Os itens são deslocadas para o final do eixo transversal;
● center: Os itens são centralizados no eixo transversal;
● baseline: Os itens são alinhados a partir da base da primeira linha de texto de cada
um.

A Figura 6 ilustra o funcionamento de cada valor:

Figura 6. Representação da propriedade align-items

HTML5 & CSS3, Formador 54

Pedro Vasco
 8. Exercício de Flexbox
1- Colocar os elementos filhos no centro do meio, como mostra a imagem.

HTML5 & CSS3, Formador 55

Pedro Vasco