Avançados truques com CSS

Veremos uma série de técnicas com folhas de estilo, imprescindíveis para utilizar esta tecnologia com toda a sua potência.

As folhas de estilos são um assunto muito longo o qual já foram escritos livros inteiros. Nós nos centramos nos temas mais práticos e por isso vamos já iremos acabar com este capítulo com alguns pontos.

Definir estilos utilizando classes

As classes nos servem para criar definições de estilos que podem ser utilizadas repetidas vezes.

Uma classe pode ser definida entre as etiquetas <STYLE> (no cabeçalho do documento), ou em um arquivo externo à página. Para definí-las utilizamos a seguinte sintaxe, um ponto seguido do nome da classe e entre chaves os atributos de estilos desejados. Desta maneira:

.nomedaclasse {atributo: valor;atributo2:valor2; ...}

Uma vez tendo uma classe, podemos utilizá-la em qualquer etiqueta HTML. Para isso utilizaremos o atributo class, colocando como valor o nome da classe, desta forma:

<ETIQUETA class="nomedaclasse">

Exemplo da utilização de classes

<html>
<head>
<title>Exemplo da utilização de classes</title>
<STYLE type="text/css">
.fundonegroletrasbrancas {background-color:black;color:white;font-size:12;font-family:arial}
.letrasverdes {color:#009900}
</STYLE>
</head>

<body>
<h1 class=letrasverdes>Título 1</h1>
<h1 class=fundonegroletrasbrancas>Título 2</h1>

<p class=letrasverdes>
Isto é um parágrafo com estilo de letras verdes</p>
<p class=fundonegroletrasbrancas>
Isto é um parágrafo com estilo de fundo negro e as letras brancas. É tudo!</p>
</body>
</html>

Ver o exemplo anterior

Estilo nos links

Uma técnica muito habitual, que se pode realizar utilizando as folhas de estilo em cascada e não se podia em HTML, é a definição de estilos nos links, tirando os sublinhados ou fazer links na mesma página com distintas cores.

Para aplicar estilo aos links devemos definí-los para os distintos tipos de links que existem (visitados, ativos...). Utilizaremos a seguinte sintaxe, na declaração de estilos global da página (<STYLE>) ou do site (Definição em arquivo externo):

Links normais
A:link {atributos}

Links visitados
A:visited {atributos}

Links ativos (Os links estão ativos no preciso momento em que se clica sobre eles)
A:active {atributos}

Links hover (Quando o mouse está em cima deles, funciona somente em explorer)
A:hover {atributos}

O atributo para definir links sem sublinhado étext-decoration:none, e para dar cor é color:sua cor.

Também podemos definir o estilo de cada link na própria etiqueta <A>, com o atributo style. Desta maneira podemos fazer com que determinados links da página seja vistas de forma distinta.

Exemplo de estilos nos links

<html>
<head>
<title>Exemplos de estilo nos links</title>
<STYLE type="text/css">
A:link {text-decoration:none;color:#0000cc;}
A:visited {text-decoration:none;color:#ffcc33;}
A:active {text-decoration:none;color:#ff0000;}
A:hover {text-decoration:underline;color:#999999;font-weight:bold}
</STYLE>
</head>

<body>

<a href="http://dominioinexistente.nãofunciona.com">Link normal</a>
<br>
<br>
<a href="links.html">Link visitado</a>
Clicar este link para vê-lo ativo,
passar o mouse por cima para que mude.

</body>
</html>

Ver o exemplo anterior

URL como valor de um atributo:

Determinados atributos de estilos, como background-image necessitam uma URL como valor, para indicá-las podemos definir tanto caminhos relativos como absolutos. Assim, podemos indicar a URL da imagem de fundo destas duas maneiras:

background-image: url(fundo.gif) No caso de que a imagem esteja no mesmo diretório que a página. background-image: url(http://www.criarweb.com/imagens/fundo.gif) ç

Ocultar estilos em navegadores antigos

No caso de definir dentro da etiqueta <STYLE> umas declarações de estilos devemos certificarmos que estas não vão ser imprimidas na página com navegadores antigos. Pensar em um navegador que não reconheça a etiqueta <STYLE>, pensará que corresponde com algo que não entende e se esquecerá da etiqueta. O que encontra a seguir é um texto normal e fará com que este se veja na página, como com qualquer outro texto.

Para evitar isso devemos ocultar com comentários HTML () tudo que tiver dentro da etiqueta <STYLE>.

Deste modo terminamos nosso manual de CSS. Esperamos poder ter ajudar a fazer páginas melhores e mais rapidamente.