-
Notifications
You must be signed in to change notification settings - Fork 0
/
unidades_de_medida.html
executable file
·230 lines (213 loc) · 12.1 KB
/
unidades_de_medida.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="keywords" content="HTML,CSS" />
<meta name="author" content="Alexandre Gomes de Lima" />
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="estilos/aulas.css" />
<title>IFRN/DIATINF/Design Web: Unidades de Medida</title>
</head>
<body>
<div id="tudo">
<header id="cabecalho">
<img src="imagens/logo_ifrn.png" alt="IFRN" id="logoifrn" />
<h1 class="cabecalho">
Diretoria Acadêmica de Gestão e Tecnologia da Informação
</h1>
<h2 class="cabecalho">
Disciplina de Design Web e Arquitetura da Informação
</h2>
</header>
<article id="conteudo">
<h1>Unidades de medida CSS</h1>
<section>
<p>
Diversas propriedades CSS, tais como <span class="html">border-width</span>,
<span class="html">width</span> e <span class="html">margin</span>,
dependem de uma medida de comprimento para
funcionar adequadamente. Em CSS, medidas de comprimento são expressas por
um número real seguido da abreviação da unidade de comprimento adotada
(e.g., 10px, 15cm).
As unidades de medida são classificadas como unidades de medida absolutas ou
unidades de medida relativas. Nesta aula, iremos conhecer melhor as unidades de
medida suportada pela CSS.
</p>
</section>
<section>
<h2>Unidades absolutas</h2>
<p>
Unidades absolutas expressam uma medida baseada em uma escala absoluta,
ou seja, com base em um padrão de referência fixo. Uma medida expressa em unidade
absoluta sempre deverá ser renderizada da mesma forma, independente da mídia de
apresentação ou dispositivo. Se um elemento de bloco é estilizado com uma largura
igual a 30cm, o elemento será renderizado com esta largura no navegador de
um computador ou no navegador de um smartphone. No geral, unidades absolutas devem
ser evitadas na estilização de documentos que devem ser renderizadas em um navegador web
pois o autor não tem como saber as configurações (resolução, tamanho, etc) do
dispositivo de visualização do usuário (a não ser através de recursos de programação
como JavaScript).
O uso de unidades absolutas é recomendado quando se conhece de antemão as características
da mídia de destino do documento como, por exemplo, uma versão da página para impressão
em papel.
</p>
<p>
As unidades de medida absolutas disponíves na CSS são <span class="html">in</span> (polegada),
<span class="html">cm</span> (centímetro), <span class="html">mm</span> (milímetro),
<span class="html">pt</span> (ponto, 1pt = 1/72in), <span class="html">pc</span> (pica, 1pc = 1/6in) e
<span class="html">px</span> (pixel, 1px = 1/96in). Destas,
as mais utilizadas são a unidade <span class="html">pt</span>, a qual tem origem na
tipografia, e a unidade <span class="html">px</span>.
</p>
</section>
<section>
<h2>Unidades relativas</h2>
<p>
Unidades relativas expressam uma medida com base em um valor de referência
previamente definido. Este valor de referência geralmente é dinâmico, podendo
ser alterado em determinadas situações dependendo do dispositivo ou mídia de
visualização. Tome como exemplo a largura de uma página web. Em um computador, esta
medida varia de acordo com as dimensões da janela do navegador bem como da
resolução do monitor de vídeo. As unidades relativas são apropriadas ao
desenvolvimento web por permitirem que os elementos HTML se ajustem de acordo
com as características da mídia de visualização em que o documento é renderizado.
Assim, na maior parte dos casos devemos utilizar unidades relativas ao invés de
unidades absolutas.
</p>
<p>
As unidades de medida relativas mais usadas na CSS são <span class="html">em</span>,
<span class="html">rem</span> e
<span class="html">%</span> (porcentagem).
</p>
<h3>em</h3>
<p>
A unidade de medida <span class="html">em</span> é calculada com base no
tamanho de fonte adotado para o elemento em questão. Sendo assim, o valor absoluto
de 1em varia de acordo com a propriedade <span class="html">font-size</span> do
elemento. No exemplo abaixo, é possível ver como a margem esquerda medindo 1em varia a
cada parágrafo.
</p>
<pre class="html">
p{
margin-left: 1<strong>em</strong>;
background-color: pink;
}
#p1{ font-size: 25px; }
#p2{ font-size: 35px; }
#p3{ font-size: 50px; }
<p id="p1">Parágrafo 1.</p>
<p id="p2">Parágrafo 2.</p>
<p id="p3">Parágrafo 3.</p>
</pre>
<img src="unidades_de_medida/exemplo1.png" alt="visualização do exemplo 1" />
<h3>rem</h3>
<p>
As medidas em <span class="html">rem</span> são calculadas com base no tamanho da fonte
do elemento raiz, ou seja, a tag <span class="html">html</span> (16px na maioria dos navegadores).
Devido a isso, os resultados de <span class="html">rem</span> são mais previsíveis do que
quando usamos <span class="html">em</span>. Assim, seu uso pode ser preferível em determinadas
situações.
</p>
<h3>porcentagem</h3>
<p>
As medidas em porcentagem são calculadas a partir de um valor padrão ou de um valor
herdado. O valor a ser utilizado como referência depende da propriedade CSS. No geral,
este valor é determinado por alguma propriedade CSS do elemento ou pelo contexto geral
de formatação. As medidas em procentagem são muito utilizadas para criação de páginas
flexíveis, ou seja, páginas capazes de se adequar a diversas mídias de apresentação.
</p>
<p>
O exemplo a seguir ilustra o uso da unidade porcentagem em duas situações: no tamanho de fonte
e na largura do parágrafo. No caso da largura do parágrafo, o valor é calculado a partir
da largura total da janela da página. Já o tamanho de fonte é determinado a partir
do valor 50px, isto é, do tamanho de fonte herdado pelo elemento <span class="html">span</span>.
</p>
<pre class="html">
p{
<strong>width: 50%;</strong>
font-size: 50px;
}
span{
<strong>font-size: 50%;</strong>
}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, <span>sed do eiusmod </span> tempor incididunt
ut labore et dolore magna aliqua.
</p>
</pre>
<img src="unidades_de_medida/exemplo2.png" alt="visualização do exemplo 2">
</section>
<section class="exercicios">
<h2>Exercícios</h2>
<p>
1) Crie uma página contendo dois elementos <span class="html">div</span>. Usando estilos, formate uma
<span class="html">div</span> com uma largura (propriedade <span class="html">width</span>) de
100% e a outra <span class="html">div</span> com uma largura de 300px. Durante a visualização
da página, redimensione a janela do navegador e observe o comportamento de cada
<span class="html">div</span>. Será necessário definir bordas ou cores de background para
que os limites dos elementos <span class="html">div</span> sejam visualizados. Também será necessário
que os elementos <span class="html">div</span> possuam conteúdo.
</p>
<p>
2) Use elementos <span class="html">div</span> e medidas em porcentagem para criar uma
página como a que é apresentada nas figuras abaixo. Note que o alinhamento entre as áreas deve ser
mantido mesmo ao redimensionar a janela do navegador.
</p>
<figure>
<img src="unidades_de_medida/exercicio2-1.png"
alt="visualização do resultado" />
<img src="unidades_de_medida/exercicio2-2.png"
alt="visualização do resultado" />
</figure>
<p>
3) Por padrão, navegadores web renderizam imagens com as suas dimensões reais em pixels.
No entanto, podemos utilizar as propriedades <span class="html">width</span> e
<span class="html">height</span> para alterar o tamanho em que uma imagem é renderizada.
Caso seja utilizada apenas uma destas duas propriedades, a outra dimensão será ajustada
automaticamente de forma a preservar as proporções da imagem. Ao utilizar medidas em
porcentagem, as dimensões da imagem serão determinadas a partir do elemento de bloco que
contém a imagem. Experimente este resultado na prática criando uma página com três elementos
<span class="html">div</span> e inserindo a mesma imagem em cada <span class="html">div</span>.
Utilize estilos para definir larguras diferentes para cada <span class="html">div</span>
e 100% de largura para o elemento <span class="html">img</span>.
</p>
<p>
4) Efeito de lupa: crie uma página cotendo quatro imagens e estilos para aumentar o
tamanho da imagem apontada pelo ponteiro do mouse.
</p>
</section>
<section>
<h2 class="referencias">Referências</h2>
<ul>
<li class="referencia">
EIS, Diogo. <em class="referencia">Qual unidade utilizar – Pixel, EM ou REM</em>. Tableless, 2012.
Disponível em <<a href="https://tableless.com.br/unidade-pixels-em-rem/">https://tableless.com.br/unidade-pixels-em-rem/</a>>.
</li>
<li class="referencia">
MACEDO, Marcelo da Silva. <em class="referencia">Contruindo sites adotando padrões web</em>.
Rio de Janeiro: Ciência Moderna, 2008.
</li>
<li class="referencia">
SANDU, Adrian. <em class="referencia">Understanding and Using rem Units in CSS</em>. Sitepoint, 2015.
Disponível em <<a href="https://www.sitepoint.com/understanding-and-using-rem-units-in-css/">https://www.sitepoint.com/understanding-and-using-rem-units-in-css/</a>>.
</li>
<li class="referencia">
SILVA, Maurício Samy. <em class="referencia">Construindo sites com CSS e (X)HTML: sites controlados
por folhas de estilo em cascata</em>. São Paulo: Novatec, 2008.
</li>
<li class="referencia">
W3C. <em class="referencia">CSS Values and Units Module Level 3</em>. Disponível em
<<a href="https://www.w3.org/TR/css3-values/#absolute-lengths">https://www.w3.org/TR/css3-values/#absolute-lengths</a>>.
</li>
<li class="referencia">
ZEMEL, Tárcio. <em class="referencia">Unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch</em>.
Desenvolvimento para web, 2014. Disponível em
<<a href="http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/">http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/</a>>.
</li>
</ul>
</section>
</article>
</div>
</body>
</html>