Verlinkung

Roadrunner1 · #1 (**permalink**) 23.04.2011, 10:43

Ich habe im CSS für die Verlinkung folgendes eingegeben

CSS
a {font-size:26px; font-weight:bold; color:#0000FF;text-decoration:none;width: 200px;}
a:link {color:#0000FF;text-decoration:none;}
a:visited {color:#666666;text-decoration:none;}
a:active {background-color:#DEC3A9;text-decoration:none;}
a:hover{color: #red;text-decoration:none;}

Dann habe ich im HTML folgendes eingegeben:

<h4><a href="www.google.com">Link</a> </h4>

Nun müsste ich in dieser Datei nochmals eine Verlinkung herstellen, wobei das Layout, insbesondere die Schriftgrösse anders aussehen müsste. Wie macht man das? Schreibe ich im CSS nun statt "a", beispielsweise "a1"?

CSS
a1 {font-size:10px; font-weight:bold; color:#0000FF;text-decoration:none;width: 200px;}
a1:link {color:#0000FF;text-decoration:none;}
a1:visited {color:#666666;text-decoration:none;}
a1:active {background-color:#DEC3A9;text-decoration:none;}
a1:hover{color: #red;text-decoration:none;}

Dann im HTML:
<a1 href="www.google.com">Link</a1>

Aber das klappt so nicht...

Vielen Dank für die Hilfe

take_a_7 · #2 (**permalink**) 23.04.2011, 11:32

Du suchst Klassen oder IDs

gruß,
take

Roadrunner1 · #3 (**permalink**) 23.04.2011, 11:52

Hallo

Das ganze Zeugs hier ist mir ja schon klar.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Pseudoklassen für Verweise</title>
<style type="text/css">
body { font-family:Arial,sans-serif; }
a:link { color:#EE0000; text-decoration:none; font-weight:bold; }
a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; }
a:focus { color:#00AA00; background-color:#FFFF77; font-weight:bold; }
a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }
a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }
</style>
</head>
<body>
<p>
Vermutlich kennen Sie die <a href="../../index.htm">Kapiteleinstiegsseite zu CSS</a><br>
Und wohl auch die <a href="../../../index.htm">Einstiegsseite zu SELFHTML</a><br>
Aber kennen Sie auch die <a href="../../../intro/hypertext/geschichte.htm">Geschichte von Hypertext</a>?<br>
Oder die <a href="../../../xml/regeln/baumstruktur.htm">Baumstruktur einer XML-Datei</a>?
</p>
</body>
</html>

Mein Problem ist, dass ich nun zwei Verlinkungen mit unterschiedlichem Layout habe. Deshalb meine Frage: Wie kann ich eine zweite Verlinkung im CSS erzeugen und auf diese im HTML zugreifen`?

Danke

cebito · #4 (**permalink**) 23.04.2011, 11:58

Beschäftige dich mal mit CSS-Selektoren!

Code:

a{/*spricht alle Links auf der Seite an - allgemeine Styles*/}
h4 a{/*spricht nur Links an, die sich innerhalb einer h4-Überschrift befinden - spezielle Styles*/}

Und benutze bitte demnächst die Codeauszeichnungen des Forums.

take_a_7 · #5 (**permalink**) 23.04.2011, 12:00

Hast du dir meine Links überhaupt durchgelesen? Du selektierst mit CSS Elemente im HTML entweder über den Tag-Namen, über Pseudoklassen (wie :visited für besuchte Links) oder von dir vergebene Klassen und ids.

Klassen vergibst du im HTML so:

HTML-Code:

<a href="#" class="test">Testlink</a>

Alle Elemente mit dieser Klasse kannst du mit CSS dann wie folgt ansprechen:

Code:

.test {color:red;}

oder nur Links mit dieser Klasse:

Code:

a.test {color:red;}

Ids dürfen in deinem Dokument immer nur einmal vorkommen. Ansprechen tust du ein Element mit ID im CSS so:

Code:

#test {color:blue;}

Und vergeben fast genauso wie Klassen:

HTML-Code:

<a href="#" id="test">Test</a>

Das ist Grundlagenwissen!

gruß,
take

Roadrunner1 · #6 (**permalink**) 23.04.2011, 12:19

Danke für die Hilfe

Ich bin aber leider echt Laie da, habe sozusagen keine Ahnung. Trotz der Hilfe kriege ich das nicht hin.

CSS

a {font-size:10px; font-weight:bold; color:#black;text-decoration:none;width: 200px;}
a:link {color:#0000FF;text-decoration:none;}
a:visited {color:#666666;text-decoration:none;}
a:active {background-color:#DEC3A9;text-decoration:none;}
a:hover{color: #red;text-decoration:none;}

a.1 {font-size:18px; font-weight:bold; color:#0000FF;text-decoration:none;width: 200px;}

HTML
Ansprechen von a
<a href="http://google.com">Google</a>

Ansprechen von a.1

Wie muss es nun hier genau lauten?

Borsti · #7 (**permalink**) 23.04.2011, 13:24

du vergibst an alle Elemente erst mal Klassen (rot markiert), so dass es so aussieht:

<a class="link1" href="http://google.com">Google</a>
<a class="link2" href="http://yahoo.com">Yahoo</a>
<a class="link3" href="http://ask.com">Ask</a>

nun kannst du für jedes einzelne a-Element das CSS genau definieren:

Z.B. für den Google Link der die Klasse link1 besitzt:
a.link1 {font-size:10px; font-weight:bold; color:#black;text-decoration:none;width: 200px;}
a.link1:link {color:#0000FF;text-decoration:none;}
a.link1:visited {color:#666666;text-decoration:none;}
a.link1:active {background-color:#DEC3A9;text-decoration:none;}
a.link1:hover{color: #red;text-decoration:none;}

Dann geht's zum nächsten Link Yahoo, mit der Klasse link2

a.link2 {font-size:10px; font-weight:bold; color:#black;text-decoration:none;width: 200px;}
.......

und so geht's immer weiter

cebito · #8 (**permalink**) 23.04.2011, 13:44

Hier sind weder Klassen noch ID's notwendig. Ihr solltet euch echt mal alle mit den Möglichkeiten auseinandersetzen, die CSS-Selektoren bieten. Spart jede Menge Markup

Lesestoff...

Wenn es so genau sein soll, tut es auch dieser Attribut-Selektor

Code:

 a[href="http://google.com"]/*ein a mit dem href-Attribut "http://google.com"*/

oder auch dieser

Code:

a[href*="google"]/*alle a, bei denen das href-Attribut die Zeichenkette "google" enthält*/

take_a_7 · #9 (**permalink**) 23.04.2011, 13:46

Wenn du wirklich immer nur einen Link hast, der eine bestimmte Formatierung kriegen soll, nimmst du besser eine id:

HTML-Code:

<a href="google.de" id="googlelink">Google</a>

Code:

#googlelink {color:red;}

gruß,
take

take_a_7 · #10 (**permalink**) 23.04.2011, 13:48

Zitat:

Zitat von cebito

Hier sind weder Klassen noch ID's notwendig. Ihr solltet euch echt mal alle mit den Möglichkeiten auseinandersetzen, die CSS-Selektoren bieten.

Wir sprechen hier aber mit einem blutigen Anfänger, wie du sicher gemerkt hast. Alles Schritt für Schritt!

gruß,
take

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
zwei überschriften in eine verlinkung packen??	der_erfinder	CSS	12	22.02.2011 16:15
Verlinkung ohne iframe	fledermaus	(X)HTML	8	29.01.2010 14:32
list-style-image mit verlinkung	seeadler	CSS	2	10.08.2009 13:00
Interne Verlinkung zerschießt Layout	mammut	CSS	3	27.02.2007 22:00
Interne Verlinkung	derHund	Offtopic	10	22.06.2006 19:51