Como utilizar folhas de estilos em cascata para criar hiperligações personalizadas no Expression Web

Traduções de Artigos Traduções de Artigos
Artigo: 928715 - Ver produtos para os quais este artigo se aplica.
Expandir tudo | Reduzir tudo

Nesta página

INTRODUÇÃO

Este artigo descreve como utilizar folhas de estilo em cascata (CSS) para criar hiperligações personalizadas no Microsoft Expression Web. Contém exemplos que demonstram como utilizar funcionalidades CSS para criar hiperligações personalizadas.

Mais Informação

Exemplo 1: Criar hiperligações em que a formatação de sublinhado é apresentada numa cor diferente

Este exemplo formata o texto das hiperligações para a mesma cor do texto do documento. Apenas o sublinhado formatação das hiperligações é apresentada numa cor diferente. Para criar estas hiperligações personalizadas, siga estes passos:
  1. Inicie o Expression Web e, em seguida, criar uma nova página em branco.
  2. No menu Ver , clique em página e, em seguida, clique em código na parte inferior da página.
  3. No <head> </head> área da página, insira o seguinte código:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px } 
    a:link { border-bottom-color: blue } a:visited { border-bottom-color: purple } 
    a:hover { border-bottom-color: green } a:active { border-bottom-color: red } 
    </style> 
  4. No <body> </body> área da página, insira o seguinte código:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. No menu ficheiro , clique em Guardar .
  6. Na caixa de diálogo Guardar como , especifique uma localização para o qual pretende guardar o ficheiro.
  7. Na caixa nome do ficheiro , escreva exemplo1 e, em seguida, clique em Guardar .
  8. No menu ficheiro , aponte para Pré-visualizar no browser e, em seguida, clique no browser que pretende utilizar para pré-visualizar a página.

Exemplo 2: Criar hiperligações com botões sensíveis ao rato

Este exemplo cria hiperligações com botões sensíveis ao rato que têm um fundo sólido. Para criar estas hiperligações personalizadas, siga estes passos:
  1. Inicie o Expression Web e, em seguida, criar uma nova página em branco.
  2. No menu Ver , clique em página e, em seguida, clique em código na parte inferior da página.
  3. No <head> </head> área da página, insira o seguinte código:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { text-decoration: none; padding: 3px } 
    a:link { color: white; background-color: blue } 
    a:visited { color: white; background-color: purple } 
    a:hover { color: white; background-color: green } 
    a:active { color: white; background-color: red } 
    </style> 
  4. No <body> </body> área da página, insira o seguinte código:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. No menu ficheiro , clique em Guardar .
  6. Na caixa de diálogo Guardar como , especifique uma localização para o qual pretende guardar o ficheiro.
  7. Na caixa nome do ficheiro , escreva exemplo2 e, em seguida, clique em Guardar .
  8. No menu ficheiro , aponte para Pré-visualizar no browser e, em seguida, clique no browser que pretende utilizar para pré-visualizar a página.

Exemplo 3: Criar hiperligações com botões sensíveis ao rato do destaque

Este exemplo cria hiperligações com botões sensíveis ao rato do destaque. Quando coloca sobre estas hiperligações, aparece uma caixa colorida em redor do texto de hiperligação. Isto cria um efeito de destaque. Para criar estas hiperligações personalizadas, siga estes passos:
  1. Inicie o Expression Web e, em seguida, criar uma nova página em branco.
  2. No menu Ver , clique em página e, em seguida, clique em código na parte inferior da página.
  3. No <head> </head> área da página, insira o seguinte código:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { color: black; text-decoration: none; border-style: solid; border-width: 2px; padding: 2px } 
    a:link { border-color: blue } a:visited { border-color: purple } 
    a:hover { border-color: green } a:active { border-color: red } 
    </style> 
  4. No <body> </body> área da página, insira o seguinte código:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. No menu ficheiro , clique em Guardar .
  6. Na caixa de diálogo Guardar como , especifique uma localização para o qual pretende guardar o ficheiro.
  7. Na caixa nome do ficheiro , escreva Exemplo3 e, em seguida, clique em Guardar .
  8. No menu ficheiro , aponte para Pré-visualizar no browser e, em seguida, clique no browser que pretende utilizar para pré-visualizar a página.

Exemplo 4: Criar hiperligações com formatação de texto diferente

Este exemplo formata hiperligação com texto não sublinhado, itálico, em minúsculo. Quando coloca sobre estas hiperligações, o texto torna-se em maiúsculas. Para criar estas hiperligações personalizadas, siga estes passos:
  1. Inicie o Expression Web e, em seguida, criar uma nova página em branco.
  2. No menu Ver , clique em página e, em seguida, clique em código na parte inferior da página.
  3. No <head> </head> área da página, insira o seguinte código:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { text-decoration: none; font-style: italic; text-transform: lowercase } 
    a:link { color: blue; font-weight: bold } a:visited { color: purple } 
    a:hover { color: green; text-transform: uppercase } 
    a:active { color: red } 
    </style> 
  4. No <body> </body> área da página, insira o seguinte código:
    <p>Please see <a href="http://www.microsoft.com">http://WWW.microsoft.COM</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://WWW.msn.COM</a> for more.</p> 
  5. No menu ficheiro , clique em Guardar .
  6. Na caixa de diálogo Guardar como , especifique uma localização para o qual pretende guardar o ficheiro.
  7. Na caixa nome do ficheiro , escreva Exemplo4 e, em seguida, clique em Guardar .
  8. No menu ficheiro , aponte para Pré-visualizar no browser e, em seguida, clique no browser que pretende utilizar para pré-visualizar a página.

Referências

Para obter mais informações, clique números de artigo que se seguem para visualizar os artigos na base de dados de conhecimento da Microsoft:
825450Como criar hiperligações personalizadas utilizando folhas de estilos em cascata no FrontPage 2003
196488O que folhas de estilo em cascata?
222949Como criar efeitos de apontar para botões de formulário utilizando DHTML e CSS no FrontPage

Propriedades

Artigo: 928715 - Última revisão: 6 de dezembro de 2006 - Revisão: 1.0
A informação contida neste artigo aplica-se a:
  • Microsoft Expression Web
Palavras-chave: 
kbmt kbexpertiseinter kbhowto KB928715 KbMtpt
Tradução automática
IMPORTANTE: Este artigo foi traduzido por um sistema de tradução automática (também designado por Machine translation ou MT), não tendo sido portanto revisto ou traduzido por humanos. A Microsoft tem artigos traduzidos por aplicações (MT) e artigos traduzidos por tradutores profissionais. O objectivo é simples: oferecer em Português a totalidade dos artigos existentes na base de dados do suporte. Sabemos no entanto que a tradução automática não é sempre perfeita. Esta pode conter erros de vocabulário, sintaxe ou gramática? erros semelhantes aos que um estrangeiro realiza ao falar em Português. A Microsoft não é responsável por incoerências, erros ou estragos realizados na sequência da utilização dos artigos MT por parte dos nossos clientes. A Microsoft realiza actualizações frequentes ao software de tradução automática (MT). Obrigado.
Clique aqui para ver a versão em Inglês deste artigo: 928715

Submeter comentários

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com