Comment utiliser l'attribut de contenu CSS-tutoriel CSS-php.cn

Comment utiliser l'attribut de contenu CSS

青灯夜游

Libérer： 2019-05-28 17:28:46

original

4132 Les gens l'ont consulté

L'attribut CSS content est utilisé pour insérer du contenu généré. Il est souvent utilisé avec les sélecteurs :before et :after pour effacer les flottants ou placer le contenu généré devant ou derrière le contenu d'un élément. Tous les navigateurs prennent en charge l'attribut content.

Comment utiliser l'attribut de contenu CSS

Comment utiliser l'attribut de contenu CSS ?

L'attribut content est utilisé pour insérer le contenu généré. Il est souvent utilisé en conjonction avec le sélecteur :before et le sélecteur :after pour effacer les flottants ou placer le contenu généré devant le. contenu d'un élément ou ultérieurement.

Syntaxe de base :

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

Copier après la connexion

●Normal : valeur par défaut.

● Chaîne : Recherchez 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 nombres romains. Syntaxe : content:couter(计数器名，编号种类)

<. 🎜>Description : Cet attribut permet de définir le contenu généré placé avant ou après l'élément. Par défaut, il s'agit souvent de contenu en ligne, mais le type de boîte que ce contenu crée peut être contrôlé à l'aide de l'attribut display.

Remarque : Tous les navigateurs prennent en charge l'attribut content. Internet Explorer 8 (et versions ultérieures) prend en charge l'attribut content si !DOCTYPE est spécifié.

Exemple d'utilisation de l'attribut de contenu CSS

1 L'attribut de contenu CSS utilise une pseudo-classe après pour effacer les flottants.

L'attribut content de CSS est spécialement appliqué aux pseudo-éléments avant/après. L'application la plus courante consiste à utiliser des pseudo-classes pour effacer les flottants.

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

Copier après la connexion

Principe :

après que le pseudo-élément génère un élément de niveau bloc avec un contenu d'un point derrière l'élément via le contenu, puis utilise clear:both pour effacer le flottant .

2. L'attribut de contenu CSS utilise des pseudo-éléments pour insérer du contenu dans la page

1) Insérer du texte brut

Utilisation : contenu : "Inséré Article", ou content:none n'insère pas de contenu

Exemple :

<!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>

Copier après la connexion

Rendu :

Comment utiliser lattribut de contenu CSS

2 ) Insertion de symboles de texte

Vous pouvez utiliser les valeurs d'attribut suivantes de l'attribut de contenu CSS pour implémenter l'insertion (suppression) de symboles de texte :

● aucun : définir le contenu, si spécifié comme Rien ;

Quantity open-quote : Définir le contenu comme étant des guillemets ouverts ;

Quantity close-quote : Définir le contenu comme étant des guillemets fermés ; -quote : Si spécifié, supprime le début du contenu Guillemets ;

● no-close-quote : Si spécifié, supprime les guillemets fermants du contenu

● hérite : La valeur ; de l'attribut de contenu spécifié doit être hérité 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.

<!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>

Copier après la connexion

Rendu :

3), insérer des images Comment utiliser lattribut de contenu CSS

l'attribut de contenu CSS peut également être directement ajouté à l'élément Insérer des images avant/après

<!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>

Copier après la connexion

Rendu :

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!