Wie füge ich mit CSS3 das Inhaltsattribut hinzu? Verwendung des Inhaltsattributs (Codebeispiel)-CSS-Tutorial-php.cn

Wie füge ich mit CSS3 das Inhaltsattribut hinzu? Verwendung des Inhaltsattributs (Codebeispiel)

青灯夜游

Freigeben： 2018-09-25 16:41:48

Original

3509 Leute haben es durchsucht

In diesem Kapitel erfahren Sie, wie Sie mit CSS3 das Inhaltsattribut hinzufügen. Durch die Verwendung des Inhaltsattributs (Codebeispiel) und die ausführliche Erläuterung des CSS3-Inhaltsattributs (Inhalt) weiß jeder, wie er das Inhaltsattribut zum Einfügen, Löschen von Floats und zum Einfügen von Inhalten verwendet. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Detaillierte Erläuterung des Inhaltsattributs

1. Die Rolle des Inhaltsattributs:

Das Inhaltsattribut wird zum Einfügen generierter Inhalte verwendet, häufig mit dem :before Selektor und der :after-Selektor Wird in Verbindung mit dem Löschen von Floats oder dem Platzieren generierter Inhalte vor oder nach dem Inhalt eines Elements verwendet.

2. Grundlegende Syntax:

content: normal | string | attr() | uri() | counter();

Nach dem Login kopieren

normal: Standardwert.

Zeichenfolge: Durchsucht den Inhalt des Textes, normalerweise eine Zeichenfolge.

attr(): Fügt den Attributwert des Elements ein, Syntax: attr(attribute).

uri(): Fügen Sie eine externe Ressourcendatei ein, bei der es sich um eine Bild-, Audio-, Videodatei oder eine andere vom Browser unterstützte Ressource handeln kann.

counter(): Zähler, der zum Einfügen von Sortierkennungen verwendet wird. counter() kann nicht nur numerische Zahlen, sondern auch alphanumerische Zahlen oder römische Zahlen anhängen. Syntax: content:counter (Zählername, Zahlentyp)

3. Browser-Unterstützung:

Wie füge ich mit CSS3 das Inhaltsattribut hinzu? Verwendung des Inhaltsattributs (Codebeispiel)

Alle Browser unterstützen das Inhaltsattribut.

Hinweis: IE8 unterstützt das Content-Attribut nur, wenn !DOCTYPE angegeben ist.

2. Anwendung des CSS-Inhaltsattributs

1. Das CSS-Inhaltsattribut verwendet die Pseudoklasse nach, um Floats zu löschen.

Das Inhaltsattribut von CSS wird speziell auf das angewendet Vorher/Nachher-Pseudoelement Die häufigste Anwendung ist die Verwendung von Pseudoklassen zum Löschen von Floats.

//一种常见利用伪类清除浮动的代码
.clearfix:after {
    content:"."; //这里利用到了content属性
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}
.clearfix {
    *zoom:1;
}

Nach dem Login kopieren

Prinzip:

Nach dem Pseudoelement wird ein Element auf Blockebene mit einem Inhalt von einem Punkt hinter dem Element durch den Inhalt generiert und dann wird mit clear:both der Float gelöscht .

2. Das CSS-Inhaltsattribut verwendet Pseudoelemente, um Inhalte in die Seite einzufügen

1) Einfachen Text einfügen

Verwendung: Inhalt: „eingefügter Artikel“ oder Inhalt: none fügt keinen Inhalt ein

Beispiel:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插入纯文字</title>
		<style>
			h1::after{
			    content:",在h1后插入内容"
			}
			h2::after{
			    content:none
			}
		</style>
	</head>
	<body>
		<h1>这是h1</h1>
        <h2>这是h2</h2>
	</body>
</html>

Nach dem Login kopieren

Rendering:

Wie füge ich mit CSS3 das Inhaltsattribut hinzu? Verwendung des Inhaltsattributs (Codebeispiel)

2) Textsymbole einfügen

Sie können die folgenden Attributwerte des CSS-Inhaltsattributs verwenden, um das Einfügen (Löschen) von Textsymbolen zu implementieren:

none Inhalt festlegen, wenn als Nothing angegeben

open-quote Setzt den Inhalt auf Eröffnungszitate;

close-quote legt den Inhalt auf geschlossene Anführungszeichen fest;

no-open-quote Wenn angegeben, werden die Eröffnungszitate entfernt content;

no-close-quote if Specify, entfernen Sie die schließenden Anführungszeichen des Inhalts

inherit Der Wert des angegebenen Inhaltsattributs sollte vom übergeordneten Element geerbt werden.

Der Attributwert für offene Anführungszeichen und der Attributwert für geschlossene Anführungszeichen des Inhaltsattributs fügen auf beiden Seiten der Zeichenfolge verschachtelte Textsymbole wie Klammern, einfache Anführungszeichen und doppelte Anführungszeichen hinzu. Open-Quote wird verwendet, um das Starttextsymbol hinzuzufügen, und Close-Quote wird verwendet, um das Endtextsymbol hinzuzufügen.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插入文字符号</title>
		<style>
			h1 {quotes: "(" ")";/*利用元素的quotes属性指定文字符号*/}
			h1::before {content: open-quote;}
			h1::after {content: close-quote;}
			
			h2 {quotes: "\"" "\"";/*添加双引号要转义*/}
			h2::before {content: open-quote;}
			h2::after {content: close-quote;}
		</style>
	</head>

	<body>
		<h1>这是h1</h1>
		<h2>这是h2</h2>
	</body>

</html>

Nach dem Login kopieren

Rendering:

Wie füge ich mit CSS3 das Inhaltsattribut hinzu? Verwendung des Inhaltsattributs (Codebeispiel)

3), Bilder einfügen

CSS-Inhaltsattribute können auch direkt hinzugefügt werden das Element Bilder vor/nach einfügen

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插入图片</title>
		<style>
			p::after {
				content: url(cssWie füge ich mit CSS3 das Inhaltsattribut hinzu? Verwendung des Inhaltsattributs (Codebeispiel));
				border: 1px solid powderblue;
			}
		</style>
	</head>

	<body>
		<p>这是一段测试文字,文字后面是图片：</p>
	</body>

</html>

Nach dem Login kopieren

Rendering:

Wie füge ich mit CSS3 das Inhaltsattribut hinzu? Verwendung des Inhaltsattributs (Codebeispiel)

Zusammenfassung: Das Obige sind einige Beispiele für die Anwendung von CSS-Inhaltsattributen. Es ist sehr einfach . Sie können es selbst tun. Versuchen Sie es mit dem Schreiben.

Das obige ist der detaillierte Inhalt vonWie füge ich mit CSS3 das Inhaltsattribut hinzu? Verwendung des Inhaltsattributs (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!