HTML E CSS Fundamentos

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

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

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

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

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

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

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

Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype HTML>
<html>
<head>
</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

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

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

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>
</head>
<body>
<main role="main">
<img src="images/logotipo.png" alt="Logo HTML5" id="imagem">
<p>Texto principal</p>
</main>
</body>
<html>
15

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

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

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 {
background-color: #0066ff ;
z-index: 3;
}
#laranja {
background-color: #ff0 ;
z-index: 2;
}
#fundo {
width: 300px; height: 250px;
background-color: #eee;
z-index: 1;
}
18

Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype HTML>
<html>
<head>
</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

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

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>
</head>
<body>
<main role="main">
<p class="linha"> PARAGRAFO 1 * 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

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

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

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

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

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

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

HTML E CSS Fundamentos

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML E CSS Fundamentos

Загружено:

Авторское право:

Доступные форматы

Roque Fernando Glaucio Daniel

Grupo Impacta Marketing Fevereiro de 2015

CAPTULO 1 DIMENSO REAL DOS ELEMENTOS

CAPTULO 2 CONFIGURANDO AS MARGENS DOS

CAPTULO 3 POSICIONANDO OS ELEMENTOS

CAPTULO 3.1 POSITION

CAPTULO 3.2 FLOAT

CAPTULO 4 DEFININDO AS CAMADAS

CAPTULO 5 DEFININDO O MODO DE

CAPTULO 7 TIPOS DE MDIA

Posicionamento, dimenses e outros

Posicionamento, dimenses e outros

Posicionamento, dimenses e outros

Captulo 1 Dimenso real dos elementos

Posicionamento, dimenses e outros

Captulo 1 Dimenso real dos elementos

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

Posicionamento, dimenses e outros

Captulo 2 Configurando as margens dos elementos

Em CSS, a espessura das margens dos elementos definida pelas

O valor dessa propriedade

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

Posicionamento, dimenses e outros

Captulo 2 Configurando as margens dos elementos

Ao executarmos esse cdigo, o resultado obtido o seguinte:

Posicionamento, dimenses e outros

Captulo 3 Posicionando os elementos

Quando trabalhamos com arquivos CSS, podemos posicionar elementos e

Captulo 3.1 Position

A propriedade position, conforme sugere seu prprio nome, permite

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

Posicionamento, dimenses e outros

Captulo 3.1 Position

Este tipo de posicionamento determina que o elemento seja posicionado de

Posicionamento, dimenses e outros

Captulo 3.1 Position

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

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

Posicionamento, dimenses e outros

Captulo 3.1 Position

Podemos observar ainda que a propriedade left determina o distanciamento da

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

Posicionamento, dimenses e outros

Captulo 3.1 Position

Captulo 3.2 Float

Posicionamento, dimenses e outros

Captulo 3.2 Float

Acompanhe o exemplo a seguir:

Posicionamento, dimenses e outros

Captulo 3.2 Float

Veja o resultado obtido:

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

Posicionamento, dimenses e outros

Captulo 4 Definindo as Camadas

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

Posicionamento, dimenses e outros

Captulo 4 Definindo as Camadas

Observe o exemplo a seguir:

Posicionamento, dimenses e outros

Captulo 4 Definindo as Camadas

Veja o resultado obtido:

Neste exemplo, temos o posicionamento de vrias camadas.

Posicionamento, dimenses e outros

Captulo 5 Definindo o modo de apresentao dos elementos