Entendendo
Style Sheets - Parte 1
Este tutorial introduz inovações
na maneira de programar páginas para a Internet. Como pré-requisito
é necessário saber programar na linguagem html. Consulte nosso
Manual
de HTML, se necessário.
OBS.: Para visualizar inovações
de layout programadas em Cascading Style Sheet - também conhecido
por CSS - é necessário um Internet Explorer versão
3.0 ou superior, ou Netscape Navigator a partir da versão 4.0.
Se você ainda não possui um browser 4.0, pode atualizá-lo
na nossa seção de download.
Se você já possui um navegador compatível, visite a Microsoft
CSS Gallery <http://www.microsoft.com/truetype/css/content.htm>
para ver alguns bons exemplos de Style Sheets.
Introdução
Se
você se interessa pela criação de home pages já
deve ter ouvido falar em Cascading Style Sheets, ou CSS apenas.
Trata-se de um padrão de formatação para páginas
web que vai além das limitações impostas pelo html. Proposto
pelo W3 Consortium <http://www.w3.org>
- uma espécie de comitê que define os padrões de programação
para a WWW - o CSS foi introduzido pela primeira vez pela Microsoft,
no lançamento do Internet Explorer 3.0.
O Cascading Style Sheet
permite uma versatilidade maior na programação do layout de
páginas web sem aumentar o seu tamanho em Kb, pois oferece várias
possibilidades que antes só eram conseguidas com a utilização
de gifs e jpgs. Basicamente, o CSS permite ao designer um controle
maior sobre os atributos tipográficos de uma home page, como tamanho
e cor das fontes, espaçamento entre linhas e caracteres, margem do
texto, entre outros. Introduziu também às páginas a utilização
de layers, permitindo a sobreposição de texto sobre texto
ou texto sobre figuras.
Para visualizar inovações
de layout programadas em Cascading Style Sheet é necessário
um Internet Explorer versão 3.0 ou superior. O Netscape incorporou
o CSS em seu código a partir da versão 4.0. Se você
ainda não possui um browser 4.0, pode atualizá-lo na nossa seção
de download.
O
que Style Sheets podem fazer
Utilizando uma boa combinação
de tags do código de programação html, como <B>,
<I>, <H1> e <FONT>, podemos criar páginas interessantes
sob o ponto de vista do design. Entretanto, as possibilidades que elas oferecem
são bastante limitadas se comparadas às oferecidas pelo CSS.
Comandos de Style Sheets
podem ser aplicados a toda e qualquer tag, modificando seus
atributos. Até mesmo a tag <P> possui um </P> opcional
e permite que você defina os atributos de tudo o que fiar compreendido
entre as duas.
Você pode, por exemplo,
trocar os atributos de uma tag <B>, que tradicionalmente adiciona
negrito a uma palavra:
Este e' o negrito
normal.
Agora vamos trocar os atributos
da tag para mostrar o negrito em uma cor diferente:
Este é o
resultado final em CSS. Não
esqueça de que você só vai visualizar este exemplo se
estiver utilizando um browser que suporte CSS.
O Style Sheets permite
a você, por exemplo, configurar todos os comandos <B> em uma página
ou em um site inteiro de uma só vez.
Adicionando
Estilo a Sua Página
Style Sheets
podem ser utilizados de três maneiras diferentes: local
(modificando uma tag específica de uma página), geral
(modificando determinados atributos para a toda a página) ou global
(quando criamos um modelo que será aplicado a várias páginas
simultaneamente).
•
Adicionando
estilo localmente:
Style Sheet
pode modificar os atributos de uma única tag específica,
em um determinado ponto de uma página.
Os comandos
em CSS aplicados localmente seguem a seguinte sintaxe:
<tag
STYLE="propriedade:valor; propriedade, valor;"...>
Pelo código
html normal, o tamanho máximo de uma fonte que podemos obter é
estipulado pela tag <FONT>. Utilizando o CSS podemos aumentar
o tamanho com que as letras seriam tradicionalmente mostradas.
<FONT FACE="Trebuchet
MS, Arial, Helvetica" SIZE="+7">PALAVRA</FONT> aparecerá assim:
PALAVRA
Introduzindo comandos de
CSS na tag podemos modificar seus atributos para mostrar a frase
com outra cor e em tamanho maior.
<FONT style="font-size:50pt;
color:pink; line-height:30pt; font-family:Trebuchet MS, Arial, Helvetica;">PALAVRA</FONT>,
aparecerá desta maneira:
PALAVRA
Com o CSS não
hálimites para o tamanho da fonte. Ele pode ser definido em pontos,
pixels e outras unidades. Veremos isso em detalhes mais adiante.
•
Adicionando
estilo geral:
Para criar um modelo padrão
de CSS que será aplicado a toda uma página, introduzimos
o comando STYLE no cabeçalho do documento, entre a tag HTML
e a tag BODY. Dessa forma, tudo o que vier no conteúdo da página
obedecerá aos comandos CSS estipulados uma única vez.
Veja a seguir:
<HTML>
<TITLE> Título da página</TITLE>
<HEAD>
<STYLE type="text/css">
<!--
h1 {font: 20pt "Trebuchet
MS, Arial, Helvetica"; color: red}
h2 {font: 15pt "Trebuchet MS, Arial, Helvetica"; color: blue}
p {font: 12pt "Corrier, Times"; color: black}
-- >
</STYLE>
</HEAD>
<BODY>
Conteúdo da página
</BODY>
</HTML>
Note que o que está dentro da tag STYLE aparece em comentário
<!-- -->. Isso serve para evitar problemas com browsers que não
suportam CSS. Estando entre comentários, os atributos funcionarão
normalmente em browsers com capacidade para CSS e serão desprezados
por browsers mais antigos.
Classes
Podemos também
aplicar classes nas especificações gerais de CSS para definir
diferentes atributos para uma mesma tag. Se por exemplo você quiser
um parágrafo em vermelho para grifar textos importantes, outro em cinza
para textos normais, deverá proceder desta maneira:
- Especificação
geral:
<!--
P.importante {font: 20pt "Trebuchet
MS, Arial, Helvetica"; color: red}
P.normal {font: 15pt "Trebuchet MS, Arial, Helvetica"; color: gray}
-- >
- No HTML os Códigos
parecerão assim:
<P
CLASS="importante"> Este texto será vermelho</P>
<P CLASS="normal">Este texto será cinza</P>
•
Adicionando
estilo global:
Podemos criar um único
modelo de Style Sheets para ser aplicado a múltiplas páginas.
Para tanto, devemos construir um modelo separado de Style Sheets e
salvá-lo em um arquivo de terminação .css
Esse modelo pode ser aplicado a qualquer página, apenas referindo-se
ao arquivo .css no seu cabeçalho.
A seguir um típico modelo global de CSS, definindo margens,
cores, fontes e outros atributos:
<HTML>
<style type="text/css">
<--
body {font: 10pt "Verdana, sans-serif"};
h2 {font: 50pt "Verdana, sans-serif"; font-weight: bold; color: #58F734}
h3 {font: 13pt/15pt "Verdana, sans-serif"; font-weight: bold; color: maroon;
margin-left: 0.5in; margin-top: -10px; line-height: 30px}
em {margin-top: -105px}
p {font: 10pt/12pt "Verdana, sans-serif"; color: black; margin-left: 0.5in;
margin-top: -10px; line-height: 20px}
-->
<BODY></BODY>
</HTML>
Para aplicar o modelo a uma
página html específica, basta chamar o arquivo .css no seu cabeçalho:
<HEAD>
< link rel=stylesheet href="exemplo.css" type="text/css">
</HEAD>
Outra maneira de aplicar
o modelo CSS é importá-lo. A diferença entre lincá-lo
a página como no exemplo acima e importá-lo é que a segunda
maneira permite acrescentar estilos na própria página que está
editando, sem precisar alterar o modelo global (o arquivo .css). Veja o exemplo
a seguir:
<HTML>
<STYLE TYPE="text/css">
<!--
@import url (exemplo.css);
B { color:red; font-size:16pt }
H1 { font-family: Arial, Helvetica }
</STYLE>
<HEAD>
<TITLE>Exemplo de Style Sheets</TITLE>
</HEAD>
<BODY>
<H1>Títulos em Arial</H1>
<P>
O texto segue o modelo exemplo.css, mas os <B>negritos serão
alterados</B>.
</P>
</BODY>
</HTML>
IMPORTANTE:
No caso de uma mesma página ter mais de um estilo aplicado, para saber
qual predominará deve-se pensar da seguinte forma: o estilo mais específico
prevalece.
No caso, se uma página
contém uma especificação de estilo geral ou global, você
pode acrescentar novos atributos locais diferentes. Dessa forma:
• Especificações
locais
prevalecem sobre
•
Especificações gerais
que prevalecem sobre
• Especificações
globais
que, por sua vez, prevalecem sobre
• Especificações
default dos comandos de html
