This commit is contained in:
2024-10-29 14:11:37 +01:00
parent 24cffc3c6c
commit 3954d3b1bf
10 changed files with 364 additions and 0 deletions

View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>Übung: CSS lesen</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cascading Stylesheets</h1>
<nav> <a href="#einleitung">Einleitung</a> | <a href="#syntax">Syntax</a> </nav>
<section id="einleitung">
<h2>Einleitung</h2>
<p>Mit Cascading Stylesheets (CSS) kann die Darstellung von HTML-Elementen definiert werden.</p>
<div class="hinweis">Hinweis: Damit unterstützt CSS die saubere Trennung zwischen Darstellung und
Inhalt/Struktur.</div>
</section>
<section id="syntax">
<h2>Syntax</h2>
<p>Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock mit 1-n Deklarationen.</p>
<div class="hinweis">Hinweis: Deklarationen werden mit Semikolons getrennt.</div> <a
href="http://w3c.org/css">Weitere Infos im Standard...</a>
</section>
</body>
</html>

View File

@@ -0,0 +1,19 @@
/* Regel 1 */
h1 { color:red; }
/* Regel 2 ("text-transform: uppercase" setzt Text in Großbuchstaben) */
h1, h2 { text-transform: uppercase; }
/* Regel 3 ("text-transform: lowercase" setzt Text in Kleinbuchstaben) */
h1 h2 { text-transform: lowercase; }
/* Regel 4 */
.hinweis { background-color: lightblue; }
/* Regel 5 */
#hinweis { background-color: red; }
/* Regel 6 */
a[href^="#"] { color: green; }
/* Regel 7 */
nav a:hover {
background-color: green;
color: white;
}
/* Regel 8 ("font-style: italic" stellt Text kursiv dar) */
*[id] { font-style: italic; }