CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Comment insérer des contenus générés en CSS dans le code HTML

Comment insérer des contenus générés en CSS dans le code HTML

contenu généré
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

Insertion de carrés et d'éléments décoratifs

Objectifs

Les objectifs de cette vidéo sont d'apprendre à utiliser les contenus générés en CSS pour :

  • Ajouter des éléments décoratifs avant et après les titres.
  • Créer des boîtes d'informations sur les éléments du formulaire.
  • Conformer à l'accessibilité et aux normes du W3C.

Résumé

Ce tutoriel explique comment ajouter des contenus générés en CSS dans vos pages HTML pour des éléments décoratifs tels que des carrés.

Description

Dans cette leçon, nous abordons l'insertion de contenus générés en CSS dans votre code HTML. Utiliser les pseudoclasses ::before et ::after permet d'ajouter des éléments avant ou après le contenu d'un élément HTML pour des objectifs de décoration. Par exemple, ajouter des petits carrés autour d'un titre pour le mettre en valeur.

Nous allons également explorer comment ajouter des informations contextuelles dans un formulaire, en utilisant des boîtes d'informations qui apparaissent au survol de la souris. Cela inclut la gestion des positions, des styles et de l'accessibilité pour s'assurer que ces éléments ne nuisent pas à l'expérience utilisateur pour les personnes utilisant des lecteurs d'écran.

Enfin, nous illustrerons comment créer ces éléments avec des styles CSS détaillés, incluant des propriétés comme background-color, border, padding, et box-shadow. Vous apprendrez à manipuler ces propriétés pour obtenir le design souhaité tout en respectant les normes du W3C.

Voir plus

Questions - réponses

Pourquoi ne faut-il pas utiliser le contenu généré en CSS pour des éléments que l'on veut indexer ?
Parce que les moteurs de recherche ne considèrent pas ces contenus, ce qui pourrait nuire au référencement de votre page.
Quel est l'intérêt d'utiliser la propriété 'content' dans les pseudoclasses ::before et ::after ?
Cela permet d'ajouter du contenu textuel ou des éléments décoratifs devant ou derrière le contenu HTML existant sans altérer le code source HTML.
Comment rendre une boîte d'information générée en CSS accessible pour les lecteurs d'écran ?
En ajoutant l'information directement dans le code HTML avec un attribut personnalisé, puis en utilisant CSS pour l'affichage dynamique.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 5 months
Commentaire
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 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
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 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !