Maison >interface Web >tutoriel CSS >Comment utiliser CSS3 pour ajouter l'attribut content ? Utilisation de l'attribut content (exemple de code)
Comment utiliser CSS3 pour ajouter l'attribut content ? Utilisation de l'attribut content (exemple de code)
- 青灯夜游original
- 2018-09-25 16:41:483561parcourir
Ce chapitre présentera comment utiliser CSS3 pour ajouter l'attribut content ? L'utilisation de l'attribut content (exemple de code), une explication détaillée de l'attribut css3 content (content), permettent à tout le monde de savoir comment utiliser l'attribut content pour insérer, effacer les flottants et insérer du contenu. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
1. Explication détaillée de l'attribut content
1. Le rôle de l'attribut content :
L'attribut content est utilisé pour insérer du contenu généré, souvent avec le :before sélecteur et le sélecteur :after Utilisé conjointement avec la suppression des flottants ou le placement du contenu généré avant ou après le contenu d'un élément.
2. Syntaxe de base :
content: normal | string | attr() | uri() | counter();
normal : Valeur par défaut.
chaîne : recherche le contenu du texte, généralement une chaîne.
attr() : Insère la valeur d'attribut de l'élément, syntaxe : attr(attribute).
uri() : Insérez un fichier de ressource externe, qui peut être une image, un fichier audio, vidéo ou toute autre ressource prise en charge par le navigateur.
counter() : Counter, utilisé pour insérer des identifiants de tri. counter() peut non seulement ajouter des nombres numériques, mais également des nombres alphanumériques ou des chiffres romains. Syntaxe : content:couter (nom du compteur, type de numéro)<.>
3. Prise en charge du navigateur :
//一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}Principe : <!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>Rendu :  "153786337850877Comment utiliser CSS3 pour ajouter lattribut content ? Utilisation de lattribut content (exemple de code)")
open-quote Set Content est un guillemet ouvert
close-quote définit le contenu comme un guillemet fermé
no-open-quote Si spécifié, supprime l'ouverture ; guillemet du contenu ;
no-close- quote Si spécifié, supprime les guillemets fermants du contenu ;
hériter La valeur de l'attribut de contenu spécifié doit être héritée de l'élément parent.
La valeur de l'attribut open-quote et la valeur de l'attribut close-quote de l'attribut content ajoutent des symboles de texte imbriqués tels que des crochets, des guillemets simples et des guillemets doubles des deux côtés de la chaîne. les guillemets ouverts sont utilisés pour ajouter le symbole de texte de début et les guillemets fermés sont utilisés pour ajouter le symbole de texte de fin.
Rendu :<!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>
3), insérer des images
l'attribut de contenu CSS peut également être utilisé Insérez directement des images avant/après les éléments
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入图片</title>
<style>
p::after {
content: url(cssComment utiliser CSS3 pour ajouter lattribut content ? Utilisation de lattribut content (exemple de code));
border: 1px solid powderblue;
}
</style>
</head>
<body>
<p>这是一段测试文字,文字后面是图片：</p>
</body>
</html>
Résumé : ce qui précède sont quelques exemples d'application de l'attribut de contenu CSS, qui est très simple. Vous pouvez essayer de l'écrire vous-même.
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!