As ligazóns son moi comúns nas páxinas web, pero moitos diseñadores web non se dan conta do poder que teñen con CSS para manipular e xestionar as súas conexións efectivamente. Pode definir ligazóns con estados visitados, desprazados e activos. Tamén pode traballar con bordos e fondos para darlle máis pizzas aos seus enlaces ou facelos parecer botóns ou incluso imaxes.
A maioría dos deseñadores web comezan ao definir un estilo na etiqueta "a":
a {cor: vermello; }Isto estilizará todos os aspectos da ligazón (o fluxo, o visitado e o activo). Ao estilo de cada parte por separado, debes usar pseudo-clases de ligazóns.
Ligazón Pseudo-Clases
Existen catro tipos básicos de pseudo-clases de ligazón que pode definir:
- : ligazón: este é o estilo predeterminado da ligazón
- : visitado - despois de facer clic na ligazón
- : pasar o rato - como un rato está preparado a través dunha ligazón (prema-prema)
- : activa - á dereita a medida que se fai clic na ligazón
Para definir unha pseudo-clase de ligazón, úsea coa etiqueta no selector CSS . Así que, para cambiar a cor visitada de todas as túas ligazóns a gris, escríbea:
a: visita {cor: gris; }Se vostede estilo unha pseudo-clase de ligazón, é unha boa idea estilizar a todos. Desta forma non se sorprenderá por resultados estraños. Entón, se só quere cambiar a cor visitada en gris, mentres que todas as outras pseudo-propiedades das súas ligazóns permanecen negras, escribirías:
a: link, a: hover, a: active {cor: black; } a: visitada {cor: gris; }Cambia as cores da ligazón
A forma máis popular de enlaces de estilo é cambiar a cor cando o rato sobre ela:
a {cor: # 00f; } a: hover {cor: # 0f0; }Pero non esquezas que podes afectar a forma na que a ligazón vén facendo clic sobre ela coa propiedade activa:
a {cor: # 00f; } a: activo {color: # f00; }Ou como funciona a ligazón que a visitou coa propiedade visitada:
a {cor: # 00f; } a: visita {cor: # f0f; }Para poñelo todo xuntos:
a {cor: # 00f; } a: visita {cor: # f0f; } a: hover {cor: # 0f0; } a: activo {color: # f00; }Coloca fondos sobre as ligazóns para engadir iconas ou viñetas
Podes poñer un fondo nunha ligazón como no artigo sobre fondos estéticos, pero ao xogar co fondo un pouco, podes crear unha ligazón que teña un ícono asociado. Escolla un ícono que sexa pequeno, ao redor de 15px por 15px, a menos que o texto sexa máis grande. Coloque o fondo nun lado da ligazón e estableza a opción de repetir para non repetir. A continuación, coloque a ligazón para que o texto dentro da ligazón se mova tanto como para a esquerda ou a dereita para ver o ícono.
a {padding: 0 2px 1px 15px; fondo: #fff url (ball.gif) centro esquerda centro non-repeat; cor: # c00; }Unha vez que teña o seu ícono, pode configurar unha imaxe diferente como as iconas deslizantes, activas e visitadas para que a ligazón cambie:
a {padding: 0 2px 1px 15px; fondo: #fff url (ball.gif) centro esquerda centro non-repeat; cor: # c00; } a: hover {background: #fff url (ball2.gif) centro esquerda centro non-repeat; } a: activo {background: #fff url (ball3.gif) centro esquerda centro non-repeat; }Faga as ligazóns coma botóns
Os botóns son moi populares, pero ata que chegou o CSS, tiñas que crear botóns usando imaxes , o que fai que as túas páxinas tarden máis en cargar. Afortunadamente, hai un estilo de bordo que pode axudarche a crear un efecto de botón con facilidade con CSS.
un {bordo: inicio 4px; padding: 2px; text-decoration: ningunha; } a: activo {border: 4px inset; }Teña en conta que, cando coloque cores desde o principio e os estilos de inserción, os navegadores non son susceptibles de procesalos como se podería esperar. Entón, aquí tes un botón máis bonito con bordos de cores:
un {estilo de fronteira: sólido; ancho do borde: 1px 4px 4px 1px; text-decoration: ningunha; padding: 4px; border-color: # 69f # 00f # 00f # 69f; }E tamén pode afectar o fluxo e os estilos activos dunha ligazón de botón, simplemente use esas pseudo clases:
a: link {border-style: sólido; ancho do borde: 1px 4px 4px 1px; text-decoration: ningunha; padding: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }