Avançados truques com CSS
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 (<!-- isto é um comentário -->) 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.
