1 Ergebnis für XXXXXX gefunden

@Sumpfohr bei dir gibt es nichts weiter zu sagen, alles richtig und gut gemacht^^
@Tsuki Ist bei dir alles in Ordnung? Kann ich im Stoff weitergehen, brauchst du Hilfe, hast du fragen?
Ich würde eigentlich ungern weitermachen, wenn ich deinerseits kein Feedback bekomme xD

Diesmal dürfte es wieder etwas einfacher werden.
Style direkt setzen
Eine gute Alternative zu Klassen und IDs ist das direkte Setzen des Styles im Tag.
Dies funktioniert genau so wie das Setzen des Links im a-Tag oder die Quelle im img-Tag mit

Code:

<TAG-NAME style="">

Man kann damit alle Tags gestalten.
Innerhalb style="" wird ganz normal wie im CSS-Tag geschrieben,

Code:

style="color: white; background-color: black; border-radius: 10px;"

nur dass wir nichts ansprechen müssen (da wir ja in dem Objekt, der gestaltet werden soll, den Style einführen)
Ich hoffe, man versteht, was ich sagen will.

Wenn wir den Style direkt im Tag setzen, minimieren wir die Nutzung von Klassen und ID's, was man immer tun sollte.
Wenn wir allerdings zwei Textboxen haben, die gleich aussehen sollen, sollten Klassen benutzt werden, sonst kann der Code schnell unübersichtlich werden und Fehlerquellen sind schwieriger zu finden.
Eine Überschrift oder einen einzelnen Span würde ich immer direkt im Tag den Style setzen.

Außerdem ist wichtig zu beachten, dass der Style nicht vererbt wird. Was ich damit meine?
Hier mal ein kleines Bsp:

Code:

<div class="bsp00" style="background-color: grey; width: 150px; height: 80px; color: darkblue; border-radius: 10px">Inhalt1<div class="bsp00">Inhalt2</div></div>
<style>.bsp00 {background-color: black; width: 100px; color: white}</style>

Hier haben wir zwei Divs ineinander gesetzt (der schwarze im grauen).
Dem Mutter-Div habe ich den broder-radius: 10px (abgerundete Ecken) gegeben,
doch das Tochter-Element (schwarzer Div) hat keine runden Ecken.

Außerdem sieht man hier, dass sich der Style, der direkt im Tag sitzt, immer über den Style, der im style-Tag definiert ist, setzt.
Also kann man ganz bequem in einem gestalteten Div einen Span setzen und den im Tag gestalten.
Hier ein Praxisbeispiel:

Code:

<div class="bsp10"><span style="font-size: 20px; text-shadow: 0px 0px 5px black; font-style: italic; color: lightsteelblue">Überschrift</span>
Hier ein kleiner Beispieltext, um die Theorie zu veranscheulichen. Der Text besitzt keinerlei Inhalt, also nicht worth, ihn zu lesen</div>
<style>.bsp10 {box-shadow: 0px 0px 5px black; width: 200px; font-size: 14px; color: white; background-color: black; padding: 2px;}</style>

CSS-Gestaltungsmöglichkeiten
Hover (Mouse-over)
Wie wir einen Link erstellen, wissen wir bereits.
Und wir wissen auch, dass sich standard-mäßig (hier im Forum) der Unterstrich ändert,
wenn man mit der Maus darüberfährt (Mouse-over).
Dieses Aussehen können wir auch ändern, und zwar nicht nur für Links, sondern für alles!
Dies geht aber nur mit Klassen, da man das Objekt im Style-Tag ansprechen muss:

Code:

<div class="bsp12">weißer Text auf schwarzem Hintergrund</div>
<style>.bsp12 {color: white; background-color: black;}</style>

Damit wir jetzt das Mouse-over des divs "bsp2" ansprechen, ergänzen wir den Style-Tag mit:

Code:

.bsp2:hover{}

:hover zeigt uns an, dass wir das Mouse-over gestalten möchten:

Code:

<div class="bsp12">weißer Text auf schwarzem Hintergrund</div>
<style>.bsp12 {color: white; background-color: black;} .bsp12:hover{color:black; background-color: white}</style>

Positionierung
So, an sich könnten wir jetzt schon eine eigene RPG-Postvorlage erstellen.
Doch was ist, wenn ich ein Bild direkt neben dem Text haben möchte?



Obwohl wir das Bild neben den Text gesetzt haben, sitzt er nicht rechts neben dem Text, sondern darunter.
Dies können wir mithilfe von der float (Fließ)-Eigenschaft ändern.
Dabei gibt es: float: left und float: right (Entweder sitzt das Element links oder rechts)
Dies bewirkt, dass wir mehrere Elemente, die sonst untereinander sitzen, nebeneinander platzieren können:

Code:

<div class="bsp141"><img src="https://i.servimg.com/u/f95/18/82/12/58/platzh10.png" style="float: right" />Hier ist Text, der direkt neben dem Bild stehen soll und sich an den Text anpasst, bzw. sich der Text am Bild anpasst.</div>
<style>.bsp141 {width: 300px; color: white; background-color: black;}</style>

Wichtig ist hierbei, dass das Bild vor dem Text stehen muss, andernfalls funktioniert es nicht richtig (ggf. ausprobieren).

Die float-Eigenschaft ist etwas seltsam und schwierig zu erklären am Besten, ihr probiert es selbst mal aus!

Bild als Hintergrund
Statt einer background-color, können wir auch ein background-image setzen. Dafür müssen wir in den CSS-Teil.
Das Einfügen ist auch wieder etwas anders, aber nicht schwer:

Code:

<style>.bspname {background-color:url('BILDLINK')}</style>

Außerdem können wir dem Bild sagen (falls es sehr groß ist), es soll nur genauso groß sein, wie der Inhalt des Elements:

Code:

<style>.bspname {background-color:url('BILDLINK'); background-size: 100%}</style>

weitere Kleinigkeiten
Hier mal eine kleine Übersicht von Sachen, die man mittels CSS einstellen kann:

Name	Beschreibung	Kommantar/Beispiel
color: FARBE	Schriftfarbe	mittels 6-stelligen Hex-Code (#XXXXXX) rgb(ROTANTEIL, GRÜNANTEIL, BLAUANTEIL) (von 0 bis 255) rgba(ROT, GRÜN, BLAU, SICHTBARKEIT) Farbname (Hier eine Liste aller Farbnamen)
font-size: ANGABE	Schriftgröße	XXpx (Pixelhöhe) XX% (Prozent von Elternelement) X.Yem (das X,Y-fache von der Standard-Schriftgröße)
font-family: SCHRIFTART	Schriftart/-style	serif: Serif-Schriftart Sans-Serif: serifenlos Schriftart (Hier eine Liste aller Schriftarten) eigene Schriftart von Google-Fonts einfach vor Postvorlage posten
font-style:	Schrift-'Style'	italic normal
text-decoration:	Schrift-Dekorationen	overline underline line-through none
font-variant:	Schriftvariante	Small-Caps all-small-caps normal
text-align	Textausrichtung	left, center, right
text-shadow: Xpx Ypx Zpx FARBE	Textschatten	X: Verschiebung auf X-Achse (Horizontale) Y: Verschiebung auf Y-Achse (Vertikale) Z: Reichweite des Schattens
box-shadow: Xpx Ypx Zpx FARBE	Box-Schatten	siehe oben
margin:	Außenabstand	in Pixel oder %-Angabe auch einzeln definierbar: margin-right; margin-eft; margin-top: margin-bottom Am Besten selbst informieren
padding	Innenabstand	siehe oben
border: Xpx ART FARBE	Rahmen	Xpx: Pixelstärke ART: Rahmen-Art: solid, dotted, groove einfach mal ausprobieren auch hier: border-top, border-right, etc. mgl.
border-radius: Xpx	Ecken-radius	0px: eckige Ecken 10px: rundere Ecken Auch Prozent und em-Angabe mgl. (einfach ausprobieren)
background-color	Hintergrundfarbe	Farbwahl wie bei color
background-position:	Hintergrundposition (bei Bild)	right, left, center, top-center, etc

Falls ihr noch etwas braucht oder so, einfach melden!

Diesmal habe ich keine konkrete Aufgabe...
Aber versucht euch mal an eure erste Postvorlage!
Bei Fragen bin ich jederzeit da.
Viel Spaß!

Die nächste Stunde wird erst in einer Woche sein, damit ihr genug Zeit habt.
Ich würde nächste Stunde auch nur ein paar Beispiel-Vorlagen durchgehen und Fragen beantworten.