So erstellen Sie mit CSS einen durchgestrichenen Stil

CSS ist eine Stylesheet-Sprache, mit der das Erscheinungsbild und Format von HTML-Dokumenten definiert und gestaltet werden kann. In CSS ist „Durchgestrichen“ ein gängiger Stil, der auf Webseiten häufig verwendet wird, um Inhalte darzustellen, die gültig waren oder nicht mehr gültig sind. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS einen durchgestrichenen Stil erstellen.

1. Text-Decoration-Eigenschaft

Um einen durchgestrichenen Stil mit CSS zu erstellen, können Sie die Text-Decoration-Eigenschaft verwenden. Mit dem text-decoration-Attribut können Textdekorationen hinzugefügt werden, einschließlich Unterstreichung, Überstreichung, Durchstreichung usw. Um einen durchgestrichenen Stil hinzuzufügen, setzen Sie einfach die Eigenschaft text-decoration auf „line-through“:

p {
    text-decoration: line-through;
}

Der obige Code wendet den durchgestrichenen Stil auf alle Absatzelemente (p) an. Wenn Sie das Durchstreichen nur innerhalb eines bestimmten Elements anwenden möchten, können Sie den Selektor durch den Klassennamen oder die ID dieses Elements ersetzen.

2. text-decoration-line-Eigenschaft

Es gibt auch eine text-decoration-line-Eigenschaft in CSS, die nur die Art der Textdekoration steuert. Daher können Sie, anstatt die Eigenschaft text-decoration zu verwenden, text-decoration-line auf „line-through“ setzen. Dadurch wird sichergestellt, dass andere Textdekorationen die Durchstreichung nicht beeinträchtigen.

p {
    text-decoration-line: line-through;
}

3. Textfarbe und Durchstreichungsfarbe

Wenn Sie die Durchstreichungsfarbe anpassen möchten, können Sie die Eigenschaft text-decoration-color verwenden. Mit dem folgenden Code wird beispielsweise ein blauer Durchstrich hinzugefügt:

p {
    text-decoration: line-through;
    text-decoration-color: blue;
}

Wenn Sie außerdem nur die Farbe des Durchgestrichenen ändern möchten, ohne die Textfarbe zu ändern, können Sie die Eigenschaft text-decoration-line color verwenden. Wie unten gezeigt, wird die Durchstreichungsfarbe auf Rot gesetzt:

p {
    text-decoration-line: line-through;
    text-decoration-color: red;
}

4. Durchgestrichene Position und Stil

Sie können den Durchstreichungsstil auch mithilfe der Eigenschaft text-decoration-style ändern. Die Eigenschaft text-decoration-style steuert den Typ der durchgestrichenen Linie, einschließlich durchgezogener, gestrichelter, gepunkteter und wellenförmiger Linien:

p {
    text-decoration-line: line-through;
    text-decoration-style: dotted;
}

Darüber hinaus können Sie die Eigenschaft text-decoration-position verwenden, um die Position der durchgestrichenen Linie im Text zu steuern. Durchgestrichen kann (standardmäßig) unter oder über dem Text platziert werden. Dadurch wird beispielsweise eine Durchstreichung über dem Text platziert:

p {
    text-decoration-line: line-through;
    text-decoration-position: over;
}

In CSS gibt es viele Optionen zum Anpassen der Durchstreichungsstile. Sie können Farbe, Stil und Position je nach Bedarf ändern. Darüber hinaus können Sie text-decoration-line auf „durchgestrichen“ und text-decoration-color auf die gewünschte Farbe einstellen, um sicherzustellen, dass andere Textdekorationen Ihre Durchstreichung nicht beeinträchtigen.

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