Skip to content

Commit df3ca2b

Browse files
Hi2272Hi2272
committed
2 parents 8376d58 + 9e8710e commit df3ca2b

7 files changed

Lines changed: 191 additions & 3 deletions

File tree

‎00Informatik/00Informatik7/CSS/Bild1.png‎

709 KB
Loading

‎00Informatik/00Informatik7/CSS/Bild2.png‎

50.2 KB
Loading

‎00Informatik/00Informatik7/CSS/Bild3.png‎

31 KB
Loading

‎00Informatik/00Informatik7/CSS/index.html‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CSS - ein Stil f&uuml;r alle</title>
6+
<style>
7+
/* From extension vscode.github */
8+
/*---------------------------------------------------------------------------------------------
9+
* Copyright (c) Microsoft Corporation. All rights reserved.
10+
* Licensed under the MIT License. See License.txt in the project root for license information.
11+
*--------------------------------------------------------------------------------------------*/
12+
13+
14+
15+
.vscode-dark img[src$=\#gh-light-mode-only],
16+
.vscode-light img[src$=\#gh-dark-mode-only],
17+
.vscode-high-contrast:not(.vscode-high-contrast-light) img[src$=\#gh-light-mode-only],
18+
.vscode-high-contrast-light img[src$=\#gh-dark-mode-only] {
19+
display: none;
20+
}
21+
22+
</style>
23+
24+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
25+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
26+
<style>
27+
body {
28+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
29+
font-size: 14px;
30+
line-height: 1.6;
31+
}
32+
</style>
33+
<style>
34+
.task-list-item {
35+
list-style-type: none;
36+
}
37+
38+
.task-list-item-checkbox {
39+
margin-left: -20px;
40+
vertical-align: middle;
41+
pointer-events: none;
42+
}
43+
</style>
44+
<style>
45+
:root {
46+
--color-note: #0969da;
47+
--color-tip: #1a7f37;
48+
--color-warning: #9a6700;
49+
--color-severe: #bc4c00;
50+
--color-caution: #d1242f;
51+
--color-important: #8250df;
52+
}
53+
54+
</style>
55+
<style>
56+
@media (prefers-color-scheme: dark) {
57+
:root {
58+
--color-note: #2f81f7;
59+
--color-tip: #3fb950;
60+
--color-warning: #d29922;
61+
--color-severe: #db6d28;
62+
--color-caution: #f85149;
63+
--color-important: #a371f7;
64+
}
65+
}
66+
67+
</style>
68+
<style>
69+
.markdown-alert {
70+
padding: 0.5rem 1rem;
71+
margin-bottom: 16px;
72+
color: inherit;
73+
border-left: .25em solid #888;
74+
}
75+
76+
.markdown-alert>:first-child {
77+
margin-top: 0
78+
}
79+
80+
.markdown-alert>:last-child {
81+
margin-bottom: 0
82+
}
83+
84+
.markdown-alert .markdown-alert-title {
85+
display: flex;
86+
font-weight: 500;
87+
align-items: center;
88+
line-height: 1
89+
}
90+
91+
.markdown-alert .markdown-alert-title .octicon {
92+
margin-right: 0.5rem;
93+
display: inline-block;
94+
overflow: visible !important;
95+
vertical-align: text-bottom;
96+
fill: currentColor;
97+
}
98+
99+
.markdown-alert.markdown-alert-note {
100+
border-left-color: var(--color-note);
101+
}
102+
103+
.markdown-alert.markdown-alert-note .markdown-alert-title {
104+
color: var(--color-note);
105+
}
106+
107+
.markdown-alert.markdown-alert-important {
108+
border-left-color: var(--color-important);
109+
}
110+
111+
.markdown-alert.markdown-alert-important .markdown-alert-title {
112+
color: var(--color-important);
113+
}
114+
115+
.markdown-alert.markdown-alert-warning {
116+
border-left-color: var(--color-warning);
117+
}
118+
119+
.markdown-alert.markdown-alert-warning .markdown-alert-title {
120+
color: var(--color-warning);
121+
}
122+
123+
.markdown-alert.markdown-alert-tip {
124+
border-left-color: var(--color-tip);
125+
}
126+
127+
.markdown-alert.markdown-alert-tip .markdown-alert-title {
128+
color: var(--color-tip);
129+
}
130+
131+
.markdown-alert.markdown-alert-caution {
132+
border-left-color: var(--color-caution);
133+
}
134+
135+
.markdown-alert.markdown-alert-caution .markdown-alert-title {
136+
color: var(--color-caution);
137+
}
138+
139+
</style>
140+
141+
</head>
142+
<body class="vscode-body vscode-light">
143+
<meta charset="utf-8" />
144+
<title>CSS</title>
145+
<link rel="stylesheet" href="https://Hi2272.github.io/StyleMD.css">
146+
<h1 id="css---ein-stil-für-alle">CSS - ein Stil für alle</h1>
147+
<p>Wir erzeugen eine HTML-Datei, bei der</p>
148+
<ul>
149+
<li>alle Überschriften h1 rot auf gelbem Grund ist</li>
150+
<li>alle Bilder einen blauen Rahmen haben und 90% breit sind.</li>
151+
</ul>
152+
<p><img src="Bild1.png" alt="alt text"></p>
153+
<p>In der HTML-Datei siehst du nichts von diesen Formatierungen:</p>
154+
<p><img src="Bild2.png" alt="alt text"></p>
155+
<p>Sie werden in einer CSS (Cascading Style Sheet)-Datei eingefügt und gelten für alle Überschriften h1 und alle Bilder img:<br>
156+
<img src="Bild3.png" alt="alt text"></p>
157+
<p>Öffne die Seite <a href="https://ladigitale.dev/digipen/editeur.html" target="_blank">Digipen by LaDigitale</a> und erstelle eine Seite für deine Heimatstadt nach diesem Muster.</p>
158+
<p>Hinweis: Die <strong>{}</strong>-Zeichen bekommst du mit der Tastenkombination <strong>AltGr 7</strong> und <strong>AltGr 0</strong>.</p>
159+
160+
161+
162+
</body>
163+
</html>

‎00Informatik/00Informatik7/CSS/index.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<meta charset="utf-8" />
2+
<title>CSS</title>
3+
<link rel="stylesheet" href="https://Hi2272.github.io/StyleMD.css">
4+
5+
6+
# CSS - ein Stil für alle
7+
Wir erzeugen eine HTML-Datei, bei der
8+
- alle Überschriften h1 rot auf gelbem Grund ist
9+
- alle Bilder einen blauen Rahmen haben und 90% breit sind.
10+
11+
![alt text](Bild1.png)
12+
13+
In der HTML-Datei siehst du nichts von diesen Formatierungen:
14+
15+
![alt text](Bild2.png)
16+
17+
18+
19+
Sie werden in einer CSS (Cascading Style Sheet)-Datei eingefügt und gelten für alle Überschriften h1 und alle Bilder img:
20+
![alt text](Bild3.png)
21+
22+
Öffne die Seite <a href="https://ladigitale.dev/digipen/editeur.html" target="_blank">Digipen by LaDigitale</a> und erstelle eine Seite für deine Heimatstadt nach diesem Muster.
23+
24+
Hinweis: Die **{}**-Zeichen bekommst du mit der Tastenkombination **AltGr 7** und **AltGr 0**.

‎00Informatik/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,8 @@ <h2 id="html">HTML</h2>
195195
<a href="00Informatik7/HTMLOrderedList/index.html">Nummerierte Listen in HTML</a><br>
196196
<a href="00Informatik7/HTMLImg/index.html">Bilder in HTML</a><br>
197197
<a href="00Informatik7/HTMLInfoSeite/index.html">Deine eigene Homepage</a><br>
198-
<a href="00Informatik7/HTMLTest/index.html">HTML Abschlusstest</a></p>
198+
<a href="00Informatik7/HTMLTest/index.html">HTML Abschlusstest</a><br>
199+
<a href="00Informatik7/CSS/index.html">CSS - ein Stil für alle</a></p>
199200
<p><a href="https://netzwerke.hauptquartier.eu/abenteuer-archiv">Die Abenteuer von Kommissar Smith</a></p>
200201
<p><a href="00Informatik7/Biber/index.html">Informatik-Biber</a></p>
201202
<h1 id="mikrocontroller">Mikrocontroller</h1>

‎00Informatik/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@
6868
[Nummerierte Listen in HTML](00Informatik7/HTMLOrderedList/index.html)
6969
[Bilder in HTML](00Informatik7/HTMLImg/index.html)
7070
[Deine eigene Homepage](00Informatik7/HTMLInfoSeite/index.html)
71-
[HTML Abschlusstest](00Informatik7/HTMLTest/index.html)
72-
71+
[HTML Abschlusstest](00Informatik7/HTMLTest/index.html)
72+
[CSS - ein Stil für alle](00Informatik7/CSS/index.html)
7373

7474
[Die Abenteuer von Kommissar Smith](https://netzwerke.hauptquartier.eu/abenteuer-archiv)
7575

0 commit comments

Comments
 (0)