CSS Workshop
Ich will ran, aber Programmieren ist nicht so meins
...oder etwa doch?1. Worum geht es?
Zunächst listen wir auf, womit wir es zu tun haben.-
HTML-Elemente mit folgenden Aspekten:
- TAG wie
span, p, textarea, h1, h2, …, img, div, table, tr, td, input, form, script, iframe, … - CLASS(ES) = benutzerdefinierte Labels
- CSS-STYLES ← nur darum solls ja im Workshop gehen! Aber wir müssen über die anderen Dinge wissen, weil sie alle miteinander interagieren.
-
statische Attribute wie
href='...'
value='...'
type='...'
-
dynamische Attribute (Events/Triggers) wie
onclick='[JS-CODE]'
onmouseover='[JS-CODE]'
-
evtl. TEXTCONTENT wie
<span>Danke für Ihre Spende!</span>
<a href='xkcd.com'>Click here!</a>
- TAG wie
-
Einbindung von CSS-styles:
- im HTML-Element als style-Attribut (wie oben)
-
eingebetteter
<style>Block im HTML-Code - im HTML verlinkte .css-Datei.
-
Was erledigt ein Style?
- selektiert HTML-Elemente
- übliche Formattierung (Farbe, Font, usw.)
- Geometrie des HTML-Elements (width, height, position, usw.)
- Sichtbarkeitsattribute (scroll, hidden, block, in-line, usw.)
- dynamische Aspekte wie Transitionen. Stichwort: CSS3.
- Besonders bezogen auf den letzten Punkt ist der Browser wichtig!
Q: Das ist mir alles zu viel! Wie zum Geier soll ich das alles lernen?
A: Nicht alles auf einmal. Jeden style eignet man sich am besten stückweise und organisch an: bei jeder weiteren konkreten Anwendungen immer was Neues in den Köcher packen. Man kann sich das alles nach Bedarf nachschlagen und implementieren. Z. B. durch folgende Ressourcen:
und natürlich durch das Rumspielen2. HTML
2.1 HTML-Syntax
Immer der Form<TAG attribut=...> </TAG>
<TAG attribut=.../>
2.2 HTML-Beispiele: willkommen im Zoo!
Hier ein 1.<span>Element.
Hier ein 2. <span>Element.
Hier ein 1. <p>Element.
Hier ein 2. <p>Element.
Die
<div>Elemente sind allgmeien sehr nützlich,
um Elemente ordentlich einzurahmen...
...Die
<div>Elemente sind allgmeien sehr nützlich,
um Bereiche ordentlich voneinander abzutrennen...
und können beliebig verschachtelt werden.
Abb. 1. Hier ein <img>Element.
Und hier ein Button
und ein anderer
Eine Reihe Radiobuttons
Ja!
Nein!
Vielleicht?
und noch eine
Abb. 2. Hier ein <video>Element von AlexiBexi.
Abb. 3. Hier ein <iframe>Element: bettet Webseiten ein.
Eine Webseiten lässt sich in iframe-Elementen eingebetten,
solange diese beim Abruf von externen Webseiten
das nicht explizit untersagt.
Jetzt verstehen wir einen Einblick, was HTML-Elemente sind
und wie sie Webseiten ausgespielt werden.
Doch wie fängt man überhaupt an, diese stilistisch anzupassen?
3. CSS
3.1 CSS im HTML-Element
Statisches HTML-Attribut<TAG style='...'> ... </TAG>
3.2 CSS als Style-Sheet
Codeblock mit Syntax
<style>
TAG {
attr1: wert1;
attr2: wert2;
attr3: wert3;
.
.
}
.CLASS {
attr1: wert1;
attr2: wert2;
attr3: wert3;
.
.
}
#ID {
attr1: wert1;
attr2: wert2;
attr3: wert3;
.
.
}
… + viele andere Möglichkeiten für Selektoren…
</style>
Die Styles kann wie oben im HTML eingebettet werden
ODER kommt ohne <style>Tags in eine .CSS-Datei,
die im HTML mittels etwa
<link rel='stylesheet' href='DATEI.css'>
Abb. 4. Beispielordnerstruktur
4. Hands on
- Beispiele:
- Chrome: ready to go.
- Safari: Einstellungen >> Erweitert >> Menü „Entwickler“ ... >>
- Webseite1
- Webseite2
- Jetzt es selber hier ausprobieren!
5. Weitere Themen für andere Workshops
- Gute Praxis bzgl. HTML/CSS-Programmieren
- Gute Praxis bzgl. Layout → AFF, SMM, ... kann hier informieren
- CSS3: dynamische Attribute (Transitionen).