de:modul:m287:learningunits:lu02:loesungen:uebungen

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
de:modul:m287:learningunits:lu02:loesungen:uebungen [2026/01/27 10:49] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1de:modul:m287:learningunits:lu02:loesungen:uebungen [2026/01/27 10:49] (aktuell) – ↷ Seite von modul:m287:learningunits:lu02:loesungen:uebungen nach de:modul:m287:learningunits:lu02:loesungen:uebungen verschoben msuter
Zeile 1: Zeile 1:
 +====== LU02.L01 - Übungen zu einfachen CSS-Selektoren ======
  
 +**HTML**
 +<code html>
 +<!doctype html>
 +<html>
 +<head>
 +    <title>Klassenselektor</title>
 +    <meta charset="UTF-8">
 +    <link href="css/style.css" rel="stylesheet" type="text/css">
 +</head>
 +<body>
 +    <header>Kopfzeile</header>
 +    <nav>Navigation</nav>
 +    <h1>Klassenselektor</h1>
 +    <p>1. Absatz</p>
 +    <p class="remark">2. Absatz</p>
 +    <p class="remark warning">3. Absatz</p>
 +    <p class="warning">4. Absatz</p>
 +    <footer>Fusszeile</footer>
 +</body>
 +</html>
 +</code>
 +
 +**CSS**
 +<code css>
 +body {
 +    font-family: Arial;
 +}
 +
 +p.remark {
 +    margin-left: 70px;
 +    border-left: 15px solid blue;
 +    padding-left: 10px;
 +}
 +
 +p.remark.warning {
 +    border: 1px solid blue;
 +    padding-left: 9px;
 +    padding-right: 9px;
 +    padding-top: 1.5px;
 +    padding-bottom: 1.5px;
 +    text-align: center;
 +}
 +
 +p.warning {
 +    color: blue;
 +    font-size: 130%;
 +}
 +
 +header, footer {
 +    font-size: 80%;
 +    background-color: #00b3ee;
 +}
 +
 +h1, h2 {
 +    color: darkslateblue;
 +}
 +
 +nav {
 +    font-size: 90%;
 +    color: white;
 +    background-color: #778899;
 +    text-align: center;
 +}
 +</code>