Heim > Artikel > Web-Frontend > So verwenden Sie das CSS-Inhaltsattribut
So verwenden Sie das CSS-Inhaltsattribut
- 青灯夜游Original
- 2019-05-28 17:28:464123Durchsuche
Das CSS-Inhaltsattribut wird zum Einfügen generierter Inhalte verwendet. Es wird häufig mit dem Selektor :before und dem Selektor :after verwendet, um Floats zu löschen oder den generierten Inhalt vor oder hinter dem Inhalt eines Elements zu platzieren. Alle Browser unterstützen das Inhaltsattribut.
Wie verwende ich das CSS-Inhaltsattribut?
Das Inhaltsattribut wird zum Einfügen generierter Inhalte verwendet. Es wird häufig in Verbindung mit dem :before-Selektor und dem :after-Selektor verwendet, um Floats zu löschen oder den generierten Inhalt vor dem zu platzieren Inhalt eines Elements oder später.
Grundlegende Syntax:
content: normal | string | attr() | uri() | counter();
●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:couter(计数器名，编号种类)
Beschreibung: Dieses Attribut wird verwendet, um generierten Inhalt zu definieren, der vor oder nach dem Element platziert wird. Standardmäßig handelt es sich dabei oft um Inline-Inhalte, aber die Art der Box, die dieser Inhalt erstellt, kann über das Anzeigeattribut gesteuert werden.
Hinweis: Alle Browser unterstützen das Inhaltsattribut. Internet Explorer 8 (und höher) unterstützt das Inhaltsattribut, wenn !DOCTYPE angegeben ist.
Verwendungsbeispiele für CSS-Inhaltsattribute
1. Das CSS-Inhaltsattribut verwendet die Pseudoklasse danach, um Floats zu löschen
Das Inhaltsattribut von CSS wird speziell auf Vorher/Nachher-Pseudoelemente angewendet. 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;
}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ügt Artikel“ oder content: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>Rendering:
2 ) Einfügen von Textsymbolen
Sie können die folgenden Attributwerte des CSS-Inhaltsattributs verwenden, um das Einfügen (Löschen) von Textsymbolen zu implementieren:
● keine: Inhalt festlegen, wenn angegeben als Nichts;
●open-quote: Inhalt als offene Anführungszeichen festlegen;
● close-quote: Inhalt als geschlossene Anführungszeichen festlegen; -quote: Wenn angegeben, entfernen Sie die Anführungszeichen am Anfang des Inhalts.
● no-close-quote: Wenn angegeben, entfernen Sie die schließenden Anführungszeichen des Inhalts.
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>Rendering:
3), Bilder einfügen
CSS-Inhaltsattribute können auch direkt hinzugefügt werden das Element Bilder davor/nachher einfügen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入图片</title>
<style>
p::after {
content: url(css3.jpg);
border: 1px solid powderblue;
}
</style>
</head>
<body>
<p>这是一段测试文字,文字后面是图片：</p>
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Inhaltsattribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!