mirrors/denis.ergin
1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-06 13:18:49 +00:00
Code Activity

feat(slides): css introduction

Browse source
This commit is contained in:
Denis Ergin 2024-10-14 21:51:18 +02:00
parent 2bc7063747
commit 1f17b5f452
6 changed files with 328 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

137
src/components/slides/css-introduction/basic-selectors.astro Normal file
View file

@ -0,0 +1,137 @@
<section>
<section>
<h2>Nur bestimmte Elemente stylen - <code>Selektoren</code></h2>
</section>
<section>
<p>Bisher haben wir gesehen, wie wir Styles einbinden können, ein paar erste "Grundregeln" denen CSS folgt und wie wir Textfarbe mit <span style="color: hotpink;">color</span> ändern können.</p>
</section>
<section>
<p>
Nun möchten wir näher betrachten, wie man Selektoren benutzt um nur bestimmte Elemente zu stylen.
</p>
</section>
<section>
<h3>Tags stylen</h3>
</section>
<section>
<p>
Die "einfachste" Anwedung von styles geschieht durch die Tag-Selektoren.
Wir können einfach schreiben, welches Tag gestyled werden soll. Style-Regeln werden dabei in geschweiften Klammer platziert
</p>
</section>
<section>
<pre class="css"><code data-trim data-line-numbers="1|2" is:raw>
span {
color: hotpink;
}
</code></pre>
<span style="color: hotpink;">Hallo Welt!</span>
</section>
<section>
<h3>Klassen &amp; ID's</h3>
</section>
<section>
<p>Weitere gängige Werkzeuge für die Selektierung sind Klassen und ID's.</p>
<p>Klassen-Namen werden in CSS mit einem Punkt (<code>.</code>) prefixed.</p>
<p>ID's werden mit einem Hashtag (<code>#</code>) prefixed.</p>
</section>
<section>
<pre><code data-trim data-line-numbers="1-3|4-6|7-9" is:raw>
span {
color: hotpink;
}
span.meine-klasse {
color: coral;
}
span#meine-id {
color: brown;
}
</code></pre>
<div class="apply-style one">
<span>Ich bin nur ein Span!</span>
<br>
<span class="meine-klasse">Ich habe eine Klasse "<code>meine-klasse</code>"</span>
<br>
<span id="meine-id">Ich habe eine ID "<code>meine-id</code>"</span>
</div>
</section>
<section>
<h3>Spezifität</h3>
</section>
<section>
<p>Nun ein paar weitere Regeln: Eine ID ist spezifischer als eine Klasse ist spezfischer als ein Tag-Selektor</p>
</section>
<section>
<p>Es ist möglich, mehrere Klassen-Namen eines Elements zu selektieren:</p>
</section>
<section>
<pre><code data-trim data-line-numbers="1-3|4-6|7-9" is:raw>
span.eins {
color: blue;
}
span.eins.zwei {
color: green;
}
</code></pre>
<div class="apply-style two">
<span class="eins">Klase "eins"</span>
<br>
<span class="zwei">Klase "zwei"</span>
<br>
<span class="eins zwei">Klase "eins und zwei"</span>
</div>
</section>
<section>
<p>Weil das letzte <code>span</code> zwei "zutreffende" Klassen hat, hat dies mehr Gewicht (1 vs 2)</p>
<p>Zusätzlich ist nun der <code>span</code>-Selektor hinfällig: Da eine Klasse generell spezifischer wie ein Tag ist, wird der Tag-Selektor "überflüssig".</p>
</section>
<section>
<p>Dies trifft natürlich nicht in Situationen zu, in denen explizit ein bestimmtes Tag mit einer bestimmten Klasse gestyled werden soll.</p>
<p>In der Regel wird aber vermehrt einfach nur mit einer Klasse gestyled (auch hier wieder für die wiederverwendbarkeit).</p>
</section>
<section>
<p>Manchmal werden Klassen auch als Singulare "Modifikationen" auf Elemente "gepackt".</p>
<pre class="html"><code data-trim data-line-numbers>
&lt;span class="bold"&gt;Fetter Text&lt;/span&gt;
&lt;span class="font-blue"&gt;Blauer Text&lt;/span&gt;
&lt;span class="font-blue bold"&gt;Blauer, fetter Text&lt;/span&gt;
</code></pre>
<div class="apply-style three">
<span class="bold">Fetter Text</span>
<br>
<span class="font-blue">Blauer Text</span>
<br>
<span class="font-blue bold">Blauer, fetter Text</span>
<br>
</div>
</section>
<section>
<p>Es ist auch möglich beliebige Attribute eines HTML-Tags zu selektieren und zum stylen zu verwenden</p>
<pre class="css"><code data-trim data-line-numbers="1-5|6-10" is:raw>
<!-- "Zählt" sobald ein Element
dieses Attribut definiert hat -->
span[data-red] {
color: red;
}
<!-- "Zählt", sobald ein Element
das Attribut mit exaktem Wert hat -->
span[data-color="red"] {
color: red;
}
</code></pre>
</section>
<section>
<p>Was ist besser? Jedes Element speziell an seine Bedürfnisse stylen? Jedes Element mit Klassen "vollpacken" um den gewünschten Style zu erhalten?</p>
</section>
<section>
<p>Beide Wege sind valide und natürlich haben sich auch Systeme hierfür Entwickelt, die das ermöglichen. Trotzdem ist und bleibt die Entscheidung im Team bei den Entwicklern.</p>
</section>
</section>

64
src/components/slides/css-introduction/how-to-embed.astro Normal file
View file

@ -0,0 +1,64 @@
<section>
<section>
<h2>Styles im HTML einbinden</h2>
</section>
<section>
<p>Es gibt 3 Möglichkeiten CSS auf einer HTML-Seite zu verwenden:</p>
<ul>
<li>Inline-Styles</li>
<li>Style-Tag innerhalb der Website</li>
<li>Eine CSS-Datei die im HTML inkludiert wird</li>
</ul>
</section>
<section>
<h3>Inline-Styles</h3>
</section>
<section>
<p>
Die meisten HTML-Elemente können mithilfe des <code>style</code> Attributes direkt gestyled werden.
</p>
<p>
Im Normalfall sollte von dieser Möglichkeit abgesehen werden, da inline-Styles eine höhere "Wichtigkeit" haben als andere Styling-Methoden und eine Suche nach einem Styling-Fehler sehr mühselig wird.
</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;span style="color: red;"&gt;
Hier könnte Ihre Werbung stehen!
&lt;/span&gt;
</code></pre>
</section>
<section>
<h3>Das <code>style</code>-Tag</h3>
</section>
<section>
<p>Mithilfe des Style-Tag können mehrere Regeln auf einmal definiert werden, die Mithilfe von Selektoren bestimmte Elemente im HTML stylen</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;style&gt;
// Hier sind die selektoren sowie die dazugehörigen Styles zu finden!
&lt;/style&gt;
</code></pre>
</section>
<section>
<h3>Styles in einer CSS-Datei definieren</h3>
</section>
<section>
<p>Die wahrscheinlich üblichste Variante ist es, die Style-Deklarationen in einer gesonderten Datei zu definieren und diese im HTML einzubinden</p>
</section>
<section>
<p>Fördert die "Portabilität" zwischen HTML-Dateien</p>
<p>Alles an einem Platz</p>
<p>Seperation of Concerns</p>
</section>
<section>
<p>Die Einbindung von CSS in HTML-Dateien erfolgt mit dem <code>link</code>-Tag</p>
</section>
<section>
<pre class="html"> <code data-trim data-line-numbers>
&lt;link rel="stylesheet" href="style.css"&gt;
</code></pre>
</section>
</section>

53
src/components/slides/css-introduction/index.astro Normal file
View file

@ -0,0 +1,53 @@
---
import Title from './title.astro'
import WhatIsCss from "./what-is-css.astro";
import HowToEmbed from './how-to-embed.astro';
import BasicSelectors from './basic-selectors.astro'
---
<div class="slides">
<Title />
<WhatIsCss />
<HowToEmbed />
<BasicSelectors />
</div>
<style lang="scss" is:global>
.apply-style {
&.one {
span {
color: hotpink;
}
span.meine-klasse {
color: coral;
}
span#meine-id {
color: brown;
}
}
&.two {
span.eins.zwei {
color: green;
}
span.eins {
color: blue;
}
}
&.three {
.bold {
font-weight: bold;
}
.font-green {
color: green;
}
.font-blue {
color: blue;
}
.font-red {
color: red;
}
}
}
</style>

4
src/components/slides/css-introduction/title.astro Normal file
View file

@ -0,0 +1,4 @@
<section>
<h1>Einführung in CSS</h1>
<p>Wie man seine Website schön macht (oder so ähnlich)</p>
</section>

62
src/components/slides/css-introduction/what-is-css.astro Normal file
View file

@ -0,0 +1,62 @@
<section>
<section>
<h2>Was genau ist CSS?</h2>
</section>
<section>
<p>CSS steht für <strong>Cascading Style Sheet</strong>.</p>
<p>Im Grunde <strong>selektieren</strong> wir bestimmte <em>tags</em> innerhalb der Website anhand spezieller Regeln um diese daraufhin mit bestimmten Instruktionen <em>visuell</em> zu modifizieren.</p>
</section>
<section>
<p>Im Regelfall werden Farben auf Vorder- sowie Hintergründe angewendet;</p>
<p>Die Schriftart sowie weitere Attribute wie Schriftgröße, Fettdruck und mehr modifiziert;</p>
<p>Weitere visuelle Effekte wie Schattierungen, Ränder und mehr verwendet;</p>
</section>
<section>
<p>Zusätzlich bietet CSS auch die Möglichkeit, Abstände zwischen Elementen hinzuzufügen;</p>
<p>Als auch Layouts im HTML zu implementieren;</p>
</section>
<section>
<p>Weitere Features:</p>
<ul>
<li>Animationen &amp; Transitionen</li>
<li>Spezielle Positionierungs-Regeln</li>
<li>Meta-Attribute stylen</li>
</ul>
</section>
<section>
<h3>Was bedeutet "Cascading" in CSS?</h3>
</section>
<section>
<p>Cascading bezieht sich auf die Funktionsweise von CSS selber</p>
</section>
<section>
<p>Im Grunde lassen sich CSS-Regeln überschreiben. Dies Funktioniert im ersten Sinne von "Die letzte Regel gilt"</p>
</section>
<section>
<pre class="css"><code data-trim data-line-numbers="1|2,3" is:raw>
color: blue; // Textfarbe "blau" stellen
color: red; // Textfarbe "rot" stellen,
// dies überschreibt das blau aus der ersten Zeile
</code></pre>
<p>
Resultat:
</p>
<p><span style="color: blue; color: red;">
Hallo Welt!
</span></p>
</section>
<section>
<p>
Um komplexere Anforderungen zu bewältigen, enthält CSS eine Reihe an weiteren "Regeln", die die <strong>"Spezifität"</strong> eines Selektors bestimmt.
</p>
</section>
</section>

8
src/pages/slides/css-introduction.astro Normal file
View file

@ -0,0 +1,8 @@
---
import Reveal from "../../layouts/Reveal.astro";
import Slides from '../../components/slides/css-introduction/index.astro';
---
<Reveal title="Einführung in CSS">
<Slides />
</Reveal>