Da viele Tutorials Grundkenntnisse in CSS voraussetzen, habe ich hier ein CSS-Katalog erstellt, welches an sich kein eigenes Tutorial ist, sondern als Begleitmaterial für andere Tutorials dient.
Achtung: Dieser Post ist nicht dafür geeignet, CSS in seiner Gesamtheit zu erlernen.
Benutzen von CSS
CSS ist für das Aussehen jeder Webseite verantwortlich (nicht verwechseln mit dem Aufbau!). Im Prinzip ist die Sprache sehr einfach. Ihr braucht einen Selektor (Adressat), den ihr ansprecht und eine Anweisung bestehend aus Attribute und Werte zuweist. Im Grunde sieht ein CSS-Code so aus:
Selektor {
Attribut: Wert;
}
Dem angesprochenen Selektor kann man unendlich viele Anweisungen, also Attribute und Werte geben. Der Selektor ist abhängig vom HTML, denn CSS ist dafür da um HTML-Elemente zu gestalten.
Einfache Attribute von CSS
Je nach dem ob ihr ein Block-Element (div-Elemente, Bilder) oder ein Schrift-Element (a-Elemente, span-Elemente) gestalten wollt, gibt es verschiedene Attribute. Manche kann man auch bei beidem einsetzen. Im folgenden gehe ich auf einfache Attribute ein und welche Werte man jeweils einsetzen kann.
Höhe und Breite (nur Block)
width | height: [Zahlen-Wert mit Größeneinheit];Erklärung der Größeneinheiten:
- px = Pixel
- em = Höhe der verwendeten Schrift
- % = Prozentsatz - relativ zum Elternelement (Element, indem sich das bearbeitete Element befindet)
- auto = wird ohne Maßangabe benutzt, damit sich das Attribut sich an das andere vorgegebene Attributwert anpasst (zB. width ist fest vorgegeben, dann kann mit height:auto; die Höhe sich anpassen, damit das Bild nicht verzerrt wird). Funktioniert nur bei Bilder.
Beispiele:
width: 50px;
height: 5em;
width: 100%;
height: auto;
Rahmen (Block, Schrift)
border-top | border-right | border-bottom | border-left: [Zahlen-Wert mit Größeneinheit] [Art des Rahmens (double, dashed, dotted, solid)] [Farbe];
Erklärung der Werte:
- dashed = gestrichelt
- dotted = gepunktet
- double = doppelter durchgehender Strich
- solid = durchgehender Strich
Beispiele:
border-top: 1px solid #000000;
border-left: 3px dashed rgb(174, 255, 7);
border-right: 5px dotted #ffffff;
Hintergrundfarbe (Block, Schrift)
background-color: [Farbe];
Beispiele:
background-color: #ffffff;
background-color: rgb(0, 0, 0);
Schrift-Attribute von CSS
Im folgenden werden CSS-Attribute gezeigt, die nur auf Schriften anwendbar sind (h1 bis h6, a und span Elemente).
Schriftgröße
font-size: [Zahlen-Wert mit Größeneinheit];
Beispiele:
font-size: 5em;
font-size: 15px;
Schriftfarbe
color: [Farbe];
Beispiel:
color: #ccdd66;
Textformatierung
text-align: [center, left, right oder justify];
Erklärung der Werte:
- center = zentriert
- left/right = links/rechts
- justify = Blocksatz
Beispiel:
text-align: left;
Schriftformatierung
text-transform: [uppercase, lowercase, capitalize, none];
Erklärung der Werte:
- uppercase = alles in Großbuchstaben
- lowercase = alles in Kleinbuchstaben
- capitalize = erster Buchstabe groß, Rest klein
- none = keine Formatierung
Beispiel:
text-transform: uppercase;
Schriftart (nur Schrift)
font-family: [Schriftname], [alternative Schriftart];
Wie ihr eine Schrift einbindet, wird hier in den ersten 3 Schritten erklärt: http://www.copypastelove.de/2011/11/schriftart-bei-posttitel-andern.html
Beispiel:
font-family: 'Verdana', sans-serif;
Zeichenabstand (nur Schrift)
letter-spacing: [Zahlenwert mit Größeneinheit];
Erzeugt Abstand mit der angegebenen Größe.
Beispiel:
letter-spacing: 0.5em;
letter-spacing: 1px;
Diese Liste wird natürlich aktualisiert. Falls ihr etwas gerne wissen wollt, lasst es mich in den Kommentaren wissen!
