CSS et HTML sont combinés pour concevoir un site Web en créant le contenu HTML et en leur ajoutant du style. CSS permet à plusieurs styles de contenu HTML. L'un d'eux est d'appliquer l'effet décoratif. Cet effet est principalement pour l'élément texte. Un texte HTML simple est utilisé dans les titres, les paragraphes, les listes et les liens également. Les effets appliqués par la propriété textuelle du CSS décorent les propriétés audacieuses, en italique et soulignement. Dans cet article, nous parlerons de la façon dont nous pouvons supprimer la propriété souligne du texte utilisé dans les liens. Le contenu de liaison contient l'effet de soulignement par défaut.
Lien html:
Un lien est le contenu HTML qui est utilisé lorsqu'il est nécessaire de fixer deux pages Web ou plus. Si nous voulons donner l'adresse d'une autre page Web ou un site Web sur notre page par défaut, nous utilisons le «lien» pour créer un lien entre les pages. À cet effet, la balise d'ancrage HTML est utilisée.
La propriété soulignée est de rendre le texte du lien mis en évidence. Cette fonctionnalité soulignée est intégrée lorsque nous arrivons aux liens.
Exemple 1: Utilisation de la propriété de décoration de texte:
Surtout, nous rencontrons les sites Web où les liens intégrés dans les pages Web sont soulignés. Nous avons donc utilisé un exemple simple dans lequel nous utiliserons un lien original avec un effet souligné et le même lien sans la propriété soulignée de CSS. Cela se fait via la propriété textuelle-décoration.
Propriété de décoration de texte:
Une propriété CSS est appliquée au contenu HTML pour les décorer. Ces effets de décoration incluent la couleur du texte, l'effet soulevé, audacieux, italique, alignement et de nombreuses autres propriétés.
La syntaxe de base de cette propriété est:
1 | Décoration du texte: valeur; // Valeur de type de décoration |
Mais dans le cas où nous voulons supprimer tous les effets, «aucun» est utilisé au lieu de la valeur.
En venant vers le code, nous avons utilisé un style en ligne pour aligner l'ensemble du contenu HTML que nous mentionnerons dans le corps, au centre de la page Web. Le premier contenu HTML est le titre
1 |
Un autre titre est utilisé qui montrera que le lien mentionné après cette rubrique est celui d'origine avec un effet souligné.
Un lien est toujours créé via une étiquette d'ancrage de HTML. La fonction «HREF» est à référence. C'est la source ou l'adresse de la page Web qui sera ouverte lorsque nous appuyons sur le lien. Comme nous n'ajoutons pas l'adresse, laissez la fonctionnalité être vide pour l'instant.
1 | Cliquez sur moi, link1 |
Après ce lien, nous utiliserons le
Break tag pour créer une ligne vide. Ensuite, une rubrique qui montrera que le lien suivant ne sera pas souligné est déclaré. Une balise d'ancrage est à nouveau utilisée. Mais cette fois, nous avons utilisé l'ID CSS pour que les effets de cet ID appliquaient au lien. Tandis que l'ensemble des fonctionnalités du lien restant seront les mêmes.
1 | Cliquez sur moi, link2 |
Maintenant, nous utiliserons la description du style interne dans la section tête. Après avoir ajouté la balise de titre, nous utiliserons la déclaration de style ayant la description de l'ID que nous avons créé.
Les ID et les classes de CSS internes et externes contiennent les effets qui spécifient uniquement les éléments HTML dans lesquels nous avons utilisé les noms des ID et des classes. Par exemple, la seule classe qui a la propriété de ne pas souligner le texte ne sera appliquée qu'à la balise d'ancrage qui contient le nom de l'ID, déclaré dans la tête.
1 2 3 4 5 | #un Décoration du texte: aucune; |
L'ID contiendra l'effet de décoration de texte ayant la valeur «Aucun». Cette valeur éliminera tous les effets du contenu HTML: facteur de soulignement, gras, italique ou toute couleur qui lui est appliquée.
Maintenant, fermez toutes les balises et enregistrez le fichier avec l'extension HTML pour exécuter le fichier dans le navigateur.
Lors de l'exécution du fichier, vous verrez que deux titres avec deux liens sont affichés sur la page Web. Un lien créé sur des facteurs par défaut sans appliquer l'effet d'ID CSS est souligné. Mais le second est un lien sans soulignement car nous avons supprimé tous les effets via la propriété textuelle.
Exemple 2: Propriété de survol:
Dans cet exemple, une propriété de survol est utilisée pour supprimer l'effet du texte souligné. Hover est l'approche pour naviguer dans la souris vers un lien. Encore une fois, la propriété textuelle-décoration est ajoutée au code, mais cette fois avec l'utilisation de l'effet de survol.
Dans la section corporelle du code, le corps est à nouveau aligné sur le centre en appliquant le CSS en ligne. L'en-tête est utilisé puis une étiquette d'ancrage est appliquée.
1 | < a href = "#"> Salut je suis un lien |
Maintenant, nous utiliserons la description interne CSS du lien. Cette fois, nous avons appliqué des effets directement sur le lien au lieu d'utiliser l'ID CSS. En utilisant l'ancre «A», un effet de liaison et l'effet de survol est appliqué. Pour le «A» en tant que lien, la décoration texte est appliquée avec la valeur de soulignement.
1 2 3 4 5 | un lien Décoration du texte: soulignement; |
Alors que, pour la propriété en survol, nous utiliserons la valeur de la décoration de texte comme «aucune». En faisant cela, chaque fois que la souris se dirige vers le lien, la propriété soulignée sera supprimée.
1 2 3 4 5 | A: Hover Décoration du texte: aucune; |
En appliquant les deux effets, la page sur la charge aura le lien soulignement. Mais en survolant l'effet de soulignement sera supprimé.
Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/07 / css-no-sousline-open-me.MP400: 0000: 0000: 08 Utilisez les touches de flèches UP / Down pour augmenter ou diminuer le volume.La sortie du concept de suppression de l'effet de soulignement est affichée dans la vidéo. Nous avons ajouté une petite section, dans laquelle le lien est créé avec des effets soulignés. Lorsque la souris est en train de naviguer vers le lien, ou lorsque nous planons sur le lien, l'effet souligne du lien est supprimé. Encore une fois, le lien apparaît lorsque la souris s'est éloignée.
De plus, au lieu de liens qui ont le texte souligné par défaut, nous pouvons également souligner n'importe quel texte via la balise HTML souligne .
Conclusion:
L'article «CSS no souligner» est un guide complet pour expliquer l'approche utilisée pour supprimer l'effet souligne du texte ayant déjà la propriété sous la ligne, c'est-à-dire le lien HTML. Nous avons commencé avec une brève introduction aux liens HTML. Deux approches CSS sont utilisées pour expliquer le concept d'élimination des effets soulignés. Le premier est l'utilisation directe de la propriété de décoration texte. Tandis que la deuxième méthodologie comprend l'utilisation d'une propriété de survol qui est indirectement liée à la propriété de décoration pour afficher ou afficher l'effet souligne sur le lien. Ces deux concepts sont expliqués à travers les exemples pour présenter le CSS utilisé pour souligner les propriétés.