Hi,
ich muss mich gerade mit CSS rumschlagen, insbesondere mit dem Verhalten von Links.
Ich habe hier eine Seite, wo ich verschiedene Blöcke definiert habe.
Also z.B. im CSS
.header {
position: absolute;
left: 0px;
top: 0px;
width: 770px;
height: 40px;
background: #C3C3C3;
}
div.headertext {
width: 560px;
height: 30px;
padding: 7px 0px 0px 49px;
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
font-weight: bold;
color: black;
text-align: left; overflow: hidden;
}
<DIV CLASS="header">
<DIV CLASS="headertext">
Tescht Text
</DIV>
</DIV>
Es gibt da mehrere solche Bereiche.
A)
Was mich jetzt als CSS - Neuling interessiert: Wann sticht der Ober den Unter, sprich was gilt übergreifender bei den Definitionen:
Z.B.
.header{}
div.headertext{}
So wie ich verstanden habe ist hier div.headertext ein Bestandteil von .header, oder liegt das nur an meinem Aufruf?
B) Die Folge daraus ist für mich die Definition von Link-Eigenschaften (a:hover etc.).
Die bisherige Implementierung greift leider nur auf die komplette HTML-Datei, ich brauche aber pro "Block" unterschiedliche Eigenschaften für Hyperlinks (mal beim Rollover rot, dann wieder grün, etc.)
Sorry für die Anfängerfragen im CSS-Umfeld, hab im Internet keine Antworten auf diese Basic-Fragen finden können.
Matthias
ich hab noch ein kleines Beispiel bei mir gefunden.
wichtig ist der Stylesheet-Abschnitt und die CLASS - Attribute
ach ja, das mit dem engeren Scope was Axel geschrieben hat stimmt latürnich
<html>
<head>
<title>Link Styles</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.navbar {
color: #FFFFFF;
}
.main a:link {
color: 003399;
}
.main a:visited {
color: #9966CC;
}
.main a:hover {
color: #CCCCCC;
}
.main a:active {
color: #FF0000;
}
.navbar a:link {
color: #FFFF00;
}
.navbar a:visited {
color: #9966CC;
}
.navbar a:hover {
color: #CCCCCC;
}
.navbar a:active {
color: #FF0000;
}
-->
</style>
</head>
<body BGCOLOR="#FFFFFF" TEXT="#000000" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0">
<table WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="25">
<tr>
<td WIDTH="23%" BGCOLOR="#333399" VALIGN="TOP" CLASS="navbar">
<p> </p>
<p>Etwas Text </p>
<p>und <a HREF="#">hier ist ein Link</a></p>
<p>und<a HREF="#"> hier ist noch ein Link</a>.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
<td WIDTH="77%" VALIGN="TOP" CLASS="main">
<p> </p>
<p>Ein bisschen Text im Hauptteil der Seite and <a HREF="#">hier ein
Link</a>. Und <a HREF="#">noch ein Link</a> und <a HREF="#">noch einer </a>.</p>
</td>
</tr>
</table>
</body>
</html>