Aus Zeitmangel habe ich mich dazu entschieden das Tutorial unfertig zu veröffentlichen. Sehr chaotisch wie ihr bemweken werdet. Die grundlegenden Sachen sollten verständlich sein, ich werde das Tutorial jedoch nach und nach ergänzen. Bei Fragen könnt ihr mich gerne anschreiben. Außerdem kann jeder der mir ein wenig Arbeit abnehmen möchte seinen Teil dazu beitragen.
Indigo
Vorwort
So, nun da wir CSS haben werden sich wohl einige fragen was das ist, also habe ich mich dazu entschieden ein "kleines" Tutorial zu schreiben. Falls ein gewisses Thema schwer zu verstehen ist bin ich gerne bereit es ein wenig zu erweitern. Vorschläge, Feedback und Ergänzungen sind auch gerne gesehen 
Ablauf
1. Aufbau von CSS
2. Rahmen
->Einheiten
->Rahmenartd
->Farben definieren
3. Hintergründe
->Mitscrollen. Ja? Nein?
->Hintergrundfarbe
->Hintergrundbild
->Hintergrundposition
->Hintergrund wiederholen und Hintergrund positionieren
4. Margin und Padding
Hauptteil
Bei CSS gilt wie bei vielen Dingen easy to learn, hard to master. CSS ist sehr einfach zu lernen jedoch aufgrund der vielen verschiedenen Browser und deren Verhaltensweisen teilweise komplex umzusetzen. Ich empfehle euch falls ihr einen Showcase oder ein Tutorial macht: Testet das Aussehen mit verschiedenen Styles und Browsern. Aber genug von technischer Seite. Fangen wir an! Grundsätzlich sieht CSS immer so aus:
Eigenschaft:Wert(e);
Die Eigenschaft ist praktisch das, was wir definieren und der Wert ist wie wir es definieren. Wenn wir beispielsweise unserem Text einen Rahmen verpassen wollen benutzen wir border. Je nachdem welche Eigenschaft wir definieren kann diese verschiedene Werte haben. Sich diese zu merken kann etwas schwer sein. Im Internet sind jedoch unzählige Listen mit allen Eigenschaften, Erklärungen etc vorhanden. Aber zurück zu unserem Rahmen. Ein Rahmen hat generell drei Werte
Breite Art Farbe
1px solid #000000
Hmm. Fangen wir mit der Breite an: px ist die Einheit (Pixel). Das heißt unser Rahmen ist ein Pixel breit. Logisch oder? Mehr gibt's hier derzeit nicht zu sagen... Als nächstes kommen wir zu solid. Dieser Wert gibt an, wie unser Rahmen aussehen soll. In diesem Fall einfach... fest. Eine durchgezogene Linie. Wir könnten aber auch
dotted
,
dashed
und noch einiges mehr verwenden. Sucht euch wie gesagt am besten eine Liste wie diese falls ihr euch die Eigenschaften und Werte nicht merken könnt. Nun sind wir beim letzten Wert. Eine Raute und sechs nullen. Das wäre die Farbe. Rom Hacker haben hier einen klaren Vorteil . Zunächst einmal der Aufbau.
Raute|Rot|Grün|Blau
#000000
Zwei Stellen für jeden Farbwert. Wenn wir beispielsweise etwas rot haben wollen müssen wir die ersten beiden Ziffern erhöhen.
#990000
. Nun, das sieht zwar rot aus, aber es muss doch noch greller gehen!?! Der nächsthöhere Wert wäre #9A0000. Und? Fällt euch was auf? Das ist ein sogenannter Hex-Farbcode. Und wie ihr sicher an dem Namen feststellen konntet hat jede Farbe einen zweistelligen Hexwert. Unser höchster Rotton ist also
#FF0000
. Oder anders gesagt: 255 Rot, 0 Grün und 0 Blau. Falls euch Hex aus irgendeinem Grund nicht zusagt gibt es da noch RGB. Eine andere Möglichkeit Farben zu definieren.
rgb(Rot, Grün, Blau)
oder in unserem Fall
border: rgb(255, 0, 0)
Wie ihr seht sind die Werte diesesmal im Dezimalsystem geschrieben, macht jedoch genau das selbe. CSS lässt euch so ziemlich die freie Wahl wie ihr die Farben definieren wollt. Genau so ist es mit den Einheiten. Ihr könnt frei zwischen ihnen wählen. Wir könnten zum Beispiel unseren Rahmen nicht einen Pixel breit machen sondern einen Zentimeter.
border: 1cm solid rgb(255, 0, 0)
Das ist nur ein Beispiel. Bitte benutzt keine Rahmen, die breiter als ein paar Pixel sind. CSS unterstützt viele verschiedene Einheiten für viele verschiedene Zwecke, aber dazu später mehr. Kommen wir zu einer weiteren wichtigen Eigenschaft. Der Hintergrund. Die Eigenschaften sind unterteilt in background-attachment, background-color, background-image, background-position und background-repeat. Man kann sich auch viel Schreibarbeit sparen, aber dazu mehr am Ende des Tutorials unter Tipps & Tricks. Arbeiten wir uns durch. Background-attachment gibt an, ob der Hintergrund fixiert sein soll, oder mitscrollen soll. Als Demo nehm ich mir mal den RHR Banner...
https://board.romhackersworld.…te%20Flavour/rhr_logo.png[/url])]Ich scrolle nicht mit
https://board.romhackersworld.…te%20Flavour/rhr_logo.png[/url])]Ich scrolle mit
Mehr gibt es dazu eigendlich nicht zu sagen... Man kann der Eigenschaft die Werte fixed, scroll und inherit zuweisen. Wobei inherit einfach der Standartwert ist. Kommen wir zu background-color. Der Name lässt's vermuten: Hiermit definierten wir die Hintergrundfarbe.
background-color: [Farbe definieren]
background-color: #505090
background-color: rgb(80, 80, 144)
Auch hier sollte bereits alles erklärt worden sein also weiter geht's mit background-image.
background-image: url([Pfad]);
background-image: url(https://board.romhackersworld.…te%20Flavour/rhr_logo.png);
Was hier sofort auffallen sollte ist url(). Das ist notwendig, um dem Browser zu zeigen, dass er ein Bild von einer URL laden soll. Ebenfalls muss http:// vorhanden sein. Generell sollte es genügen einfach die URL von dem Bild aus der Browserleiste zu kopieren und zwischen den Klammern einzufügen. Als nächstes kommen background-position und background-repeat. Diese werde ich gleichzeitig erklären, da man sie oft zusammen verwendet. background-position gibt an wo sich das Bild auf der Seite befinden soll und mit background-repeat können wir den Hintergrund wiederholen. Nehmen wir wie immer den RHR Banner als Beispiel. Zunächst einmal ein Beispiel um besser verstehen zu können, was passiert.
Ein paar kurze Erklärungen: repeat wiederholt das Bild überall wo Platz ist. repeat-x horizontal. repeat-y vertikal und no-repeat zeigt das Bild nur einmal an. Nun kann es sein, dass wir unser Bild nicht immer oben links kleben haben wollen. Dazu benutzen wir background-position. Auch hier beginnen wir die Erklärung mit einem Beispiel. Dieses mal allerdings mit einer kleineren Grafik.
Wie ihr seht könnt ihr mehrere Werte verwenden. (background-position: [left/center/right] [top/bottom]) Außerdem funktioniert das ganze auch mit Einheiten. Der erste Wert definiert den horizontalen Abstand und der zweite den vertikalen. Nun wisst ihr so ziemlich alles über Hintergründe. Weiter zu einem meiner Lieblingsthemen. Abstände. Oder in Eigenschaften ausgedrückt margin und padding. Zunächst einmal der Unterschied: margin definiert den Außenabstand und padding den Innenabstand. In CSS ist alles rechteckig. Das heißt wenn ihr [styIe=zeugs][/styIe] schreibt erstellt ihr praktisch ein neues Rechteck. Damit die Rechtecke nicht alle über- bzw nebeneinander liegen kann man mit margin und padding Abstände definieren. Wie das ganze Aussieht werde ich dieses Mal in einer Paint Grafik veranschaulichen.
Wie ihr seht gehört padding praktisch zu eurem Rechteck dazu während margin außerhalb ist. Nun das Beispiel in CSS. Falls ihr den Text in eurem Stil nicht lesen könnt markiert ihn.
Verstanden? Die Eigenschaften sind margin-top, margin-right, margin-bottom, margin-left für margin und für padding padding-top, padding-right, padding-bottom, padding-left. Auch hier könnt ihr wieder frei mit den Einheiten variieren. px, %, pt, em, cm etc. Ihr könnt auch mehrstellige Kommazahlen verwenden. (Natürlich nicht bei px) Probiert am besten ein weinig herum. Man muss ein Gefühl für CSS Eigenschaften und deren Verhalten entwickeln. Das kommt mit der Zeit.
Wird fortgesetzt...
Referenz
Wird fortgesetzt...
CSS3
Da die tollsten Funktionen von CSS3 nur in einer seperaten CSS Datei anwendbar sind werde ich hier nur auf die neuen Eigenschaften und deren Werte eingehen. ACHTUNG! CSS3 ist noch in Entwicklung. Deshalb haben die meisten Eigenschaften browserspezifische erkennungen und leicht unterschiedliche Werte. Außerdem wird CSS3 von älteren Browsern nicht unterstützt! Ihr solltet daher immer eine Alternative definieren. Beispiel:
background: #98bede; /* Alte Browser */
background: -moz-linear-gradient(top, #98bede 0%, #deefff 100%); /* Firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#98bede), color-stop(100%,#deefff)); /* Google Chrome, Safari 4+ */
background: -webkit-linear-gradient(top, #98bede 0%,#deefff 100%); /* Google Chrome 10+, Safari5.1+ */
background: -o-linear-gradient(top, #98bede 0%,#deefff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #98bede 0%,#deefff 100%); /* Internet Explorer 10+ */
Ohne background: #98bede würde unser Hintergrund auf alten Browsern ignoriert werden. Hätten wir jetzt eine Schrift, die auf dem Standarthintergrund schwer zu lesen ist wäre unser Design auf älteren Browsern futsch. (Anmerkung: Dies ist nur noch ein geringer Teil und er nimmt mit jedem Tag ab, aber ich fühle mich dazu verpflichtet es zumindest anzumerken :D)
Wird fortgesetzt...
Tipps & Tricks
Viele CSS Eigenschaften kann man auch zusammenfassen und sich so sich so sehr viel Schreibarbeit sparen. Allerdings ist zu beachten, dass man bei einigen eine bestimmte Reihenfolge einhalten sollte.
[table='Eigenschaft, Enthält, Anmerkungen']backgroundbackground-attachment
background-color
background-image
background-position
background-repeatReihenfolge beliebig
fontfont-family
font-size
font-style
font-variant
font-weight
line-heightfont-family muss der letzte Wert sein und font-size muss vorkommen.
Ebenfalls zu beachten: Falls ihr line-height definieren wollt müsst ihr es in dieser Reihenfolge schreiben:
[font-size]/[line-height] - bsp: 12pt/120%
border ist bereits eine zusammengefasste Eigenschaft und besteht eigendlich aus border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style und border-top-width jede Eigenschaft einzeln zu erklären hätte wohl wenig Sinn. Falls ihr jedoch einmal einen Rahmen für weniger als alle Seiten haben wollt könnt ihr mit border-top, border-right, border-bottom und border-left einzelne Teile nach dem selben Pronzip wie border definieren. So könnt ihr beispielsweise einen bunten, oder einen halben Rahmen basteln.
Auch für padding und margin gibt es kürzere Schreibweisen. Anstatt jede Richtung einzeln zu definieren könnt ihr mit padding oder margin alle auf einmal ansprechen. Hierbei ist zu beachten, dass es drei Fälle gibt:
Fall1 - Allen den selben Wert zuweisen:
[margin/padding]: [Zahl][Einheit];
padding: 5px;
Fall2 - rechts & links, oben & unten:
[margin/padding]: [oben/unten] [rechts/links];
padding: 5px 3px;
Fall2 - Alles seperat:
[margin/padding]: [oben] [rechts] [unten] [links];
padding: 5px 3px 10px 4px;
Wird fortgesetzt...
Nützliche Links
Vielen Dank an Alen, Jiraiya und Obito für's Bespaßen während des Schreibens und prime-dialga für's Korrekturlesen.
