helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Vemos como atribuir estilos aos links da página de uma maneira potente, para fazer interessantes barras de navegação.
Por Miguel Angel Alvarez - Tradução de JML
Neste artigo vamos ver como poderíamos criar uma barra de navegação bastante dinâmica utilizando unicamente as Folhas de Estilo em Cascata. No exemplo vamos construir uma barra de navegação que contem links de várias cores que mudam de tonalidade ao passar o mouse por cima.
Podemos ver o resultado de nossa barra clicando este link, para ter uma idéia mais exata do que queremos conseguir.
Como colocar estilo aos links
Como vimos nos capítulos anteriores de nosso manual de CSS, mas o repetiremos aquí. Define-se o estilo dos links atribuindo sua aparência em seus distintos estados:
•Link não visitado. Define-se com o atributo link.
•Link visitado. Define-se com o atributo visited.
•Link ativo (quando se está clicando). Define-se com active.
•Link com o mouse em cima. Define-se com hover.
Esta definição se realiza no cabeçalho da página, entre as etiquetas <STYLE> e </STYLE>, e é global a toda a página.
Um exemplo disto pode ser visto nesta declaração de estilos:
<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;}
</STYLE>
Como dar estilo a um link em concreto
Se queremos ressaltar nossa barra de navegação provavelmente vamos querer colocá-la em uma tabela de nossa página web, com uma cor que contraste um pouco com o fundo. Em um caso como este, será necessário que os links da barra de navegação e os links normais da página tenham cores diferentes, por estarem situados sobre dois tipos de fundos distintos.
É por isso que os links da barra vão ter uma cor diferente das definidas no cabeçalho da página, com os estilos. Isto pode ser conseguido desta maneira:
<a href="#" style="color:#ff0000">Meu link</a>
Definimos a cor de um link de uma maneira, utilizando o atributo style, de modo que este link sempre terá a cor indicada, independentemente de seu estado.
É um link amarelo que ficaria muito bem realçado sobre um fundo escuro, como se pode ver no seguinte exemplo de barra de navegação.
Link 1
Outro link
Link 3
Na tabela anterior temos links amarelos em uma web onde os links são azuis por padrão.
Como utilizar as classes ao aplicar estilo aos links
Também vimos nos capítulos anteriorres que o uso de classes pode ser muito útil na hora de definir estilos especiais que podemos aplicar às etiquetas que quisermos. Na hora de trabalhar com os links também podemos aplicar as classes para definir distintos tipos de links, que têm distintos tipos de estilos.
A.classe1:visited {color:#ff0000;}
A.classe1:active {color:#ff0000;}
A.classe1:link {color:#ff0000}
A.classe1:hover {color:#00ff00}
A vantagem ao utilizar as classes com os estilos dos links é que podemos especificar um formato distinto ao link dependendo de seu estado: visitado ou não, ativo ou com o mouse sobre ele.
Se não está claro, ao especificar o estilo com o atributo style do link só podíamos dizer que queremos o link em amarelo, e sempre o teremos em amarelo (seja visitado ou não, ativo, ou estando com o mouse em cima). Com as classes definimos um novo tipo de link ao qual podemos dar distintos formatos dependendo de seu estado.
Por Miguel Angel Alvarez - Tradução de JML
Neste artigo vamos ver como poderíamos criar uma barra de navegação bastante dinâmica utilizando unicamente as Folhas de Estilo em Cascata. No exemplo vamos construir uma barra de navegação que contem links de várias cores que mudam de tonalidade ao passar o mouse por cima.
Podemos ver o resultado de nossa barra clicando este link, para ter uma idéia mais exata do que queremos conseguir.
Como colocar estilo aos links
Como vimos nos capítulos anteriores de nosso manual de CSS, mas o repetiremos aquí. Define-se o estilo dos links atribuindo sua aparência em seus distintos estados:
•Link não visitado. Define-se com o atributo link.
•Link visitado. Define-se com o atributo visited.
•Link ativo (quando se está clicando). Define-se com active.
•Link com o mouse em cima. Define-se com hover.
Esta definição se realiza no cabeçalho da página, entre as etiquetas <STYLE> e </STYLE>, e é global a toda a página.
Um exemplo disto pode ser visto nesta declaração de estilos:
<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;}
</STYLE>
Como dar estilo a um link em concreto
Se queremos ressaltar nossa barra de navegação provavelmente vamos querer colocá-la em uma tabela de nossa página web, com uma cor que contraste um pouco com o fundo. Em um caso como este, será necessário que os links da barra de navegação e os links normais da página tenham cores diferentes, por estarem situados sobre dois tipos de fundos distintos.
É por isso que os links da barra vão ter uma cor diferente das definidas no cabeçalho da página, com os estilos. Isto pode ser conseguido desta maneira:
<a href="#" style="color:#ff0000">Meu link</a>
Definimos a cor de um link de uma maneira, utilizando o atributo style, de modo que este link sempre terá a cor indicada, independentemente de seu estado.
É um link amarelo que ficaria muito bem realçado sobre um fundo escuro, como se pode ver no seguinte exemplo de barra de navegação.
Link 1
Outro link
Link 3
Na tabela anterior temos links amarelos em uma web onde os links são azuis por padrão.
Como utilizar as classes ao aplicar estilo aos links
Também vimos nos capítulos anteriorres que o uso de classes pode ser muito útil na hora de definir estilos especiais que podemos aplicar às etiquetas que quisermos. Na hora de trabalhar com os links também podemos aplicar as classes para definir distintos tipos de links, que têm distintos tipos de estilos.
A.classe1:visited {color:#ff0000;}
A.classe1:active {color:#ff0000;}
A.classe1:link {color:#ff0000}
A.classe1:hover {color:#00ff00}
A vantagem ao utilizar as classes com os estilos dos links é que podemos especificar um formato distinto ao link dependendo de seu estado: visitado ou não, ativo ou com o mouse sobre ele.
Se não está claro, ao especificar o estilo com o atributo style do link só podíamos dizer que queremos o link em amarelo, e sempre o teremos em amarelo (seja visitado ou não, ativo, ou estando com o mouse em cima). Com as classes definimos um novo tipo de link ao qual podemos dar distintos formatos dependendo de seu estado.