CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Comment Styliser l'Entête de votre Site Web

Comment Styliser l'Entête de votre Site Web

La bannière
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription

89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

À la fin de cette leçon, vous serez capable de :

  • Importer et ajuster une image de fond en CSS
  • Configurer des propriétés de positionnement pour les images
  • Ajouter du padding pour ajuster la hauteur d'une div
  • Utiliser des div imbriquées pour ajouter des filtres de couleur

Apprenez à styliser l'entête de votre site web en transformant une simple div en une bannière attrayante avec des techniques de CSS.

Dans cette leçon, nous allons apprendre à styliser l'entête de notre site web en utilisant CSS et HTML. Nous allons créer une div simple que nous appellerons banner et y ajouterons diverses propriétés CSS pour obtenir un design professionnel et élégant.

Tout d'abord, nous importerons une image de fond et utiliserons des propriétés telles que background-image, background-repeat, et background-size pour s'assurer qu'elle ajuste sa taille et ne se répète pas sur différentes résolutions d'écran. Ensuite, nous ajusterons la position de l'image pour qu'elle soit centrée avec background-position.

Nous verrons également comment ajouter du padding pour ajuster la hauteur de notre bannière sans utiliser la propriété height. Pour rendre le texte lisible par-dessus l'image, nous ajouterons un fond de couleur transparent à l'intérieur de la bannière grâce à une div imbriquée.

Voir plus
Questions réponses
Pourquoi utilise-t-on la propriété background-cover?
La propriété background-cover est utilisée pour s'assurer que l'image de fond couvre l'ensemble de la div, sans se déformer, tout en maintenant un bon rapport sur les différentes tailles d'écran.
Comment puis-je centrer une image de fond en CSS?
Vous pouvez centrer une image de fond en CSS en utilisant la propriété background-position et en la configurant à 50% 50% pour centrer sur les axes X et Y.
Pourquoi utilisons-nous une div imbriquée avec une couleur de fond transparente?
Une div imbriquée avec une couleur de fond transparente est utilisée pour ajouter un filtre par-dessus l'image de fond, ce qui améliore la lisibilité du texte qui est superposé.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 9 mois
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 an
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !