WebMasterService N3rds@Work

PSeCommerce Shop-Master Kurs

PSeCommerce-Standard-CSS-Styleheet.png

CSS – Erste Schritte

CSS ist gar nicht so kompliziert. Wenn man einige Tricks & Kniffe kennt, ist das erstellen eines eigenen Designs keine Hexerei mehr.

Wir werden uns also hier das Leben einfacher machen indem wir:

1. Die Entwickler-Tools im Browser aktivieren

2. Uns hilfreiche Quellen bereit legen um nachzuschlagen

3. Uns ansehen wie ein CSS Stylesheat angelegt ist

4. Unsere ersten Anpassungen vornehmen

5. Die Wichtigkeit von Dokumentationen vor Augen halten

Entwickler-Tools im Browser aktivieren

Auf Entwicklertools zugreifen

Klicke mit der rechten Maustaste auf ein Seitenelement und wähle „Element untersuchen“ aus. Hierdurch wird der HTML-Code des Elements angezeigt, auf das Du geklickt hast.

Wähle Anzeigen > Entwickler > Entwicklertools aus.

Verwende die Tastenkombination „Alt + Befehlstaste + I“.

Das sieht jetzt ev. sehr verwirrend aus…

Aber auch das täuscht, der wichtigste Teil für uns ist jetzt die rechte Spalte mit den Syle-Angaben
Aber auch das täuscht, der wichtigste Teil für uns ist jetzt die rechte Spalte mit den Syle-Angaben

So sieht CSS aus

Wenn wir uns die rechte Spalte mit den Styles ansehen, dann fühlen wir uns doch gleich an unsere „standard.css“ erinnert, oder?

Richtig, den genauso sieht CSS aus:

.mp_products .mp_product_image_list {
height: auto;
max-width: 100%;
width: 100%;
border-radius: 5px;
box-shadow: 2px 2px 3px darkslategrey;
}

Nutzen wir die Gelegenheit die Funktionsweise zu erklären um ein besseres Verständnis zu schaffen

.mp_products .mp_product_image_list sind die „Selektoren“ anhand dieser Elementklassen erkennt die CSS Datei ob sie ihre Styleangaben einsetzen muss, das kann eine, oder wie hier mehrere sein (wenn der selbe Style auf mehreren ähnlichen Elementen angewendet werden sollen).

{ öffnet nun den „Inhalt“ für Style-Angaben, welche angewendet werden sollen.

height: auto; height= Höhe : auto = Automatisch – Das bedeutet die Höhe des Elements wird automatisch bestimmt.
max-width: 100%; max-width= Maximale Breite des Elements : 100% = 100% der verfügbaren Breite
width: 100%; width = Breite : 100% = 100% der verfügbaren Breite – Die Standardbreite des Elements
border-radius: 5px; border-radius = Rand-Radius : 5px = Die Kanten des Elements runden sich um 5px ab
box-shadow: 2px 2px 3px darkslategrey; box-shadow = Box Schatten : 2px 2px 3px darkslategrey

Wichtig: Beachte immer das Du jede Style-Angabe (zB: max-width: 100%;) IMMER mit ; beendest!

} Schließt den Inhalt für die jeweiligen Style-Angaben und eine neue kann gestartet werden.

Es gibt unmengen Möglichkeiten mit CSS, wir werden im weiteren Verlauf noch auf einige stoßen und diese erklären, jedoch empfehlen wir dir CSS – SELFHTML zu Bookmarken, es ist die beste Anlaufstelle um über CSS im Deutschsprachigen Raum zu recherchieren.

Video: Manipulieren wir CSS mit den Entwickler-Tools

« Zurück
0