Nous utilisons l'attribut class pour spécifier une classe pour un élément HTML.
Plusieurs éléments HTML peuvent partager la même classe. En utilisant diverses propriétés de la classe telles que le changement de couleur, de police, etc., nous pouvons définir des règles de style pour ces éléments HTML. Les éléments de cette classe seront formatés selon les règles définies. C'est ce qu'on appelle un sélecteur de classe.
Pour sélectionner un élément avec une classe spécifique, vous devez écrire un point (.) suivi du nom de la classe, par exemple, regardons la classe « .black »,
.black {
color: #000000;
}
Pour chaque élément de notre document dont l'attribut class est défini sur noir, affichez le contenu en noir. Par exemple, seuls les éléments
h3.black {
color: #000000;
}
Nous utilisons l'attribut class pour pointer vers le nom de la classe dans la feuille de style. JavaScript peut également l'utiliser pour accéder à des éléments portant des noms de classe spécifiques.
Vous trouverez ci-dessous un exemple où nous avons deux éléments avec la même valeur pour leur attribut de classe. Tous les éléments seront stylés de la même manière en fonction de la définition de style dans la balise head.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.information,ol {
border: 2px solid black;
margin: 20px;
padding: 20px;
}
ol{
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<div class="information">
<h2>Jason</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -A</li>
</ol>
</div>
<div class="information">
<h2>Abdul</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -B</li>
</ol>
</div>
</body>
</html>
Ce qui suit est le résultat de l’exemple de programme ci-dessus.
La traduction chinoise deVous trouverez ci-dessous un exemple où nous avons deux éléments avec des valeurs différentes pour leur attribut de classe. Les deux éléments seront stylés en fonction de la définition de style dans la balise head.
Pour définir plusieurs classes, séparez les noms de classe par des espaces. L'élément sera stylé selon la classe spécifiée.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.room {
font-family: monospace;
font-size: 200%;
color: tomato;
text-align: center;
}
.two{
font-family: cursive;
color: lawngreen;
text-align: center;
}
</style>
</head>
<body>
<p class="room">Meta tag contents are not visible on your browser.</p>
<p class="room two"> The mata tag is added inside the head tag.</p>
</body>
</html>
Pour définir plusieurs classes, séparez les noms de classe par des espaces ou spécifiez des valeurs différentes. L'élément sera stylé selon la classe spécifiée.
La traduction chinoise de<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.information,ol {
border: 2px solid black;
margin: 20px;
padding: 20px;
}
.computerscience,ul {
border: 2px solid black;
margin: 20px;
padding: 20px;
}
ol{
background-color: brown;
}
ul{
background-color: tomato;
}
</style>
</head>
<body>
<div class="information">
<h2>Jason</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -A</li>
</ol>
</div>
<div class="information">
<h2>Abdul</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -B</li>
</ol>
</div>
<div class="computerscience">
<h2>Satya</h2>
<ul>
<li>Bachelor's of Engineering</li>
<li>Cse stream</li>
<li>section -A</li>
</ul>
</div>
</body>
</html>
Ce qui suit est le résultat de l'exemple de programme ci-dessus.
La traduction chinoise deUn autre exemple pourrait inclure le style de la balise
Stylisez tous les éléments
avec class="device" de la manière suivante
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #fffffF;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p class="device">Information about devices.</p>
<p>This is demo text</p>
</body>
</html>
Le style des étiquettes peut être réalisé à travers plusieurs classes, à savoir les appareils et accessoires ici -
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #fffffF;
}
p.accessories {
text-align: center;
}
</style>
</head>
<body>
<p class="device accessories">DEVICE DETAILS</p>
<p class="device">Information about devices.</p>
</body>
</html>
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!
Que veut dire Kol ?
La différence entre xdata et data
Comment utiliser la commande find pour rechercher des fichiers sous Linux
Méthodes courantes en cours de mathématiques
La fonction de la balise span
Où puis-je me procurer le costume Douyin Little Fire Man ?
qu'est-ce que le World Wide Web
Comment ouvrir un fichier mdf
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
