mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-06 05:28:48 +00:00
feat(slides): css introduction
This commit is contained in:
Denis Ergin
parent
2bc7063747
commit
1f17b5f452
6 changed files with 328 additions and 0 deletions
137
src/components/slides/css-introduction/basic-selectors.astro
Normal file
137
src/components/slides/css-introduction/basic-selectors.astro
Normal 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 & 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>
|
||||
<span class="bold">Fetter Text</span>
|
||||
<span class="font-blue">Blauer Text</span>
|
||||
<span class="font-blue bold">Blauer, fetter Text</span>
|
||||
</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
64
src/components/slides/css-introduction/how-to-embed.astro
Normal 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>
|
||||
<span style="color: red;">
|
||||
Hier könnte Ihre Werbung stehen!
|
||||
</span>
|
||||
</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>
|
||||
<style>
|
||||
// Hier sind die selektoren sowie die dazugehörigen Styles zu finden!
|
||||
</style>
|
||||
</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>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</code></pre>
|
||||
</section>
|
||||
</section>
|
||||
53
src/components/slides/css-introduction/index.astro
Normal file
53
src/components/slides/css-introduction/index.astro
Normal 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
4
src/components/slides/css-introduction/title.astro
Normal 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
62
src/components/slides/css-introduction/what-is-css.astro
Normal 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 & 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
8
src/pages/slides/css-introduction.astro
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue