Exercícios

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