Comment puis-je supprimer la bordure bleue autour d'une image liée en utilisant CSS ?-tutoriel CSS-php.cn

Comment puis-je supprimer la bordure bleue autour d'une image liée en utilisant CSS ?

WBOY

Libérer： 2023-08-27 17:13:11

avant

1647 Les gens l'ont consulté

如何使用 CSS 消除链接图像周围的蓝色边框？

Un site Web sans visuels est ennuyeux, même s'il a un bon design, la plupart d'entre nous préféreraient probablement un site Web avec beaucoup de graphiques. Pourquoi cela se produit-il ? Les images sont un moyen simple et rapide d’améliorer l’expérience utilisateur de votre site Web. 90 % des informations que nous percevons et envoyons à notre cerveau sont visuelles. Vous pouvez utiliser des images pour attirer l’attention et recentrer l’attention de vos visiteurs.

Ils peuvent être très utiles pour transmettre des informations importantes. Les images sont un fantastique déclencheur émotionnel que vous pouvez utiliser pour engager vos visiteurs et les inciter à lire votre contenu.

CSS nous permet de styliser et de positionner ces images pour créer des effets visuels fantastiques. Lorsque nous utilisons une image comme lien hypertexte, certains anciens navigateurs l'affichent avec une bordure bleue par défaut. Dans cet article, nous verrons comment modifier ou éliminer la bordure bleue autour d'une image liée à l'aide de CSS.

Qu'est-ce qu'une image de lien ?

Les images de liens sont des images ajoutées aux pages Web qui servent de liens hypertexte. Afin de créer un lien hypertexte, nous devons ajouter une image à l'intérieur de l'élément . Créons une simple image de lien hypertexte dans une page HTML.

Ajouter des images liées à l'aide d'anciens navigateurs

Si vous ajoutez une image comme lien hypertexte à l'aide d'une ancienne version du navigateur (par exemple Internet Explorer 6-8, Firefox 7, etc.), une bordure bleue apparaîtra par défaut autour de l'image. Ceci est similaire à l’effet donné au texte d’un lien hypertexte. Par défaut, le texte du lien hypertexte est souligné en bleu et la couleur de la police est mise en évidence au survol de la souris.

Exemple

Ajoutons une image comme lien hypertexte à l'aide d'Internet Explorer 6.

<!DOCTYPE html>
<html>
<head>
   <title> Linked Images </title>
   <style>
      *{
         margin: 10px;
         padding: 5px;
         letter-spacing: 1px;
      }
      h1{
         color: green;
         text-decoration: underline;
      }
      img{
         max-width: 50%;
         height: 10%;
      }
   </style>
</head>
<body>
   <h1> Tutorialspoint </h1>
   <h2> Linked Images </h2>
   <a href= "https://www.tutorialspoint.com/"> <img src= "https://www.tutorialspoint.com/static/images/logo-color.png" alt= "tutorialspoint"> </a>
</body>
</html>

Copier après la connexion

REMARQUE - Exécutez ce programme dans Internet Explorer 6, sinon vous ne verrez pas la bordure bleue par défaut si vous utilisez un autre navigateur moderne.

Comment éliminer le comportement par défaut des images hyperliées ?

Ce comportement par défaut peut être éliminé en utilisant deux méthodes. Une solution consiste à supprimer complètement la bordure de l’image, une autre consiste à ajouter votre propre style de bordure à l’image. Pour sélectionner toutes les images hyperliées, nous utiliserons des sélecteurs CSS.

Sélecteur CSS

Les

Sélecteurs CSS sont le début des règles CSS. Il s'agit d'une séquence d'éléments ou d'autres termes utilisés pour indiquer au navigateur quel élément doit être sélectionné pour qu'une valeur de propriété CSS (spécifiée dans une règle) puisse être appliquée. Les sélecteurs CSS permettent aux développeurs de sélectionner (ou de faire correspondre) les éléments HTML que vous souhaitez styliser dans une page Web.

Il existe de nombreux types de sélecteurs. Ils sont les suivants -

Sélecteur simple – Il sélectionne les éléments en utilisant leur nom, leur identifiant, leur classe.
Sélecteur combiné – Il sélectionne les éléments en utilisant les relations entre les éléments (par exemple, la relation parent-enfant).
Sélecteur de pseudo-éléments – Il sélectionne une partie d'un élément, telle que la durée.
Sélecteur d'attributs – Il sélectionne les éléments en utilisant leurs attributs ou leurs valeurs d'attribut.

Quelques exemples de sélecteurs CSS sont le sélecteur d'élément CSS, le sélecteur de groupe CSS, le sélecteur d'identifiant CSS, le sélecteur universel CSS, etc.,

Sélecteurs CSS universels

Astérisque CSS (*) Le sélecteur, également connu sous le nom de sélecteur universel CSS, est utilisé pour sélectionner ou faire correspondre tous les éléments ou certaines parties d'éléments d'une page Web entière à la fois. Une fois sélectionné, vous pouvez utiliser n'importe quelle propriété personnalisée CSS pour les styliser en conséquence. Il correspond à tout type d'élément HTML comme ,