So erstellen Sie CSS-Stile in HTML: Schritt für Schritt Anleitung und Codebeispiele

HTML ist eine Markupsprache, die zum Erstellen von Webseiten verwendet wird. Es bietet die Möglichkeit, einer Seite verschiedene Elemente und Inhalte hinzuzufügen, die mit CSS-Stylesheets formatiert werden können.

CSS (Cascading Style Sheets) stellt uns Methoden zur Verfügung, um das Aussehen und den Stil von Elementen auf einer Webseite zu steuern. Mit CSS können wir Eigenschaften wie Textfarbe, Schriftgröße, Einzug, Rahmen, Hintergründe und vieles mehr festlegen.

Das Erstellen von CSS-Stilen in HTML mag auf den ersten Blick schwierig erscheinen, aber es ist eigentlich ziemlich einfach, wenn Sie die Grundlagen verstehen. In diesem Artikel werden wir uns eine schrittweise Anleitung ansehen, die Ihnen hilft, mit CSS in Ihren HTML-Seiten zu beginnen, und Ihnen Codebeispiele zum besseren Verständnis zur Verfügung stellen.

Warum sind CSS-Stile für eine HTML-Seite wichtig

Mit CSS-Stilen können Sie das Aussehen von HTML-Elementen ändern, Farben, Hintergründe, Schriftarten, Ausrichtung und andere dekorative Elemente hinzufügen. Sie ermöglichen es Ihnen, einzigartige und ansprechende Designs für die Seite zu erstellen, wodurch sie für die Benutzer attraktiver wird.

Sie können auch das Seitenlayout mithilfe von CSS-Stilen steuern. Das bedeutet, dass Sie die Größe und Position von Elementen ändern, Spalten, Gitter erstellen, Einrücken und vieles mehr hinzufügen können. Dies ermöglicht es Webentwicklern, flexiblere und anpassungsfähigere Designs zu erstellen, die sich leicht an verschiedene Geräte und Bildschirme anpassen können.

Ein weiterer wichtiger Aspekt von CSS-Stilen ist die Möglichkeit, Code wiederzuverwenden. Mit CSS können Sie Klassen erstellen und Stile in einzelne Dateien einfügen. Dadurch können Sie dieselben Stile auf verschiedene Elemente auf der Seite anwenden, wodurch der doppelte Code reduziert und die Unterstützung und Entwicklung von Projekten vereinfacht wird.

Schließlich bieten CSS-Stile ein Maß an Konsistenz und Einheitlichkeit auf der gesamten Webseite. Sie ermöglichen es Ihnen, eine allgemeine visuelle Identität zu schaffen, die es Benutzern ermöglicht, die Seite leicht zu navigieren und grundlegende Informationen zu vermitteln. Dies ist wichtig, um eine komfortable und angenehme Benutzererfahrung zu schaffen, die dazu beiträgt, Besucher anzuziehen und ihre Aufmerksamkeit zu behalten.

Schritt 1. Verbinden von CSS-Stilen mit einer HTML-Seite

Um Stile auf einer HTML-Seite zu erstellen, müssen Sie ein CSS-Stylesheet anhängen. Dazu im Tag

ihrem HTML-Dokument müssen Sie den folgenden Code hinzufügen:

In diesem Beispiel wird das Attribut rel="stylesheet" verwendet, das angibt, dass es sich bei der zu verbindenden Datei um ein Stylesheet handelt. Das Attribut type="text/css" gibt den Inhaltstyp der zu verbindenden Datei an.

Im href-Attribut müssen Sie den Pfad zur Datei mit CSS-Stilen angeben. In diesem Beispiel wird die Datei als "styles" bezeichnet.css". Sie können einen beliebigen anderen Dateinamen für Ihre Datei angeben.

Öffnen Sie Ihre HTML-Datei in einem Webbrowser, um zu überprüfen, ob die zugeordneten Stile korrekt sind. Wenn es richtig gemacht wurde, sollten die Stile auf Ihre HTML-Seite angewendet werden.

Verbindungsoptionen für CSS-Stile

Es gibt mehrere Möglichkeiten, CSS-Stile mit einem HTML-Dokument zu verbinden:

• Interne Stile (Inline Styles): In diesem Fall werden die Stile direkt in HTML-Tags mit dem Attribut "style" verschrieben. Zum Beispiel:

Это абзац текста с внутренними стилями.

• Interne Stile mit : In diesem Fall werden die Stile innerhalb des Tags verschrieben , das sich innerhalb des Dokumentabschnitts befindet. Zum Beispiel:

p 
Это абзац текста с внутренними стилями.

• Externe Stile: In diesem Fall werden die Stile in einer separaten CSS-Datei beschrieben, die dann mit einem Tag an das HTML-Dokument angehängt wird . Zum Beispiel:

 
Это абзац текста с внешними стилями.

Schritt 2. CSS-Selektoren und -Eigenschaften

Nachdem Sie die grundlegenden Projekteinstellungen definiert haben, können Sie mit dem Erstellen von Stilen für die Elemente auf der Seite beginnen. Dazu müssen Sie Selektoren und CSS-Eigenschaften verwenden.

CSS-Selektoren definieren die Elemente auf der Seite, auf die bestimmte Stile angewendet werden. Die gebräuchlichsten Selektoren sind:

• Elemente - ein Selektor mit einem Elementnamen, z. B. "p" für Absätze oder "h1" für Überschriften der ersten Ebene.
• Klassen - ein Selektor, der mit einem Punktzeichen beginnt und dem der Klassenname folgt, zum Beispiel. "container" oder ".highlight". Klassen können verwendet werden, um Elemente mit gemeinsamen Stilen zu gruppieren.
• Kennzeichnungsnummern - ein Selektor, der mit einem Gitterzeichen beginnt und gefolgt von einem ID-Namen wie "#main" oder "#header" folgt. Die IDs müssen auf der Seite eindeutig sein und können zum Formatieren bestimmter Elemente verwendet werden.

CSS-Eigenschaften geben spezifische Stile für die ausgewählten Elemente an. Zum Beispiel:

In diesem Beispiel ist der Selektor ".selector" wählt Elemente mit der Klasse "selector" aus und gibt ihnen eine blaue Textfarbe, eine Schriftgröße von 16 Pixeln und einen Einzug von 10 Pixeln an. Es gibt eine große Anzahl von Eigenschaften, mit denen Sie Elementstile wie Farbe, Größe, Einzug, Hintergründe und vieles mehr erstellen können.

Es ist wichtig sich daran zu erinnern, dass Stile nicht nur für einzelne Elemente, sondern auch für Gruppen von Elementen über Klassen- oder Elementselektoren definiert werden können. Dadurch wird es einfacher, ein einheitliches Design für verschiedene Elemente auf einer Seite zu erstellen.

Hier sind einige Beispiele für CSS-Selektoren und -Eigenschaften:

Mit CSS-Selektoren und deren Eigenschaften können Sie eine Vielzahl von Stilen für Elemente auf einer Seite erstellen, wodurch sie für Benutzer attraktiver und lesbarer werden.

Die wichtigsten Arten von Selektoren in CSS

Elementselektoren - dies sind die einfachsten Selektoren, die alle Elemente eines bestimmten Typs auswählen. Zum Beispiel wählt der "p" -Selektor alle Elemente aus Paragraphen auf der Seite.

ID-Selektoren ermöglicht die Auswahl eines Elements anhand seiner eindeutigen ID. Dazu wird das Gitterzeichen (#) vor der Element-ID verwendet. Der Selektor "#header" wählt beispielsweise ein Element mit der ID "header" aus.

Klassenselektoren wählen Sie Elemente nach ihrer Klasse aus. Eine Klasse wird einem Element mit dem Attribut "class" zugewiesen und kann für verschiedene Elemente neu verwendet werden. Der Klassenselektor beginnt mit einem Punkt (.) und es folgt der Klassenname. Zum Beispiel ein Selektor. "highlight" wählt alle Elemente mit der Klasse "highlight" aus.

Benachbarte Selektoren ermöglicht die Auswahl von Elementen, die unmittelbare Nachbarn eines anderen Elements sind. Ein benachbarter Selektor wird durch ein Pluszeichen (+) zwischen zwei benachbarten Selektoren gekennzeichnet. Zum Beispiel wählt der Selektor "h2 + p" das erste Element aus Paragraphen, die unmittelbar auf Element h2 folgt.

Untergeordnete Selektoren ermöglicht die Auswahl von Elementen, die direkte untergeordnete Elemente eines anderen Elements sind. Der untergeordnete Selektor wird durch das Symbol "größer" (>) gekennzeichnet. Zum Beispiel wählt der Selektor "ul > li" alle Elemente aus Liste, die direkte untergeordnete Elemente des UL-Elements sind.

Pseudoklassen sind Schlüsselwörter, die auf Elemente in bestimmten Zuständen oder bei bestimmten Benutzeraktionen angewendet werden. Beispielsweise wendet die Pseudoklasse ":hover" Stile auf ein Element an, wenn Sie den Mauszeiger darüber bewegen.

Dies sind nur einige der wichtigsten Arten von Selektoren in CSS. Wenn Sie Selektoren kennen und richtig verwenden, können Sie stilvolle und flexible Webseiten erstellen.

Schritt 3. Erstellen von Klassen und IDs in CSS

Wenn Sie grundlegende Stile für Ihr Webdokument erstellt haben, müssen Sie möglicherweise die Anzeige bestimmter Elemente genauer anpassen. Dazu gibt es Klassen und IDs in CSS.

Klassen und IDs ermöglichen es bestimmten Elementen, zusätzliche Stile zu verwenden, die sich von allgemeinen Stilen unterscheiden, die auf andere Elemente angewendet werden. Sie werden für Elemente verwendet, die auf einer Seite hervorgehoben oder hervorgehoben werden sollen.

Klassen werden durch einen Punkt vor dem Klassennamen und Bezeichner durch ein Gitter vor dem Bezeichnernamen definiert.

Zum Beispiel, um eine Klasse zu erstellen .das Highlight, das auf ein bestimmtes Element angewendet wird, kann mit dem folgenden Code verwendet werden:

Und um eine #header-ID zu erstellen, die auf ein Element mit der angegebenen ID angewendet wird, verwenden Sie den folgenden Code:

Nachdem Sie Klassen und IDs in CSS definiert haben, können Sie sie im HTML-Code verwenden, indem Sie den Elementen entsprechende Attribute hinzufügen:

Текст

                        
                            
                        
                    

Заголовок

Diese Elemente verwenden nun die Stile, die in den entsprechenden CSS-Klassen und -IDs angegeben sind.

Verwenden Sie Klassen und IDs in CSS, um flexiblere und genauere Stile für Ihr Webdokument zu erstellen.

Codebeispiele zum Erstellen von Klassen und Bezeichnern

Hier finden Sie Codebeispiele zum Erstellen von Klassen und IDs in HTML:

Um Klassen und IDs in CSS zu stylen, können wir Selektoren verwenden:

Um beispielsweise den Text rot zu machen und die Schriftgröße auf 18 Pixel für ein Element mit der Klasse "my-class" festzulegen und es für ein Element mit der ID "my-ID" fett zu machen, können wir das folgende CSS verwenden:

Auf diese Weise können wir Klassen und IDs verwenden, um eine Vielzahl von Stilen auf der Seite zu erstellen.

Schritt 4. Arbeiten mit Farben und Hintergründen in CSS

Verwenden Sie die color-Eigenschaft, um die Farbe des Textes festzulegen. Der Wert dieser Eigenschaft kann in verschiedenen Formaten angegeben werden:

• Mit Hilfe von Namenswerten, z. B. color: red; .
• Mit hexadezimalem Code wie color: #FF0000; .
• Mit RGB-Werten, z. B. color: rgb(255, 0, 0); .

Verwenden Sie die background-color-Eigenschaft, um den Hintergrund eines Elements zu ändern. Es kann auch verschiedene Wertformate annehmen:

• Mit Namenswerten, z. B. background-color: yellow; .
• Mit hexadezimalem Code, z. B. background-color: #FFFF00; .
• Mit RGB-Werten, z. B. background-color: rgb(255, 255, 0); .

Sie können Bilder auch mithilfe von CSS als Hintergrund für Elemente verwenden. Dazu wird die Eigenschaft background-image verwendet, die den Pfad zum Bild als Wert annimmt, z. B. background-image: url("image.jpg"); .

Zusätzlich zur Auswahl von Text- und Hintergrundfarben für einzelne Elemente können Sie mit CSS Farben und Hintergründe auf die gesamte Webseite anwenden. Hierzu wird eine spezielle body-Eigenschaft verwendet, die die Formatierung für das gesamte Dokument angibt. Um beispielsweise einen gelben Hintergrund für die gesamte Seite festzulegen, können Sie den folgenden Code verwenden:

body

Auf diese Weise können Sie mit Farben und Hintergründen in CSS arbeiten, um ästhetisch ansprechende und gut lesbare Webseiten zu erstellen.