Verständnis des CSS ' Inhalt ' Eigentum

Kernpunkte

Das Attribut
• css content wird in Verbindung mit den Pseudo-Elementen ::before und ::after verwendet, um generierte Inhalte in eine Webseite einzufügen. Es unterstützt eine Vielzahl von Werten, einschließlich normal, counter, attr, Zeichenfolgen, open-quote, url, initial, inherit und
.
• content attr() Eigenschaften können verwendet werden, um Werte von Text, codierten Zeichen, Mediendateien und sogar Zählern einzufügen. Beispielsweise kann die
-Funktion verwendet werden, um den Wert einer angegebenen Eigenschaft einzufügen.
• open-quote close-quote oder content Werte verwenden das Attribut no-open-quote, um offene oder geschlossene Zitate zu generieren. Der Wert no-close-quote oder
kann verwendet werden, um offene oder geschlossene Zitate aus dem angegebenen Element zu entfernen.
• content Während das CSS ::before -Treizattribut hauptsächlich mit ::after und ::marker pseudo-Elementen verwendet wird, kann es auch mit
Pseudo-Elementen verwendet werden, um das Erscheinungsbild einer Listen-Kugel oder -zahl anzupassen.

content Wenn Sie ein Front-End-Entwickler sind, haben Sie wahrscheinlich von Pseudoelementen und den

Eigenschaften von CSS gehört. Dieser Artikel wird nicht in den tiefen Tauchgang auf Pseudoelementen eingesetzt. Wenn Sie jedoch nicht mit dem Konzept vertraut sind oder eine kurze Bewertung benötigen, wird empfohlen, Louis Lazaris 'Artikel über das Smashing Magazine zu lesen.

content Dieser Artikel konzentriert sich auf die content -attribute. Das ::before -Merkmal von CSS wird mit ::after und

pseudo-Elementen verwendet (kann mit einer einzelnen Dickdarm- oder Doppeldarmsyntax verwendet werden). Diese Eigenschaft wird verwendet, um generierte Inhalte in eine Webseite einzufügen und in allen wichtigen Browsern vollständig unterstützt.

content Grundlegende Syntax von Attributen

Die Syntax des Attributs content

lautet wie folgt, die jeden Wert enthält:

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

attr() CSS unterscheidet sich geringfügig zwischen verschiedenen Werten. Zum Beispiel, um den Wert ::before mit ::after oder

zu verwenden, müssen Sie ein CSS wie folgt schreiben:

p::after {
  content: " (" attr(title) ")";
}

attr() Dies ist nur ein Beispiel und wird später ausführlich vorgestellt. Im folgenden Abschnitt werde ich jeden Wert diskutieren, einschließlich

.

none Wert: normal oder

Wenn

auf none eingestellt ist, wird kein Pseudoelement erzeugt. Wenn Sie es auf normal festlegen, wird es für die ::before und ::after pseudo-Elemente als none berechnet.

p::before {
  content: normal;
}

p::after {
  content: none;
}

Diese Methode kann für verschachtelte Elemente verwendet werden, die bereits Pseudoelemente definieren, aber Sie möchten Pseudoelemente in einigen Kontexten außer Kraft setzen.

Wert: <string></string>

Dieser Wert legt den Inhalt in einen Zeichenfolge fest und kann jeder Textinhalt sein. Wenn Nicht-Latin-Zeichen verwendet werden, müssen die Zeichen codiert werden. Schauen wir uns jedes Beispiel an. Betrachten Sie den folgenden HTML:

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

dann das folgende CSS:

p::after {
  content: " (" attr(title) ")";
}

Hier fügen wir den Textinhalt in eines der Listenelemente ein und fügen die codierten Zeichen (in diesem Fall das Urheberrechtsymbol) in das Absatzelement ein.

Stringwerte müssen in Zitate eingeschlossen sein, die einzelne oder doppelte Zitate sein können.

Wert: <uri></uri>

Der Wert <uri></uri> ist sehr bequem, wenn Sie daran interessiert sind, ein bestimmtes Medium anzuzeigen, das Sie tun können, indem Sie auf externe Ressourcen wie Bilder hinweisen. Wenn die Ressource oder das Bild aus irgendeinem Grund nicht angezeigt werden kann, wird es ignoriert oder ein Platzhalter wird stattdessen verwendet. Schauen wir uns einen Code an, der diesen Wert demonstriert.

Dies ist HTML:

p::before {
  content: normal;
}

p::after {
  content: none;
}

Dies ist das CSS, das das Favicon von SitePoint und einige Text zeigt:

<h2 id="Tutorial-Categories">Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li>
</ol>

<p class="copyright">SitePoint, 2015</p>

Wert: counter() oder counters()

Dieser Wert ist der komplexeste Wert, der mit dem Attribut

verwendet werden kann. Es ist als eine von zwei verschiedenen Funktionen geschrieben - content oder counter(). Eine detailliertere Diskussion über CSS -Zähler finden Sie in diesem Artikel. Aber hier ist eine kurze Übersicht. counters()

Für die erste Funktion

ist der generierte Text der Wert des innersten Zählers des Namens, den Sie in diesem Pseudo-Element-Bereich angegeben haben. Standardmäßig ist es in dezimaler Formatierung, kann aber auch in römischen Ziffern formatiert werden. counter()

Eine andere Funktion

ist ähnlich, stellt jedoch alle Zähler mit dem angegebenen Namen (erster Parameter) in der Reihenfolge von der äußersten Schicht zur innersten Schicht dar. Alle diese Werte werden durch den angegebenen String (den zweiten Parameter) getrennt. Wenn Sie den Namen der Zählervariable als counters(name, string), none oder inherit angeben, wird die Deklaration ignoriert. initial

Folgendes ist ein Beispiel für die Verwendung eines Zählers:

.new::after {
  content: " New!";
  color: green;
}

.copyright::before {
  content: "<pre class="brush:php;toolbar:false"><code class="language-html"><a class="sp" href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>

a9 "; } Dies ist CSS:

.sp::before {
  content: url(https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7favicon.ico);
}

Dies nummeriert die Elemente mit dem generierten Inhalt, ähnlich einer geordneten Liste. In diesem Fall können wir problemlos bestellte Listen verwenden. Diese Arten von Zählern sind viel bequemer, wenn die zu nummerierten Elemente zwischen anderen Elementen verstreut sind.

Wert: attr()

Wie bereits erwähnt, fügt die Funktion

den Wert der angegebenen Eigenschaft ein, die der einzige Parameter ist. Wenn das relevante Element keine Attribute hat, wird eine leere Zeichenfolge zurückgegeben. attr()

Dies ist ein Beispiel:

<h2 id="Name-of-First-Four-Planets">Name of First Four Planets</h2>
<p class="planets">Mercury</p>
<p class="planets">Venus</p>
<p class="planets">Earth</p>
<p class="planets">Mars</p>

Verwenden der obigen HTML -Verwendung des folgenden CSS werden der Attributwert

in Klammern neben dem Link -Text angezeigt: href

.planets {
  counter-increment: planetIndex;
}

.planets::before {
  content: counter(planetIndex) ". ";
}

Dieser Trick wird häufig in Druckstilblättern verwendet, damit Links auf gedruckten Webseiten angezeigt werden können.

Wert: oder open-quote close-quoteWenn

auf einen dieser Werte eingestellt ist, generiert das Attribut content offene oder geschlossene Zitate. Es wird normalerweise mit <q></q> Elementen verwendet, aber Sie können es mit jedem Element verwenden. Sie können also Folgendes tun:

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

Der Wert

close-quote gilt nur für die ::after pseudoelement (der Grund ist offensichtlich), und wenn Sie das ::before verwenden, gibt es keinen open-quote -Werwert für dasselbe Element, erzeugt er nicht irgendetwas.

Wert: no-open-quote oder no-close-quote Der Wert

entzieht die geöffneten Zitate aus dem angegebenen Element, und der Wert no-open-quote entzieht die geschlossenen Zitate. Sie fragen sich vielleicht, wie diese Werte nützlich sein können. Zeigen Sie die folgenden HTML an: no-close-quote

p::after {
  content: " (" attr(title) ")";
}

Beachten Sie, dass der Sprecher im vorherigen Absatz jemanden zitiert ("Ein weiser Mann ..."), und diese Person zitiert wiederum jemand anderen ("Diese sagen ..."). Daher sind unsere Zitate in drei Schichten verschachtelt. Syntaktisch gibt es eine korrekte Möglichkeit, mit diesem Problem umzugehen. Wenn Sie den generierten Inhalt verwenden, können wir hier sicherstellen, dass die Zitate richtig verschachtelt sind:

p::before {
  content: normal;
}

p::after {
  content: none;
}

Der erste Selektor verwendet die Eigenschaft

, um die Art der Zitate zu definieren, die wir verwenden möchten, mit einer Tiefe von drei Schichten. Dann fügen wir Zitate als Inhalt mit Pseudoelementen ein. Dies ähnelt dem, was wir im vorherigen Abschnitt getan haben. quotes

Aber was ist, wenn wir aus irgendeinem Grund die zweite Zitatschicht ignorieren wollen, ohne sie einzuführen? Wir können sie mit

und no-open-quote -Wertern überschreiben: no-close-quote

<h2 id="Tutorial-Categories">Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li>
</ol>

<p class="copyright">SitePoint, 2015</p>

In diesem Fall habe ich eine Klasse namens

zur zweiten Zitatschicht hinzugefügt. Dies stellt sicher, dass das Zitatnist immer noch erkannt wird, die Zitate für das Element erscheinen jedoch nicht. Daher hat die dritte Zitatschicht in diesem Absatz doppelte lockige Klammern anstelle von einzelnen lockigen Klammern. noquotes

Schlussfolgerung

Ich hoffe, dieses Tutorial hilft Ihnen dabei, jeden Wert der

Eigenschaft besser zu verstehen und wie Sie sie in verschiedenen Szenarien verwenden. content

FAQ (FAQ) über CSS -Inhaltsattribute

Was sind CSS -Inhaltseigenschaften und wie kann ich es verwenden?

CSS

Eigenschaften sind ein leistungsstarkes Tool, mit dem Sie generierte Inhalte in das Layout Ihrer Seite einfügen können. Es wird normalerweise mit content und ::before pseudoelementen verwendet, wodurch dekorative Inhalte über CSS hinzugefügt werden, anstatt es in HTML aufzunehmen. Beispielsweise können Sie das Attribut ::after verwenden, um Zitate um die Blockreferenz einzufügen oder ein dekoratives Bild vor dem Titel hinzuzufügen. content Der Wert des Attributs kann eine Zeichenfolge, eine URL, ein Zähler oder sogar der Wert des Attributs sein. content

CSS -Inhaltsattribute können mit anderen Elementen als ::before und ::after verwendet werden?

CSS content Attribute werden hauptsächlich mit ::before und ::after pseudoelementen verwendet. Es kann jedoch auch mit dem ::marker pseudoelement verwendet werden, das das Tag-Feld für das Listenelement darstellt. Auf diese Weise können Sie das Erscheinungsbild einer Listen -Kugel oder -nummer anpassen.

Wie verwendet ich CSS -Inhaltsattribute, um Attributwerte anzuzeigen?

CSS content Eigenschaften können mit der Funktion attr() angezeigt werden. Sie können es beispielsweise verwenden, um den Wert der Eigenschaft href des Links anzuzeigen, damit der Benutzer die tatsächliche URL sehen kann. Die Syntax wird content: attr(href) sein.

Kann ich Bilder mit den CSS -Inhaltseigenschaften einfügen?

Ja, die CSS content -Spertage kann unter Verwendung der url() -Funktion in ein Bild eingefügt werden. Das Bild wird eingefügt, wobei die ::before oder ::after pseudoelement platziert ist. Beispielsweise fügt content: url(image.jpg) ein Bild namens Image.jpg ein.

Wie kann man Zähler mit CSS -Inhaltseigenschaften verwenden?

Die Eigenschaft

CSS content kann mit den Funktionen counter() oder counters() angezeigt werden. Dies ist nützlich, um Titel oder Abschnitte in einem Dokument automatisch zu nummerieren. Sie erstellen oder setzen den Zähler zunächst mit der Eigenschaft counter-reset zurück und erhöhen ihn mithilfe der Eigenschaft counter-increment. Sie können dann content: counter(myCounter) verwenden, um den aktuellen Wert des Zählers anzuzeigen.

Kann ich Sonderzeichen in CSS -Inhaltseigenschaften verwenden?

Ja, Sie können Sonderzeichen im CSS content -attribut verwenden, indem Sie ihren Unicode verwenden. Zum Beispiel fügt content: “22” eine Kugel ein. Denken Sie daran, immer mit einem Backslash () Unicode zu beginnen.

Beeinflusst CSS -Inhaltsattribute SEO?

über CSS hinzugefügte Inhalte werden im Allgemeinen als dekorativ angesehen und nicht inhaltlich, die von Suchmaschinen indiziert werden sollten. Daher ist es am besten, das CSS content -attribut für dekorative Inhalte zu verwenden und nicht das, was für SEO wichtig ist.

Kann ich HTML mit dem CSS -Inhaltsattribut einfügen?

Nein, CSS content Attribut kann nicht zum Einfügen von HTML verwendet werden. Es kann nur Text, Bilder, Zähler und Attributwerte einfügen. Wenn Sie HTML einfügen müssen, sollten Sie dies direkt im HTML -Dokument tun oder JavaScript verwenden.

Werden CSS -Inhaltsattribute von allen Browsern unterstützt?

CSS content Alle modernen Browser, einschließlich Chrome, Firefox, Safari und Edge, unterstützen die CSS

-Tribute weit. Es wird jedoch möglicherweise nicht vollständig in älteren Versionen von Internet Explorer unterstützt.

Kann ich CSS -Inhaltseigenschaften animieren?

Nein, CSS content Attribut kann keine Animation sein. Dies liegt daran, dass es sich nicht um eine Eigenschaft mit einem Wertebereich handelt, sondern ein bestimmter Wert festgelegt wird. Wenn Sie eine Animation erstellen müssen, sollten Sie andere CSS -Eigenschaften verwenden, die animiert werden können, z. B. opacity oder transform.

Das obige ist der detaillierte Inhalt vonVerständnis des CSS ' Inhalt ' Eigentum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!