Comment pouvons-nous utiliser des balises fractionnées pour styliser les éléments HTML ?-tutoriel HTML-php.cn

Comment pouvons-nous utiliser des balises fractionnées pour styliser les éléments HTML ?

WBOY

Libérer： 2023-09-06 13:45:05

avant

1343 Les gens l'ont consulté

La balise

sert de conteneur pour les éléments HTML. A l'aide de cette balise, nous pouvons facilement définir une partie du document HTML. Il est également utilisé pour regrouper la plupart des éléments HTML et les formater facilement. Les balises sont utilisées avec des éléments de niveau bloc.

La balise

accepte toutes les propriétés CSS et utilise des propriétés telles que class et id pour styliser les éléments qu'elle contient.

$Comment pouvons-nous utiliser des balises fractionnées pour styliser les éléments HTML ?$

Grammaire

Ce qui suit est la syntaxe de la balise.

<div class='division'>Content…</div>

Copier après la connexion

Exemple 1

Vous trouverez ci-dessous un exemple d'ajout de styles à une balise div en HTML.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .parent {
         border: 1rem solid green;
         margin: 1rem;
         padding: 1rem 1rem;
         text-align: center;
         box-shadow: 2px 2px 20px 23px aquamarine;
      }
      .division {
         display: inline-block;
         border: 1px solid aquamarine;
         padding: 1rem 1rem;
         background-color: #2ecc71;
         color: white;
      }
   </style>
</head>
<body>
   <div class='parent'>
      <div class='division'>div tag 1</div>
      <div class='division'>div tag 2</div>
      <div class='division'>div tag 3</div>
   </div>
</body>
</html>

Copier après la connexion

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

Nous pouvons ajouter plus de styles aux étiquettes.

Exemple 2

Vous trouverez ci-dessous un autre exemple d'ajout de styles aux balises div en HTML.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .parent {
         border: 1rem solid green;
         margin: 1rem;
         padding: 1rem 1rem;
         text-align: center;
         box-shadow: 2px 2px 20px 23px aquamarine;
      }
      .division {
         display: inline-block;
         border: 1px solid aquamarine;
         padding: 1rem 1rem;
         background-color: #2ecc71;
         color: white;
         text-transform: uppercase;
         text-decoration: underline;
         font-family: cursive;
         font-size: 1.2rem;
         font-weight: bolder;
         font-style: italic;
      }
   </style>
</head>
<body>
   <div class='parent'>
      <div class='division'>div tag 1</div>
      <div class='division'>div tag 2</div>
      <div class='division'>div tag 3</div>
   </div>
</body>
</html>

Copier après la connexion

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

Exemple 3

Vous pouvez essayer d'exécuter le code suivant pour styliser un élément HTML à l'aide de la balise. La règle de style ajoutée sera appliquée aux éléments avec id="content". L'identifiant ici est le sélecteur CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      #container p {
         line-height: 15px;
         margin: 20px;
         padding-bottom: 15px;
         text-align: justify;
         width: 130px;
         color: blue;
      }
   </style>
   <title>HTML div Tag</title>
   <link rel = "stylesheet" href = "style.css">
</head>
<body>
   <div id = "container">
      <p>Welcome to our website. We provide tutorials on various subjects.</p>
   </div>
</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!