Roque Fernando Glaucio Daniel

Te c h n o E d i t i o n E d i t o r a L t d a

Posicionamento, dimenses
e outros elementos de

HTML5 e CSS3

Posicionamento, dimenses
e outros elementos de

HTML5 e CSS3

Grupo Impacta Marketing Fevereiro de 2015

Sumrio
Resumo

04

Introduo

05

CAPTULO 1 DIMENSO REAL DOS ELEMENTOS

06

CAPTULO 2 CONFIGURANDO AS MARGENS DOS

08

CAPTULO 3 POSICIONANDO OS ELEMENTOS

ELEMENTOS

10

CAPTULO 3.1 POSITION

10

CAPTULO 3.2 FLOAT

14

CAPTULO 4 DEFININDO AS CAMADAS

17

CAPTULO 5 DEFININDO O MODO DE

APRESENTAO DOS ELEMENTOS

20

CAPTULO 6 TABINDEX

22

CAPTULO 7 TIPOS DE MDIA

23

BIBLIOGRAFIA
CRDITOS

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Resumo
HTML, do ingls HyperText Markup Language ou Linguagem de Marcao de
HyperTextos, a linguagem de marcao padro utilizada na criao de pginas para
web, permitindo a incorporao de imagens e objetos de formas interativas e
dinmicas.
O CSS, do ingls Cascading Style Sheets ou Folhas de Estilo em Cascata, tambm
usado na criao de identidade visual, layout de textos e demais funcionalidades em
um pgina da web. Ambas as linguagens so chanceladas pela W3C, que encoraja
seu uso alternado a fim de evitar a dependncia de somente uma linguagem.
O HTML5 a verso mais recente da linguagem e trouxe consigo mudanas
significativas para o universo de programao e desenvolvimento, entre as quais
podemos destacar semntica e acessibilidade a segunda sendo o ponto de
orientao de questes de dimenso e posicionamento de elementos, assunto em
destaque nesse e-book.
Esse livro digital, produzido pelo Grupo Impacta para alunos e aspirantes aos cursos
e treinamentos da Escola Art & Design e Escola Desenvolvimento, tem como
objetivo funcionar como um breve guia de posicionamento e dimenso de
elementos utilizando HTML5 e CSS para profissionais e estudantes de programao.
Palavras-chave: HTML; CSS; posicionamento; dimensionamento; camadas; mdia.

04

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Introduo
A transformao de um layout criado por um designer, em formato de imagem, para
um formato HTML, que servir um site ou Web App, um processo que requer
alguns passos. Neste e-book, abordaremos como criar um layout e posicion-lo
corretamente em um navegador, de maneira que envolva as folhas de estilo em
cascata (CSS) e os demais elementos bsicos de programao.
Antigamente, era comum o uso de tabelas para a estruturao e criao do layout da
pgina, porm, desde o XHTML no h necessidade de utiliz-las. Um dos mtodos
utilizados para a criao de layout em HTML o chamado Tableless, nome atribudo
metodologia de construo de sites sem o uso de tables (tabelas). Para realizar essa
construo, utiliza-se o HTML para determinar a estrutura dos dados e as folhas de
estilo CSS para formatar sua exibio.
Devemos ter em mente que as tags, inclusive a <table>, continuam a ser utilizadas
de acordo com suas funes. A construo de sites por meio da metodologia
Tableless requer a formatao de elementos por meio de arquivos CSS, que
representam as folhas de estilo.

05

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 1 Dimenso real dos elementos

A dimenso real ocupada por um elemento dentro de uma pgina deve ser
conhecida para que seja possvel compreender os conceitos envolvidos no processo
de construo de um layout. A rea ocupada por cada um dos elementos de uma
pgina denominada continer e tem a forma de um retngulo.
O continer de um elemento possui todos os itens que dizem respeito a ele, como
seu contedo, seus espaos em branco, suas margens e suas linhas de contorno. O
desenho a seguir demonstra quais so as reas de um continer de um elemento.
Observe:

MARGIN
BORDER

TEXTO

CONTEDO
PADDING

06

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 1 Dimenso real dos elementos

MARGIN:
Espao que separa o continer de outros elementos que compem a pgina. Vale
destacar que a margem (margin) no est dentro dos limites de um elemento. As
margens so utilizadas com a finalidade de mover a caixa do elemento;
CONTEDO:
Todos os itens contidos em um elemento, os quais permanecem dentro do continer;
BORDER:
Limites de um elemento, isto , as linhas de contorno do continer;
PADDING:
Espaos em branco existentes entre o contedo e os limites de um elemento.

A largura do continer no qual est contido o elemento determinada pela largura

do contedo somada s larguras referentes ao border e ao padding. J a largura do
elemento em si determinada apenas pela largura ocupada por seu contedo, assim
como sua altura.
Em uma pgina, todos os elementos visveis so de grupo ou inline. Os elementos de
bloco tm sua largura determinada pela largura do bloco em que esto. Eles iniciamse sempre em uma linha nova e, depois de finalizados, h uma nova mudana de
linha. J os elementos inline tm sua largura determinada apenas por seu contedo e,
ao contrrio dos elementos de bloco, no se iniciam sempre em uma nova linha.
Dessa forma, conclumos que os elementos inline comportam-se da mesma maneira
que um texto simples.
Como exemplo de elemento de bloco, podemos mencionar o <table>. J como
exemplo de um elemento inline, podemos mencionar o <span>.

07

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 2 Configurando as margens dos elementos

Em CSS, a espessura das margens dos elementos definida pelas

propriedades dessas margens, as quais podem ser:
margin-bottom: Permite determinar a espessura referente margem

inferior do elemento;
margin-top: Permite determinar a espessura referente margem

superior do elemento;
margin-right: Permite determinar a espessura referente margem

direita do elemento;
margin-left: Permite determinar a espessura referente margem

esquerda do elemento.

O valor dessa propriedade

normalmente determinada em pixels.

Observe o exemplo a seguir, no qual temos a definio das margens de um

elemento:

Arquivo CSS
1
2
3
4

p{
margin-top: 70px;
margin-left: 50px;
}

08

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 2 Configurando as margens dos elementos

Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!doctype HTML>
<html>
<head>
<meta charset="ufo-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<p>
Testando o atributo margin-top.
</p>
</main>
</body>
<html>

Ao executarmos esse cdigo, o resultado obtido o seguinte:

Top: 70px
Testando o atributo margin.

Left: 50px

09

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 3 Posicionando os elementos

Quando trabalhamos com arquivos CSS, podemos posicionar elementos e

construir o layout com algumas propriedades. Duas propriedades do CSS3
que so utilizadas com o objetivo de criar e posicionar um layout so a
Flexible Box Layout, ou simplesmente Flexbox, que uma forma simples
e sem clculos para posicionar um layout, e o Mdulo Grid Template
Layout.
Alm disso, temos outras duas propriedades que j eram utilizadas no
XHTML: float e position. Neste captulo, veremos como trabalhar com elas.

Captulo 3.1 Position

A propriedade position, conforme sugere seu prprio nome, permite

determinar o posicionamento de um contedo na tela do usurio. Esse
posicionamento pode ser: esttico, fixo, absoluto e relativo.

Posicionamento Esttico

Este tipo de posicionamento determinado por meio do valor static, o que

desnecessrio, uma vez que o posicionamento esttico padro para os
elementos. Portanto, a propriedade position: static no precisa ser declarada de
forma explcita na folha de estilo.
Um elemento cuja posio esttica coloca-se imediatamente abaixo de seu
elemento anterior e acima de seu posterior. No entanto, vale destacar que isso
apenas ocorre caso os elementos anterior e posterior no tenham seu
posicionamento determinado de forma diferente da esttica.

10

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 3.1 Position

Posicionamento Fixo

Este tipo de posicionamento determina que o elemento seja posicionado de

acordo com a parte que pode ser visualizada do User Agent, no qual exibida a
pgina. Para determinar que um elemento ter seu posicionamento fixo, preciso
utilizar o valor fixed juntamente propriedade position.

Posicionamento Absoluto

Este tipo de posicionamento determina que o elemento seja posicionado levandose em considerao o local em que est o elemento mais prximo, cuja posio
pode ser definida como fixa, absoluta ou relativa.
Nas situaes em que no h um elemento mais prximo, considera-se o
posicionamento do elemento <body>. Para determinar o posicionamento de um
elemento como sendo absoluto, basta utilizar o valor absolute em conjunto
propriedade position.
Vale destacar que h quatro propriedades que se aplicam aos elementos cujo
posicionamento determinado como absoluto. So elas: bottom, top, left e right.
Observe o exemplo a seguir:

Arquivo CSS

#imagem {
position: absolute;
left: 30px;
top: 60px;
}

11

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 3.1 Position

Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13

<!doctype HTML>
<html>
<head>
<meta charset="ufo-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<img src="images/logotipo.png" alt="Logo HTML5" id="imagem">
</main>
</body>
<html>

Ao executarmos o cdigo anterior, o resultado obtido o seguinte:

60px

30px

Podemos observar no exemplo a presena da propriedade position, que recebe o

valor absolute e complementada pelas propriedades left e top. Com isso, o
posicionamento do elemento determinado tomando-se como base o canto
superior esquerdo da viewport. O elemento representado neste exemplo por img,
que possui a id=imagem.

12

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 3.1 Position

Podemos observar ainda que a propriedade left determina o distanciamento da

imagem a partir da margem esquerda e a propriedade top determina o
distanciamento a partir da margem superior.
Posicionamento Relativo

Este tipo de posicionamento determina a posio do elemento de acordo com sua

prpria posio. Para determinar o posicionamento de um elemento como relativo,
basta utilizar o valor relative juntamente propriedade position.
Quando trabalhamos com o posicionamento relativo de elementos, podemos
utilizar as propriedades bottom, top, right e left.
Observe o exemplo a seguir:

Arquivo CSS

.imagem {
position: relative;
left: 30px;
top: 60px;
}

Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<img src="images/logotipo.png" alt="Logo HTML5" class="imagem">
<img src="images/css3.png" alt="Logo CSS3" class="imagem">
</main>
</body>
<html>

13

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 3.1 Position

Veja o resultado:

60px

30px

Captulo 3.2 Float

Os elementos declarados como float so convertidos para elementos de bloco de
forma automtica, podendo ter sua altura e largura declaradas. Mais especificamente,
uma vez que os browsers consideram a no declarao de largura um erro, a largura
dos elementos float deve ser declarada.
Quanto ao posicionamento de um elemento float, este ocorre imediatamente aps o
elemento no bloco anterior a ele, embora tais elementos fiquem fora do fluxo. Os
valores que podem ser utilizados juntamente ao atributo float so: none, left, right e
inherit cujo valor igual ao valor da propriedade referente ao elemento pai.

14

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 3.2 Float

Acompanhe o exemplo a seguir:

Arquivo CSS

.img {
float: left;
width: 15%;
}

p{
font-size: 20px;
margin-top: 0px;
}

Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!doctype HTML>
<html>
<head>
<meta charset="ufo-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<img src="images/logotipo.png" alt="Logo HTML5" id="imagem">
<p>Texto principal</p>
</main>
</body>
<html>

15

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 3.2 Float

Veja o resultado obtido:

Texto principal

Se no tivssemos utilizado o atributo float no exemplo anterior, o resultado obtido

seria o seguinte::

Texto principal

16

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 4 Definindo as Camadas

Alguns elementos de bloco como section, div, article, entre outros, oferecem
atributos que permitem definir as camadas que sero utilizadas na construo
do layout da pgina.
Veja, a seguir, quais so esses atributos:
id: Permite determinar como a camada ser identificada;
class: Permite determinar qual classe j declarada no arquivo CSS deve ser

aplicada;
z-index: Permite determinar o nvel de empilhamento;
visibility: Permite determinar a visibilidade da camada. Os valores que

podem ser utilizados por este atributo so os seguintes: visible, inherit e

hidden.
O atributo z-index, que tem a finalidade de ordenar a prioridade de
visualizao dos elementos, funciona apenas com os elementos que foram
configurados com o posicionamento absoluto, o que significa que so os
elementos cuja propriedade position configurada como absolute. Vale
destacar que quanto maior o valor do atributo z-index, maior a prioridade de
visualizao do elemento. Por exemplo, um elemento que possui z-index: 5
tem prioridade sobre um elemento que possui z-index: 3.

17

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 4 Definindo as Camadas

Observe o exemplo a seguir:

Arquivo CSS

.posicao {
position: absolute;
width: 170px; height: 100px;
font-family: arial;
font-size: 16px;
font-weight: bold;
}

#branca {
top: 140px; left: 100px;
background-color: #ffffff ; height: 100px;
border: solid ; 3px; #000 ;
z-index: 4;
}

#azul {
top: 100px; left: 60px;
background-color: #0066ff ;
border: solid ; 3px; #000 ;
z-index: 3;
}

#laranja {
top: 60px; left: 20px;
background-color: #ff0 ;
border: solid ; 3px; #000 ;
z-index: 2;
}

#fundo {
top: 20px; left: 5px;
width: 300px; height: 250px;
background-color: #eee;
border: solid ; 3px; #000 ;
z-index: 1;
}

18

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 4 Definindo as Camadas

Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!doctype HTML>
<html>
<head>
<meta charset="ufo-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<div id="amarela">Div - laranja</div>
<div id="azul">Div - azul</div>
<div id="branca">Div - branca</div>
<div id="fundo">Div - fundo</div>
</main>
</body>
<html>

Veja o resultado obtido:

Div - fundo
Div - fundo
Div - laranja
Div - azul
Div - branco

Neste exemplo, temos o posicionamento de vrias camadas.

Com isso, algumas sobreposies foram criadas.

19

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 5 Definindo o modo de apresentao dos elementos

O atributo display permite determinar se um elemento deve ser apresentado e, caso

deva, permite determinar seu modo de apresentao. Os valores que podem ser
utilizados com o atributo display so os seguintes:

Valores

Descrio

table

Determina que o elemento seja apresentado como uma

tabela, sendo que h mudana de linha tanto antes do
elemento quanto depois dele.

list-item

Determina que o elemento seja apresentado com sendo

item de uma lista.

inline

Determina que o elemento seja apresentado sem que

haja mudana de linha.

block

Determina que o elemento seja apresentado como um

elemento de bloco, e, diferentemente do item anterior,
existe a quebra de linha antes e depois do item.

none

Determina que o elemento no seja apresentado.

20

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 5 Definindo o modo de apresentao dos elementos

O exemplo descrito a seguir permite compreender de forma adequada a utilizao

dos valores que acabam de ser definidos:

Arquivo CSS

.linha { display: inline; }

Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!doctype HTML>
<html>
<head>
<meta charset="ufo-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<p class="linha"> PARAGRAFO 1 * PARA TESTE DO ATRIBUTO DISPLAY</p>
<p class="linha"> PARAGRAFO 2 * PARA TESTE DO ATRIBUTO DISPLAY</p>
<p class="linha"> PARAGRAFO 3 * PARA TESTE DO ATRIBUTO DISPLAY</p>
</main>
</body>
<html>

O resultado produzido ser o seguinte:

PARAGRAFO 1 * PARA TESTE DO ATRIBUTO DISPLAY PARAGRAFO 2 * PARA TESTE

DO ATRIBUTO DISPLAY PARAGRAFO 3 * PARA TESTE DO ATRIBUTO DISPLAY

21

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 6 Tabindex

Por meio desse atributo, podemos definir uma ordem de navegao ao longo de
todos os elementos existentes em um documento HTML5, como links e elementos de
formulrio. Sem o uso de tabindex, o usurio seria obrigado a percorrer todos esses
elementos de acordo com a ordem em que eles aparecem no cdigo.
possvel determinar o ndice de tabulao em uma barra de navegao, em
elementos pertencentes a um formulrio ou outros itens que fazem parte do cdigo
XHTML. Para que o ndice de tabulao seja definido em um campo de formulrio e
um link, por exemplo, devemos utilizar a sintaxe a seguir:

<input type="emai" id="login" tabindex="1" />

22

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 7 Tipos de Mdia

Alguns estilos podem ser aplicados somente em algumas situaes especiais como,
por exemplo, a utilizao de um determinado tipo de fonte assim que algum usurio
requisitar a impresso da pgina. Por meio dos tipos de mdia (tambm chamados de
media types), um arquivo CSS poder ser criado apenas para um evento em
particular.
Veja quais so os principais tipos de mdia para aplicao em uma folha de estilo CSS:

all: Permite a definao de estilos para todos os tipos de mdia;

aural: Os estilos so definidos para sintetizadores de voz;

braille: Possibilita a aplicao de definies para textos em braile;

embossed: Permite a impresso em impressoras prprias para a leitura braile;

handheld: Os estilos so definidos para equipamentos mveis de mo, como

celulares;

print: Possibilita a aplicao de estilos para a impresso da pgina em papel;

projection: Os estilos so definidos para a apresentao da pgina em um

projetor;

screen: Permite que os estilos sejam utilizados para que a pgina seja exibida
na tela do computador;

tty: Os estilos so aplicados para a apresentao da pgina em terminais com

poucos recursos;

tv: Permite a exibio da pgina em uma tela de TV.

23

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 7 Tipos de Mdia

Por meio da regra @media, possvel aplicar diversas propriedades relacionadas a

diferentes tipos de mdia em uma s folha de estilo. No exemplo a seguir, temos uma
demonstrao dessa regra: a pgina ser formatada para impresso em papel e
exibio na tela. Para comear, ser criado o arquivo .css:

@media print {
.midia {
font-family: arial;
font-size: 11px;
color: black;
text-align: left;
}
}

@media only screen and (max-width: 480px) {

.midia {
font-family: arial;
font-size: 13px;
color: red;
text-align: left;
}
}

No exemplo anterior, temos um estilo com cor preta para impressora e outro estilo
para dispositivos que possuem no mximo 480px de largura.

24

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 7 Tipos de Mdia

Para realizar este teste podemos utilizar a funo redimensionar do navegador.

Observe que com a janela completamente dimensionada, ultrapassamos o valor de
480px de largura, logo, o estilo no ser aplicado:

Tipo de Media - testando atributo @media

Agora, quando o navegador redimensionado para uma resoluo inferior a 480px,

o estilo aplicado:

Tipo de Media - testando atributo @media

25

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 7 Tipos de Mdia

O layout do site da Faculdade Impacta Tecnologia utiliza esse recurso, que

denominado Responsive Web Design, ou apenas Layout Responsivo:

Reduzindo a dimenso da janela, por exemplo, no uso em tablets, percebemos que o

banner principal sumir:

26

Posicionamento, dimenses e outros

elementos de HTML5 e CSS3

Captulo 7 Tipos de Mdia

E com a tela utilizada para smartphones:

27

Bibliografia
BRUSCAGIN, Henrique Thomaz; OLIVEIRA, Luiz Fernando; SOUZA, Roque Fernando Marcos.
HTML 5 Fundamentos (online). Techno Edition Editora Ltda. Setembro de 2014, So Paulo.

Obra derivada da obra original HTML 5 Fundamentos. SANTOS, Glaucio Daniel Souza.
Techno Edition Editora Ltda. Julho de 2013, So Paulo.

28

Crditos
Contedo

Glaucio Daniel Souza Santos, Henrique

Thomaz Bruscagin, Luiz Fernando Oliveira,
Roque Fernando Marcos Souza

Direo, Adaptao e Reviso

Consultoria

Adam Junqueira
Wilson Divino, Ednilson Gomes

Diagramao

Andr Luiz Ribeiro

Reviso Geral

Bruno Saes

Direo Geral

Miro Brito

Grupo Impacta Marketing Fevereiro de 2015