Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu02:einfache-selektoren [2025/02/28 07:44] – kdemirci
+++ modul:m287:learningunits:lu02:einfache-selektoren [2025/02/28 07:51] (aktuell) – kdemirci
@@ Zeile 103: / Zeile 103: @@
   - Der dritte Absatz verwendet den Klassenselektor p.hinweis.warnung, wo alles recht ähnlich formatiert wird wie im zweiten Absatz.
   - Der vierte Absatz mit der Klasse warnung wird nicht formatiert, weil für diese Klasse keine Stilangaben notiert wurden. Wollen Sie für diesen vierten Absatz mit der Klasse warnung eine CSS-Regel mit einem Klassenselektor definieren, müssten Sie diese wie folgt notieren:
-  -
+**CSS**
+<code css>
+/* Datei: style.css */
+/* Schwarzer Rahmen,
+   Zentrierter Text,
+Pixel Abstand von oben
+ */
+header,
+nav,
+footer {
+  text-align:center;
+  border: 1px solid black;
+  margin-top: 5px;
+  padding: 5px;
+  font-family: Verdana, Arial;
+}
+/* Grauer Text
+ */
+h1,
+abbr {
+  color: gray;
+  font-family: Verdana, Arial;
+}
+/* Schriftfamilie für p-Elemente
+ */
+p { font-family: Verdana, Arial; }
+/* Absatztext für einen Hinweis
+ */
+p.hinweis {
+  margin-left: 50px;
+  border-left: 10px solid green;
+  padding-left: 5px;
+}
+/* Absatztext für einen Hinweis als Warnung
+ */
+p.hinweis.warnung {
+  border-left: 10px solid red;
+  border-top: 2px solid red;
+  border-right: 10px solid red;
+  border-bottom: 2px solid red;
+  text-align: center;
+}
+/* Schriftgröße auf 140%
+   Hintergrundfarbe auf grau
+*/
+.kopffuss {
+  font-size: 140%;
+  background: #f5f5f5;
+}
+/* Schriftgröße auf 130%
+ */
+.bigfont { font-size: 130%; }
+.warnung { color: blue; }
+</code>
+**HTML**
+<code html>
+<!doctype html>
+<html>
+  <head>
+    <title>Klassenselektor</title>
+    <meta charset="UTF-8">
+   <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+  <header class="kopffuss">Kopfzeile</header>
+  <nav class="bigfont">Navigation</nav>
+  <main>
+  <h1>Klassenselektor</h1>
+  <p>Das p-Element ohne einer Klasse.</p>
+  <p class="hinweis">Das p-Element mit der Klasse hinweis.</p>
+  <p class="hinweis warnung">Das p-Element mit den Klassen hinweis warnung.</p>
+  <p class="warnung">Das p-Element mit der Klasse warnung.</p>
+  <p class="hinweis bigfont">Das p-Element mit den Klassen hinweis bigfont.</p>
+  </main>
+  <footer class="kopffuss">Fußzeile</footer>
+  </body>
+</html>
+</code>
+===== ID-Selektoren =====
+Mit dem ID-Selektor werden HTML-Elemente gewählt, welche eine bestimmte ID (anhand des id-Attributs) zugeordnet haben. Im Gegensatz zu Klassen sind IDs immer einzigartige Elemente in einem HTML-Dokument. Es darf nur einem Element im gesamten HTML-Dokument diese ID zugewiesen werden. Ein solcher ID-Selektor wird mit dem Rautenzeichen (oder Gatterzeichen – #), gefolgt von der ID notiert. Der ID-Selektor für <div id="special"> kann daher wie folgt notiert werden:
+<code>
+div#special
+</code>
+oder nur
+<code>
+#special
+</code>
+Der Vorteil von elementname#id im Gegensatz zu #id kann eventuelle Versehen desselben id-Attributwert vorbeugen. Eine Validierung deckt solche fehlerhaften Umstände sofort auf.
+**Beispiel**
+**CSS**
+<code css>
+/* Datei: style.css */
+/* Schwarzer Rahmen,
+   Zentrierter Text,
+Pixel Abstand von oben
+ */
+#header,
+#nav,
+#footer {
+  text-align:center;
+  border: 1px solid black;
+  margin-top: 5px;
+  padding: 5px;
+  font-family: Verdana, Arial;
+}
+/* Schriftgröße auf 140%
+   Hintergrundfarbe auf grau
+*/
+#header,
+#footer {
+  font-size: 140%;
+  background: #f5f5f5;
+}
+div#main { margin: 20px; }
+/* Grauer Text
+ */
+h1,
+abbr {
+  color: gray;
+  font-family: Verdana, Arial;
+}
+/* Schriftfamilie für p-Elemente
+ */
+p { font-family: Verdana, Arial; }
+/* Absatztext für einen Hinweis
+ */
+p.hinweis {
+  margin-left: 50px;
+  border-left: 10px solid green;
+  padding-left: 5px;
+}
+/* Absatztext für einen Hinweis als Warnung
+ */
+p.hinweis.warnung {
+  border-left: 10px solid red;
+  border-top: 2px solid red;
+  border-right: 10px solid red;
+  border-bottom: 2px solid red;
+  text-align: center;
+}
+/* Schriftgröße auf 130%
+ */
+.bigfont { font-size: 130%; }
+</code>
+**HTML**
+<code html>
+<!doctype html>
+<html>
+  <head>
+    <title>Klassenselektor</title>
+    <meta charset="UTF-8">
+   <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+  <div id="header">Kopfzeile</div>
+  <div id="nav">Navigation</div>
+  <div id="main">
+  <h1>Klassenselektor</h1>
+  <p>Das p-Element ohne einer Klasse.</p>
+  <p class="hinweis">Das p-Element mit der Klasse hinweis.</p>
+  <p class="hinweis warnung">Das p-Element mit den Klassen hinweis warnung.</p>
+  <p class="warnung">Das p-Element mit der Klasse warnung.</p>
+  <p class="hinweis bigfont">Das p-Element mit den Klassen hinweis bigfont.</p>
+  </div>
+  <div id="footer">Fußzeile</div>
+  </body>
+</html>
+</code>
+===== Klassenselektor vs. ID-Selektor =====
+Der Klassenselektor ist der Selektor mit dem Punkt, und der ID-Selektor ist der Selektor mit der Raute. Ebenso sollten Sie sich merken, dass Sie zwar jedes HTML-Element mit einer oder auch mehreren Klassen versehen können, aber grundsätzlich nur mit einer ID. Im Gegensatz zu Klassen müssen IDs in einem HTML-Dokument immer einzigartig sein. Daher darf eine bestimmte ID auch nur einmal in einem HTML-Dokument vorkommen. Auch ist es nicht erlaubt, einem HTML-Element mehr als eine ID zuzuweisen.