Se puede decir que los enlaces de texto son los elementos de página más comunes en las páginas web. Como resultado, los estilos de enlaces de texto predeterminados están subrayados. Esta apariencia sin cambios puede hacer que muchos amigos quieran cambiarla para que se ajuste a la página general. se han utilizado ampliamente, este deseo ahora se puede realizar muy fácilmente. Hoy les presentaré cómo usar hojas de estilo para crear coloridos efectos de enlaces de texto. Se lo presentaré a todos en los capítulos elemental, avanzado y avanzado. Todos los efectos de estilo de enlace se completarán en el editor de estilo de Dreamweaver. Consulte la introducción anterior para conocer el uso del editor de estilo en Dreamweaver. El efecto de navegación del estilo de enlace se muestra a continuación para la navegación de páginas específicas, consulte aquí;
1. Preparación
Primero crearemos un estilo de enlace básico y otros estilos agregarán una clase personalizada basada en esto.
1. Presione Shift+F11 para abrir el panel de estilo y haga clic en el botón Nuevo estilo, como se muestra en la Figura 1;
2. Seleccione Usar selector CSS en la opción Tipo para crear un estilo de enlace predeterminado, como se muestra en la Figura 2;
3. Como se muestra en la Figura 3, configure el estilo de enlace predeterminado sin subrayado, la fuente en Song Dynasty 9pt y ningún otro color, etc. Lo configuraremos por separado para cada clase más adelante.
4. Defina la clase de estilo Clase. Cada uno de nuestros estilos a continuación define una clase separada y la asigna al texto del enlace. Los pasos son los siguientes: Haga clic en Agregar para abrir el nuevo panel de estilo de definición, seleccione Crear estilo personalizado (clase) para definir su propia clase de estilo. Como se muestra en la Figura 4;
5. Agregue una clase de estilo al texto del enlace. Seleccione un texto de enlace en Dreamweaver, seleccione la etiqueta en la barra de selección rápida de etiquetas en la parte inferior de la ventana, haga clic derecho en la etiqueta y seleccione Establecer clase para asignar el estilo personalizado al texto del enlace, como se muestra en la Figura 5;
6. El método para otros estilos de texto de enlaces es el mismo y no lo volveré a presentar más adelante. En este tutorial, los amigos pueden crear sus propios estilos de enlace para definir el estado de desplazamiento. No lo presentaré más, simplemente ingrese [.t1:hover] directamente cuando se le solicite una definición.
2. Estilo de enlace principal
Completaremos completamente esta parte del efecto de enlace en la categoría Tipo del editor de estilos. No entraré en detalles sobre cómo crearlo y configurarlo. Solo les mostraré el diagrama del panel completo y les daré una breve introducción.
1. Enlace ordinario. Como se muestra en la Figura 6;
Los enlaces ordinarios se establecen en el primer elemento Tipo en la categoría Categoría del editor de estilo. El color define el color de la fuente del enlace y la Decoración define el estilo de subrayado del enlace, que se divide en las siguientes categorías:
subrayado: subrayado sobrerayado: sobrerayado renglón: tachado parpadeo: línea intermitente ninguno: sin subrayado
Varios otros estilos de enlaces en esta sección se logran cambiando la combinación de trazos.
2. Sin enlaces subrayados, como se muestra en la Figura 7;
3. Enlace doble subrayado, como se muestra en la Figura 8;
4. Enlaces tachados, como se muestra en la Figura 9;
3. Estilos de enlaces avanzados
A continuación, presentaré un método de definición de estilo de enlace alternativo. Este método utiliza principalmente el atributo Borde en la hoja de estilo para reemplazar el subrayado de los enlaces ordinarios. Dado que el Borde tiene más parámetros de control y estilos, se pueden implementar algunas funciones especiales. Echemos un vistazo al panel siguiente, como se muestra en la Figura 10;
La opción Borde incluye tres partes: Ancho (ancho de línea), Color (color de línea) y Estilo (tipo de línea), y cada parte puede establecer diferentes parámetros para diferentes bordes. Este es un efecto de línea de enlace común.
Necesitamos recordarles a todos que existe una condición necesaria para usar este método para definir estilos de enlace: se debe definir el atributo Box en el estilo, como se muestra en la Figura 11;
Esto se debe a que Border es un elemento de bloque en el estilo y primero debemos definir un elemento de bloque antes de que Border pueda funcionar. Solo necesitamos definir arbitrariamente el Ancho o Alto en la opción Cuadro. Puede probar los valores específicos para ver el efecto. He definido el Alto como 0 aquí. Veamos qué tipo de efectos se pueden lograr.
1. Estilos de enlaces alternativos. Los ajustes son como se muestran en la Figura 12;
2. Personalice el color del subrayado. Podemos definir un color diferente para el subrayado y el texto. Este es un efecto que es imposible de lograr con el texto del enlace normal siempre que el color del borde y el color del texto estén definidos. de manera diferente, como se muestra en la Figura 13;
3. Personaliza la distancia del subrayado. Podemos establecer la distancia de este tipo de línea en la categoría Cuadro cambiando el valor de Relleno. En este ejemplo, configuramos Relleno—Inferior en 5pix, como se muestra en la Figura 14;
4. Personalice la longitud y la alineación del trazado. Además, también podemos definir con precisión la longitud y la alineación de las líneas. Abra la categoría Caja y establezca el Ancho en 200, como se muestra en la Figura 15; establezca la Alineación de texto de la categoría Bloque en Centro, que es la alineación media, como se muestra; en la Figura 16;
5. Personaliza el efecto de doble subrayado. Cambie el Estilo en Borde para cambiar la apariencia del subrayado. Establezca Estilo en Doble y Fondo en 3pix para lograr un efecto de subrayado doble. Como se muestra en la Figura 17;
4. Estilos de enlaces avanzados
Al combinar las técnicas presentadas anteriormente, también podemos crear estilos de enlaces de texto más complejos. A continuación presentamos tres ejemplos.
1. Defina enlaces de bloque. Primero agregue un color de fondo al enlace, como se muestra en la Figura 18;
Luego agregue cuatro bordes al enlace de texto para lograr un enlace de texto de bloque plano, como se muestra en la Figura 19;
2. Defina enlaces de texto en forma de botones. Cambie el estilo del borde y defina Border-Style desde el principio, como se muestra en la Figura 20;
Defina la opción Ancho y Alto en el Cuadro para definir el ancho y alto del botón. Defina Relleno como 2pix para crear un espacio de 2pix entre el texto del enlace y el botón, como se muestra en la Figura 21.
3. Defina enlaces de texto con efectos especiales. La hoja de estilos CSS también contiene un conjunto de filtros de efectos especiales. Podemos combinar los filtros con los parámetros anteriores para crear estilos de enlaces especiales. En este ejemplo creé un enlace de texto usando el filtro Desenfoque, con efecto de borde. Como se muestra en la Figura 22;
4. Defina el efecto del cambio de fondo estático. Este ejemplo pretende lograr el efecto de cambio de fondo configurando diferentes imágenes de fondo para el estado normal y el estado de desplazamiento del texto del enlace. Vea la imagen a continuación:
5. El efecto del cambio dinámico de fondo. Este efecto es básicamente el mismo que el ejemplo anterior, excepto que se define un fondo de imagen Gif dinámico en el estado de desplazamiento. Y esta imagen requiere un poco de habilidad, que consiste en configurar el bucle en una vez, agregar un cuadro al final y establecer el tiempo del cuadro en un valor mayor, como 10000. Esto permite que la animación se ejecute por un lado y luego se detenga. Para mejorar la velocidad de ejecución del efecto, también necesitamos agregar un comportamiento Precargar /doc/webpage/images/images en Dreamweaver. Esto requiere abrir el panel de comportamiento y agregar el comportamiento Precargar /doc/webpage/images/images, como se muestra en la figura:
Podemos precargar las cuatro imágenes necesarias para los dos últimos estilos de enlace, como se muestra a continuación:
5. Resumen
Introduciré muchos estilos de enlace y, junto con la configuración del estado de desplazamiento del texto del enlace, puede lograr efectos muy hermosos. Consulte aquí para navegar por páginas específicas. Espero que mis amigos puedan crear más texto de enlace basado en lo anterior. ideas. Recuerde, una hoja de estilo es como un iceberg con tesoros en la producción de páginas web. Hoy solo hemos descubierto un pequeño rincón del iceberg. Hay más tesoros esperando que los descubra.