Zum Hauptinhalt springen
Version: 28Wa

Tag-Selektoren

Mit CSS können einzelne HTML-Elemente über ihren Tag-Namen angesprochen und gestaltet werden. Diese Art von Selektoren werden als Tag-Selektoren bezeichnet.

<p>
    Dies ist <strong>ein</strong> <i>Absatz</i>.
</p>
<p>
    Dies ist <strong>ein</strong> weiterer Absatz.
</p>
p {
    color: darkblue;
}
strong {
    color: green;
    font-size: 150%;
}
i {
    color: red;
}
Bemerke
  • Es können für mehrere Tags Style-Regeln definiert werden.
  • Regeln werden immer als Eigenschaft: Wert; definiert, also bspww. color: red;.
  • Jede Regel wird mit einem Semikolon ; abgeschlossen.
p {
    border-width: 2px;
    border-style: solid;
    border-color: red;
    padding: 10px;
    margin: 20px;
}
Bemerke
  • Mit dem padding wird der Abstand zwischen Inhalt und Rahmen definiert.
  • Mit dem margin wird der Abstand zwischen Rahmen und anderen Elementen definiert.
Aufgabe

Probieren Sie die obigen Style-Regeln aus und halten Sie in eigenen Worten fest, was der Unterschied zwischen padding und margin ist.

Laden...
Geschweifte Klammern
{
Tastenkombination: Alt Gr + ä
}
Tastenkombination: Alt Gr + $

Spezifität​

Mit der Spezifität wird bestimmt, welche CSS-Regel angewendet wird, wenn mehrere Regeln auf dasselbe Element zutreffen. Je spezifischer eine Regel ist (also je genauer/präziser sie das Element beschreibt), desto höher ist ihre Priorität.

Zudem können Regeln verschachtelt werden - von Aussen nach Innen müssen dann die Tag-Namen übereinstimmen, damit die Regel angewendet wird. Solche verschachtelten Regeln sind spezifischer als wenn nur der innerste Tag-Namen angesprochen wird.

<ul>
    <li>Erstes Element</li>
    <li>
        Zweites Element
        <ul>
            <li>Unterelement 1</li>
            <li>Unterelement 2</li>
        </ul>
    </li>
    <li>Drittes Element</li>
</ul>
ul {
    color: red;
}
Bemerke

Das <ul>-Element wird angesprochen - ab dieser Ebene werden alle Texte rot dargestellt.

li {
    color: green;
}
ul {
    color: red;
}
Bemerke

Die spezifischere Regel "gewinnt" - nun werden alle <li>-Elemente grün dargestellt.

li {
    color: green;
}
li {
    li {
        color: blue;
    }
}
Bemerke

Nur die Elemente der zweiten Verschachtelungs-Eben werden blau dargestellt.

Tag-Selektoren und Stilregeln​

Eine Übung, in welcher Sie weitere Tag-Selektoren und Stilregeln kennenlernen und anwenden.

<html>
<head>
    <style>
    </style>
</head>
<body>
<header>
    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Maria Grünfelder">
    <div>
        <h1>Maria Grünfelder</h1>
        <address>
            <div>maria.gruenfelder@email.com</div>
            <div>Biel, Schweiz</div>
            <div>+41 32 123 4567</div>
        </address>
    </div>
</header>

<main>
    <div>
        <h2>About Me</h2>
        <p>Innovative software developer with 8+ years of experience in full stack development, passionate about building impactful products, and strong advocate for diversity in tech.</p>
    </div>

    <div>
        <h2>Experience</h2>
        <ol>
            <li>
            <strong>Senior Software Engineer</strong> ExampleCorp (2021–Present)
            <ul>
                <li>Lead a team of 6 in developing scalable web applications.</li>
                <li>Mentored junior developers and organized regular code review sessions.</li>
            </ul>
            </li>
            <li>
                <strong>Software Developer</strong> WebSoft AG (2016–2021)
                <ul>
                    <li>Developed and maintained client-facing platforms using React and Node.js.</li>
                    <li>Implemented CI/CD pipelines and improved deployment workflows.</li>
                </ul>
            </li>
        </ol>
    </div>

    <div>
        <h2>Education</h2>
        <ol>
            <li>
                <strong>M.Sc. Computer Science</strong> Technische Universität Berlin (2014–2016)
            </li>
            <li>
                <strong>B.Sc. Computer Science</strong> Technische Universität Berlin (2010–2014)
            </li>
        </ol>
    </div>

    <div>
        <h2>Skills</h2>
        <ul>
            <li>HTML & CSS</li>
            <li>JavaScript (ES6+)</li>
            <li>React, Vue.js</li>
            <li>Node.js</li>
            <li>SQL, MongoDB</li>
            <li>CI/CD, Git</li>
            <li>Unit & Integration Testing</li>
        </ul>
    </div>

    <div>
        <h2>Certifications</h2>
        <ul>
            <li>AWS Certified Solutions Architect – Associate</li>
            <li>Scrum Master (PSM I)</li>
        </ul>
    </div>

    <div>
        <h2>Languages</h2>
        <ul>
            <li>German (native)</li>
            <li>English (fluent)</li>
            <li>French (intermediate)</li>
        </ul>
    </div>

    <div>
        <h2>Hobbies</h2>
        <ul>
            <li>Rock Climbing</li>
            <li>Photography</li>
            <li>Travel</li>
            <li>Volunteering at coding workshops</li>
        </ul>
    </div>

    <div>
        <h2>Fun Facts</h2>
        <ul>
            <li>Completed the Berlin Marathon twice</li>
            <li>Proud owner of a rescue dog named Pixel</li>
            <li>Sings in a jazz band</li>
        </ul>
    </div>

    <div>
        <h2>References</h2>
        <p>Available upon request</p>
    </div>
</main>
</body>
</html>
    Laden...
    CC 4.0