Heim > Artikel > Web-Frontend > So verstecken Sie Elemente in CSS
Bei
CSS geht es darum, die englische Sprache auf Webseiten zu beherrschen. Daher wird durch das Ausblenden von CSS nicht das gesamte Element ausgeblendet, sondern das Element wird beim Drucken ausgeblendet. Beim Drucken einer Webseite müssen wir den Stil anpassen, damit er auf dem Papier korrekt angezeigt wird. Es gibt jedoch Situationen, in denen wir bestimmte Elemente einer Webseite möglicherweise nicht drucken möchten. Glücklicherweise bietet CSS eine Möglichkeit, diese Elemente auszublenden.
Schritt 1: Definieren Sie CSS-Klassen für die Elemente, die Sie ausblenden möchten.
Zuerst müssen wir eine CSS-Klasse erstellen, um das Element auszublenden, das wir ausblenden möchten. Wenn wir beispielsweise ein div-Element mit der ID „header“ ausblenden möchten, können wir eine Klasse namens „no-print“ erstellen, um es auszublenden. Wir können der CSS-Datei den folgenden Stil hinzufügen:
.no-print {
display: none;
}
Dieser Stil verbirgt alle Elemente, auf die diese „no-print“-Klasse angewendet wird.
Schritt 2: Wenden Sie CSS-Klassen auf die Elemente an, die Sie ausblenden möchten.
Jetzt müssen wir die „no-print“-Klasse auf die Elemente anwenden, die Sie ausblenden möchten.
Dies ist der Kopfzeilenabschnitt.
Das div-Element im obigen Code ist auf der Webseite sichtbar, wird jedoch beim Drucken nicht gedruckt, da es die Kategorie „Kein Drucken“ verwendet, die das Element beim Drucken verbirgt.
Schritt 3: Testen Sie den Druckeffekt
Wir können testen, ob der Druck die Elemente in der Druckvorschau erfolgreich ausblendet. Wenn das Ausblenden erfolgreich ist, werden die als „nicht drucken“ markierten Elemente beim Drucken der Seite nicht gedruckt.
Es ist wichtig zu beachten, dass diese Ausblendung nicht perfekt ist, da einige fortgeschrittene Benutzer Entwicklertools verwenden können, um unsere ausgeblendeten Stile auszugleichen. Für die meisten Benutzer ist diese Methode jedoch immer noch eine praktikable Möglichkeit, Webseitenelemente auszublenden.
Das obige ist der detaillierte Inhalt vonSo verstecken Sie Elemente in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!