3.5 ID-Selektor
In unserer CSS-Datei styles.css sorgt die folgende CSS-Regel dafür, dass alle HTML-Elemente vom Typ p horizontal zentriert und mit 1,5-facher Zeilenhöhe dargestellt werden:
text-align: center;
line-height: 1.5;
}
p-ElementeDie Startseite index.html enthält lediglich ein p-Element, das auch in dieser Weise formatiert werden soll. Die CSS-Regel stört bisher also noch nicht. Allerdings werden wir unserem Webauftritt noch weitere Webseiten hinzufügen und zumindest einige dieser Webseiten enthalten p-Elemente, für die diese spezielle CSS-Regel nicht gelten sollen.
Da die CSS-Regel nicht für alle p-Elemente gelten soll, ist der verwendete Typselektor ungeeignet. Ihn durch einen Klassenselektor zu ersetzen, wäre nur sinnvoll, wenn die Regel für mehrere verschiedene Elemente anwendbar sein soll. Dies ist hier nicht der Fall, denn die Regel soll ausschließlich für ein bestimmtes p-Element auf der Startseite gelten. Deshalb müssen wir dem Webbrowser die Möglichkeit geben, genau dieses Element zu identifizieren. Das erreichen wir, indem wir dem Attribut id des betreffenden Elements einen eindeutigen Bezeichner zuweisen:
begruessung eindeutig identifizierbar.
Die CSS-Regel soll nun nur noch für das Element mit der ID begruessung gelten. Dazu ersetzen wir den Typselektor p durch den ID-Selektor #begruessung. Ein ID-Selektor beginnt mit dem Hash-Zeichen, auf das die ID des betreffenden HTML-Elements folgt:
text-align: center;
line-height: 1.5;
}
begruessung.
Mit Hilfe des Attributs id kann einem HTML-Element ein eindeutiger Bezeichner zugewiesen werden.
Eine ID darf daher innerhalb eines HTML-Dokuments nur einmal vorkommen. In anderen HTML-Dokumenten darf sie erneut verwendet werden. Dies ist zum Beispiel dann sinnvoll, wenn ein bestimmtes Element auf mehreren Webseiten eines Webauftritts vorkommt.
Ein ID-Selektor besteht aus dem Hash-Zeichen, auf das die ID des betreffenden HTML-Elements folgt. Eine CSS-Regel mit einem ID-Selektor wird nur auf das HTML-Element angewendet, das die jeweilige ID besitzt.
Aufgabe 3-3: ID-Selektor
Aufgabe
-
Weisen Sie dem p-Element der Startseite index.html die ID
begruessungzu. -
Sorgen Sie dafür, dass die bisher in der CSS-Datei styles.css enthaltene Regel, die p-Elemente horizontal zentriert und mit 1,5-facher Zeilenhöhe dargestellt, nur für das HTML-Element mit der ID
begruessunggilt. - Überlegen Sie, ob es sinnvoll ist, dass diese CSS-Regel weiterhin in der CSS-Datei styles.css verbleibt oder ob es einen besser geeigneten Ort gibt (vgl. Kapitel 3.2 Einbinden von CSS-Regeln).
Vorschau
Lösung
<html lang="de">
<head>
<meta charset="utf-8">
<title>Kaufmännische Schule Tauberbischofsheim</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
#begruessung {
text-align: center;
line-height: 1.5;
}
</style>
</head>
<body>
<div>
<header>
<img src="img/logo.png" alt="Logo der Kaufmännischen Schule Tauberbischofsheim">
<h1>Kaufmännische Schule Tauberbischofsheim</h1>
<nav>
<ul>
<li> <a href="index.html">Startseite</a> </li>
<li> <a href="bildungswege.html">Bildungswege</a> </li>
<li> <a href="termine.html">Termine</a> </li>
<li> <a href="impressum.html">Impressum</a> </li>
</ul>
</nav>
</header>
<main>
<h2>Herzlich Willkommen</h2>
<img class="zentriert" src="img/eingang.jpg" alt="Haupteingang der Kaufmännischen Schule Tauberbischofsheim">
<p id="begruessung">Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.</p>
</main>
</div>
</body>
</html>
background-color: #DDF9CC;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
h2 {
text-align: center;
font-style: italic;
text-decoration: underline;
margin-top: 10px;
margin-bottom: 10px;
}
.zentriert {
display: block;
margin-left: auto;
margin-right: auto;
}
Aufgabe 3-4: Logo
Aufgabe
Sorgen Sie dafür, dass das img-Element, das das Logo zeigt, mit einer Breite von 80 Pixeln angezeigt wird. Dieses Element wiederholt sich auf jeder Seite des Webauftritts und soll stets in dieser Weise formatiert werden.
Vorschau
Lösung
<html lang="de">
<head>
<meta charset="utf-8">
<title>Kaufmännische Schule Tauberbischofsheim</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
#begruessung {
text-align: center;
line-height: 1.5;
}
</style>
</head>
<body>
<div>
<header>
<img id="logo" src="img/logo.png" alt="Logo der Kaufmännischen Schule Tauberbischofsheim">
<h1>Kaufmännische Schule Tauberbischofsheim</h1>
<nav>
<ul>
<li> <a href="index.html">Startseite</a> </li>
<li> <a href="bildungswege.html">Bildungswege</a> </li>
<li> <a href="termine.html">Termine</a> </li>
<li> <a href="impressum.html">Impressum</a> </li>
</ul>
</nav>
</header>
<main>
<h2>Herzlich Willkommen</h2>
<img class="zentriert" src="img/eingang.jpg" alt="Haupteingang der Kaufmännischen Schule Tauberbischofsheim">
<p id="begruessung">Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.</p>
</main>
</div>
</body>
</html>
background-color: #DDF9CC;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
h2 {
text-align: center;
font-style: italic;
text-decoration: underline;
margin-top: 10px;
margin-bottom: 10px;
}
.zentriert {
display: block;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 80px;
}