Conteúdo
Ao programar uma página da Web, um designer, muitas vezes quer incluir um pouco de interatividade. Um recurso interativo simples que você pode adicionar é a criação de um link da Web que fica sublinhada quando o mouse passa sobre ele. Para fazer isso, você deve primeiro desativar o automático sublinhando que links da Web geralmente recebem, em seguida, instruir a página para exibir um sublinhado quando o mouse se move sobre o link.
HTML e CSS
Hypertext Markup Language, mais comumente conhecido como HTML, é uma das linguagens de programação mais amplamente utilizado na Internet. É feita de uma série de comandos chamadas marcas. Uma tag de abertura instrui um navegador da Web para começar a fazer algo, que continua até que uma marca de fechamento é inserida.
Cascading Style Sheets, ou CSS, mais tarde foi desenvolvido para adicionar funcionalidade e interatividade adicional para websites. HTML e CSS são projetados para trabalhar de forma intercambiável.
Seção
Para criar um link que sublinha quando o mouse passa sobre ele, você deve primeiro adicionar um comando estilo no
seção do site. O comando será parecido com este:A primeira linha estabelece que um estilo text / css está começando. A segunda linha remove o sublinhado padrão que está associada com uma ligação de Internet. A terceira linha ordena o link para se tornar sublinhado quando o mouse passa sobre ele, e a linha final fecha o estilo.
Seção
Com o comando sublinhado delineado no
seção, agora tudo que você tem a fazer é adicionar os links dentro do seção. Esta é a seção que contém tudo o que você pode ver dentro de uma página web. O HTML para um link Web é:A "> https://example.com"gt; O Texto visível
Você deve substituir o site exemplo, com a URL que você deseja se conectar, e adicione seu próprio texto visível para os seus visitantes para ler.
modificações
Fazer algumas modificações a este HTML se você desejar. Por exemplo, adicionar cor à ligação adicionando "cor vermelha-" para o código, tornando-se
a: hover {text-decoration: cor underline-: red-}
Você também pode adicionar uma linha superior para o link com o código
a: hover {text-decoration: underline overline-}
Isto irá criar uma linha de baixo e uma linha acima do texto link. Finalmente, você pode fazer o tamanho link mudança quando o mouse passa sobre ele com o código
a: hover {text-decoration: underline- font-size: 15}
O número tamanho da fonte refere-se à altura da fonte em pixels.