Der visuelle Stil und das Layout einer Website werden von CSS oder Cascading Style Sheets bestimmt. Hierbei handelt es sich um Dokumente, die das HTML-Markup einer Webseite prägen und Webbrowsern Anweisungen zur Anzeige der Seiten bieten, die sich aus diesem Markup ergeben. CSS behandelt das Layout einer Seite sowie Farbe, Hintergrundbilder, Typografie und vieles mehr.
Wenn Sie sich eine CSS-Datei ansehen, werden Sie feststellen, dass diese Dateien wie jede Markup- oder Kodierungssprache eine bestimmte Syntax haben. Jedes Stylesheet besteht aus einer Reihe von CSS-Regeln. Diese Regeln sind, wenn sie vollständig übernommen werden, die Site.
Die Teile einer CSS-Regel
Eine CSS-Regel besteht aus zwei verschiedenen Teilen - dem Selektor und der Deklaration. Der Selektor legt fest, was auf einer Seite formatiert wird, und die Deklaration bestimmt, wie sie gestaltet werden soll. Zum Beispiel:
p { Farbe: # 000;} Dies ist eine CSS-Regel. Der Auswahlbereich ist das "p", das eine Elementauswahl für "Absätze" ist. Es würde daher ALLE Absätze in einer Site auswählen und ihnen diesen Stil zur Verfügung stellen (es sei denn, es gibt Absätze, für die andere Stile an anderer Stelle in Ihrem CSS-Dokument verwendet werden). Der Teil der Regel, der "color: # 000;" ist die so genannte Deklaration. Diese Erklärung besteht aus zwei Teilen - der Eigenschaft und dem Wert. Die Eigenschaft ist das "Farbstück" dieser Deklaration. Es legt fest, welcher Aspekt des Selektors visuell geändert wird. Der Wert gibt die gewählte CSS-Eigenschaft an. In unserem Beispiel verwenden wir den Hex-Wert # 000, der CSS-Abkürzung für "Schwarz". Wenn Sie also diese CSS-Regel verwenden, werden auf unserer Seite Absätze in einer schwarzen Schriftfarbe angezeigt. Wenn Sie CSS-Eigenschaften schreiben, können Sie sie nicht einfach so gestalten, wie Sie es für richtig halten. Für Fälle ist "color" eine tatsächliche CSS-Eigenschaft, daher können Sie sie verwenden. Diese Eigenschaft bestimmt die Textfarbe eines Elements. Wenn Sie versucht haben, "text-color" oder "font-color" als CSS-Eigenschaften zu verwenden, schlagen diese fehl, da sie keine tatsächlichen Bestandteile der CSS-Sprache sind. Ein anderes Beispiel ist die Eigenschaft "Hintergrundbild". Diese Eigenschaft legt ein Bild fest, das für einen Hintergrund wie folgt verwendet werden kann: .logo { Hintergrundbild: URL (/images/company-logo.png);} Wenn Sie versucht haben, "background-picture" oder "background-graphic" als Eigenschaft zu verwenden, würden diese fehlschlagen, da diese wiederum keine tatsächlichen CSS-Eigenschaften sind. Es gibt eine Reihe von CSS-Eigenschaften, die Sie zum Gestalten einer Site verwenden können. Einige Beispiele sind: Diese CSS-Eigenschaften sind großartig, um sie als Beispiele zu verwenden, da sie alle sehr unkompliziert sind. Selbst wenn Sie CSS nicht kennen, können Sie wahrscheinlich anhand ihrer Namen erraten, was sie tun. Es gibt andere CSS-Eigenschaften, auf die Sie ebenfalls stoßen werden, deren Funktionsweise aufgrund ihres Namens möglicherweise nicht so offensichtlich ist: Wenn Sie tiefer in das Webdesign einsteigen, werden Sie all diese Eigenschaften und noch mehr kennenlernen (und verwenden)! Jedes Mal, wenn Sie eine Eigenschaft verwenden, müssen Sie ihr einen Wert zuweisen - und bestimmte Eigenschaften können nur bestimmte Werte akzeptieren. In unserem ersten Beispiel der Eigenschaft "color" müssen wir einen Farbwert verwenden. Dies können Hexadezimalwerte, RGBA-Werte oder sogar Farbschlüsselwörter sein. Jeder dieser Werte würde funktionieren. Wenn Sie jedoch das Wort "trübselig" mit dieser Eigenschaft verwenden, würde dies nichts tun, da das Wort so beschreibend ist, dass es in CSS kein anerkannter Wert ist. Unser zweites Beispiel für "Hintergrundbild" erfordert, dass ein Bildpfad verwendet wird, um ein aktuelles Bild aus den Dateien Ihrer Website abzurufen. Dies ist der Wert / die erforderliche Syntax. Alle CSS-Eigenschaften haben erwartete Werte. Zum Beispiel: Wenn Sie die Liste der CSS-Eigenschaften durchgehen, werden Sie feststellen, dass jeder von ihnen über bestimmte Werte verfügt, die zum Erstellen der gewünschten Stile verwendet werden. Herausgegeben von Jeremy Girard CSS-Eigenschaftsgrundlagen
Einige CSS-Eigenschaften
Eigenschaften brauchen Werte
