Title: Standard für etapas_css_selektoren_training
Course: CSS Selektoren Training

Standardkategorie für Fragen, die im Kontext 'etapas_css_selektoren_training' freigegeben sind.

Q: Bei allen Bildern mit dem Alt-Wert "Foto" soll ein oranger Rahmen gezeichnet werden. Vervollständigen Sie die dazu erforderliche CSS-Direktive:

[...] {

border: 1px solid orange;

}
A: img[alt="Foto"]

Q: Sie formatieren auf einer Seite alle Elemente der Klasse "x" in Blocksatz. Vervollständigen Sie die CSS-Direktive:

[...] {

text-align: justify;

}
A: .x

Q: Sie formatieren auf einer Seite alle Elemente der ID "z" in Blocksatz. Vervollständigen Sie die CSS-Direktive:

[...] {

text-align: justify;

}
A: #z

Q: Sie formatieren auf einer Seite alle Absätze in Blocksatz. Vervollständigen Sie die CSS-Direktive:

[...] {

text-align: justify;

}
A: p

Q: Sie haben folgendes HTML-Dokument:

<html>

<head>

<title>Meine Seite</title>

<style type="text/css">

#navi { position: fixed; top: 50px; left: 10px; width: 150px; }

#headline { position: relative; bottom: 0px; width: 100%; }

#icon { position: [...]; right: [...]px; [...]: 0px; }

</style>

</head>

<body>

<div id="navi">

<div id="headline">

<img id="icon" src="icon.gif">

</div>

</div>

</body>

</html>

Vervollständigen Sie die Stylesheets, sodass das Icon sich in der rechten oberen Ecke des Containers "Navi" befindet!
A: fixed / absolute; 0; top
Gap 1 offers: fixed; absolute; relative; static

Q: Sie haben in einem HTML-Dokument verschiedene Absätze mit der Klasse "hd". Nur beim ersten dieser Absätze soll die Schrift auf fett gesetzt werden. Vervollständigen Sie die folgende CSS-Direktive:

[...] {

font-weight: bold;

}
A: p.hd:first-child
Partly right: gap 1 .hd:first-child (50%)

Q: In ihrem HTML-Dokument soll der Hintergrund von jedem Eingabefeld des Typs "text" orange werden, sofern sich der Textcursor darin befindet. Vervollständigen Sie die folgende CSS-Direktive:

[...] {

background-color: orange;

}
A: input[type="text"]:focus

Q: Sie haben in einem HTML-Dokument verschiedene Absätze mit der Klasse "interactive". Diese Absätze sollen eine orange Schrift erhalten, wenn der Mauszeiger darüber liegt. Vervollständigen Sie die folgende CSS-Direktive:

[...] {

color: orange;

}
A: p.interactive:hover
Partly right: gap 1 .interactive:hover (50%)

Q: Sie formatieren auf einer Seite alle Absätze der Klasse "x" in Blocksatz. Vervollständigen Sie die CSS-Direktive:

[...] {

text-align: justify;

}
A: p.x

Q: Sie formatieren auf einer Seite alle Überschriften h1 mit der ID "z" in Blocksatz. Vervollständigen Sie die CSS-Direktive:

[...] {

text-align: justify;

}
A: h1#z

Q: Sie wollen auf einer Webseite eine horizontale Liste für ein Navigationsmenü realisieren. Welche der folgenden CSS-Eigenschaften wenden Sie auf die li-Elemente an?
- float: left;
- list-style-type: none;
- z-index: 1;
- position: fixed;
- top: 20px; left: 20px;
- top: 40px; left: 20px;
A: float: left;; list-style-type: none;

Q: Sie möchten auf Ihrer Seite für alle Hyperlinks deren Attribut target auf "_blank" lautet die Farbe auf rot setzen, sofern diese bereits besucht wurden. Welche CSS-Direktive ist richtig?
- a[target="_blank"]:visited { color: red; }
- #a[target="_blank"]:visited { color: red; }
- a[target="_blank"]:link { text-color: red; }
- a[target="_blank"]:active { text-color: red; }
- .a[target="_blank"]:visited { color: red; }
A: a[target="_blank"]:visited { color: red; }

Q: Sie haben folgenden HTML-Code (es wird nur der Inhalt des body-Elements gezeigt):

<h1>Werdegang</h1>

<p class="current">John Doe</p>

<ul class="schools">

<li>Doe's Elementary School</li>

<li>Doe's Middle School</li>

<li class="current">Doe's Highschool</li>

<li class="future">Doe's College</li>

</ul>

Geben Sie an, welche der folgenden Änderungen mit den angegebenen Selektoren durchgeführt werden können!
- "Doe's Elementary School" in grau --> ul li:first-child
- "Doe's Elementary School" in grau --> .schools li:first-child
- "Doe's College" in blau --> .schools .future
- "Doe's Highschool" in fett --> .current
- "Doe's Middleschool" in kursiv --> ul>li:second-child
A: "Doe's Elementary School" in grau --> ul li:first-child; "Doe's Elementary School" in grau --> .schools li:first-child; "Doe's College" in blau --> .schools .future; "Doe's Highschool" in fett --> .current

Q: Geben Sie bei den folgenden Szenarien an, ob Sie HTML oder CSS zur Lösung benutzen:
- Element als Absatz formatieren | HTML
- Titel einer Seite setzen | HTML
- Codierung einer Seite auf UTF-8 setzen | HTML
- Aufzählung erstellen | HTML
- Hintergrund eines Absatzes setzen | CSS
- Überschrift rechtsbündig setzen | CSS
- Rahmenlinie unter Überschriften definieren | CSS
- Aufzählungspunkte einer Aufzählung ausblenden | CSS

Q: Benennen Sie in der folgenden CSS-Zeile die einzelnen Bestandteile:

h1 | { | font-size: | 1em; | }
⇓ |  | ⇓ | ⇓ |
[...] |  | [...] | [...] |
A: Selektor / Selector; Attribut; Wert
Gap 2 offers: Attribut; Wert; Signatur; Wähler; Eigenschaft
Gap 3 offers: Attribut; Wert; Signatur; Wähler; Eigenschaft

Q: Sie wollen via CSS realisieren, dass alle Absätze mit der Klasse "article" ein Bild beinhalten können, welches in der rechten oberen Ecke platziert sein soll und keinesfalls den Text innerhalb des Absatzes überdecken darf.

Diese Absätze sollen außerdem Blocksatz benutzen und einen Innenabstand von 5 Pixel einhalten.

Vervollständigen Sie die untenstehenden HTML-Seite, sodass Sie diesen Effekt erzielen:

<html>

<head>

<title>Eine Seite</title>

<style type="text/css">

[...] {

/* Hier formatieren wir den Absatz */

text-align: justify;

[...]

}

[...] {

/* Hier setzen wir das Bild nach rechts oben */

[...]

}

</style>

</head>

<body>

<p [...]="article">

<img src="ein_bild.jpg" alt="Das ist ein Bild" />

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>

</body>

</html>
A: .article / p.article / *.article; padding: 5px; / padding:5px;; .article img / p.article img; float: right; / float:right;; class

Q: Sie haben ein Element mit folgenden CSS-Eigenschaften, die in genau dieser Reihenfolge definiert wurden:

width: 200px;
height: 150px;
margin: 10px;
padding: 5px;
padding-top: 10px;
border: 2px solid black;
border-left: 4px solid black;
border-top: 4px solid black;

Wie groß sind die einzelnen Dimensionen?

MARGIN | [...]px |
[...]px
BORDER | [...]px |
[...]px
PADDING | [...]px |
[...]px | CONTENT | [...]px
 | [...]px |
[...]px
 | [...]px |
[...]px
 | [...]px |

Das Element hat eine Breite von [...]px und eine Höhe von [...]px.
A: 10; 10; 4; 4; 10; 5; 5; 5; 2; 2; 10; 10; 236; 191