Couverture de livre électronique gratuite Terminer le cours CSS

Terminer le cours CSS

Nouveau cours

35 pages

Style de section en CSS

Capítulo 21

Temps de lecture estimé : 2 minutes

Audio Icon

Écouter en audio

0:00 / 0:00

Sections de style en CSS

En ce qui concerne le style des sections en CSS, il est important de comprendre que chaque section doit être gérée individuellement afin que l'aspect général du site soit cohérent et agréable aux yeux de l'utilisateur.

Sélectionner les rubriques

Pour sélectionner une section spécifique dans CSS, vous devez identifier la classe ou l'identifiant qui lui est attribué en HTML. Par exemple, si nous voulons styliser la section d'en-tête de notre site Web, qui a la classe "header", nous pouvons utiliser le code suivant :

.entête { couleur de fond : #333 ; couleur : #fff ; rembourrage : 20px ; }

Dans cet exemple, nous avons défini l'arrière-plan de la section sur gris foncé (#333), la couleur du texte sur blanc (#fff) et nous avons ajouté un espacement intérieur de 20 pixels.

Style de la typographie

Un autre aspect important des sections de style en CSS est la typographie. Il est important de choisir une police lisible et de définir la taille et la couleur du texte en fonction de la conception globale du site.

Pour définir la typographie dans une section spécifique, nous pouvons utiliser les propriétés "font-family", "font-size" et "color". Par exemple :

Continuez dans notre application.

Vous pouvez écouter le livre audio écran éteint, recevoir un certificat gratuit pour ce cours et accéder également à 5 000 autres cours en ligne gratuits.

Ou poursuivez votre lecture ci-dessous...
Download App

Téléchargez l'application

.en-tête h1 { famille de polices : Arial, sans empattement ; taille de police : 36px ; couleur : #fff ; }

Dans cet exemple, nous sélectionnons l'élément "h1" dans la section "en-tête" et définissons la police sur Arial (ou une police générique sans empattement si Arial n'est pas disponible), la taille sur 36 pixels et la couleur sur blanc.

Ajout d'images et d'arrière-plans

En plus des couleurs et de la typographie, nous pouvons également ajouter des images et des arrière-plans à nos sections. Pour ajouter une image de fond à une section, nous pouvons utiliser la propriété "background-image". Par exemple :

.héros { image de fond : url('image.jpg'); taille de fond : couverture ; position d'arrière-plan : centre ; }

Dans cet exemple, nous définissons une image d'arrière-plan pour la section "héros" et ajustons la taille et la position de l'image afin qu'elle couvre toute la section et soit centrée.

Nous pouvons également ajouter des images dans une section en utilisant la balise HTML "img" et en la stylisant avec CSS. Par exemple :

.l'image sélectionnée { largeur : 100 % ; largeur maximale : 600px ; bloc de visualisation; marge : 0 soi ; }

Dans cet exemple, nous définissons la largeur maximale de l'image sur 600 pixels et la centrons dans la section "image en vedette".

Conclusion

Le style des sections en CSS est un élément fondamental de la conception de sites Web. En choisissant les couleurs, la typographie, les images et les arrière-plans pour chaque section, nous pouvons créer un look cohérent et convivial. Il est important de se rappeler de sélectionner chaque section individuellement et d'ajuster les propriétés en fonction de la conception globale du site.

Répondez maintenant à l’exercice sur le contenu :

_Quelle propriété CSS est utilisée pour définir une image de fond dans une section ?

Tu as raison! Félicitations, passez maintenant à la page suivante

Vous avez raté! Essayer à nouveau.

Chapitre suivant

Éléments de style en CSS

Arrow Right Icon
Téléchargez l'application pour obtenir une certification gratuite et écouter des cours en arrière-plan, même avec l'écran éteint.