08_CSS_Selektoren

Keine Dateien in diesem Thema verfügbar.

Lernmaterialien

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Wetter</h1>

    <nav class="nav-menu">
        <a href="#">Home</a>
        <a href="#">Produkte</a>
        <a href="#">Services</a>
        <a href="#">Über uns</a>
        <a href="#">Kontakt</a>
    </nav>

    <main class="grid-container">

        <article>
            <h3>Wetter</h3>
            <section>
                <h3>Wien</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo libero alias tempora, sed quidem eum iusto illum vel rerum ullam voluptatibus expedita nulla quas fuga, voluptas natus eaque. Expedita, inventore.</p>
            </section>
            <section>
                <h3>Linz</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ad eum tenetur quo enim veritatis iusto, nobis id dolor quis ut ab rem, repellendus rerum fuga error non, maxime maiores.</p>
            </section>
            <section>
                <h3>Graz</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim alias mollitia libero facilis beatae! Laboriosam quisquam alias aut ex molestias provident eius consectetur facilis dolore. Eum quae vitae atque. Inventore!</p>
            </section>
        </article>


        <div id="highlight-box">
            <h3>Highlight Box</h3>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae quaerat a consectetur odit velit minus, distinctio amet facilis sit officiis ratione. Nam quia similique velit ipsa et accusantium esse quo.</p>
        </div>

    </main>

    <div class="feedback-bereich">
        <textarea name="feedback" id="feedback"></textarea>
        <button id="submit-btn">OK</button>
        <button id="cancel-btn">Abbrechen</button>
    </div>



</body>
</html>

CSS

stylesheet

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="loesung_css.css">
    <title>Document</title>

Das stylesheet wird eingebunden.

DOM

Das DOM steht für Document Object Model.

Es ist eine Baumstruktur, mit der der Browser HTML-, CSS- und XML-Dokumente intern darstellt, sodass Programme (z. B. JavaScript) mit der Webseite arbeiten können.

Document
└── html (lang="en")
    ├── head
    │   ├── meta (charset="UTF-8")
    │   ├── meta (name="viewport", content="width=device-width, initial-scale=1.0")
    │   ├── link (rel="stylesheet", href="loesung_css.css")
    │   └── title
    │       └── "Document"
    │
    └── body
        └── main (class="grid-container")
            ├── h1
            │   └── "Wetter"
            │
            ├── article
            │   ├── h3
            │   │   └── "Wetter"
            │   │
            │   ├── section
            │   │   ├── h3
            │   │   │   └── "Wien"
            │   │   └── p
            │   │       └── "Lorem ipsum …"
            │   │
            │   ├── section
            │   │   ├── h3
            │   │   │   └── "Linz"
            │   │   └── p
            │   │       └── "Lorem ipsum …"
            │   │
            │   └── section
            │       ├── h3
            │       │   └── "Graz"
            │       └── p
            │           └── "Lorem ipsum …"
            │
            ├── div (class="button-bereich")
            │   ├── button (id="submit-btn")
            │   │   └── "OK"
            │   └── button (id="cancel-btn")
            │       └── "Abbrechen"
            │
            ├── div (id="highlight-box")
            │   ├── h3
            │   │   └── "Highlight Box"
            │   └── p
            │       └── "Diese Box sollte im Grid-Layout …"
            │
            └── nav (class="nav-menu")
                ├── a (href="#")
                │   └── "Home"
                ├── a (href="#")
                │   └── "Produkte"
                ├── a (href="#")
                │   └── "Services"
                ├── a (href="#")
                │   └── "Über uns"
                └── a (href="#")
                    └── "Kontakt"

body

    │
    └── body
        └── main (class="grid-container")

Wenn man die body-Section formatiert, dann beeinflusst man die gesamte Webseite, weil alles, was sichtbar ist, ein Kind des <body>-Elements ist.

Das <body> ist also das Hauptelement für den Seiteninhalt.

Aufgabe:

  1. Entferne alle Standard-Abstände des Browsers, damit der gesamte Bereich benutzt werden kann.

  2. Verwende eine Schriftart (Arial, Helvetica, sans-serif) für die komplette Seite.

  3. Setze:

  •  Hintergrundfarbe des Dokuments: lightgrey
  • Textfarbe: schwarz
001.png 
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: lightgrey;
    color: black
}

Hauptüberschrift

Gestalte die Hauptüberschrift (“Wetter”) wie folgt:

  1. Text zentrieren.

  2. Schriftgröße stark vergrößern: mindestens 4em.

  3. Unterhalb der Überschrift einen Abstand von 30px einfügen.

  4. Hintergrundfarbe der Überschrift: blau.

h1 {
    text-align: center;
    font-size: 4em;
    margin-bottom: 30px;
    background-color: blue;
}

Grid-Layout

Der

soll ein zweispaltiges Grid erhalten:

Benutze CSS Grid mit 2 Spalten in folgendem Verhältnis:

  • Erste Spalte: 2/3

  • Zweite Spalte: 1/3

Zwischen den Elementen soll ein Abstand von 20px sein.

Der gesamte Grid-Bereich soll einen schwarzen Rahmen haben.

002.png 
.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
    border: black solid;
}

Ordne die Inhalte im Grid so zu:

  • article kommt in Spalte 1.

  • highlight-box kommt in Spalte 2.

    <main class="grid-container">
        <article>
            ...
        </article>
        <div id="highlight-box">
            ...
        </div>
    </main>
.grid-container > article {
    grid-column: 1;
}

.grid-container > #highlight-box {
    grid-column: 2;
}

Artikels

Der komplette

soll:

  • weißen Hintergrund haben,

  • einen hellgrauen Rahmen besitzen,

  • Innenabstand von 15–20px erhalten,

  • stark abgerundete Ecken (Radius 30px) haben.

article {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    padding: 15px 20px;
    border-radius: 30px;
}
Der

tag “Wetter” !!! nur dieser !!! soll:

  • Schriftgröße: 1.5em

  • keinen oberen Außenabstand

  • Abstand nach unten: 10px

            ├── article
            │   ├── h3 WETTER
            │   ├── section
            │   │   ├── h3
            │   │   └── p
            │   ├── section
            │   │   ├── h3
article > h3 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
}

article > h3 … nur der direkte Nachfolger (nächste Ebene)

article h3 … direkte und indirekte Nachfolger

Jede

im Artikel soll:

einen blauen Hintergrund haben,

abgerundete Ecken (Radius 20px),

einen schwarzen Rahmen,

Innenabstand von ca. 20px.

article section {
    background-color: blue;
    border-radius: 20px;
    padding: 20px;
    border: black solid;
}

Die H3 in den Sections sollen leicht vergrößert werden (10% größer).

Die P Absätze sollen einen Zeilenabstand von 1.5 erhalten.

article section h3 {
    font-size: 1.1em;
    margin-bottom: 5px;
}

article p {
    line-height: 1.5;
    margin: 0;
}