Comment pouvons-nous utiliser différentes classes CSS en HTML ?-tutoriel HTML-php.cn

Comment pouvons-nous utiliser différentes classes CSS en HTML ?

王林

Libérer： 2023-09-15 15:41:12

avant

1478 Les gens l'ont consulté

Comment pouvons-nous utiliser différentes classes CSS en HTML ?

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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>

Copier après la connexion

Ce qui suit est le résultat de l’exemple de programme ci-dessus.

La traduction chinoise de

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

Copier après la connexion

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

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

Copier après la connexion

Ce qui suit est le résultat de l'exemple de programme ci-dessus.

La traduction chinoise de

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

Copier après la connexion

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>

Copier après la connexion

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!