Jordi/FH
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
Gentleman-DE
2024-10-29 14:11:37 +01:00
parent 24cffc3c6c
commit 3954d3b1bf
10 changed files with 364 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
WS24_25/WebTech/ue4/1/seite.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS einbinden</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h2 {
background-color: yellow;
}
</style>
</head>
<body>
<h2 style="background-color: blue;">Erste Überschrift</h2>
<h2>Zweite Überschrift</h2>
</body>

0
WS24_25/WebTech/ue4/1/syle.css Normal file
View File

27
WS24_25/WebTech/ue4/2/seite.html Normal file
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>

19
WS24_25/WebTech/ue4/2/style.css Normal file
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; }

33
WS24_25/WebTech/ue4/3/seite.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>CSS-Selektoren</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1><span class="tm">Selectors</span> Level 3</h1>
<section class="box" id="abstract">
<h2>Abstract</h2>
<p>
<span class="tm">Selectors</span> are patterns
that match against elements in a tree, and
as such form one of several technologies that
can be used to select nodes in an XML document.
</p>
</section>
<section class="box">
<h2><span class="tm">Selectors</span></h2>
<p>
A <span class="tm">Selector</span> represents
a structure. This structure can be used as a
condition (e.g. in a CSS rule) that determines
which elements a selector matches in the
document tree.
</p>
</section>
</body>
</html>

19
WS24_25/WebTech/ue4/3/style.css Normal file
View File

@@ -0,0 +1,19 @@
/* Setzt die Farbe des Texts in allen <h1> und <h2> Überschriften auf blau */
h1 {
color: blue;
}
/* Setzt den Hintergrund der Elemente mit der Klasse "box" auf orange */
.box {
background-color: orange;
}
/* Setzt den Hintergrund des Elements mit der ID "abstract" auf rot */
#abstract {
background-color: red;
}
/* Fügt das ™-Zeichen nach jedem Element mit der Klasse "tm" hinzu */
.tm::after {
content: "™";
}

43
WS24_25/WebTech/ue4/4/seite.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS schreiben</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Überschrift</h2>
<table>
<tr>
<th>#</th>
<th>background-color</th>
</tr>
<tr>
<td>1.</td>
<td>lightblue</td>
</tr>
<tr>
<td>2.</td>
<td>white</td>
</tr>
<tr>
<td>3.</td>
<td>lightblue</td>
</tr>
</table>
<section>
<h2>Sektionsüberschrift</h2>
<p>Der erste Absatz.</p>
<p>Der zweite Absatz.</p>
<section>
<h2>Noch eine Sektionsüberschrift</h2>
<p>Der dritte Absatz.</p>
<p>Der vierte Absatz.</p>
</section>
<p>Der fünfte Absatz.</p>
</section>
</body>
</html>

25
WS24_25/WebTech/ue4/4/style.css Normal file
View File

@@ -0,0 +1,25 @@
/* Tabellenkopf in roter Schrift */
th {
color: red;
}
/* Abwechselnde Zeilenfarben in der Tabelle: lightblue und white */
tr:nth-child(even) td {
background-color: lightblue;
}
tr:nth-child(odd) td {
background-color: white;
}
/* Hintergrundfarbe für die Absätze 2, 4 und 5 auf gelb setzen */
/* section > p:nth-of-type(2),
section > section > p:nth-of-type(2),
section > p:nth-of-type(3) {
background-color: yellow;
} */
/* Gelber Hintergrund für alle Absätze außer dem ersten in jeder Section */
section p:not(:first-of-type) {
background-color: yellow;
}