Visuelle Regeln

Wenn Sie schon einmal Textverarbeitungssoftware wie Microsoft Word oder Google Docs verwendet haben, haben Sie wahrscheinlich auch eine Funktion genutzt, mit der Sie die Schriftfarbe Ihrer Texteingabe ändern konnnten. "Font" ist der Fachbegriff für Schriftart oder Schriftfamilie.

Um die Schriftart des Textes auf Ihrer Webseite zu ändern, können Sie das mit font-family.

Im obigen  Beispiel wurde die Schriftfamilie für alle Hauptüberschriftenelemente auf Garamond eingestellt.

Beachten Sie beim Festlegen von Schriftarten auf einer Webseite die folgenden Punkte:

• Die angegebene Schriftart muss auf dem Computer des Benutzers installiert oder mit der Seite heruntergeladen werden.

• Websichere Schriftarten sind eine Gruppe von Schriftarten, die von den meisten Browsern und Betriebssystemen unterstützt werden.

• Sofern Sie keine websicheren Schriftarten verwenden, wird die ausgewählte Schriftart möglicherweise nicht in allen Browsern und auf allen Betiebssystemen gleich angezeigt.

• Wenn der Name einer Schriftart aus mehr als einem Wort besteht, empfiehlt es sich, den Namen der Schriftart in Anführungszeichen zu setzen, wie folgt:

Das Ändern der Schriftart ist nicht die einzige Möglichkeit, den Text anzupassen. Oftmals werden verschiedene Abschnitte einer Webseite durch Ändern der Schriftgröße hervorgehoben.

Um die Textgröße auf der Webseite zu ändern, verwendet man font-size.

In CSS steuert die Eigenschaft „font-weight“, wie fetter oder dünner Text angezeigt wird.

Unabhängig davon, wie stark der Stil auf den Text angewendet wird (Schriftart, Größe, Stärke usw.), wird der Text immer auf der linken Seite des Containers angezeigt, in dem er sich befindet.

Wir haben die Möglichkeit, Text mithilfe der Eigenschaft text-align auszurichten, um ihn an das Element auszurichten, das ihn enthält, das auch als sein übergeordnetes Element bekannt ist.

Bevor wir uns mit den Besonderheiten der Farbe befassen, müssen wir zwei Dinge unterscheiden. Farbe kann die folgenden Designaspekte beeinflussen:

• Vordergrundfarbe

• Hintergrundfarbe

Die Vordergrundfarbe ist die Farbe, in der ein Element angezeigt wird.

Wenn beispielsweise eine Überschrift so gestaltet ist, dass sie grün erscheint, wurde die Vordergrundfarbe der Überschrift gestaltet.

Umgekehrt wurde die Hintergrundfarbe der Überschrift gestaltet, wenn eine Überschrift so gestaltet ist, dass ihr Hintergrund gelb erscheint.

In CSS können diese beiden Designaspekte mit den folgenden beiden Eigenschaften formatiert werden:

• color: diese Eigenschaft gestaltet die Vordergrundfarbe eines Elements 

• background-color: diese Eigenschaft gestaltet die Hintergrundfarbe eines Elements

Die Deckkraft ist das Maß dafür, wie transparent ein Element ist. Es wird von 0 bis 1 gemessen, wobei 1 oder  100% vollständig sichtbar und 0 oder 0% undurchsichtig oder vollständig unsichtbar darstellt.

Mithilfe der Deckkraft könnnen Elemente in andere übergehen, um einen schönen Überlagerungseffekt zu erzielen. Zum Anpassen der Deckkraft (opacity) eines Elements sieht die Syntax so aus:

CSS bietet die Möglichkeit, den Hintergrund eines Elements zu ändern. Eine Möglichkeit besteht darin, den Hintergrund eines Elements in ein Bild umzuwandeln. Dies geschieht über die CSS-Eigenschaft background-image.

Die Syntax sieht so aus:

1. Die Eigenschaft "background-image" legt den Hintergrund des Elements so fest, dass ein Bild im Hintergrund angezeigt wird.

2. Der für das Hintergrundbild bereitgestellte Wert ist eine URL. Die URL sollte eine URL zu einem Bild sein. Die URL kann eine Datei in dem Projekt oder ein Link zu einer externen Seite sein. Um eine Verknüpfung zu einem Bild innerhalb eines vorhandenen Projekts herzustellen, muss ein relativer Dateipfad angegeben werden. Wenn es im Projekt einen Bildordner mit einem Bild mit dem Namen "autos.jpg" gab, ist dies der relative Ordner.

Der Dateipfad würde so aussehen:

!important kann auf bestimmte Deklarationen anstelle vollständiger Regeln angewendet werden. Es überschreibt jeden Stil, egal wie spezifisch er ist. Daher sollte es fast nie verwendet werden. Sobald !important verwendet wird, ist es sehr schwer, es zu überschreiben.

Die Syntax von !important in CSS sieht folgendermaßen aus: