Es gibt immer wieder HTML Tags die sind fast unbekannt für die meisten Webentwickler. Entweder weil sie seit Urzeiten funktionieren oder weil sie eher zu den neueren Entwicklungen gehören. Ja, denn auch HTML wird dauernd weiter entwickelt wie auch CSS und alle anderen Programmiersprachen.
Heut möchte ich euch ein sehr praktisches Urgestein erklären, damit kann man nämlich sehr spannendes machen. So kann man mit dem ABBR Tag kleine Erklärungen machen. Ihr könnt so Wörter direkt erklären und müsst nicht gleich ein Glossar führen.
Video
HTML
1 | Ich bin <abbr title="Verfasser von Blog-Beiträgen">Blogger</abbr> aus der Schweiz |
CSS
Einfärben
Man kann natürlich einfach den Inhalt des ABBR Tags einfärben, dafür verwendet man das hier
1 2 3 | abbr {
color: red;
} |
Will man aber auch das PopUp Stylen kann man das hier verwenden
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | abbr { color: red; }
abbr[title] {
position: relative;
/* ensure consistent styling across browsers */
text-decoration: underline double;
}
abbr[title]:hover::after,
abbr[title]:focus::after {
content: attr(title);
/* position tooltip like the native one */
position: absolute;
left: 0;
bottom: -30px;
width: auto;
white-space: nowrap;
/* style tooltip */
background-color: #1e1e1e;
color: #fff;
border-radius: 3px;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
font-size: 25px;
padding: 3px 5px;
} |
Guten Tag,
Ich finde dein Kommentar sehr hilfreich.
Nun aber habe ich eine Frage.
Wenn ich den Text von „PopUp Stylen“ kopiere und es in meiner html Seite einfüge, den erscheint das neue PopUp im neuen Style. Jedoch erscheint ebenso das PopUp, welches nicht im neuen Style ist. Also habe ich zwei PopUp. Wie ist es möglich, dass nur das PopUp im selber gemachten Style, also gemäss deinem Text, erscheint. Lässt sich das automatische PopUp unterdrücken?
Danke für die Antwort.
Freundlich grüsst
Kurt