Heim  >  Artikel  >  Web-Frontend  >  So setzen Sie Durchstreichen in CSS

So setzen Sie Durchstreichen in CSS

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-20 10:33:2112883Durchsuche

In CSS können Sie das Attribut text-decoration verwenden, um das Durchstreichen festzulegen. Die Syntax lautet „text-decoration:line-through“. Das text-decoration-Attribut legt die Textdekoration des Elements fest. Wenn der Wert durchgestrichen ist, definiert es eine Linie, die unter dem Text verläuft.

So setzen Sie Durchstreichen in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Erstellen Sie eine neue test.html-Seite. Erstellen Sie im Hauptteil der test.html-Seite ein neues Div, um den Elementnamen zu speichern. Erstellen Sie einen neuen Bereich innerhalb des div-Tags, um den Artikelpreis zu speichern. Erstellen Sie ein neues Style-Tag im Textbereich der test.html-Seite und setzen Sie den Preis im Span-Tag im Style-Tag auf Rot.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .price{
            color:red;
        }
    </style>
</head>
<body>
    <div>键盘:
        <span class="price">200元</span>
    </div>
</body>
</html>

Öffnen Sie test.html im Browser und sehen Sie sich den aktuellen Effekt an

So setzen Sie Durchstreichen in CSS

Zurück zum Editor, im Style-Tag von test das text-decoration: line-through-Attribut für span festlegen

<style>
        .price{
            color:red;
            text-decoration: line-through;
        }
    </style>

Öffnen Sie test.html erneut, Sie werden feststellen, dass der Preis durchgestrichen wurde.

So setzen Sie Durchstreichen in CSS

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo setzen Sie Durchstreichen in 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