Heim > Artikel > Web-Frontend > So verwenden Sie CSS

So verwenden Sie CSS

WBOYOriginal: 2023-05-21 11:25:38591Durchsuche

CSS (Cascading Style Sheets) ist eine Sprache zum Definieren von Webseitenstilen. Sie wird zusammen mit HTML zum Erstellen von Webseiten verwendet. CSS steuert das Erscheinungsbild und die Position von HTML-Elementen, um Webseiten zu verschönern und die Benutzererfahrung zu verbessern.

In diesem Artikel stellen wir die Grundlagen von CSS vor und zeigen Ihnen, wie Sie mit CSS den Stil von HTML-Elementen ändern.

CSS-Grundlagen

CSS besteht aus Selektoren und Deklarationen. Mit Selektoren werden HTML-Elemente ausgewählt, auf die Stile angewendet werden sollen, während Deklarationen die Stile angeben, die auf die ausgewählten Elemente angewendet werden sollen.

Selektor

Hier sind einige gängige Selektoren:

Elementselektor# 🎜🎜#: Wählen Sie ein Element aus, indem Sie den HTML-Elementnamen angeben, zum Beispiel:
```
p {
color: red;
}
```
Dadurch werden alle e388a4556c0f65e1904146cc1a846bee-Elemente im Dokument ausgewählt und ihre Farbe auf Rot gesetzt.
Klassenselektor : Wählen Sie Elemente aus, indem Sie den Klassennamen angeben, zum Beispiel:
```
.my-class {
background-color: yellow;
}
```
Dies wird ausgewählt Alle Elemente mit class="my-class" und setzen ihre Hintergrundfarbe auf Gelb.
ID-Auswahl : Wählen Sie ein einzelnes Element aus, indem Sie die ID angeben, zum Beispiel:
```
#my-id {
font-size: 20px;
}
```
Das wird Wählen Sie Element mit der ID="my-id" aus und stellen Sie die Schriftgröße auf 20 Pixel ein.
Attributauswahl : Wählen Sie Elemente aus, indem Sie ihre Attribute angeben, zum Beispiel:
```
a[href="https://www.google.com"] {
color: blue;
}
```
Dadurch werden alle ausgewählt
Elemente, die auf Google-Websites verweisen, und ihre Farbe auf Blau setzen.
Pseudoklassen und Pseudoelemente : Wählen Sie Elemente aus, indem Sie ihren Status oder ihre Position angeben, zum Beispiel:
```
a:hover {
text-decoration: underline;
}
```
#🎜🎜 #Dadurch werden alle
Elemente ausgewählt und deren Text beim Mouseover unterstrichen.

Deklarationen sind Teil von CSS-Regeln und jede Deklaration besteht aus Attributen und Werten. Das Attribut gibt den anzuwendenden Stil an und der Wert bestimmt den spezifischen Wert des Attributs. Zum Beispiel:

p {
  color: red;
}

In dieser Regel ist „Farbe“ das Attribut und „Rot“ der Wert. Dadurch werden alle e388a4556c0f65e1904146cc1a846bee-Elemente im Dokument ausgewählt und ihre Farbe auf Rot gesetzt.

So wenden Sie CSS an

CSS kann auf drei Arten auf HTML-Dokumente angewendet werden: interne Stylesheets, externe Stylesheets und Inline-Stile. Wir werden jede dieser drei Methoden separat betrachten.

Internes Stylesheet

Internes Stylesheet bezieht sich auf CSS-Regeln, die im c9ccee2e6ea535a969eb3f532ad9fe89-Tag enthalten und im 93f0f5c25f18dab9d176bd4f6de5d30e-Abschnitt eingebettet sind. Beispiel:

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This text will be red.</p>
</body>
</html>

In diesem Beispiel ist die CSS-Regel im c9ccee2e6ea535a969eb3f532ad9fe89-Tag enthalten und setzt die Farbe aller e388a4556c0f65e1904146cc1a846bee-Elemente.

Externes Stylesheet

Ein externes Stylesheet ist eine separate CSS-Datei, auf die im HTML-Dokument über einen Link zu dieser Datei verwiesen wird. Zum Beispiel:

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>This text will have the styles defined in style.css.</p>
</body>
</html>

In diesem Beispiel verlinken wir auf eine CSS-Datei namens „style.css“ und definieren alle Stile, die wir in dieser Datei anwenden möchten. Dies wirkt sich auf jedes Element in HTML aus, sofern das Dokument mit einer CSS-Datei verknüpft ist.

Inline-Stil

Inline-Stil bezieht sich auf das Einbetten von CSS-Stilen direkt in HTML-Elemente. Zum Beispiel:

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
</head>
<body>
  <p style="color: red;">This text will be red.</p>
</body>
</html>

In diesem Beispiel wird der CSS-Stil direkt in das „style“-Attribut des e388a4556c0f65e1904146cc1a846bee-Elements geschrieben. Dies betrifft nur Elemente mit diesem „style“-Attribut.

CSS-Stileigenschaften

CSS verfügt über viele Stileigenschaften. Hier listen wir einige der am häufigsten verwendeten auf:

: Schriftfarbe.
: Schriftgröße.
: Textausrichtung.
: Hintergrundfarbe.
: Elementrand.
: Elementpolsterung.
: Elementrand.

Fazit

CSS ist eine flexible, leistungsstarke Sprache, mit der Entwickler das Erscheinungsbild und die Positionierung von HTML-Elementen einfach steuern können. In diesem Artikel werden die Grundlagen von CSS und die Verwendung zur Steuerung des Stils in HTML-Dokumenten erläutert. CSS verfügt über ein breites Anwendungsspektrum, darunter responsives Webdesign, browserübergreifende Kompatibilität und die Implementierung spezifischer Benutzererlebnisse. Auch wenn Sie möglicherweise mehr CSS-Erfahrung benötigen, um Ihre Website perfekt anzupassen, ist die Beherrschung der CSS-Grundlagen ein guter Anfang.

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS überschreitet TeilanzeigeNächster Artikel：CSS überschreitet Teilanzeige

In Verbindung stehende Artikel

Mehr sehen