# 1. Buchstabe anders



## WaZZkeSS (15. Februar 2011)

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


----------



## tombe (15. Februar 2011)

Mit dem "first-letter" Attribut sollte das zu lösen sein.


----------



## Momo95 (15. Februar 2011)

Das kann man mit classen machen:


```
.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;}
```


```
<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:


```
.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;}
```


```
<a href="link-zur-seite.html" alt="Link zur Seite"><span class="Link">Link zur Seite</span></a>
```


----------



## WaZZkeSS (15. Februar 2011)

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


----------



## Momo95 (15. Februar 2011)

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:


```
.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!


----------



## SpiceLab (15. Februar 2011)

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.


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:
> 
> 
> ```
> ...


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


link1 != Link1

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.


Falsch. "a" steht in diesem Selektor für den Elementnamen, gefolgt von der :link-Pseudoklasse.

>> Pseudoelemente und Pseudoklassen


----------



## WaZZkeSS (16. Februar 2011)

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

```
<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:

```
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


----------



## SpiceLab (17. Februar 2011)

> *Erläuterung:*
> 
> [...] Die hier beschriebenen Pseudoelemente und Pseudoklassen sind für typische Absatz- oder Überschriftenelemente in HTML gedacht.



Zitat-Quelle: :first-child, :first-line, :first-letter (Pseudoklasse und Pseudoelemente für Absätze)

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

Das CSS lässt sich zudem zusammenfassen.


```
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); }
```


----------



## WaZZkeSS (21. Februar 2011)

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


----------



## SpiceLab (21. Februar 2011)

WaZZkeSS hat gesagt.:


> leider funktioniert es nicht. Der Hover-Effekt funktioniert aber der "Link" Zustand funktioniert nicht.


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.


----------



## WaZZkeSS (22. Februar 2011)

Hallo S.
Danke dir für den Tipp. Jetzt funktioniert es endlich. 
Ausser auf IE7. da wollte ich noch wissen ob man was zusätzlich noch beachten muss.

Ich hae irgendow mal gelesen das der DocType-Tag fürIEx auch wichtig ist
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Aber anscheinend liegt es nicht daran.

Wäre sehr dankbar für Ratscläge Tipps uws.

Dnke und Lg
WaZZ


----------

