Différentes méthodes pour insérer du CSS
Objectifs
Les objectifs de cette vidéo sont de comprendre les différentes méthodes pour appliquer du CSS, d'apprendre à utiliser le style en ligne, et de percevoir les limites de cette méthode par rapport à des approches plus adaptées pour des projets complexes.
Résumé
Cette leçon porte sur les méthodes pour appliquer du style CSS sur une page HTML, en mettant l'accent sur les implications de chaque méthode pour la mise en forme d'un site web.
Description
Dans cette leçon, nous explorons les différentes méthodes pour intégrer du CSS à une page HTML, en particulier le style en ligne. Nous analysons les avantages et les inconvénients de cette méthode. Le style en ligne consiste à ajouter un attribut style directement sur l'élément HTML. Par exemple, pour changer la couleur d'un texte, on ajoutera style="color:red" à l'élément. Bien que cette méthode soit simple pour des tests rapides, elle s'avère inefficace pour la mise en forme de grandes quantités d'éléments ou de pages. Cela entraîne une répétition excessive de code et complique les mises à jour globales des styles. En cas de modification, chaque élément doit être mis à jour individuellement, ce qui n'est pas pérenne pour des projets à grande échelle.
Une approche plus efficace consiste à utiliser les feuilles de style internes ou externes, permettant de centraliser les règles CSS et d'assurer une maintenance plus simple et rapide. Cela permet aussi une meilleure séparation du contenu et de la présentation. En conclusion, bien que le style en ligne puisse être utile pour des tests rapides ou des ajustements mineurs, les projets de plus grande envergure nécessitent des méthodes plus robustes pour une gestion efficace et scalable des styles CSS.
Questions fréquentes
Programme détaillé
Module 1 - Qu'est-ce que le CSS ?
Module 2 - Comment appliquer les styles?
Module 3 - Commentez votre code CSS
Module 4 - Exprimez la couleur en CSS
Module 5 - Les différents types de sélécteurs CSS
Module 6 - Le sélécteur HTML
Module 7 - Le sélécteur hiérachique ou ascendant
Module 8 - Les pseudo classes de liens
Module 9 - Le sélécteur d'identifiant
Module 10 - Le sélécteur de classe
Module 11 - Le selécteur adjacent
Module 12 - Le selécteur enfant
Module 13 - Les autres pseudo classes
Module 14 - Le sélécteur d'attribut
Module 15 - Qu'elles sont les unités de mesure sur le web ?
Module 16 - Gérez vos polices
Module 17 - Transformez et alignez votre texte
Module 18 - Chargez une police pour votre site web
Module 19 - Ajoutez des bordures
Module 20 - Stylez vos listes
Module 21 - Comprendre la cascade et l'héritage
Module 22 - Découvrez le modèle de boîte
Module 23 - Visualisez votre code avec l'inspecteur d'éléments
Module 24 - Comprendre le fonctionnement des marges
Module 25 - Tout sur les arrières plans
Module 26 - Eléments bloc ou en ligne?
Module 27 - Faites flotter vos éléments
Module 28 - Utilisez flex pour vos mises en pages
Module 29 - Rendez votre code CSS compatible
Module 30 - Passez des élements par-dessus les autres
Module 31 - Créez de la transparence
Module 32 - Fixez vos éléments si nécessaire
Module 33 - Stylez vos tableaux
Module 34 - Stylez vos boutons
Module 35 - Stylez vos formulaires
Module 36 - Méthodologie de mise en page d'un site web
Module 37 - Le reset CSS
Module 38 - Les commentaires conditionnels
Module 39 - Créez vous un modèle
Module 40 - Créez la page d'accueil
Module 41 - Validez vos pages HTML au W3C
Module 42 - Stylez votre code de base en fonction de la maquette
Module 43 - Positionnez les éléments
Module 44 - Stylez l'en-tête du site
Module 45 - Stylez en pensant design pattern
Module 46 - Stylez du haut vers le bas
Module 47 - Stylez les mises en avant de contenu
Module 48 - Stylez les contenus contextuels
Module 49 - Ajoutez une page d'attérissage
Module 50 - Ajouter une page de contenu
Module 51 - Ajoutez un point de contact et la localisation
Module 52 - Les mentions légales d'un site
Module 53 - N'oubliez pas le Favicon
Module 54 - Validez vos pages CSS au W3C
Module 55 - Stylez l'impression
Module 56 - Comment héberger son site internet?
Module 57 - Comment mettre en ligne un site web
Module 58 - Créez une page 404
Module 59 - Optimisez votre site et sa performance d'affichage
Module 60 - Aidez les robots d'indexation avec le sitemap
Module 61 - Qu'est-ce que le fichier robot?
Module 62 - Créez des arrondis
Module 63 - Appliquez des ombres portées
Module 64 - Créez de dégradés
Module 65 - Insérez des éléments graphiques avec le CSS
Module 66 - Numérotez des titres
Module 67 - Créez des transitions
Module 68 - Transformez les éléments
Module 69 - Animez vos éléments
Module 70 - Fixez un fond image au scroll
Module 71 - Décallez des éléments
Module 72 - Affichez une image plein écran
Module 73 - Centrez un texte sur la hauteur par dessus une image
Module 74 - Créez un menu déroulant
Module 75 - Créez des effets au survol de la sourtis sur vos menus
Module 76 - Utilisez flex pour vos menus
Module 77 - La technique des sprites
Module 78 - Créez des bandes en bias
Module 79 - Animez un bouton
Module 80 - Créez une interaction au survol d'une image
Module 81 - Créez une lightbox en full CSS3
Module 82 - Animez un bouton de menu
Module 83 - Créez un menu full canvas en CSS3
Module 84 - Complétez le code html
Module 85 - Stylez le css global
Module 86 - Styler le header
Module 87 - Styler le footer
Module 88 - Styler la home
Module 89 - Styler la page 2
Module 90 - Styler la page 3
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.