[Cascading Style Sheets]
[Página prévia] [Próxima página] [Seção página de conteúdo]
Exercícios de Style Sheet

O que se segue é um exercício simples que irá conduzi-lo através de experimentos básicos com style sheets. Para fazer este exercício você vai precisar de um arquivo teste de HTML e um arquivo de CSS. Para criá-los será necessário um editor de HTML como o HomeSite, ou então um editor de textos como o Notepad.

Fazendo o Arquivo HTML de Teste

Ao se trabalhar com style sheets, é útil ter à mão um arquivo de teste que demonstre os exemplos de todos os estilos que você estiver criando. O código abaixo proporciona um bom arquivo para começar com a coisa; você pode ir acrescentando outros elementos para as tags e classes na medida em que for criando novos estilos. Para fazer o arquivo, inicie o seu editor de HTML ou de texto e abra um arquivo novo, copie o código abaixo e cole-o no arquivo novo e vazio, e então salve o arquivo como css_test.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<html>
<head>
<title>Teste de CSS</title>
<!-- coloque o link do style sheet aqui;
se você quiser salvar amostras diferentes de style sheets
com nomes novos, mude o valor do href na tag de link
para refletir a nova style sheet -->
<link rel="stylesheet" type="text/css" href="amostra1.css">
</head>
<body bgcolor="White">
<!-- Abaixo se encontram os elementos necessários
para serem vistos na folha de estilos amostra1.css.
Na medida em que você for criando as suas próprias style sheets com
outras tags e classes, você vai poder ir acrescentando mais
elementos a esta página e ver as amostras dos seus estilos. -->
<h1>Este é um cabeçalho H1</h1>
<p class="first">
Esta é uma classe
de parágrafo "first"</p>
<h2>Este é um cabeçalho H2</h2>
<p>Este é um parágrafo normal com
texto em <b>negrito</b> e em
<i>itálico</i>.</p>
<h3>Este é um cabeçalho H3</h3>
<ul>
<li>Este é um item de lista com um
link <a href="css_test.html">vazio</a>.
</ul>
<pre>
Aqui vai algum
texto pré-formatado.
</pre>
<table>
<tr>
<th>Um cabeçalho de tabela</th>
</tr>
<tr>
<td>Uma célula de tabela</td>
</tr>
</table>
<p class="last">E aqui está uma
classe de parágrafo "last"</p>
</body> </html>

Criando uma Amostra de Folha de Estilo para juntar com a Página-Teste

Crie agora a style sheet. Abra uma nova página em branco no seu editor; copie e cole o código abaixo nela, e salve o arquivo como amostra1.css:

	H1 {
		font-family: Arial;
		font-size: xx-large;
		font-weight: bold;
		color: #800000;
		background: #FFFFCC;
		text-align: center;
		padding: 4pt;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	H2 {
		font-family: Arial;
		font-size: x-large;
		font-weight: bold;
		color: #FFFFCC;
		background: #800000;
		text-align: center;
		padding: 3pt;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	H3 {
		font-family: Arial;
		font-size: large;
		font-weight: bold;
		color: #800080;
		text-align: center;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	A {
		font-family: Arial;
		font-weight: bold;
		color: #0000FF;
		text-decoration: underline;
		position: relative;
	}
	
	A:LINK {
		font-family: Arial;
		font-weight: bold;
		color: #0000FF;
		text-decoration: underline;
		position: relative;
	}
	
	A:VISITED {
		font-family: Arial;
		font-weight: bold;
		color: #800080;
		text-decoration: underline;
		position: relative;
	}
	
	B {
		font-family: Arial;
		font-weight: bold;
		color: #800000;
		position: relative;
	}
	
	I {
		font-family: Arial;
		font-weight: bold;
		font-style: italic;
		position: relative;
	}
	
	LI  {
		font-family: Arial;
		font-size: medium;
		color: #000080;
		position: relative;
	}
	
	P {
		font-family: Arial;
		font-size: medium;
		color: #000080;
		position: relative;
	}
	
	TD {
		font-family: sans-serif;
		font-size: medium;
		background: #99CCCC;
	}
	
	TH {
		font-family: sans-serif;
		font-size: medium;
		font-weight: bold;
		color: #FF0000;
		background: #FFFF00;
		text-align: center;
		position: relative;
	}
	
	PRE {
		font-family: monospace;
		font-size: medium;
		background: #CCFFFF;
		position: relative;
		left: 1cm;
	}
	
	.first {
		border-top: ridge;
		border-left: ridge;
		position: relative;
	}
	
	.last {
		border-bottom: ridge;
		border-right: ridge;
	}
	
[Página prévia] [Próxima página] [Seção página de conteúdo]

Robert Crooks, English Department, Bentley College
[envelope] rcrooks@bentley.edu