Wie lege ich den CSS-Stil für den Hauptteil einer Webseite fest?

Im Webdesign verwenden wir häufig CSS, um den Stil von Webseiten zu steuern. Unter diesen ist das Festlegen von Stilen für den Hauptteil einer Webseite ein sehr grundlegender Vorgang. Dieser Vorgang kann nicht nur die Erscheinungsbildeigenschaften wie die Hintergrundfarbe und den Schriftstil der Webseite ändern, sondern auch das Layout und den Schriftsatz der Webseite beeinflussen Seite. In diesem Artikel erfahren Sie ausführlich, wie Sie CSS-Stile für den Hauptteil einer Webseite festlegen.

1. Was ist der Hauptteil einer Webseite?

Bevor Sie sich mit dem Festlegen von CSS-Stilen für den Hauptteil einer Webseite befassen, müssen Sie zunächst verstehen, was der Hauptteil einer Webseite ist. Laienhaft ausgedrückt ist der Body der Hauptinhalt der Webseite und der Stammcontainer aller Webseitenelemente, die wir sehen. Auf einer HTML-Seite befindet sich das Body-Tag nach dem Head-Tag und innerhalb des HTML-Tags.

2. Wie lege ich den CSS-Stil für den Hauptteil der Webseite fest?

Durch Festlegen des CSS-Stils des Körpers können wir die meisten Erscheinungsbild- und Layouteigenschaften der Webseite steuern. Im Folgenden stellen wir vor, wie Sie verschiedene Eigenschaften nacheinander festlegen.

1. Hintergrundfarbe festlegen

Um in CSS die Hintergrundfarbe für den Körper festzulegen, müssen wir die Hintergrundfarbe festlegen Attribut einem Farbwert zuordnen. Um beispielsweise die Hintergrundfarbe auf Grau festzulegen, können Sie den folgenden Code verwenden:

body {
  background-color: gray;
}

Sie können feststellen, dass sich „body“ hier auf das Body-Element in der Webseite und den darin enthaltenen Code bezieht Die geschweiften Klammern sind die Definition des Stils. Unter diesen bezieht sich Hintergrundfarbe auf das Hintergrundfarbattribut und Grau auf den Farbwert.

2. Hintergrundbild festlegen

Wenn Sie ein Hintergrundbild für eine Webseite festlegen möchten, können wir das Attribut „Hintergrundbild“ verwenden. Beispielsweise können wir das Hintergrundbild der Webseite auf ein Bild mit dem Namen „background.jpg“ festlegen:

body {
  background-image: url('background.jpg');
}

Wie Sie sehen, muss das Hintergrundbild hier mithilfe einer URL-Adresse angegeben werden. In diesem Beispiel verwenden wir einfache Anführungszeichen, um die Bildadresse einzuschließen.

3. Schriftart festlegen

Um die Schriftart auf der Webseite festzulegen, müssen wir das Attribut „font-family“ verwenden. In dieser Eigenschaft können wir einen oder mehrere Schriftartnamen als Standardschriftart für die Webseite angeben. Der folgende Code legt beispielsweise die Standardschriftart für eine Webseite auf Arial fest:

body {
  font-family: SimSun, Arial, sans-serif;
}

Hier verwenden wir Kommas, um mehrere Schriftartnamen zu trennen. Der Browser wird versuchen, diese Schriftarten in der von uns aufgelisteten Reihenfolge zu laden. Wenn die erste Schriftart nicht geladen werden kann, versucht der Browser, die zweite Schriftart zu verwenden.

4. Schriftgröße festlegen

Wenn Sie die Schriftgröße auf der Webseite ändern möchten, können Sie das Attribut „font-size“ verwenden . Hier können wir einen absoluten Pixelwert festlegen oder eine abstraktere relative Größe verwenden. Der folgende Code setzt beispielsweise die Schriftgröße auf einer Webseite auf 16 Pixel:

body {
  font-size: 16px;
}

Alternativ können Sie den folgenden Code verwenden, um die Schriftgröße auf eine relative Größe festzulegen:

body {
  font-size: medium;
}

In diesem Beispiel stellen wir die Schriftgröße auf die relative Größe „mittel“ ein. Auf diese Weise können wir sicherstellen, dass die Schriftgröße für die Lesegewohnheiten der meisten Menschen geeignet ist.

5. Zeilenhöhe festlegen

Wenn Sie den Abstand zwischen Textzeilen auf der Webseite ändern möchten, können Sie das Attribut „Zeilenhöhe“ verwenden . In dieser Eigenschaft können wir einen absoluten Pixelwert festlegen oder eine relative Größe verwenden, die aus der Schriftgröße berechnet wird. Der folgende Code setzt beispielsweise die Zeilenhöhe auf das 1,6-fache der Schriftgröße:

body {
  line-height: 1.6;
}

6. Textfarbe festlegen

So ändern Sie die Textfarbe Auf einer Webseite können Sie das Farbattribut verwenden. Diese Eigenschaft akzeptiert einen Farbwert als Eingabeparameter. Der folgende Code setzt beispielsweise die Textfarbe auf der Webseite auf Schwarz:

body {
  color: black;
}

7. Textausrichtung ändern

Wenn Sie Änderungen vornehmen müssen Um den Text auf der Webseite links, zentriert oder rechts auszurichten, können Sie das text-align-Attribut verwenden. Der folgende Code kann beispielsweise Text auf einer Webseite horizontal zentrieren:

body {
  text-align: center;
}

8. Seitenabstand festlegen

Wenn Sie etwas Platz lassen müssen Um rund um die Webseite etwas Abstand zwischen dem Inhalt und dem Browserfenster zu schaffen, können Sie das Padding-Attribut verwenden. Der folgende Code lässt beispielsweise 100 Pixel Leerraum um die Webseite herum:

body {
  padding: 100px;
}

3. Zusammenfassung

Durch Festlegen des CSS-Stils des Hauptteils der Webseite können wir kann das Erscheinungsbild der Webseite und den Schriftsatz steuern. Unter anderem können wir die Hintergrundfarbe, den Schriftstil, die Textfarbe, die Ausrichtung, die Füllung und andere Eigenschaften der Webseite ändern. Durch diese grundlegenden CSS-Stileinstellungen können wir der Webseite ein einzigartiges Erscheinungsbild verleihen und das Zugriffserlebnis des Benutzers verbessern.

Das obige ist der detaillierte Inhalt vonWie lege ich den CSS-Stil für den Hauptteil einer Webseite fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!