Unterstrich definieren

[Klaus]

Hallo,

ist es mit CSS möglich, einen unterstrich (wie z.B. bei einem Hyperlink) zu erzeugen, ohne im HTML-Code <u></u> hineinzuschreibe?

Also etwa so:

HTML
<a class="bg" href="http://de.selfhtml.org">SelfHTML</a>

CSS:
.bg{ unterstrich }

Gruß
Klaus

[Bla]

ist es mit CSS möglich, einen unterstrich (wie z.B. bei einem Hyperlink) zu erzeugen, ohne im HTML-Code <u></u> hineinzuschreibe?

HTML
<a class="bg" href="http://de.selfhtml.org">SelfHTML</a>

CSS:
.bg{ unterstrich }

Du hättest nur einen einzigen Blick in das Inhaltsverzeichnis des CSS-Standards werfen brauchen (für Ungeduldige auch mit der Textsuche des Browsers), um dir diese Frage selbst zu beantworten.

[D.R.]

Hallo,

ist es mit CSS möglich, einen unterstrich (wie z.B. bei einem Hyperlink) zu erzeugen, ohne im HTML-Code <u></u> hineinzuschreibe?

Klar!

Also etwa so:

HTML
<a class="bg" href="http://de.selfhtml.org">SelfHTML</a>

CSS:
.bg{ unterstrich }

Siehe http://de.selfhtml.org/css/eigenschaften/schrift.htm#text_decoration@title=text-decoration

mfg. Daniel

[wucher wichtel]

Hallo!

ist es mit CSS möglich, einen unterstrich (wie z.B. bei einem Hyperlink) zu erzeugen, ohne im HTML-Code <u></u> hineinzuschreibe?

Du suchst text-decoration:underline. Du könntest aber auch mit border arbeiten. Das ist dann sinnvoll, wenn du Angaben machen willst, die mit text-decoration nicht gehen, wie z.B. Farbe oder Dicke des Unterstriches.

ciao, ww

[Klaus]

Hi,

text-decoration:underline. border

irgendwie werden beide Befehle bei <a href="..." class="hyper">gfgndsuing</a> nicht beachtet. Das einzige was geht ist background-color.
Warum? Was kann ich tun?

Gruß
Klaus

[rob]

Hi!

irgendwie werden beide Befehle

Beides sind keine Befehle, sondern Regeln, die sich aus Selektor und Eigenschaft zusammensetzen.

bei <a href="..." class="hyper">gfgndsuing</a> nicht beachtet.
Warum?

Woher soll das jemand wissen?

Was kann ich tun?

Poste deinen Code.

Schöner Gruß,
rob

[Klaus]

Hi,

Poste deinen Code.

<a href="http://www.bla.de" class="hyperlink">bla</a>

.hyperlink{
  border-bottom:1px sloid #0000FF;
}

Gruß
Klaus

[D.R.]

Hallo,

Poste deinen Code.

<a href="http://www.bla.de" class="hyperlink">bla</a>

.hyperlink{
  border-bottom:1px sloid #0000FF;
}

„sloid“ ist kein korrekter Rahmentyp. Vermutlich meinst du „solid“. Korrigiere das, dann sollte es funktionieren.

mfg. Daniel

[Klaus]

Hi,

danke, jetzt klappts.

schönen Abend noch.

Gruß
klaus

[Klaus]

Hallo,

hab doch noch gerade ein Problem festgestellt:

color:#0000FF;

Wird nicht beachtet.

.hyperlink{
  color:#0000FF;
  border-bottom:1px solid #0000FF;
}

Warum? Was kann ich tun?

Gruß
Klaus

[D.R.]

Hallo,

hab doch noch gerade ein Problem festgestellt:

color:#0000FF;

Wird nicht beachtet.

.hyperlink{
  color:#0000FF;
  border-bottom:1px solid #0000FF;
}

Sieht korrekt aus.

Warum? Was kann ich tun?

Was erwartest du? Der Farbcode „#0000FF“ ergibt blau, was in den meisten Browsern die Voreinstellung ist und somit keine großen Veränderungen mit sich bringen sollte. Wie wird der Link bei dir dargestellt?

mfg. Daniel

[Klaus]

Hallo Daniel,

Was erwartest du? Der Farbcode „#0000FF“ ergibt blau, was in den meisten Browsern die Voreinstellung ist und somit keine großen Veränderungen mit sich bringen sollte. Wie wird der Link bei dir dargestellt?

es sollte eigentlich Blau sein, jedoch wird es schwarz angezeigt.

Gruß
Klaus

[Klaus]

Hi Daniel,

noch was vergessen: Kann es sein, dass es daran liegt:

a:link{
  font-family:Arial;
  color:#000000;
  text-decoration:none;
}
a:visited{
  font-family:Arial;
  color:#000000;
  text-decoration:none;
}
a:hover{
  font-family:Arial;
  color:#000000;
  text-decoration:none;
}
a:active{
  font-family:Arial;
  color:#000000;
  text-decoration:none;
}

Das muss aber so sein, da ich standartmäßig alle <a>-Felder mit keiner Makierung haben will. Nur wenn dann class="hyperlink" da steht.

Gruß
Klaus

[Jonathan]

Hallo,

Das muss aber so sein, da ich standartmäßig alle <a>-Felder mit keiner Makierung haben will. Nur wenn dann class="hyperlink" da steht.

Liegt vielleicht an der Spezifität.

versuch mal
a.hyperlink{color:#00f}
,
a.hyperlink:link,a.hyperlink:visited{color:#00f}
oder notfalls
.hyperlink{color:#00f !important}

Jonathan

[Klaus]

Hi,

Liegt vielleicht an der Spezifität.

versuch mal
a.hyperlink{color:#00f}
,
a.hyperlink:link,a.hyperlink:visited{color:#00f}

Perfekt, funktioniert.

Schönen Abend noch.

Gruß
Klaus

[D.R.]

Hallo,

noch was vergessen: Kann es sein, dass es daran liegt:

a:link{
  font-family:Arial;
  color:#000000;
  text-decoration:none;
}
a:visited{
  font-family:Arial;
  color:#000000;
  text-decoration:none;
}
a:hover{
  font-family:Arial;
  color:#000000;
  text-decoration:none;
}
a:active{
  font-family:Arial;
  color:#000000;
  text-decoration:none;
}

Ja. CSS-Pseudoklassen haben eine höhere Gewichtung als HTML-Klassen. Am besten wäre es, diese Angaben also einfach zusammenzufassen:

a {  
  font-family:Arial;  
  color:#000000;  
  text-decoration:none;  
}

Das hat die gleiche Wirkung, aber eine geringere Gewichtung. Willst du nun doch mal für einen bestimmten Zustand eine andere Formatierung verwenden, kannst du die Regel einfach überschreiben z.B:

a:hover {text-decoration:underline;}

Das würde zwar wieder deine Klassenspezifische Formatierung überschreiben, aber ist auch nicht allzu schwer zu verhindern:

a.foo:hover {color: #00f;}

Alternativ könnte man die Spezifität auch durch Selektoren für Verschachtelte Elemente künstlich erhöhen:

body a.foo {color: #00f;}

Das muss aber so sein, da ich standartmäßig alle <a>-Felder mit keiner Makierung haben will. Nur wenn dann class="hyperlink" da steht.

Für welchen Zweck verwendest du das a-Element denn noch? Eigentlich braucht man es doch nur noch für Links…

mfg. Daniel

[MudGuard]

Hi,

Ja. CSS-Pseudoklassen haben eine höhere Gewichtung als HTML-Klassen.

Falsch.
Pseudoklassen haben dieselbe Specificity wie Klassen.

Aber:
Pseudoklasse plus Elementname hat eine höhere Specificity als nur Klasse.

cu,
Andreas