Digite os termos da sua pesquisa
	Web www.bufaloinfo.com.br Enviar formulário de pesquisa

No artigo da semana passada (Usando CSS - 1ª Parte), falei sobre a importância e funcionalidade das páginas padronizadas com o uso das folhas de estilo.

Conhecedores da importância da CSS, hoje veremos as novidades implementadas pela CSS, Cascading Style Sheets, nível 2.

Para inicio de conversa, não podemos encarar a mudança da CSS para CSS2, como um processo radical de ruptura do antigo para o novo. Ambas convivem harmônicamente, sem nenhum tipo de contratempo.

Não houve tampouco nenhuma R(evolução), o que aconteceu na verdade foi a inclusão de novos estilos e sua posterior incorporação por parte dos navegadores.

Tanto que se circularmos pela internet vamos nos deparar com estilos oriundos da CSS2, utilizados como sua versão anterior.

As Folhas de Estilo em Cascata, nível 2, surgem como uma recomendação do W3C (World Wide Web Consortium), disponivel no endereço http://www.w3.org/TR/1998/REC-CSS2-19980512. Que através desse documento cria uma normatização sobre o uso da mesma.

Mas, afinal, o que mudou?

Mudança mesmo, nenhuma. O que aconteceu foi a inclusão de novas opções de estilos, como já foi dito anteriormente.

Dentre os navegadores, o IE6 foi o primeiro a incorporar as novas diretrizes da CSS2, seguidos pelo Netscape 6 e o Mozzila 5 (porém, algumas dessas novidades, não são possíveis de serem visualizadas por esses navegadores), versões anteriores do IE também aceitam bem essas novidades.

Cursores:

Dentre as novidades da CSS2 temos a possibilidade de mudarmos o cursor do mouse ou em toda a página ou somente em alguns trechos determinados.
Por exemplo:

B{cursor:hand}

(passando com o mouse sobre o exemplo acima veremos o cursor no formato de uma mão.
Mas para que esse exemplo funcionasse corretamente assim disponibilizamos o código:

<span style="cursor: hand"> B{cursor:hand}</span>

Passe com o mouse na tabela abaixo para para saber o formato de alguns tipos de cursores existentes:

Fontes:

Outra novidade é a possibilidade de, utilizando a CSS2, disponibilizar para o usuário a mesma fonte utilizada na criação de nossa página, mesmo que essa fonte seja rara.

Anteriormente, se queríamos utilizar uma fonte diferente em nosso texto, deveríamos digitar o texto em um editor de imagem e transformá-lo em uma figura.

Além de trabalhoso, esse metódo limitava o resultado final de nossa página.

Mas, nem tudo são flores, usar estilos para "carregar" uma determinada fonte, nem sempre funciona a contento, pois exige-se que a fonte em questão seja de preferência(.eot) - Embedded OpenType. E para transformar uma fonte ttf (truetype) em uma eot, seria necessário um programinha freeware.

De preferência porquê, além de fontes (.eot), aceita-se também fontes no formato Truedoc (.pfr), comuns a partir do Windows 98.

Para definirmos a família da fonte que utilizamos em nossa página, acrescentemos o seguinte código:

@font-face
{
font-family: Lucida;
src: (fonte/Lucida sans.pfr)
}

H3 {font-family: tahoma, arial}

Aonde indicamos em SRC: o endereço e o nome da fonte e damos a opção em H3, de caso o navegador não visualizar a fonte indicada, trocar por uma outra padrão, no caso tahoma ou arial.

Estilos para Mídias:

Talvez a maior de todas as novidades das Folhas de Estilos, nível 2, é a possibilidade de criar um estilo para cada tipo de mídia, separando assim, vídeo de impressora e/ou áudio.

Para isso se utiliza a regra @media e o tipo de midia desejado:

Print - para impressoras
Screem - para vídeos
Handheld - para aparelhos como Palm.
Projection - para projetores e para imprssoras de transparências.
TV - para televisão.
tty - para teletipos e terminais que usam regras de caracteres de dimensões fixas.
Aural - para sintetizadores de voz.
Braille - para aparelhos que traduzem para braille.
Embossed - para impressoras em braille.
All - para todas as midias.

O ideal nesse caso da mídias é a criação de uma folha de estilo em separado da página do site e depois "linka-lá" ao mesmo.

Ex:

<link rel="stylesheet" type="text/css" media="print" href="imprimir.css">

Nesse exemplo estaríamos vinculando a página que estamos construindo ao arquivo imprimir.css.

O segundo passo agora seria construir nossa folha de estilos.

<style type="text/css">
body{
font-size:12pt;
background:#FFFFFF;
font-family:arial
}
</style>

Nesse exemplo definimos que ao ser impressa o documento terá como fundo (background) a cor branca - independente da cor do fundo visualizada no site - a fonte terá tamanho 12 e será do tipo Arial (tamanho e tipo padrões para documentos impressos).

Os links costumam ser impressos muito claros, por isso na folha que estamos criando devemos especificar também a cor que o link deverá ficar na impressão.

Então acrescentaríamos ao exemplo acima, mais essas linhas de código:

A:link, a:visited{
Color:"990000";
Font:weight:bold;
Text-decoration:underline
}

Aqui foi especificado que os links terão a cor vinho, estilo negrito e sublinhado.

Usando mídias diferentes a impressão fica mais clara e rápida para o usuário. O ideal é criar páginas de estilo distintas para cada tipo de mídia e na página do site vinculá-las uma a uma
conforme exemplo:

<link rel="stylesheet" type="text/css" media="print" href="imprimir.css">
<link rel="stylesheet" type="text/css" media="screen" href="monitor.css">

Um estilo interessante também, servindo para dar destaque a um determinado trecho do texto em nossa página é o de colocar uma cor de background em um parágrafo.

Ex:
<style type="text/css">
<!--
.FUNDO { background-color: #FFCCCC; width: 100%}
-->
</style>

e no parágrafo aonde será colocado o estilo:
<SPAN class="FUNDO">TEXTO </SPAN>
o resultado final seria:

Cor no Fundo de um conjunto de frases

Com isso encerramos esse artigo, esperando que tenha sido útil para todos os que o leram, lembrando sempre que para aqueles que buscam o mercado de WebDesign é preciso estar sempre atento as novidades e tendências da internet.

Patricia Daltro