Eine Website ohne Visuals ist langweilig, auch wenn sie ein gutes Design hat, würden die meisten von uns wahrscheinlich eine Website mit vielen Grafiken bevorzugen. Warum passiert das? Bilder sind eine schnelle und einfache Möglichkeit, das Benutzererlebnis Ihrer Website zu verbessern. 90 % der Informationen, die wir wahrnehmen und an unser Gehirn senden, sind visueller Natur. Mit Bildern können Sie Aufmerksamkeit erregen und die Aufmerksamkeit Ihrer Besucher neu lenken.
Sie können bei der Übermittlung wichtiger Informationen sehr hilfreich sein. Bilder sind ein fantastischer emotionaler Auslöser, den Sie nutzen können, um Ihre Besucher zu fesseln und sie dazu zu bringen, Ihre Inhalte zu lesen.
MitCSS können wir diese Bilder formatieren und positionieren, um fantastische visuelle Effekte zu erzielen. Wenn wir ein Bild als Hyperlink verwenden, wird es in einigen alten Browsern standardmäßig mit einem blauen Rand angezeigt. In diesem Artikel besprechen wir, wie Sie mithilfe von CSS den blauen Rand um ein verlinktes Bild ändern oder entfernen.
Linkbilder sind Bilder, die Webseiten hinzugefügt werden und als Hyperlinks dienen. Um einen Hyperlink zu erstellen, müssen wir ein Bild innerhalb des -Elements hinzufügen. Lassen Sie uns ein einfaches Hyperlink-Bild in einer HTML-Seite erstellen.
Wenn Sie mit einer älteren Version des Browsers (z. B. Internet Explorer 6-8, Firefox 7 usw.) ein Bild als Hyperlink hinzufügen, wird standardmäßig ein blauer Rahmen um das Bild angezeigt. Dies ähnelt dem Effekt, der durch Hyperlink-Text erzielt wird. Standardmäßig ist der Hyperlink-Text blau unterstrichen und die Schriftfarbe wird beim Mouseover hervorgehoben.
Lassen Sie uns mit Internet Explorer 6 ein Bild als Hyperlink hinzufügen.
<!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>
HINWEIS – Führen Sie dieses Programm in Internet Explorer 6 aus, sonst wird der standardmäßige blaue Rahmen nicht angezeigt, wenn Sie einen anderen modernen Browser verwenden.
Dieses Standardverhalten kann mit zwei Methoden beseitigt werden. Eine Möglichkeit besteht darin, den Rand vollständig aus dem Bild zu entfernen, eine andere Möglichkeit besteht darin, dem Bild einen eigenen Rahmenstil hinzuzufügen. Um alle verlinkten Bilder auszuwählen, verwenden wir CSS-Selektoren.
CSS-Selektoren sind der Anfang von CSS-Regeln. Dabei handelt es sich um eine Folge von Elementen oder anderen Begriffen, die dem Browser mitteilen, welches Element ausgewählt werden muss, damit ein CSS-Eigenschaftswert (in einer Regel angegeben) angewendet werden kann. Mit CSS-Selektoren können Entwickler HTML-Elemente auswählen (oder abgleichen), die Sie auf einer Webseite formatieren möchten.
Es gibt viele Arten von Selektoren. Sie sind wie folgt -
Einfacher Selektor – Er wählt Elemente anhand ihres Namens, ihrer ID und ihrer Klasse aus.
Kombinierter Selektor – Er wählt Elemente anhand von Beziehungen zwischen Elementen aus (z. B. Eltern-Kind-Beziehung).
Pseudo-Element-Selektor – Wählt einen Teil eines Elements aus, z. B. span.
Attribute Selector – Er wählt Elemente anhand ihrer Attribute oder Attributwerte aus.
Universelle CSS-Selektoren
CSS-Sternchen (*) Der Selektor, auch CSS-Universalselektor genannt, wird verwendet, um alle Elemente oder bestimmte Teile von Elementen einer gesamten Webseite auf einmal auszuwählen oder abzugleichen. Nach der Auswahl können Sie beliebige benutzerdefinierte CSS-Eigenschaften verwenden, um sie entsprechend zu formatieren. Es passt zu allen Arten von HTML-Elementen wie , ,
*{
Css declarations;
}
Grammatik
parent child{
css declarations;
}
border: none mit der CSS-Eltern-Kind-Auswahl schreiben, wie unten gezeigt -
a img{
border: none;
}
<!DOCTYPE html>
<html>
<head>
<title>No border linked image</title>
<style>
*{
margin: 10px;
padding: 5px;
letter-spacing: 1px;
}
h1{
color: green;
text-decoration: underline;
}
a img{
max-width: 50%;
height: 10%;
border: none;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Linked Images </h2>
<a href= "https://www.tutorialspoint.com/"> <img src= "https://www.tutorialspoint.com/images/logo.png" alt= "Tutorialspoint"> </a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> No border linked image </title>
<style>
*{
margin: 10px;
padding: 5px;
letter-spacing: 1px;
}
h1{
color: green;
text-decoration: underline;
}
a img{
max-width: 50%;
height: 10%;
border: 4px dotted orange;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Linked Images </h2>
<a href= "https://www.tutorialspoint.com/index.htm/"> <img src= "https://www.tutorialspoint.com/images/logo.png" alt= "Tutorialspoint"> </a>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS den blauen Rand um ein verlinktes Bild entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
