HTML & CSS – Code ABC

Um es euch ein wenig leichter zu machen haben wir hier eine kleine „ABC“ der kleinen Befehle und Codeschnipsel für euch und hoffen es hilft euch weiter.

Es gibt für jede Gruppe noch mehr Befehle aber wir beschrenken uns mal auf die Gängigsten die ihr für eure ersten Codes brauchen könnt.

Das kleine Code ABC

Wir haben das Code ABC in folgende Rubriken unterteilt

– Größen und Boxgestalltung (CSS oder HTML)
– Schrift und Texteffekte (CSS oder HTML)
– Inhalte Gruppieren (HTML)
– Tabellen (HTML)

Größen und Boxgestalltung

Größe

width = Breite des Codeelements, z.B. width: 400px; würde euer Element 400px breit machen.
height = Höhe des Elements, Beim Hintergrund des Codes lässt man die Höhe gerne offen also variabel. Dann gibt man keine feste Höhe ein sondern lässt die Höhe automatisch anpassen. z.B. height: 200px; (Element endet bei 200px Höhe) height: auto; (Höhe wird automatisch angepasst). Oft kommt es zu fehlern wenn der Hintergrund auf 400px festgelegt ist, das Textelement im Hintergrund dann aber auf auto steht. Dann sieht auf einmal euer Code so aus.
Overflow = Box wird einen Scallbalken erhalten. Bei Overflow muss die Höhe eine Feste Größe haben. Damit der Scrallbalken überhaupt zum tragen kommt. z.B. Höhe 200px; Overflow: auto; Danach wird die Box bei 200px aufhören und es wird ein Scrollbalken entstehen. (Scrollbalken kann man auch individuell gestallten, wobei bei Firefox nur die dicken breiten angezeigt werden)


ACHTUNG:
Wenn ihr Breite und Höhe eures Codes anpasst, achtet darauf, ALLE Größen mit anzupassen. Ist euer Code zu beginn 400px breit und 400px lang und ihr ändert euer Textfeld auf 500px. Würde eurer Text an den Rändern überlaufen. Dann müsst ihr auch die gesamte Breite des Codes mit anpassen

Boxengestalltung

background-color = Hintergrundfarbe der Box

Beispiel:

.hintergrund {width: 200px; height: 300px;background-color: #b9dfdf; }

[Bild: cYYIOxg.png]

background-image Der Hintergrund ist keine Farbe sondern ein Bild z.B. ein Pattern. Das Bild kann in der Deckkraft runter gesetzt werden so das die Farbe dahinter sichtbar wird. Befehl ist background-image: url(„BILDLINK“);

Beispiel:

.hintergrund {width: 200px; height: 300px; background-image: url(„BILDLINK“); }

[Bild: Xu2c6N9.png]

box-shadow = die Box bekommt einen Schatten.
border = Rahmen um die Box. Es gibt unterschiedliche Rahmen.
border-radius = border-radius rundet die Ecken von HTML-Boxen ab. Bei einem Radius von 50% wird die Box rund. Den Radius kann man auch für jede Ecke einzeln angeben z.B. durch border-top-left-radius: 25%
damit würde die obere linke Ecke um 25% abgerundet, die anderen 3 Ecken bleiben aber so wie sie sind. Gibt man nur border-radius: 25% ein verändern sich alle vier Ecken gleichermaßen.

Beispiel:

.hintergrund {width: 200px; height: 300px;background-color: #b9dfdf; border: 2px solid #2a1d6c; border-radius: 20%;}

[Bild: g9MUcdO.png]

Schrift und Texteffekte

Schrift

font-family = Schriftart, ihr findet Schrift z.B. hier
font-size = Schriftgröße, wird in px angegeben
color = Farbe der Schrift, optimal mit einem # Hex Code , da kann man individueller sein, Worte wie z.B. red, white, blue gehen aber auch
font-weight = Schriftgewicht z.B. normal, bold (fett), lighter (dünner), bolder (extra Fett)
font-style = Stil der Schrift z.B. normal, italic (kursiv)

Beispiel:

.ueberschrift {font-family: ‚calibri‘; font-size: 12px; color: #97188a; font-style: italic;}

[Bild: cbbUuad.png]

Texteffekte

text-align = Textaurichtung z.B. center (zentriert), left (links), right (rechts), justify (blocksatz)
line-height = Zeilenabstand, hier wird ein numerischer Wert eingegeben z.B. 2pt um den Abstand zwischen den Zeilen anzugeben.
word-spacing = Wortabstand, hier wird ein numerischer Wert eingegeben z.B. 2pt um den Abstand zwischen den Wörtern anzugeben.
letter-spacing = Zeichenabstand, hier wird ein numerischer Wert eingegeben z.B. 2pt um den Abstand zwischen den Buchstaben anzugeben.
text-transform = Textart z.B. capitalize (Wortanfang in Großbuchstaben), uppercase (alle Buchstaben werden groß geschrieben), lowercase (alle Buchstaben werden klein geschrieben), none (keine Formatierung)

Beispiel:

.ueberschrift {font-family: ‚calibri‘; font-size: 12px; color: #97188a; font-style: italic; letter-spacing: 5px; text-transform: uppercase; line-height: 3px; }

[Bild: IqFaCrV.png]

text-shadow = Schlagschatten/Kontur für den Text wird immer mit mehreren Werten angegeben

Beispiel:

.ueberschrift {font-family: ‚calibri‘; font-size: 50px; color: #97188a; font-style: italic; letter-spacing: 5px; text-transform: uppercase; text-shadow: 2px 2px red; }

[Bild: 0GD4ER4.png]

Inhalte Gruppieren

ol = repräsentiert eine geordnete Liste von Elementen
ul = repräsentiert eine ungeordnete Liste

Beispiel:

ol

[Bild: 4XHXDei.png]
[Bild: 3oH6idI.png]

ul

[Bild: luSAgN4.png]
[Bild: QBKmuVy.png]

Tabellen

Für die Tabellen wird es noch mal einen ausführlichen Text geben.



Tabelle

table = leitet eine Tabelle ein. Steht immer zu beginn und schließt zum Ende der Tabelle.
th = definiert eine Kopfzeile
tr = leitet eine neue Tabellenzeile ein. Steht immer zu beginn und schließt zum Ende der Zeile.
td = eine normale Datenzelle.

[Bild: ZaBvZSp.png]

Beispiel:

[Bild: CLTH9LS.png]
[Bild: oTpvttH.png]

Tabellenstyle

Auch Tabellen kann man mit Rahmen, Farbe und ähnlichem gestallten. Das kommt dann aber alles genauer im Tabellentext.

>> Back to HTML & CSS