So legen Sie den Bildstil mit CSS fest

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die zur Beschreibung des Erscheinungsbilds und der Formatierung von Webseiten verwendet wird. CSS kann über Stylesheets verschiedene Stile für Elemente in Webseiten festlegen, einschließlich Bildern. In diesem Artikel erfahren Sie, wie Sie Bilder mit CSS formatieren.

1. Bilder hinzufügen

Bevor Sie lernen, wie Sie Bildstile festlegen, müssen Sie zunächst verstehen, wie Sie Bilder zu einer Webseite hinzufügen. Der einfachste Weg, ein Bild zu einer Webseite hinzuzufügen, ist die Verwendung des img-Tags von HTML. Mit dem img-Tag können Sie die URL (Webadresse) des Bildes angeben:

Unter diesen gibt das Attribut „src“ (Quelle) die URL des Bildes an. Es können relative oder absolute URLs verwendet werden. Wenn sich das Bild im selben Verzeichnis befindet, können Sie eine relative URL verwenden:

Dadurch wird der Name angegeben „ image.jpg“-Bilddateien befinden sich im selben Verzeichnis. Wenn sich die Bilddateien in unterschiedlichen Verzeichnissen befinden, können Sie relative Pfade wie folgt verwenden:

#🎜 🎜# In diesem Beispiel bedeutet „..“, zum oberen Verzeichnis zurückzukehren, dann zum Verzeichnis „images“ zu wechseln und die Datei mit dem Namen „image.jpg“ zu suchen.

2. Bildgröße festlegen

Das Festlegen der Bildgröße ist einer der am häufigsten verwendeten Stile in CSS. Die Größe des Bildes kann über die Eigenschaften „width“ und „height“ festgelegt werden. Diese Eigenschaften akzeptieren Pixel (px), Prozentsätze und andere Längeneinheiten als Werte.

Um beispielsweise die Bildgröße auf 200 Pixel Breite und 100 Pixel Höhe festzulegen, können Sie das folgende CSS verwenden:

img {

width: 200px; #🎜🎜 # height: 100px;
}

Sie können die Breiten- oder Höhenattribute auch auf Prozentsätze festlegen. Wenn Sie beispielsweise die Größe eines Bildes auf 50 % seines enthaltenden Elements festlegen möchten, können Sie das folgende CSS verwenden: 🎜🎜#}

Sie können die Breite des Bildes mithilfe von festlegen ein einzelnes „Breite“-Attribut und berechnet automatisch die Höhe, um das Seitenverhältnis beizubehalten. Das folgende CSS legt beispielsweise die Breite des Bildes auf 300 Pixel fest: 🎜🎜#

Sie können auch CSS verwenden, um die Position und Ausrichtung des Bildes festzulegen. Mit den Eigenschaften „margin“ und „padding“ können Sie den Leerraum um das Bild herum steuern.

Zum Beispiel richtet das folgende CSS das Bild links aus und fügt 10 Pixel Rand links und über dem Bild hinzu:

img {

display: block;# 🎜🎜# float: left;

margin: 10px 0 0 10px; Das „float“-Attribut und der „left“-Wert lassen das Bild nach links schweben. Schließlich lauten die Werte des Attributs „margin“ der Reihe nach oben, rechts, unten und links, wobei ein oberer und linker Rand von 10 Pixeln angegeben werden.

Sie können auch das Attribut „text-align“ verwenden, um Bilder auszurichten. Das folgende CSS richtet beispielsweise die Bildmitte aus: }

In diesem Beispiel ist der Wert des „margin“-Attributs „0 auto“, was bedeutet, dass das Bild horizontal zentriert wird. Abschließend wird die Eigenschaft „text-align“ auf „center“ gesetzt, um das Bild vertikal zu zentrieren. Ein weiterer gängiger Bildstil sind abgerundete Ecken und Ränder. Mit der Eigenschaft „border-radius“ können Sie den Eckenradius des Rahmens festlegen. Das folgende CSS legt beispielsweise fest, dass das Bild einen abgerundeten 50-Pixel-Rand hat: Die Breite, der Stil und die Farbe des Bildrands können mit der Eigenschaft „border“ festgelegt werden. Das folgende CSS legt das Bild beispielsweise auf eine Breite von 3 Pixeln mit einem schwarzen Rand fest:

img {

border: 3px solid black; The „border-top“, „border-right“ Die Eigenschaften „border-bottom“ und „border-left“ legen jeweils unterschiedliche Grenzen fest.

Zusammenfassung

Mithilfe von CSS können Sie Bilder auf einer Webseite ganz einfach formatieren. Bildgröße, Position, Ausrichtung, abgerundete Ecken und Ränder können eingestellt werden. Diese Stile können über CSS-Regelselektoren auf ein oder mehrere Bildelemente eines bestimmten Typs angewendet werden.

Das obige ist der detaillierte Inhalt vonSo legen Sie den Bildstil mit CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!