Pode-se dizer que os links de texto são os elementos de página mais comuns nas páginas da web. Os estilos de link de texto padrão são sublinhados, pois as folhas de estilo podem fazer com que muitos amigos queiram alterá-lo. têm sido amplamente utilizados, esse desejo agora pode ser realizado com muita facilidade. Hoje vou apresentar como usar folhas de estilo para criar efeitos coloridos de links de texto. Vou apresentá-lo a todos nos capítulos elementar, avançado e avançado. Todos os efeitos de estilo de link serão concluídos no editor de estilo do Dreamweaver. Consulte a introdução anterior para o uso do editor de estilo no Dreamweaver. O efeito de navegação no estilo do link é mostrado abaixo para navegação em páginas específicas, veja aqui;
1. Preparação
Primeiro criaremos um estilo de link básico e outros estilos adicionarão uma classe personalizada com base nisso.
1. Pressione Shift+F11 para abrir o painel de estilos e clique no botão Novo Estilo, conforme mostrado na Figura 1;
2. Selecione Usar Seletor CSS na opção Tipo para criar um estilo de link padrão, conforme mostrado na Figura 2;
3. Conforme mostrado na Figura 3, defina o estilo do link padrão como sem sublinhado, a fonte como Song Dynasty 9pt e nenhuma outra cor, etc.
4. Defina a classe de estilo Classe. Cada um dos nossos estilos abaixo define uma classe separada e a atribui ao texto do link. As etapas são as seguintes: Clique em Adicionar para abrir o novo painel de estilo de definição, selecione Criar estilo personalizado (classe) para definir sua própria classe de estilo. Conforme mostrado na Figura 4;
5. Adicione uma classe de estilo ao texto do link. Selecione um texto de link no Dreamweaver, selecione o rótulo na barra de seleção rápida de rótulos na parte inferior da janela, clique com o botão direito no rótulo e selecione Definir classe para atribuir o estilo personalizado ao texto do link, conforme mostrado na Figura 5;
6. O método para outros estilos de texto de link é o mesmo e não o apresentarei novamente mais tarde. Neste tutorial, os amigos podem criar seus próprios estilos de link para definir o status de foco. Não vou mais apresentá-lo, basta digitar [.t1:hover] diretamente quando for solicitada a definição.
2. Estilo do link principal
Concluiremos completamente esta parte do efeito de link na categoria Tipo do editor de estilo. Não entrarei em detalhes sobre como criá-lo e configurá-lo, apenas mostrarei o diagrama do painel completo e darei uma breve introdução.
1. Link comum. Conforme mostrado na Figura 6;
Os links comuns são definidos no primeiro item Tipo na categoria Categoria do editor de estilo. Cor define a cor da fonte do link e Decoração define o estilo de sublinhado do link, que é dividido nas seguintes categorias:
sublinhado: sublinhado sobreposto: sobreposto linha: tachado piscar: linha piscante nenhum: sem sublinhado
Vários outros estilos de link nesta seção são obtidos alterando a combinação de traços.
2. Sem links sublinhados, conforme Figura 7;
3. Link sublinhado duplo, conforme Figura 8;
4. Links tachados, conforme Figura 9;
3. Estilos de link avançados
A seguir, apresentarei um método alternativo de definição de estilo de link. Este método usa principalmente o atributo Border na folha de estilo para substituir o sublinhado de links comuns. Como o Border tem mais parâmetros e estilos de controle, algumas funções especiais podem ser implementadas. Vamos dar uma olhada no painel abaixo, conforme mostra a Figura 10;
A opção Borda inclui três partes: Largura (largura da linha), Cor (cor da linha) e Estilo (tipo de linha), e cada parte pode definir parâmetros diferentes para bordas diferentes. Este é um efeito de link impossível.
Precisamos lembrar a todos que existe uma condição necessária para utilizar este método para definir estilos de links: o atributo Box no estilo deve ser definido, conforme mostrado na Figura 11;
Isso ocorre porque Border é um elemento de bloco no estilo e devemos primeiro definir um elemento de bloco antes que Border possa funcionar. Precisamos apenas definir arbitrariamente a opção Largura ou Altura na Caixa. Você pode tentar os valores específicos para ver o efeito. Defini a Altura como 0 aqui. Vamos ver que tipo de efeitos podem ser alcançados.
1. Estilos de link alternativos. As configurações são mostradas na Figura 12;
2. Personalize a cor do sublinhado Podemos definir uma cor diferente para o sublinhado e o texto. Este é um efeito impossível de obter com o texto do link comum, desde que a cor da borda e a cor do texto estejam definidas. de forma diferente, conforme mostrado na Figura 13;
3. Personalize a distância do sublinhado. Podemos definir a distância desse tipo de linha na categoria Box alterando o valor de Padding. Neste exemplo, definimos Padding—Bottom como 5pix, conforme mostrado na Figura 14;
4. Personalize o comprimento e o alinhamento do traçado. Além disso, também podemos definir com precisão o comprimento e o alinhamento das linhas. Abra a categoria Box e defina a Largura para 200, conforme mostrado na Figura 15; na Figura 16;
5. Personalize o efeito de sublinhado duplo. Altere o estilo na borda para alterar a aparência do sublinhado. Defina Estilo como Duplo e Fundo como 3pix para obter um efeito de sublinhado duplo. Conforme mostrado na Figura 17;
4. Estilos de link avançados
Combinando as técnicas apresentadas acima, também podemos criar estilos de link de texto mais complexos. Abaixo apresentamos três exemplos.
1. Defina links de bloco. Primeiro adicione uma cor de fundo ao link, conforme mostrado na Figura 18;
Em seguida, adicione quatro bordas ao link de texto para obter um link de texto em bloco plano, conforme mostrado na Figura 19;
2. Defina links de texto semelhantes a botões. Altere o estilo da borda e defina Border-Style inicialmente, conforme Figura 20;
Defina a opção Width and Height in the Box para definir a largura e altura do botão. Defina Padding como 2pix para criar um espaçamento de 2pix entre o texto do link e o botão, conforme mostrado na Figura 21;
3. Defina links de texto com efeitos especiais. A folha de estilo CSS também contém um conjunto de filtros de efeitos especiais. Podemos combinar os filtros com os parâmetros anteriores para criar estilos de link especiais. Neste exemplo criei um link de texto usando o filtro Blur, com efeito de borda. Conforme mostrado na Figura 22;
4. Defina o efeito da alternância estática de fundo. Este exemplo visa obter o efeito de troca de plano de fundo definindo diferentes imagens de plano de fundo para o estado normal e o estado de foco do texto do link. Veja a imagem abaixo:
5. O efeito da troca dinâmica de fundo. Este efeito é basicamente o mesmo do exemplo acima, exceto que um fundo de imagem GIF dinâmico é definido no estado Hover. E essa imagem requer um pouco de habilidade, que é definir o loop uma vez, adicionar um quadro no final e definir o tempo do quadro para um valor maior, como 10.000. Isso permite que a animação seja executada em um lado e depois pare. Para melhorar a velocidade de execução do efeito, também precisamos adicionar um comportamento Preload /doc/webpage/images/images no Dreamweaver. Isso requer a abertura do painel de comportamento e a adição do comportamento Preload /doc/webpage/images/images, conforme mostrado na figura:
Podemos pré-carregar todas as quatro imagens necessárias para os dois últimos estilos de link, conforme mostrado abaixo:
5. Resumo
Apresentarei muitos estilos de link e, junto com a configuração do status de foco do texto do link, você pode obter efeitos muito bonitos aqui para navegação em páginas específicas. Espero que os amigos possam criar mais textos de link com base no acima. estilo de ideias. Lembre-se, uma folha de estilo é como um iceberg com tesouros na produção de páginas da web. Hoje descobrimos apenas um pequeno canto do iceberg. Mais tesouros estão esperando por você para descobrir.