HTML - dies ist eine Markup-Sprache zum Erstellen von Webseiten. Mit Hilfe von HTML können wir die Inhaltsstruktur einer Webseite beschreiben. Eines der Hauptelemente, mit denen wir beim Erstellen einer Seite arbeiten, ist der Block. Ein Block ist ein rechteckiger Bereich, der einen bestimmten Platz auf einer Seite einnimmt und andere Elemente wie Text, Bilder und andere Blöcke enthalten kann. In diesem Artikel werden wir uns ansehen, wie Sie einen Block in HTML erstellen und ihn mit CSS stylen.
Schritt 1: Erstellen Sie eine HTML-Datei und öffnen Sie sie in einem Texteditor. Beginnen Sie damit, die HTML-Version zu deklarieren und das Stammelement der Seite zu erstellen.
Schritt 2: Erstellen Sie innerhalb des Tags ein Element, das unser Block sein wird.
Schritt 3: Jetzt können Sie mit dem Styling des Blocks mit CSS beginnen. Erstellen Sie innerhalb des Tags ein Element, und definieren Sie Stile für den Block.
Schritt 4: Legen Sie innerhalb eines Elements die Stile für den Block mithilfe des div-Selektors fest. Sie können beispielsweise die Hintergrundfarbe, die Schriftfarbe, die Schriftgröße usw. festlegen.
Jetzt haben Sie einen Block in HTML erstellt und mit CSS gestylt. Sie können weiterhin Inhalte innerhalb des Blocks hinzufügen oder das Erscheinungsbild des Blocks ändern, indem Sie CSS-Eigenschaften hinzufügen oder ändern.
Schritt 1: Erstellen einer HTML-Struktur
Erstellen Sie zunächst einen Container für Ihren Block mit einem Tag . Sie können Klassen- oder ID-Attribute hinzufügen, um die Stile und das Verhalten Ihres Blocks zu steuern. Zum Beispiel:
In einem Container können Sie verschiedene Elemente wie Überschriften, Absätze, Listen oder Bilder platzieren. Verwenden Sie zum Erstellen eines Titels ein Tag oder andere Titel-Tags von bis . Zum Beispiel:
Заголовок блока
Sie können auch Absätze mit einem Tag hinzufügen . Zum Beispiel:
Заголовок блока
Это текст параграфа.
Mit diesen grundlegenden Elementen und Strukturen können Sie verschiedene Blöcke mit Ihren einzigartigen Inhalten und Stilen erstellen.
Schritt 2: Hinzufügen von CSS-Stilen
Nachdem wir die Blockgrundlage mit HTML erstellt haben, ist es an der Zeit, CSS-Stile hinzuzufügen, um dem Block das gewünschte Aussehen zu verleihen.
Dazu verwenden wir eine CSS-Datei, die über ein Tag mit der HTML-Datei verknüpft ist . In der CSS-Datei legen wir die Stile für unseren Block mithilfe von Selektoren und Eigenschaften fest.
Beginnen wir damit, eine Klasse für den Block zu erstellen. Dazu verwenden wir einen Punkt vor dem Klassennamen. Wenn wir zum Beispiel die Klasse "block" nennen wollen, schreiben wir .block.
Nach dem Klassennamen geben wir geschweifte Klammern an, in denen wir Eigenschaften und Werte beschreiben. Zum Beispiel:
.block
Für unseren Block können wir verschiedene Eigenschaften wie Breite (width), Höhe (height), Hintergrundfarbe (background-color), Einzug (margin und padding) und vieles mehr festlegen.
.block
In diesem Beispiel haben wir die Blockbreite auf 300 Pixel, die Höhe auf 200 Pixel, die Hintergrundfarbe auf Hellgrau (#f1f1f1), die Einrückung auf 10 Pixel und die Ränder auf 20 Pixel festgelegt.
Nachdem wir die Stile für unseren Block definiert haben, müssen wir dem HTML-Element angeben, auf das diese Stile angewendet werden. Dazu fügen wir ein Attribut hinzu class im öffnenden Tag dieses Elements weisen wir ihm einen Wert zu, der dem Klassennamen entspricht. Zum Beispiel:
Jetzt wird unser Block die von uns angegebenen Stile haben.
Schritt 3: Festlegen der Breite und Höhe des Blocks
Nachdem Sie einen Block mit einem Tag erstellt haben
, Sie können damit beginnen, seine Breite und Höhe einzustellen.
Um die Breite des Blocks festzulegen, verwendet CSS die Eigenschaft width. Wenn Sie beispielsweise die Blockbreite auf 300 Pixel festlegen möchten, können Sie den Wert dieser Eigenschaft auf Folgendes festlegen 300px.
Verwenden Sie die Eigenschaft, um die Blockhöhe festzulegen height. Sie können die Höhe des Blocks in Pixeln, Prozentsätzen oder anderen Maßeinheiten festlegen.
Um beispielsweise die Blockhöhe auf 200 Pixel festzulegen, können Sie einen Wert verwenden height: 200px.
Sie können auch einen Wert verwenden auto für eine Eigenschaft height, um die Höhe des Blocks automatisch an seinen Inhalt anzupassen.
Beachten Sie, dass die Werte für die Breite und Höhe eines Blocks in verschiedenen Maßeinheiten angegeben werden können, z. B. Pixel, Prozentsätze, Zahlen ohne Maßeinheiten usw. Wählen Sie je nach Ihren Bedürfnissen und Ihrem Design eine geeignete Maßeinheit aus.
Schritt 4: Ändern des Blockhintergrunds
Um die Hintergrundfarbe eines Blocks in HTML und CSS zu ändern, verwenden Sie die Eigenschaft background-color. Diese Eigenschaft gibt die Hintergrundfarbe des Elements an.
Um den Hintergrund des Blocks zu ändern, müssen Sie:
- Suchen Sie die Blockklasse oder -ID, für die Sie den Hintergrund ändern möchten.
- In einer Stildatei oder innerhalb eines Tags style eine Regel mit der Hintergrundfarbe des Blocks hinzufügen:
.block имя_цвета;>Anstatt farbname sie müssen die gewünschte Farbe als Namen angeben (z. B. "red", "blue", "green" usw.).) oder als Hexadezimalcode (z. B. "#FF0000" für rot).
Sie können auch Farbdaten im RGB- oder rgba-Format verwenden. Zum Beispiel "rgb(255, 0, 0)" für Rot oder "rgba(255, 0, 0, 0.5)" für eine durchscheinende rote Farbe.
Schritt 5: Text innerhalb des Blocks gestalten
Nachdem Sie den Hauptblock auf der Website erstellt haben, müssen Sie den Inhalt darin erstellen. Dazu können Sie verschiedene Tags und Stile verwenden, um den Text vorzeigbarer und lesbarer zu machen.
Eines der wichtigsten Tags für die Textgestaltung ist das Tag . Es wird verwendet, um besonders wichtige Informationen hervorzuheben, die die Aufmerksamkeit der Benutzer erregen sollten.
Kennung sie können Sie verwenden, um Sätze oder Wörter hervorzuheben, die kursiv geschrieben werden sollen. Dies kann beispielsweise nützlich sein, um Bedingungen oder Beispiele anzugeben.
Schritt 6: Hinzufügen von externen und internen Einrückungen
Die äußeren Einrückungen bestimmen den Abstand zwischen dem Block und den benachbarten Elementen auf der Seite. Sie können verwendet werden, um eine visuelle Trennung zwischen verschiedenen Inhaltsabschnitten oder -blöcken zu erstellen. Verwenden Sie die Eigenschaften margin-top , margin-right , margin-bottom und margin-left, um die äußeren Einrückungen in CSS festzulegen.
Die inneren Einrückungen bestimmen den Abstand zwischen dem Inhalt eines Blocks und seinen Grenzen. Sie können verwendet werden, um zusätzlichen Platz innerhalb eines Blocks zu schaffen oder den Inhalt auszurichten. Verwenden Sie die Padding-Eigenschaft, um die inneren Einrückungen in CSS festzulegen.
Beispiele für die Verwendung von Eigenschaften zum Festlegen externer und interner Einrückungen:
-
Um die gleichen äußeren Einrückungen an allen Seiten des Blocks festzulegen:
.block
.block
.block
.block
Die Auswahl der Einrückung hängt vom Design und Inhalt des Blocks ab. Experimentieren Sie mit verschiedenen Werten, um die besten Ergebnisse zu erzielen und eine harmonische Komposition auf Ihrer Webseite zu erstellen.
Schritt 7: Erstellen eines adaptiven Blocks mit Medienabfragen
Jetzt, da wir den Hauptblock für unsere Webseite erstellt haben, ist es an der Zeit, ihn anpassungsfähig zu machen. Das ansprechende Design ermöglicht es, dass unsere Seite auf verschiedenen Geräten und Bildschirmen wie Mobiltelefonen, Tablets und Desktops korrekt angezeigt wird.
Wir benötigen Medienabfragen, um einen adaptiven Block zu erstellen. Medienabfragen sind CSS-Regeln, mit denen Sie Stile basierend auf verschiedenen Bedingungen ändern können, z. B. der Bildschirmbreite eines Geräts.
Lassen Sie uns eine Medienabfrage hinzufügen, damit unser Block seine Stile ändert, wenn er auf einem mobilen Gerät angezeigt wird. Dazu verwenden wir eine @media-Regel, die die Breitenbedingung angibt, unter der die Stile angewendet werden. Wenn wir beispielsweise Blockstile mit einer Bildschirmbreite von weniger als 768 Pixeln ändern möchten, können wir den folgenden Code verwenden:
@media (max-width: 768px) >
In diesem Beispiel wenden wir Eigenschaften an width, background-color und color zur Klasse .main-block, wenn die Bildschirmbreite kleiner oder gleich 768 Pixel ist. Sie können diese Eigenschaften in alle ändern, die Sie für ein responsives Design verwenden möchten.
Wenn unsere Webseite nun auf einem mobilen Gerät mit einer Bildschirmbreite von weniger als oder gleich 768 Pixeln angezeigt wird, wird der Block angezeigt .der main-Block hat die angegebenen Stile, nämlich die Breite 100%, die Hintergrundfarbe Lightblue und die Textfarbe white.
Daher haben wir mithilfe von Medienabfragen einen adaptiven Block erstellt, der auf verschiedenen Geräten mit unterschiedlichen Bildschirmgrößen korrekt angezeigt wird.
