-
Notifications
You must be signed in to change notification settings - Fork 0
/
css-parte_1.html
executable file
·252 lines (237 loc) · 11.6 KB
/
css-parte_1.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
<!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: Introdução a CSS</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 1</h1>
<p>
Até agora vimos como inserir diversos elementos (parágrafos, figuras, links,
tabelas, etc) em uma página HTML sem indicar qualquer formatação. No entanto,
ao abrir o arquivo <a href="css-parte_1/css01.html">css01.html</a>, é fácil perceber
que o navegador aplica uma formatação padrão aos elementos:
</p>
<img src="css-parte_1/exemplo01.png" alt="Visualização do exemplo 1" />
<p>
Nesta aula iremos iniciar o uso da <strong>CSS</strong> (<em>Cascading Style Sheets</em>
– Folhas de Estilo em Cascata) para aplicar estilo (formatação) aos elementos presentes
em uma página HTML. Com CSS é possível aplicar diversas formatações tais
como cor de fundo, tamanho de fontes e posicionamento.
</p>
<h2>Estilos inline</h2>
<p>
Vamos começar com os estilos inline, ou seja, estilos definidos nas próprias
tags através do atributo <span class="html">style</span>
(arquivo <a href="css-parte_1/css02.html">css02.html</a>):
</p>
<pre class="html">
<body <b>style="background-color: green"</b>>
<h1 <b>style="font-size: 32pt"</b>>DIATINF</h1>
<h2 <b>style="color: #FF0000; font-family: cursive"</b>>
Cursos técnicos
</h2>
<ul <b>style="list-style-type: square"</b>>
<li>Informática para Internet</li>
<li>Manutenção e Suporte em Informática</li>
<li>Administração</li>
</ul>
</body>
</pre>
<img src="css-parte_1/exemplo02.png" alt="Visualização do exemplo 2" />
<p>
O atributo <span class="html">style</span> especifica o estilo de um elemento.
Cada <strong>propriedade</strong> CSS (<span class="html">font-size</span>,
<span class="html">color</span>, etc) é seguida por um sinal de dois-pontos e
um valor. É possível especificar mais de uma propriedade separando-as
com o sinal de ponto-e-vírgula, assim como foi feito na tag
<span class="html">h2</span>.
Seguem as descrições das propriedades utilizadas:
</p>
<table>
<tr>
<th>Propriedade</th>
<th>Descrição</th>
</tr>
<tr>
<td><span class="html">background-color</span></td>
<td>Cor de fundo do elemento.</td>
</tr>
<tr>
<td><span class="html">font-size</span></td>
<td>Tamanho da fonte utilizada no elemento.</td>
</tr>
<tr>
<td><span class="html">color</span></td>
<td>Cor do texto presente no elemento.</td>
</tr>
<tr>
<td><span class="html">font-family</span></td>
<td>Fonte, ou família de fontes, do texto presente no elemento.</td>
</tr>
<tr>
<td><span class="html">list-style-type</span></td>
<td>Tipo de marcador ou numeração dos itens em uma lista.</td>
</tr>
</table>
<h2>Folhas de estilo internas</h2>
<p>
Estilos inline são úteis para aplicar formatação individual, mas não
são adequados para definir estilos que devem ser aplicados em todo o
documento HTML. Para isso, podemos utilizar as <strong>folhas de estilos internas</strong>,
que também chamadas de folhas de estilo incorporadas.
O arquivo <a href="css-parte_1/css03.html">css03.html</a> utiliza esta segunda
forma de estilo para aplicar a mesma formatação do exemplo anterior:
</p>
<pre class="html">
<html>
<head>
<title>CSS</title>
<b><style type="text/css">
body{ background-color: green }
h1{ font-size: 32pt }
h2{
color: #FF0000;
font-family: cursive
}
ul{ list-style-type: square }
</style></b>
</head>
<body>
<h1>DIATINF</h1>
<h2>Cursos técnicos</h2>
<ul>
<li>Informática para Internet</li>
<li>Manutenção e Suporte em Informática</li>
<li>Administração</li>
</ul>
</body>
</html>
</pre>
<p>
A tag <span class="html">style</span>, que deve vir acompanhada do atributo
<span class="html">type="text/css"</span>, é utilizada para definir folhas
de estilos internas e deve ser
declarada como conteúdo de <span class="html">head</span>. O conteúdo de
<span class="html">style</span> define as regras de formatação a serem
aplicadas ao documento HTML. Cada regra de formatação é composta por um
seletor e uma ou mais propriedades CSS. O seletor determina quais elementos
serão estilizados de acordo com a respectiva regra. Por exemplo, a regra
CSS abaixo determina um tamanho de fonte com 32pt para o texto de todos
os elementos <span class="html">h1</span> presentes no documento:
</p>
<pre class="html">
h1{ font-size: 32pt; }
</pre>
<p>
Percebe-se então que folhas de estilo internas são mais indicadas
quando precisamos definir regras de formatação generalizadas. Por exemplo,
vamos definir que os itens de lista presentes na página devam utilizar texto
formatado em itálico. Adicione, então, o seguinte código ao arquivo
<a href="css-parte_1/css03.html">css03.html</a> e observe o resultado:
</p>
<pre class="html">
li{ font-style: italic; }
</pre>
<p>
Caso utilizássemos o estilo inline, teríamos que repetir a declaração do estilo
para cada ocorrência de <span class="html">li</span> presente no documento, o que
seria uma tarefa pouco agradável se a lista possuísse muitos itens.
</p>
<h2>Folhas de estilo externas</h2>
<p>
Até aqui vimos que estilos inline são apropriados para aplicação de formatação
individual e que folhas de estilos internas são mais adequadas para formatação
generalizada na mesma página. No entanto, é comum que queiramos aplicar os mesmos
estilos de formatação às diversas páginas que constituem um site. Neste caso, devemos
utilizar as <strong>folhas de estilo externas</strong>, que nada mais são do que
arquivos que contém apenas código CSS. Assim como nas folhas de estilo internas,
uma folha de estilo externa contém regras de formatação
compostas por seletores e propriedades CSS. O arquivo <a href="css-parte_1/estilo.css">estilo.css</a>
contém as mesmas regras de formatação presentes na folha de estilo incorporada
da página <a href="css-parte_1/css03.html">css03.html</a>.
</p>
<p>
A tag <span class="html">link</span> é utilizada para relacionar uma página HTML
com arquivos de folhas de estilo externas e deve ser acompanhada dos atributos
<span class="html">rel="stylesheet"</span> e <span class="html">type="text/css"</span>.
O atributo <span class="html">href</span> também deve estar presente e seu valor deve ser
o nome, ou caminho relativo, do arquivo de folha de estilo externa. A página
<a href="css-parte_1/css04.html">css04.html</a> utiliza a tag <span class="html">link</span>
para referenciar uma folha de estilo externa:
</p>
<pre class="html">
<html>
<head>
<title>CSS</title>
<b><link rel="stylesheet" type="text/css" href="estilo.css" /></b>
</head>
<body>
<h1>DIATINF</h1>
<h2>Cursos técnicos</h2>
<ul>
<li>Informática para Internet</li>
<li>Manutenção e Suporte em Informática</li>
<li>Administração</li>
</ul>
</body>
</html>
</pre>
<p>
Ao centralizar as regras de formatação em arquivos separados, folhas de
estilo externas proporcionam facilidade de manutenção do site. Caso algum
estilo precise de modificações, basta alterar a folha de estilo externa, não
sendo necessárias alterações nas páginas HTML. Folhas de estilo externas também
evitam a repetição de código CSS nas diversas páginas HTML.
</p>
<h2>Exercícios</h2>
<p>
1) Aplique a seguinte formatação ao arquivo <a href="css-parte_1/exercicio01.html">exercicio01.html</a>:
</p>
<ol class="opcoes_exercicio">
<li>Fonte Arial para o elemento <span class="html">body</span>.</li>
<li>Estilo de fonte itálico para os elementos <span class="html">h2</span>.</li>
<li>Cor de fundo <strong>#d2b48c</strong> para os elementos <span class="html">h1</span>.</li>
</ol>
<p>
2) Aplique estilos na página <a href="css-parte_1/exercicio02.html">exercicio02.html</a> para
deixá-la semelhante à figura abaixo. Faça uma pesquisa sobre as propriedades
<span class="html">margin-right</span>, <span class="html">margin-left</span> e
<span class="html">padding</span>. Utilize a ferramenta disponível em
<a href="https://www.w3schools.com/colors/colors_picker.asp">https://www.w3schools.com/colors/colors_picker.asp</a> para descobrir
os códigos de cores.
</p>
<img src="css-parte_1/exercicio02.png" alt="Visualização do exemplo 2" />
<p>
3) Explore a documentação disponível no endereço
<a href="https://www.w3schools.com/cssref/default.asp">https://www.w3schools.com/cssref/default.asp</a> para conhecer as propriedades
CSS e use sua criatividade para formatar uma cópia do arquivo
<a href="css-parte_1/exercicio01.html">exercicio01.html</a>.
</p>
<h2 class="referencias">Referências</h2>
<ul>
<li class="referencia">
Deitel, P. J. e Deitel, H. M. <em class="referencia">Ajax, Rich Internet
Applications e desenvolvimento Web para programadores.</em>
São Paulo: Pearson Prentice Hall, 2008.
</li>
</ul>
</article>
</div>
</body>
</html>