Das HTML <span> Tag

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Das HTML <span> Tag

Ungelesener Beitrag von Tommy Herrmann »

Das HTML <span> Tag </span> dient also z.B. dazu, einen Spannbereich innerhalb eines Textes, wie z.B. innerhalb eines <p> Tags </p>, eine andere Erscheinung zu geben. Das kann z.B. eine andere Farbe mittels einer Class oder auch einer direkte Style-Anweisung sein:

https://www.w3schools.com/tags/tag_span.asp

Das kann, gerade mit Mobirise, sehr wichtig sein, denn Mobirise ändert nur immer ganze Text-Bereiche von Anfang bis Ende eines HTML-Tags in z.B. der Farbe.
<p>Meine Mutter hat <span style="color: blue;">blaue</span> Augen.</p>
Man kann also über den "Code Editor", an beliebiger Stelle, so bestimmten Texten ein anderes Format oder auch eine eigene ID geben.

Da das <span> Tag ein inline Block Element ist, kommt es zu keinem Umbruch, wie z.B. bei einem <div> oder <p> Tag.



Weiterhin kann man z.B. Mobirise-Icons so einfügen, wie z.B. dieses "Link Icon":
Icon-Beispiel.JPG
Icon-Beispiel.JPG (9.46 KiB) 3429 mal betrachtet

Code: Alles auswählen

<a href="https://www.mobirise-tutorials.com/" class="text-primary" target="_blank">Zu meiner Mobirise Seite <span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span></a>
Jedes der Tausenden von Icons hat seine eigene CSS-Class, wie dieses z.B. die class="fa-external-link".

Da man diese vielen Klassen-Namen ja nicht auswendig wissen kann, erstelle ich so ein Icon über den Icon-Editor von Mobirise an einer dafür vorgesehen Stelle, wie z.B. einem Button, und kopiere mir dann das Span-Tag aus dem "Code Editor" für den Gebrauch an z.B. meinen Link, wie in diesem Beispiel oben dargestellt.
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 7 Gäste