Les liens de texte peuvent être considérés comme les éléments de page les plus courants sur les pages Web. Les styles de liens de texte par défaut sont soulignés. Cette apparence inchangée peut inciter de nombreux amis à vouloir le modifier pour l'adapter à l'ensemble de la page. ont été largement utilisés, ce souhait peut désormais être réalisé très facilement. Aujourd'hui, je vais vous présenter comment utiliser des feuilles de style pour créer des effets de liens de texte colorés. Je le présenterai à tout le monde dans les chapitres élémentaires, avancés et avancés. Tous les effets de style de lien seront réalisés dans l'éditeur de style de Dreamweaver. Veuillez vous référer à l'introduction précédente pour l'utilisation de l'éditeur de style dans Dreamweaver. L'effet de navigation du style de lien est comme indiqué ci-dessous ; pour une navigation de page spécifique, veuillez voir ici ;
1. Préparation
Nous allons d'abord créer un style de lien de base, et d'autres styles ajouteront une classe Class personnalisée basée sur celui-ci.
1. Appuyez sur Maj+F11 pour ouvrir le panneau de style et cliquez sur le bouton Nouveau style, comme illustré dans la figure 1 ;
2. Sélectionnez Utiliser le sélecteur CSS dans l'option Type pour créer un style de lien par défaut, comme le montre la figure 2 ;
3. Comme le montre la figure 3, définissez le style de lien par défaut sur aucun soulignement, la police sur Song Dynasty 9pt et aucune autre couleur, etc. Nous le définirons séparément pour chaque classe plus tard.
4. Définissez la classe de style Class. Chacun de nos styles ci-dessous définit une classe distincte et l'attribue au texte du lien. Les étapes sont les suivantes : Cliquez sur Ajouter pour ouvrir le nouveau panneau de style de définition, sélectionnez Créer un style personnalisé (classe) pour définir votre propre classe de style. Comme le montre la figure 4 ;
5. Ajoutez une classe de style au texte du lien. Sélectionnez un texte de lien dans Dreamweaver, sélectionnez l'étiquette dans la barre de sélection rapide d'étiquette en bas de la fenêtre, cliquez avec le bouton droit sur l'étiquette et sélectionnez Définir la classe pour attribuer le style personnalisé au texte du lien, comme illustré dans la figure 5 ;
6. La méthode pour les autres styles de texte de lien est la même et je ne la présenterai pas plus tard. Dans ce didacticiel, vos amis peuvent créer leurs propres styles de liens pour définir le statut de survol. Je ne le présenterai plus, entrez simplement [.t1:hover] directement lorsque vous êtes invité à définir la définition.
2. Style de lien principal
Nous compléterons complètement cette partie de l'effet de lien dans la catégorie Type de l'éditeur de style. Je n'entrerai pas dans les détails sur la façon de le créer et de le configurer, je vais seulement vous montrer le diagramme de panneau terminé et vous donner une brève introduction.
1. Lien ordinaire. Comme le montre la figure 6 ;
Les liens ordinaires sont définis dans le premier élément Type de la catégorie Catégorie de l'éditeur de style. Couleur définit la couleur de la police du lien et Décoration définit le style de soulignement du lien, qui est divisé dans les catégories suivantes :
souligner : souligner surligner : surligner line-through : barré clignoter : ligne clignotante aucun : pas de soulignement
Plusieurs autres styles de liens dans cette section sont obtenus en modifiant la combinaison des traits.
2. Aucun lien souligné, comme le montre la figure 7 ;
3. Lien double souligné, comme le montre la figure 8 ;
4. Liens barrés, comme le montre la figure 9 ;
3. Styles de liens avancés
Ensuite, je présenterai une méthode alternative de définition de style de lien. Cette méthode utilise principalement l'attribut Border dans la feuille de style pour remplacer le soulignement des liens ordinaires. Étant donné que Border a plus de paramètres de contrôle et de styles, certaines fonctions spéciales peuvent être implémentées. Jetons un coup d'œil au panneau ci-dessous, comme le montre la figure 10 ;
L'option Bordure comprend trois parties : Largeur (largeur de ligne), Couleur (couleur de ligne) et Style (type de ligne), et chaque partie peut définir différents paramètres pour différentes bordures. Il s'agit d'un effet de ligne impossible courant.
Rappelons qu'il existe une condition nécessaire pour utiliser cette méthode pour définir les styles de liens : l'attribut Box dans le style doit être défini, comme le montre la figure 11 ;
En effet, Border est un élément de bloc dans le style et nous devons d'abord définir un élément de bloc avant que Border puisse fonctionner. Il suffit de définir arbitrairement l'option Largeur ou Hauteur dans la boîte. Vous pouvez essayer les valeurs spécifiques pour voir l'effet. J'ai défini la hauteur sur 0 ici. Voyons quels types d'effets peuvent être obtenus.
1. Styles de liens alternatifs. Les paramètres sont comme indiqué sur la figure 12 ;
2. Personnalisez la couleur de soulignement. Nous pouvons définir une couleur différente pour le soulignement et le texte. C'est un effet impossible à obtenir avec un texte de lien ordinaire tant que la couleur de la bordure et la couleur du texte sont définies. différemment, comme le montre la figure 13 ;
3. Personnalisez la distance de soulignement. Nous pouvons définir la distance de ce type de ligne dans la catégorie Boîte en modifiant la valeur de Padding. Dans cet exemple, nous définissons Padding—Bottom sur 5pix, comme le montre la figure 14 ;
4. Personnalisez la longueur et l'alignement du traçage. De plus, nous pouvons également définir avec précision la longueur et l'alignement des lignes. Ouvrez la catégorie Boîte et définissez la largeur sur 200, comme le montre la figure 15. Définissez l'alignement du texte de la catégorie Bloc sur Centre, ce qui correspond à l'alignement central, comme indiqué. sur la figure 16 ;
5. Personnalisez l'effet de double soulignement. Modifiez le style dans Bordure pour modifier l'apparence du soulignement. Définissez le style sur Double et le bas sur 3 pixels pour obtenir un effet de double soulignement. Comme le montre la figure 17 ;
4. Styles de liens avancés
En combinant les techniques présentées ci-dessus, nous pouvons également créer des styles de liens de texte plus complexes. Nous présentons ci-dessous trois exemples.
1. Définissez les liens de bloc. Ajoutez d’abord une couleur d’arrière-plan au lien, comme le montre la figure 18 ;
Ajoutez ensuite quatre bordures au lien texte pour obtenir un lien texte en bloc plat, comme le montre la figure 19 ;
2. Définissez des liens texte en forme de bouton. Modifiez le style de la bordure et définissez Border-Style dès le départ, comme le montre la figure 20 ;
Définissez l'option Largeur et hauteur dans la boîte pour définir la largeur et la hauteur du bouton. Définissez le remplissage sur 2 pixels pour créer un espacement de 2 pixels entre le texte du lien et le bouton, comme indiqué dans la figure 21 ;
3. Définissez des liens de texte à effets spéciaux. La feuille de style CSS contient également un ensemble de filtres d'effets spéciaux. Nous pouvons combiner les filtres avec les paramètres précédents pour créer des styles de liens spéciaux. Dans cet exemple j'ai créé un lien texte en utilisant le filtre Flou, avec un effet de bordure. Comme le montre la figure 22 ;
4. Définissez l'effet de la commutation d'arrière-plan statique. Cet exemple consiste à obtenir l'effet de changement d'arrière-plan en définissant différentes images d'arrière-plan pour l'état normal et l'état de survol du texte du lien. Voir photo ci-dessous :
5. L'effet de la commutation dynamique d'arrière-plan. Cet effet est fondamentalement le même que l'exemple ci-dessus, sauf qu'un arrière-plan d'image Gif dynamique est défini dans l'état Survol. Et cette image nécessite un peu de compétence, qui consiste à régler la boucle sur une fois, à ajouter une image à la fin et à définir la durée de l'image sur une valeur plus grande, par exemple 10 000. Cela permet à l'animation de s'exécuter d'un côté puis de s'arrêter. Afin d'améliorer la vitesse d'exécution des effets, nous devons également ajouter un comportement Preload /doc/webpage/images/images dans Dreamweaver. Cela nécessite d'ouvrir le panneau de comportement et d'ajouter le comportement Preload /doc/webpage/images/images, comme indiqué dans la figure :
Nous pouvons précharger les quatre images requises pour les deux derniers styles de lien, comme indiqué ci-dessous :
5. Résumé
Je vais présenter de nombreux styles de liens et, en définissant le statut de survol du texte du lien, vous pouvez obtenir de très beaux effets. Veuillez consulter ici pour une navigation de page spécifique. J'espère que vos amis pourront créer plus de texte de lien basé sur ce qui précède. idées. N'oubliez pas qu'une feuille de style est comme un iceberg contenant des trésors dans la production de pages Web. Aujourd'hui, nous n'avons découvert qu'une petite partie de l'iceberg. D'autres trésors vous attendent.