Mit CSS (Cascading Style Sheets) gestaltest du das Layout deiner Homepage und alles, was dazugehört, sprich Textformatierungen, Überschriften etc. CSS kommt in den Style-Bereich eines Layouts. In diesem Tutorial bringe ich dir die wichtigsten CSS-Befehle näher.
Den Text gestalten:
color: #000000; (Schriftfarbe, kann beliebig verändert werden und auch als rgb (0, 0, 0) angegeben werden)
font-family: Arial; (Schriftart, kann beliebig verändert werden; Schriftarten, die aus mehr als einem Wort bestehen, zum Beispiel Courier New, müssen in Anführungsstrichen ("Name der Schriftart") angegeben werden)
font-size: 15px; (Schriftgröße, kann beliebig verändert und auch in Points (pt) oder Prozent (%) angegeben werden. Außerdem gibt es xx-small bis xx-large)
font-style: italic / oblique / normal / underlined; (Schriftstil)
font-weight: bold / bolder / lighter / normal; ("Gewicht" der Schrift)
letter-spacing: 1px; (Abstand der Buchstaben, kann beliebig verändert werden, auch Minuswerte können verwendet werden; kann auch in Points oder Prozent angegeben werden)
word-spacing: 2px; (Abstand der Wörter, kann beliebig verändert und auch in Points oder Prozent angegeben werden)
line-heigt: 20px; (Höhe, kann beliebig verändert werden, wird vorallem bei Blöcken gebraucht; kann auch in Prozent angegeben werden)
text-align: left / right / center / justify; (Textausrichtung)
text-transform: uppercase / lowercase / capitalize / none; (Textformatierung)
text-decoration: underline / overline / line-through / none; (Textdekoration)
text-shadow: #EEE9E9 1px 1px 0px; 1px 1px 0px; (Schatten um den Text)
Eine Box gestalten:
background-color: #FFFFFF; (Hintergrundfarbe, kann beliebig verändert und auch bei Schriften verwendet werden)
background-image: url (Bild.png); (Hintergrundbild, die URL des Bildes kommt in die Klammer)
background-repeat: repeat / repeat-x / repeat-y / no-repeat; (s. Begriffsklärungen)
background-position: left, center, right, top, bottom; (Position des Hintergrundes)
background-attachment: fix, scroll (s. Begriffserklärungen)
border-color: #000000; (Rahmenfarbe)
border-style: solid, dotted, double, dashed; (Rahmenstil)
border: 1px solid #000000 (kompletter Rahmen)
border-top: 1px solid #FF0000; (oberer Rahmen, falls dieser anders aussehen soll)
border-bottom: 2px solid #B2B2B2; (unterer Rahmen, falls dieser anders aussehen soll)
border-left: 2px solid #B2B2B2; (linker Rahmen, falls dieser anders aussehen soll)
border-right: 1px solid #FF0000; (rechter Rahmen, falls dieser anders aussehen soll)
border-radius: 5px; (Radius für abgerundete Ecken)
float: left / right; (Ausrichtung)
overflow: auto / hidden / scroll / visible; (s. Begriffserklärungen)
margin: 5px, 5px, 5px, 5px; (Außenabstand zu äußeren Elementen in der Reihenfolge: oben, rechts, unten, links, kann auch unterteilt werden in margin-top, margin-right, margin-bottom und margin-left, müssen nicht alle gebraucht werden)
padding: 10 px, 5px, 10px, 5px; (Innenabstand zu inneren Elementen in der Reihenfolge: oben, rechts, unten, links, kann auch unterteilt werden in padding-top, padding-right, ..., müssen nicht alle gebraucht werden)
box-shadow: #EEE9E9 1px 1px 0px; 1px 1px 0px; (Schatten um die Box)
min-height: 100px; (Mindesthöhe des Elements)
max-height: 500px; (maximale Höhe des Elements)
min-width: 250px; (Mindestbreite des Elements)
max-width: 600px; (maximale Breite des Elements)
Sonstige:
display: block; (Hintergrund durchgängig)
visibility: hidden; (Element unsichtbar machen)
height: 500px; (Höhe des Elements, z.B. Bild)
width: 200px; (Breite des Elements, z.B. Bild)
opacity: 0.5; (Transparenz, wird in Dezimalzahlen angegeben; 0,5 steht für 50%)
Begriffserklärungen:
xx-small: sehr kleine Schrift
x-small: kleinere Schrift
small: kleine Schrift
medium: mittlere Schriftgröße
large: große Schrift
x-large: größere Schrift
xx-large: sehr große Schrift
italic: kursive Schrift
oblique: kursive Schrift
normal: normal formatierte Schrift, in diesem Fall kann der Befehl weggelassen werden
bold: fette Schrift
bolder: extrafette Schrift
lighter: extradünne Schrift
left: die Schrift wird links ausgerichtet
right: die Schrift wird rechts ausgerichtet
center: die Schrift wird zentriert
justify: die Schrift wird im Blocksatz ausgerichtet
uppercase: schreibt alle Buchstaben groß
lowercase: schreibt alle Buchstaben klein
capitalize: schreibt die Anfangsbuchstaben jedes Wortes groß
none: keine Formatierung, in diesem Fall kann der Befehl weggelassen werden
underline: unterstreicht den Text
overline: gibt dem Text eine Linie über dem Text
line-through: streicht den Text durch
repeat: wiederholt das Bild
repeat-x: wiederholt das Bild horizontal
repeat-y: wiederholt das Bild vertikal
no-repeat: sorgt dafür, dass das Bild nicht wiederholt wird, also fixiert ist
top: der Hintergrund ist oben positioniert
bottom: der Hintergrund ist unten positioniert
fix: der Hintergrund ist fixiert
scroll: der Hintergrund scrollt mit
solid: durchgezogene Linie
dotted: gepunktete Linie
double: doppelte durchgezogene Linie
dashed: gestrichelte Linie
auto: entscheidet selber, wie das Element angezeigt wird
hidden: Element wird abgebrochen
visible: Element wird vollständig sichtbar
