Comprendre le CSS & # x27; Contenu & # x27; Propriété

Points de base

L'attribut
• CSS content est utilisé en conjonction avec les pseudo-éléments ::before et ::after pour insérer du contenu généré dans une page Web. Il prend en charge une variété de valeurs, notamment normal, counter, attr, chaînes, open-quote, url, initial, inherit et
.
• Les propriétés content attr() peuvent être utilisées pour insérer des valeurs de texte, de caractères codés, de fichiers multimédias et même de compteurs. Par exemple, la fonction
peut être utilisée pour insérer la valeur d'une propriété spécifiée.
• Les valeurs open-quote close-quote ou content utilisent l'attribut no-open-quote pour générer des devis ouverts ou fermés. La valeur no-close-quote ou
peut être utilisée pour supprimer les devis ouverts ou fermés de l'élément spécifié.
• content Bien que l'attribut CSS ::before soit principalement utilisé avec les pseudo-éléments ::after et ::marker, il peut également être utilisé avec des pseudo-éléments
pour personnaliser l'apparence d'une balle ou d'un numéro de liste.

content Si vous êtes un développeur frontal, vous avez probablement entendu parler des pseudo-éléments et des propriétés

du CSS. Cet article n'entrera pas dans la plongée profonde sur les pseudo-éléments, mais si vous n'êtes pas familier avec le concept ou que vous avez besoin d'un examen rapide, il est recommandé de consulter l'article de Louis Lazaris sur Smashing Magazine.

content Cet article se concentrera sur les attributs content. L'attribut ::before de CSS est utilisé avec des pseudo-éléments ::after et

(peut être utilisé avec une syntaxe de côlon unique ou de double côlon). Cette propriété est utilisée pour insérer du contenu généré dans une page Web et est entièrement prise en charge dans tous les principaux navigateurs.

content Syntaxe de base des attributs

La syntaxe de l'attribut content

est la suivante, qui contient chaque valeur:

<code class="language-css">p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}</code>

attr() CSS diffère légèrement entre différentes valeurs. Par exemple, pour utiliser la valeur ::before avec ::after ou

, vous devez écrire un CSS comme ceci:

<code class="language-css">p::after {
  content: " (" attr(title) ")";
}</code>

attr() Ce n'est qu'un exemple et sera introduit en détail plus tard. Dans la section suivante, je discuterai de chaque valeur, y compris

.

none Valeur: normal ou

Lorsque

est défini sur none, aucun pseudo-élément n'est généré. Si vous le définissez sur normal, pour les pseudo-éléments ::before et ::after, il sera calculé comme none.

<code class="language-css">p::before {
  content: normal;
}

p::after {
  content: none;
}</code>

Cette méthode peut être utilisée pour des éléments imbriqués qui définissent déjà des pseudo-éléments, mais vous souhaitez remplacer les pseudo-éléments dans certains contextes.

Valeur: <string></string>

Cette valeur définit le contenu sur une chaîne et peut être n'importe quel contenu texte. Si des caractères non latins sont utilisés, les caractères doivent être codés. Regardons chaque exemple. Considérez le HTML suivant:

<code class="language-css">p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}</code>

puis le CSS suivant:

<code class="language-css">p::after {
  content: " (" attr(title) ")";
}</code>

Ici, nous insérons le contenu texte dans l'un des éléments de la liste et insérons les caractères codés (dans ce cas le symbole du droit d'auteur) dans l'élément de paragraphe.

Les valeurs de chaîne doivent être enfermées en guillemets, qui peuvent être des devis simples ou doubles.

Valeur: <uri></uri>

La valeur <uri></uri> est très pratique lorsque vous êtes intéressé à afficher un certain support, ce que vous pouvez faire en pointant des ressources externes telles que des images. Si la ressource ou l'image ne peut pas être affichée pour une raison quelconque, elle est ignorée ou qu'un certain espace réservé est utilisé à la place. Regardons un code qui démontre cette valeur.

c'est HTML:

<code class="language-css">p::before {
  content: normal;
}

p::after {
  content: none;
}</code>

C'est le CSS qui montre le favori de SitePoint et du texte:

<code class="language-html"><h2>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></code>

Valeur: counter() ou counters()

Cette valeur est la valeur la plus complexe qui peut être utilisée avec l'attribut

. Il est écrit comme l'une des deux fonctions différentes - content ou counter(). Pour une discussion plus détaillée sur les compteurs CSS, consultez cet article. Mais voici un bref aperçu. counters()

Pour la première fonction

, le texte généré est la valeur du compteur le plus interne du nom que vous avez spécifié dans cette portée pseudo-élémentaire. Par défaut, il est formaté en décimal, mais peut également être formaté en chiffres romains. counter()

Une autre fonction

est similaire, mais représente tous les compteurs avec le nom spécifié (premier paramètre), dans l'ordre de la couche la plus externe à la couche la plus intérieure. Toutes ces valeurs sont séparées par la chaîne spécifiée (le deuxième paramètre). Si vous spécifiez le nom de la variable de compteur en tant que counters(name, string), none, ou inherit, la déclaration sera ignorée. initial

Ce qui suit est un exemple de la façon d'utiliser un compteur:

<code class="language-css">.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></code>

a9 "; } Ceci est CSS:

<code class="language-css">.sp::before {
  content: url(https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7favicon.ico);
}</code>

Cela comptera les éléments à l'aide du contenu généré, similaire à une liste commandée. Dans ce cas, nous pouvons facilement utiliser des listes commandées. Ces types de compteurs sont beaucoup plus pratiques lorsque les articles à numéroter sont dispersés entre d'autres éléments.

Valeur: attr()

Comme mentionné précédemment, la fonction

insérera la valeur de la propriété spécifiée, qui est le seul paramètre. Si l'élément pertinent n'a pas d'attributs, une chaîne vide est renvoyée. attr()

Ceci est un exemple:

<code class="language-html"><h2>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></code>

En utilisant le HTML ci-dessus, le CSS suivant affichera la valeur d'attribut

entre parenthèses à côté du texte du lien: href

<code class="language-css">.planets {
  counter-increment: planetIndex;
}

.planets::before {
  content: counter(planetIndex) ". ";
}</code>

Cette astuce est souvent utilisée dans les feuilles de style imprimées pour permettre aux liens d'être affichés dans les pages Web imprimées.

Valeur: ou open-quote close-quoteLorsque

est défini sur l'une de ces valeurs, l'attribut content génère des devis ouverts ou fermés. Il est généralement utilisé avec des éléments <q></q>, mais vous pouvez l'utiliser avec n'importe quel élément. Vous pouvez donc faire ce qui suit:

<code class="language-css">p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}</code>

La valeur

close-quote s'applique uniquement au pseudo-élément ::after (la raison est évidente), et si vous utilisez le ::before et il n'y a pas de valeur open-quote sur le même élément, il ne produira pas rien.

Valeur: no-open-quote ou no-close-quote La valeur

supprimera les devis ouverts de l'élément spécifié, et la valeur no-open-quote supprimera les devis fermés. Vous vous demandez peut-être comment ces valeurs peuvent être utiles. Affichez le HTML suivant: no-close-quote

<code class="language-css">p::after {
  content: " (" attr(title) ")";
}</code>

Notez que dans le paragraphe précédent, l'orateur cite quelqu'un ("un homme sage ..."), et cette personne cite à son tour quelqu'un d'autre ("ceux qui disent ..."). Par conséquent, nos citations sont imbriquées en trois couches. Syntaxiquement, il existe une façon correcte de traiter ce problème. Si vous utilisez le contenu généré, voici les moyens de nous assurer que les citations sont correctement imbriquées:

<code class="language-css">p::before {
  content: normal;
}

p::after {
  content: none;
}</code>

Le premier sélecteur utilise la propriété

pour définir le type de devis que nous voulons utiliser, avec une profondeur de trois couches. Ensuite, nous insérons des citations comme contenu à l'aide de pseudo-éléments. Ceci est similaire à ce que nous avons fait dans la section précédente. quotes

Mais que se passe-t-il si pour une raison quelconque, nous voulons ignorer la deuxième couche de citations sans les insérer? Nous pouvons les remplacer en utilisant les valeurs

et no-open-quote: no-close-quote

<code class="language-html"><h2>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></code>

Dans ce cas, j'ai ajouté une classe appelée

à la deuxième couche de citations. Cela garantit que la nidification de la citation est toujours reconnue, mais les citations de l'élément n'apparaissent pas. Par conséquent, la troisième couche de citations dans ce paragraphe aura des accolades à double bouclée au lieu des accolades bouclées simples. noquotes

Conclusion

J'espère que ce tutoriel vous aidera à mieux comprendre chaque valeur de la propriété

et comment les utiliser dans divers scénarios. content

FAQ (FAQ) sur les attributs de contenu CSS

Quelles sont les propriétés du contenu CSS et comment l'utiliser?

CSS

Les propriétés sont un outil puissant qui vous permet d'insérer du contenu généré dans la disposition de votre page. Il est généralement utilisé avec les pseudo-éléments content et ::before, ajoutant du contenu décoratif via CSS au lieu de l'inclure dans HTML. Par exemple, vous pouvez utiliser l'attribut ::after pour insérer des citations autour de la référence du bloc, ou ajouter une image décorative avant le titre. content La valeur de l'attribut peut être une chaîne, une URL, un compteur ou même la valeur de l'attribut. content

Les attributs de contenu CSS peuvent être utilisés avec des éléments autres que ::before et ::after?

Les attributs CSS content sont principalement utilisés avec des pseudo-éléments ::before et ::after. Cependant, il peut également être utilisé avec le pseudo-élément ::marker, qui représente la boîte de balise pour l'élément de liste. Cela vous permet de personnaliser l'apparence d'une balle ou d'un numéro de liste.

Comment utiliser les attributs de contenu CSS pour afficher les valeurs d'attribut?

Les propriétés CSS content peuvent être affichées à l'aide de la fonction attr(). Par exemple, vous pouvez l'utiliser pour afficher la valeur de la propriété href du lien afin que l'utilisateur puisse voir l'URL réelle. La syntaxe sera content: attr(href).

Puis-je insérer des images en utilisant les propriétés du contenu CSS?

Oui, la propriété CSS content peut être insérée dans une image à l'aide de la fonction url(). L'image sera insérée là où le pseudo-élément ::before ou ::after est placé. Par exemple, content: url(image.jpg) inséra une image nommée image.jpg.

Comment utiliser les compteurs avec les propriétés de contenu CSS?

La propriété

CSS content peut être affichée à l'aide des fonctions counter() ou counters(). Ceci est utile pour numéroter automatiquement des titres ou des sections dans un document. Vous créez ou réinitialisez d'abord le compteur à l'aide de la propriété counter-reset et incrémentez-le à l'aide de la propriété counter-increment. Vous pouvez ensuite utiliser content: counter(myCounter) pour afficher la valeur actuelle du compteur.

Puis-je utiliser des caractères spéciaux dans les propriétés de contenu CSS?

Oui, vous pouvez utiliser des caractères spéciaux dans l'attribut CSS content en utilisant leur Unicode. Par exemple, content: “22” insérera une balle. N'oubliez pas de toujours commencer par une barre arrière () Unicode.

Les attributs de contenu CSS affectent-ils le référencement?

Le contenu ajouté via CSS est généralement considéré comme décoratif, pas le contenu qui doit être indexé par les moteurs de recherche. Par conséquent, il est préférable d'utiliser l'attribut CSS content pour le contenu décoratif plutôt que ce qui est important pour le référencement.

Puis-je insérer HTML à l'aide de l'attribut de contenu CSS?

Non, l'attribut CSS content ne peut pas être utilisé pour insérer HTML. Il ne peut qu'inserter le texte, les images, les compteurs et les valeurs d'attribut. Si vous devez insérer HTML, vous devez le faire directement dans le document HTML ou utiliser JavaScript.

Les attributs de contenu CSS sont-ils pris en charge par tous les navigateurs?

CSS content Tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge, soutiennent largement les attributs CSS

. Cependant, il peut ne pas être entièrement pris en charge dans les anciennes versions d'Internet Explorer.

Puis-je animer les propriétés du contenu CSS?

Non, l'attribut CSS content ne peut pas être l'animation. En effet, ce n'est pas une propriété avec une plage de valeurs, mais plutôt une valeur spécifique est définie. Si vous devez créer une animation, envisagez d'utiliser d'autres propriétés CSS qui peuvent être animées, telles que opacity ou transform.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!