-
Notifications
You must be signed in to change notification settings - Fork 0
/
css-parte_3.html
executable file
·386 lines (357 loc) · 16.1 KB
/
css-parte_3.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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<!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: CSS parte 3</title>
</head>
<body>
<div id="tudo">
<header id="cabecalho">
<img src="imagens/logo_ifrn.png" alt="Logotipo do 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>Introdução a CSS - parte 3</h1>
<p>
Nesta aula serão apresentados o seletor descendente, o seletor filho, o seletor atributo,
os pseudo-seletores e as pseudoclasses. Também será reforçado o conceito de árvore de elementos,
o qual é necessário para que determinados seletores sejam utilizados de forma adequada.
O conhecimento destes seletores nos permitirá a criação de folhas de estilos mais ricas
e flexíveis.
</p>
<h2>Árvore do documento</h2>
<p>
Antes de apresentarmos o seletor descendente e o seletor filho, vamos rever o conceito
de árvore de documento para uma melhor compreensão destes seletores. A <em>árvore de
documento</em> é uma estrutura hierárquica composta pelos elementos HTML presentes no
documento. A hierarquia vem dos relacionamentos do tipo pai e filho que se formam entre
os elementos da árvore.
Tome como exemplo o trecho HTML abaixo seguido da sua árvore de documento:
</p>
<pre class="html">
...
<body>
<div id="topo">
<h1>Empresa</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div id="principal">
<h2>Título</h2>
<p>Lorem <em>ipsum</em>...</p>
<h2>Título</h2>
<blockquote><p>...consectetur adipisicing...</p></blockquote>
</div>
</body>
</pre>
<img style="width: 60%"
src="css-parte_3/arvore.png"
alt="Árvore do documento" />
<p>Seguem alguns relacionamentos determinados pela árvore de exemplo:</p>
<ul>
<li>
Elemento <span class="html">body</span>: é pai dos dois elementos <span class="html">div</span> e
ancestral de todos os elementos mostrados na árvore.
</li>
<li>
Elemento <span class="html">div</span> (topo): é filho e descendente do elemento <span class="html">body</span>.
É pai dos elementos <span class="html">h1</span> e <span class="html">ul</span>. É ancestral dos três
elementos <span class="html">li</span> e dos três elementos <span class="html">a</span>.
</li>
<li>
Elemento <span class="html">ul</span>: é pai dos três elementos <span class="html">li</span> e
ancestral dos três elementos <span class="html">a</span>. É filho de <span class="html">div</span>
(topo) e descendente de <span class="html">body</span>.
</li>
</ul>
<h2>Seletor descendente e seletor filho</h2>
<p>
O seletor descendente seleciona um conjunto de elementos que se enquadram em determinada
hierarquia de descendência. Caracteres de espaço em branco são utilizados para
indicar a hierarquia da descendência. Por exemplo, a regra CSS
a seguir formata a cor do texto de todos os elementos <span class="html">p</span> descendentes de
algum elemento <span class="html">div</span>.
</p>
<pre class="html">
<strong>div p</strong> { color: red }
</pre>
<p>
Quando aplicada ao documento anterior, a regra CSS do útimo exemplo formata os
dois elementos <span class="html">p</span> presentes no documento já que ambos são
descendentes de algum elemento <span class="html">div</span>:
</p>
<img src="css-parte_3/exemplo1.png"
alt="Visualização da regra CSS aplicada ao documento" />
<p>
Já no próximo exemplo, a regra CSS aplica formatação aos elementos
<span class="html">p</span> descendentes de <span class="html">blockquote</span> e que por
sua vez devem ser descendentes de algum <span class="html">div</span>. Repare que, neste caso, apenas
o segundo parágrafo foi formatado com base na regra CSS.
</p>
<pre class="html">
<strong>div blockquote p</strong> { color: red }
</pre>
<img src="css-parte_3/exemplo2.png"
alt="Visualização da regra CSS aplicada ao documento" />
<p>
O seletor filho é semelhante ao seletor descedente, mas tem efeito apenas sobre elementos filhos.
O símbolo <span class="html">></span> (maior que) é utilizado para indicar a relação pai-e-filho. O seguinte exemplo
aplica formatação aos elementos <span class="html">p</span> filhos de algum elemento
<span class="html">div</span>. Repare que, para o documento anterior, apenas um
dos elementos <span class="html">p</span> recebe a formatação (o elemento <span class="html">
p</span> filho de <span class="html">blockquote</span> não se enquadra no seletor e portanto
não é formatado).
</p>
<pre class="html">
div <strong>></strong> p { color: red }
</pre>
<img src="css-parte_3/exemplo3.png"
alt="Visualização da regra CSS aplicada ao documento" />
<h2>Pseudoclasses</h2>
<p>
As pseudoclasses permitem a criação de seletores que fogem da hierarquia determinada pela árvore
de elementos, proporcionando a definição de regras CSS mais ricas.
Podem ocupar qualquer posição no seletor.
</p>
<h3>:first-child</h3>
<p>
Refere-se ao elemento que é o primeiro filho de determinado elemento. Por exemplo, a regra
a seguir aplica o estilo aos parágrafos descendentes do elemento com id idual a <em>x</em> e que também sejam
primeiro-filho de algum elemento.
</p>
<pre class="html">
#x p<strong>:first-child</strong> { color: red }
</pre>
<p>
Quando aplicada ao HTML a seguir, são formatados apenas os parágrafos com o
texto <em>Um</em> e <em>A</em>.
</p>
<pre class="html">
<div id="x">
<p>Um</p>
<p>Dois</p>
<div>
<p>A</p>
<p>B</p>
</div>
</div>
</pre>
<p>
Caso esta mesma regra fosse aplicada ao próximo código HTML, nenhum elemento receberia a
formatação do estilo pois o primeiro filho da <span class="html">div</span> não
é um parágrafo.
</p>
<pre class="html">
<div id="x">
<h1>Um</h1>
<p>Dois</p>
</div>
</pre>
<h3>:link e :visited</h3>
<p>
Estas pseudoclasses são utilizadas para estilização de links não-visitados
(<span class="html">:link</span>) e links visitados (<span class="html">:visited</span>).
</p>
<p>
São pseudoclasses aplicáveis apenas ao elemento <span class="html">a</span> e que
contenham o atributo <span class="html">href</span>.
Desta forma, o elemento <span class="html">a</span> pode ser omitido ao utilizar
uma destas pseudoclasses. As duas regras CSS a seguir são equivalentes e produzem
o mesmo efeito:
</p>
<pre class="html">
a<strong>:link</strong> { color: red }
<strong>:link</strong> { color: red }
</pre>
<p>Como as pseudoclasses podem ocupar qualquer posição de um seletor, as regras
a seguir são válidas e equivalentes:
</p>
<pre class="html">
a.externo:link { color: red }
.externo:link { color: red }
a:link.externo { color: red }
:link.externo { color: red }
</pre>
<h3>:hover, :active e :focus</h3>
<p>
São pseudoclasses dinâmicas baseadas na interação do usuário com o elemento.
</p>
<ul>
<li>
<span class="html">:hover</span> refere-se ao momento em que o ponteiro do mouse aponta
para o elemento.
</li>
<li>
<span class="html">:active</span> refere-se ao momento em que o ponteiro do mouse
ativa (clica) o elemento.
</li>
<li>
<span class="html">:focus</span> refere-se ao momento em que o elemento recebe o foco.
Note que nem todos os elemento em uma página HTML são capazes de receber foco.
</li>
</ul>
<p>
O código a seguir ilustra o uso destas três pseudoclasses. Utilize-o para criar uma página
web e observe os resultados. Utilize a tecla TAB para mudar o foco dos elementos.
</p>
<pre class="html">
<html>
<head>
<style type="text/css">
#t1<strong>:hover</strong> { background-color: pink }
#t2<strong>:active</strong> { font-style: italic }
#l1<strong>:focus</strong> { border: solid red 5px }
</style>
</head>
<body>
<h1 id="t1">Título 1</h1>
<h1 id="t2">Título 2</h1>
<p><a id="l1" href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
</body>
</html>
</pre>
<h2>Pseudo-elementos</h2>
<p>
Assim como as pseudoclasses, os pseudo-elementos possibilitam a definição de
seletores com elementos que não estão presentes na árvore de elementos,
enriquecendo as regras CSS. Diferentemente das pseudoclasses, os pseudo-elementos
devem ser declarados no final do seletor.
</p>
<ul>
<li>
<span class="html">:first-line</span> -
permite a estilização da primeira linha do texto contido em elementos em nível
de bloco, elementos inline, rótulos de tabela e células de tabela.
</li>
<li>
<span class="html">:first-letter</span> -
permite a estilização da primeira letra do texto contido em um elemento em
nível de bloco. Para que seja aplicado, não poderá haver conteúdo antes do
início do texto. Este é um efeito tipográfico conhecido como capitalização
inicial.
</li>
<li><span class="html">:before</span> e <span class="html">:after</span> -
permitem, junto com a propriedade <span class="html">content</span>, a inserção
de conteúdo antes (before) ou após (after) o elemento alvo do seletor.
</li>
</ul>
<p>O exemplo a seguir ilustra o uso destes pseudo-elementos</p>
<pre class="html">
<html>
<head>
<style type="text/css">
body<strong>:before</strong> { content: "INÍCIO" }
body<strong>:after</strong> { content: "FIM" }
p { width: 300px }
#p1<strong>:first-line</strong>{
font-style: italic;
font-size: 200%;
}
#p2<strong>:first-letter</strong>{
font-size: 200%;
background-color: pink;
}
</style>
</head>
<body>
<p id="p1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p id="p2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</body>
</html>
</pre>
<img src="css-parte_3/exemplo4.png"
alt="Visualização da regra CSS aplicada ao documento" />
<h2>Seletor atributo</h2>
<p>
Faz com que a seleção de elementos seja restrita pela presença de um atributo.
Colchetes são utilizados para definir o atributo que deve estar presente. A
regra CSS no próximo exemplo aplica o estilo a todos os elementos <span class="html">p
</span> que contenham o atributo <span class="html">lang</span>.
</p>
<pre class="html">
p<strong>[lang]</strong> { color: red }
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p lang="eng">The quick brown fox jumps over the lazy dog.</p>
</pre>
<img src="css-parte_3/exemplo5.png"
alt="Visualização da regra CSS aplicada ao documento" />
<p>
Também é possível limitar a seleção com base no valor do atributo. O próximo
exemplo aplica o estilo apenas aos elementos <span class="html">p</span> cujo
valor do atributo <span class="html">lang</span> seja igual a <em>en</em>.
</p>
<pre class="html">
p<strong>[lang=en]</strong> { color: red }
<p lang="la">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p lang="en">The quick brown fox jumps over the lazy dog.</p>
</pre>
<img src="css-parte_3/exemplo5.png"
alt="Visualização da regra CSS aplicada ao documento" />
<h2>Exercícios</h2>
<div class="exercicios">
<p>1) Desenhe a árvore de elementos para o seguinte código HTML:</p>
<pre class="html">
<body>
<div id="principal">
<h1>DIATINF</h1>
<h2>Cursos Técnicos</h2>
<ul>
<li><a href="ti.html">Informática</a></li>
<li>Informática para Internet</li>
<li>Manutenção e Suporte em Informática</li>
<li>Administração</li>
</ul>
</div>
<div id="contato">
<p>E-mail: diatinf@ifrn.edu.br</p>
<p>Fone: 4005-2637</p>
</div>
</body>
</pre>
<p>2) Descreva o conjunto de elementos selecionados por cada um dos seletores a seguir:</p>
<ol style="list-style-type: lower-alpha">
<li><span class="html">.noticia p</span></li>
<li><span class="html">#menu > ul</span></li>
<li><span class="html">div.corpo a</span></li>
<li><span class="html">img.mapa:hover</span></li>
</ol>
<p>
3) Aplique estilos para deixar o arquivo
<a href="css-parte_3/exercicio3.html">exercicio3.html</a> semelhante
à figura abaixo. ATENÇÃO: não modifique as tags HTML. Apenas crescente
regras CSS à folha de estilo incorporada já presente no documento.
</p>
<img src="css-parte_3/exercicio3.png" />
</div>
<h2 class="referencias">Referências</h2>
<ul>
<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>
</ul>
</article>
</div>
</body>
</html>