Beispiel:CSS-custom-props-1.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>CSS-Variablen - 1</title>
<style>
:root {
--primary: #666;
--hintergrund: #ccc;
--akzent: #c32e04;
--linkfarbe: #09c;
}
h2 {
color: var(--primary);
border-bottom: medium solid var(--akzent);
}
aside {
grid-area: aside;
color: var(--akzent);
background-color: var(--primary);
border: medium solid var(--akzent);
padding: 0.5em;
}
aside > h2 {
color: var(--hintergrund);
border-bottom: medium solid transparent;
}
aside > label {
color: black;
background-color: var(--akzent);
}
main {
display: grid;
grid: "head aside" min-content
"text aside" 1fr
/ 3fr 1fr;
grid-gap: 1em;
}
main > h2 {
grid-area: head;
}
main > p {
grid-area: text;
}
#suche {
width: 10em;
border: medium solid #999;
border-radius: 0.5em;
font-size: 1.2em;
transition: width 0.5s ease-in-out;
}
#suche:focus {
font-size: 1.5em;
width: 50%;
}
</style>
</head>
<body>
<h1>CSS-Variablen (<em>Custom Properties</em>)</h1>
<main>
<h2><em>(Custom Properties)</em></h2>
<p>
Mit <em>custom properties</em>, (benutzerdefinierte Eigenschaften) können Sie für Werte von CSS-Eigenschaften zu Beginn des Stylesheets Variablen festlegen und später für beliebige Deklarationen verwenden. So können Sie zum Beispiel eine Farbpalette definieren und müssen diese bei einem Redesign nur einmal im Dokument ändern.
</p>
<aside>
<h2>Suche</h2>
<label for="suche">Suchbegriff eingeben</label>
<input type="search" id="suche" placeholder="Suche…">
</aside>
</main>
</body>
</html>