Comment définir le style CSS pour le corps d’une page Web ?

Dans la conception Web, nous utilisons souvent CSS pour contrôler le style des pages Web. Parmi eux, la définition des styles pour le corps d'une page Web est une opération très basique. Cette opération peut non seulement modifier les attributs d'apparence tels que la couleur d'arrière-plan et le style de police de la page Web, mais également affecter la mise en page et la composition du Web. page. Cet article vous donnera une compréhension approfondie de la façon de définir des styles CSS pour le corps d'une page Web.

1. Qu'est-ce que le corps d'une page Web ?

Avant de présenter comment définir les styles CSS pour le corps d'une page Web, vous devez d'abord comprendre ce qu'est le corps d'une page Web. En termes simples, le corps est le contenu principal de la page Web et le conteneur racine de tous les éléments de la page Web que nous voyons. Sur une page HTML, la balise body est située après la balise head et à l'intérieur de la balise html.

2. Comment définir le style CSS pour le corps de la page Web ?

En définissant le style CSS du corps, nous pouvons contrôler la plupart des propriétés d'apparence et de mise en page de la page Web. Ci-dessous, nous expliquons comment définir différentes propriétés une par une.

1. Définir la couleur d'arrière-plan

En CSS, afin de définir la couleur d'arrière-plan du corps, nous devons définir la propriété background-color sur une valeur de couleur. Par exemple, pour définir la couleur d'arrière-plan sur gris, vous pouvez utiliser le code suivant :

body {
  background-color: gray;
}

Vous pouvez constater que le "corps" ici fait référence à l'élément body dans la page Web, et le code entre accolades est la définition du style. Parmi eux, background-color fait référence à l'attribut de couleur d'arrière-plan et gray est la valeur de couleur.

2. Définir l'image d'arrière-plan

Si vous souhaitez définir une image d'arrière-plan pour une page Web, nous pouvons utiliser l'attribut background-image. Par exemple, nous pouvons définir l'image d'arrière-plan de la page Web sur une image nommée "background.jpg" :

body {
  background-image: url('background.jpg');
}

Comme vous pouvez le voir, l'image d'arrière-plan ici doit être spécifiée à l'aide d'une adresse URL. Dans cet exemple, nous utilisons des guillemets simples pour envelopper l'adresse de l'image.

3. Définir la police

Afin de définir la police dans la page Web, nous devons utiliser l'attribut font-family. Dans cette propriété, nous pouvons spécifier un ou plusieurs noms de police comme police par défaut pour la page Web. Par exemple, le code suivant définit la police par défaut d'une page Web sur Arial :

body {
  font-family: SimSun, Arial, sans-serif;
}

Ici, nous utilisons des virgules pour séparer plusieurs noms de police. Le navigateur essaiera de charger ces polices dans l’ordre dans lequel nous les listons. Si la première police ne parvient pas à se charger, le navigateur tentera d'utiliser la deuxième police.

4. Définir la taille de la police

Si vous souhaitez modifier la taille de la police dans la page Web, vous pouvez utiliser l'attribut font-size. Ici, nous pouvons définir une valeur de pixel absolue ou utiliser une taille relative plus abstraite. Par exemple, le code suivant définit la taille de la police dans une page Web à 16 pixels :

body {
  font-size: 16px;
}

Alternativement, vous pouvez définir la taille de la police sur une taille relative en utilisant le code suivant :

body {
  font-size: medium;
}

Dans cet exemple, nous définissons la taille de la police à une taille relative « moyenne ». De cette façon, nous pouvons garantir que la taille de la police est adaptée aux habitudes de lecture de la plupart des gens.

5. Définir la hauteur de la ligne

Si vous souhaitez modifier l'espacement entre les lignes de texte dans une page Web, vous pouvez utiliser l'attribut line-height. Dans cette propriété, nous pouvons définir une valeur absolue en pixels ou utiliser une taille relative calculée à partir de la taille de la police. Par exemple, le code suivant définit la hauteur de ligne à 1,6 fois la taille de la police :

body {
  line-height: 1.6;
}

6. Définir la couleur du texte

Pour changer la couleur du texte dans une page Web, vous pouvez utiliser l'attribut color. Cette propriété accepte une valeur de couleur comme paramètre d'entrée. Par exemple, le code suivant définit la couleur du texte d'une page Web sur noir :

body {
  color: black;
}

7. Modifier l'alignement du texte

Si vous devez aligner le texte d'une page Web à gauche, au centre ou à droite, vous pouvez utiliser l'attribut text-align. Par exemple, le code suivant peut centrer le texte d'une page Web horizontalement :

body {
  text-align: center;
}

8. Définition du remplissage de la page

Si vous devez laisser un peu d'espace autour de la page Web pour éloigner le contenu de la fenêtre du navigateur, vous pouvez utilisez l'attribut padding. Par exemple, le code suivant laissera 100 pixels d'espace blanc autour de la page web :

body {
  padding: 100px;
}

3. Résumé

En définissant le style CSS du corps de la page web, nous pouvons contrôler l'apparence et la mise en page de la page web . Parmi eux, nous pouvons modifier la couleur d’arrière-plan, le style de police, la couleur du texte, l’alignement, le remplissage et d’autres attributs de la page Web. Grâce à ces paramètres de style CSS de base, nous pouvons créer une apparence unique pour la page Web et améliorer l'expérience d'accès de l'utilisateur.

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!