1. Buchstabe anders

WaZZkeSS

WaZZkeSS

Erfahrenes Mitglied
Hallo allerseits,

ich würde gerne bei allen Links (<a href) und/oder bei manchen Titeln bzw. Übeschriften die erste Buchstabe in iner anderen Frabe und/oder Fett usw. einstellen.

Wie kann man das realiseren? Wäre für jede hilfe eh sehr dankbar.


Lg
WaZZ
 
Das kann man mit classen machen:

Code: 
.link1 {font-family: Arial; font-size: 10pt; font-color: #ff0000; font-weight: bold;}
.link1 {font-family: Arial; font-size: 10pt; font-color: #000000; font-weight: normal;}

HTML: 
<a href="link-zur-seite.html" alt="Link zur Seite"><span class="Link1">L</span><span class="Link2">ink zur Seite</span></a>

Oder mit dem first-letter:

Code: 
.link {font-family: Arial; font-size: 10pt; font-color: #000000; font-weight: normal;}
.link:first-letter {font-family: Arial; font-size: 10pt; font-color: #ff0000; font-weight: bold;}

HTML: 
<a href="link-zur-seite.html" alt="Link zur Seite"><span class="Link">Link zur Seite</span></a>
 
Zuletzt bearbeitet:
Hallo,
danke vorerst für eure Hilfe, hat super funktioniert.
Allerdings hätte ich noch eine Frage.

Wie kann ich das machen das beim Hover das umgeehrt aussieht. Bsp:
Link = Demo
Hover = Demo


Habe es beretsmit
a:link und
a:link:first-letter
probiert jedoch ohne Erfolg.

Danke und Lg
 
WIE HAST DU ES DENN GEMACHT?


Hallo, das a:link atribut hat nicht mit dem hover zu tun. das a steht für active.

Damit eine hover effekt ensteht, musst du des so machen:

Code: 
.link {font-family: Arial; font-size: 10pt; font-color: #000000; font-weight: normal;}
.link:first-letter {font-family: Arial; font-size: 10pt; font-color: #ff0000; font-weight: bold;}
.link:hover {font-family: Arial; font-size: 10pt; font-color: #ff0000; font-weight: bold;}
.link:hover:first-letter {font-family: Arial; font-size: 10pt; font-color: #000000; font-weight: normal;}

So müsste es gehen.

!Achtung, nicht getestet!
 
Zuletzt bearbeitet:
WaZZkeSS hat gesagt.:
ich würde gerne bei allen Links (<a href) und/oder bei manchen Titeln bzw. Übeschriften die erste Buchstabe in iner anderen Frabe und/oder Fett usw. einstellen.

Wie kann man das realiseren? Wäre für jede hilfe eh sehr dankbar.
Zum Vergrößern anklicken....
Wie sich das erste enthaltene Zeichen innerhalb eines Elements formatieren lässt, wurde hier erst vorgestern erfragt, und findet sich in der Themenübersicht nur wenige Zeilen unter deinem Eintrag.

>> Justify, Abstand und 1.Buchstabe gross

Momo95 hat gesagt.:
Das kann man mit classen machen:

Code: 
.link1 {font-family: Arial; font-size: 10pt; font-color: #ff0000; font-weight: bold;}
.link1 {font-family: Arial; font-size: 10pt; font-color: #000000; font-weight: normal;}

HTML: 
<a href="link-zur-seite.html" alt="Link zur Seite"><span class="Link1">L</span><span class="Link2">ink zur Seite</span></a>

Oder mit dem first-letter:

Code: 
.link {font-family: Arial; font-size: 10pt; font-color: #000000; font-weight: normal;}
.link:first-letter {font-family: Arial; font-size: 10pt; font-color: #ff0000; font-weight: bold;}

HTML: 
<a href="link-zur-seite.html" alt="Link zur Seite"><span class="Link">Link zur Seite</span></a>
Zum Vergrößern anklicken....

Dir ist wohl nicht bekannt, dass CSS, wie auch JS, strikt zwischen der Groß- und Kleinschreibung unterscheidet?

  1. link1 != Link1
  2. link != Link
Folglich greift hier keine deiner CSS-Regeln im HTML-Doc.

Momo95 hat gesagt.:
das a:link atribut hat nicht mit dem hover zu tun. das a steht für active.
Zum Vergrößern anklicken....
Falsch. "a" steht in diesem Selektor für den Elementnamen, gefolgt von der :link-Pseudoklasse.

>> Pseudoelemente und Pseudoklassen
 
Zuletzt bearbeitet:
Hallo Momo,
danke vorerst für deine Antwort. Allerdings funktioniert das noch immer nicht.

Ich habe zu Testzwecken eine leere Seite mit einem Link erstellt
Code: 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>    
    <div><a href="Test">hier klicken</a></div>
</body>
</html>

Die CSS-Datei beinhaltet folgende Zeilen:
Code: 
a:link			{ font-size:12px; font-weight:normal; color:rgb(255, 255, 255); text-align:right; text-decoration:none; }
a:link:first-letter	{ font-size:12px; font-weight:normal; color:rgb(0, 173, 238); text-align:right; text-decoration:none; }
a:visited		{ font-size:12px; font-weight:normal; color:rgb(255, 255, 255); text-align:right; text-decoration:none; }
a:hover			{ font-size:12px; font-weight:normal; color:rgb(0, 173, 238); text-align:right; text-decoration:none; }
a:hover:first-letter 	{ font-size:12px; font-weight:normal; color:rgb(255, 255, 255); text-align:right; text-decoration:none; }
a:active		{ font-size:12px; font-weight:bold; color:rgb(255, 255, 255); text-align:right; text-decoration:none; }
a:focus			{ font-size:12px; font-weight:bold; color:rgb(0, 173, 238); text-align:right; text-decoration:none; }
ich muss allerding gestehen das ich für die anderen Pseudoklasse (visited, active und focuis) ebenfalls first-letter verwendet habe.

Lg
WaZZ
 
Erläuterung:

[...] Die hier beschriebenen Pseudoelemente und Pseudoklassen sind für typische Absatz- oder Überschriftenelemente in HTML gedacht.
Zum Vergrößern anklicken....

Ergo fehlt dem Inline-Element <a> bislang "Block-Level-Charakteristika", die es mit display:block erhält.

Das CSS lässt sich zudem zusammenfassen.

CSS: 
a:link, a:visited  { display:block; font-size:12px; font-weight:normal; color:rgb(255, 255, 255); text-align:right; text-decoration:none; }
a:link:first-letter, a:visited:first-letter { color:rgb(0, 173, 238); }
a:focus  { font-weight:bold; color:rgb(0, 173, 238); }
a:hover  { color:rgb(0, 173, 238); }
a:hover:first-letter { color:rgb(255, 255, 255); }
a:active  { color:rgb(255, 255, 255); }
 
Zuletzt bearbeitet:
Hallo,
leider funktioniert es nicht. Der Hover-Effekt funktioniert aber der "Link" Zustand funktioniert nicht. Ich habe die html und die css Datei im Anhang hinzugefügt.


Lg
WaZZ
 

Anhänge

Zuletzt bearbeitet:
WaZZkeSS hat gesagt.:
leider funktioniert es nicht. Der Hover-Effekt funktioniert aber der "Link" Zustand funktioniert nicht.
Zum Vergrößern anklicken....
Dass :focus und :active hier nicht greifen, liegt schlichtweg an deiner falsch benannten Reihenfolge der Pseudoklassen, der ich letztens keine nähere Beachtung geschenkt hatte.

Beachten Sie:

Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die Reihenfolge des Beispiels einhalten.
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück