Maison > Article > interface Web > Comment pouvons-nous utiliser différentes classes CSS en HTML ?
Comment pouvons-nous utiliser différentes classes CSS en HTML ?
- 王林avant
- 2023-09-15 15:41:121388parcourir
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
dont l'attribut de classe est défini sur noir affichent le contenu en noir.
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.
Exemple 1
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 deExemple 2
est :Exemple 2
Vous 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 deExemple 3
est :Exemple 3
Étant donné l'exemple suivant, où nous avons trois éléments avec des valeurs différentes d'attribut de classe. Deux éléments seront stylés de manière égale en fonction de la définition de style dans la balise head, tandis que l'autre élément sera stylé 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;
}
.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 deExemple 4
est :Exemple 4
Un 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>
Exemple 5
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!