Maison > Article > interface Web > Comment appliquer des styles à plusieurs classes à la fois ?
Comment appliquer des styles à plusieurs classes à la fois ?
- 王林avant
- 2023-08-19 09:33:16970parcourir
Pour appliquer des styles à plusieurs classes à la fois, nous allons utiliser le sélecteur point (.) et la virgule (,). Dans cet article, nous utiliserons le sélecteur point (.) et sélectionnerons tous les éléments avec leurs noms de classe. à l'aide du sélecteur et séparés par une virgule (,).
"class" est un attribut HTML qui accepte une liste de classes séparées par des espaces. Ces classes peuvent être utilisées en CSS pour styliser des éléments spécifiques, ou en javascript pour manipuler ces éléments HTML.
Exemple 1
Dans cet exemple, nous appliquerons la couleur de police « rouge » aux éléments HTML qui ont les classes « header » et « para ». Nous y parviendrons en utilisant le sélecteur de point (.) et en les concaténant avec une virgule (,).
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply styles to multiple classes at once?</title>
<style>
.header, .para {
color: red;
}
</style>
</head>
<body>
<h3 class="header">How to apply styles to multiple classes at once?</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
Exemple 2
Dans cet exemple, nous appliquerons la couleur de police à "vert" et le style de police à "italique" aux éléments HTML avec les noms de classe "header" et "para". Nous utiliserons des sélecteurs de points (.) et les concaténerons avec des virgules (,) pour y parvenir.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply styles to multiple classes at once??</title>
<style>
.header, .para {
color: green;
font-style: italic;
}
</style>
</head>
<body>
<h3class="header">How to apply styles to multiple classes at once?</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
Conclusion
Dans cet article, nous avons appris comment appliquer plusieurs classes CSS à la fois. Nous l'avons fait en sélectionnant d'abord plusieurs classes à la fois, en utilisant le sélecteur de points (.) fourni par le CSS, puis en leur attribuant les styles requis dans la feuille de style. .
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!