CSS en action : Ajouter des styles, des mises en forme et des fonctionnalités

1. Introduction: Hé tout le monde. Bienvenue dans l'inaction CSS. Aujourd'hui, nous allons examiner les feuilles de style CSS ou en cascade et comment elles peuvent être appliquées au contenu. Ils peuvent parfois ressembler à de la magie noire, mais nous allons examiner les règles de base qui sous-tendent CSS et faciliter leur application à votre contenu. Que vous soyez développeur ou concepteur, que vous ayez expérimenté ou non, c'est une bonne classe pour vous. Nous allons couvrir les bases rapidement pour mettre tout le monde au courant et nous allons aller de l'avant. Je vous fournirai tout ce dont vous avez besoin pour la classe, les liens intégrés, ressources et l'espace de travail en ligne. Si vous avez de l'expérience, il y aura des fichiers que vous pourrez télécharger et travailler comme vous le souhaitez. Tout le travail que nous faisons aujourd'hui sera en CSS. Je vais vous fournir un document HTML, mais vous n'aurez pas à vous soucier de l'éditer. Nous commençons tous avec le même contenu et finissons avec quelque chose d'unique complètement le vôtre. Au milieu du projet, nous allons tous travailler vers la même page web. Il sera poli, et stylé et un excellent point de référence pour comparer et poser des questions aux autres élèves de la classe pour voir ce que vous auriez pu faire de mal. Après ça, je vais te donner quelques outils de plus et tu partiras tout seul. Utilisez votre imagination et voyez ce que vous pouvez faire à cette page Web. C' est incroyable de voir ce qu'avec le même contenu, un peu de CSS et de créativité peuvent créer. Je suis excité de voir ce que vous pouvez faire à la fin de la classe d'aujourd'hui. 2. Comment commencer le projet: Nous allons utiliser CodeSandbox.io pour rendre le projet d'aujourd'hui rapide et facile à entrer dans. Si vous avez assez d'expérience en développement, alors vous préférez travailler dans votre propre environnement local, n'hésitez pas à télécharger les deux fichiers fournis et à les éditer comme vous êtes le plus à l'aise. Une fois la classe terminée, vous pouvez les télécharger dans CodeSandBox ou les mettre ailleurs entièrement pour partager votre progression. A partir d'ici, cependant, je suppose que vous suivez avec moi. CodeSandBox nous permet tous de commencer sur la même page en utilisant le lien fourni pour le projet de démarrage. Dès que vous modifiez l'un de ces fichiers, votre projet obtiendra une toute nouvelle URL et deviendra unique pour vous. Nous utiliserons ce fait pour faciliter le partage de notre projet lorsque vous avez des questions ou lorsque vous êtes prêt à montrer votre propre résultat final. Voici à quoi votre projet devrait ressembler une fois que vous avez suivi notre lien de démarrage. n'y a que quelques fichiers dans le projet, package.json, que nous allons ignorer entièrement pour aujourd'hui, ne vous inquiétez pas, index.html, qui est l'endroit où vit tout notre contenu, et styles.css, qui vit dans le dossier styles au cas où c'est caché. Maintenant, nous allons bientôt regarder le contenu du fichier HTML, mais d'abord, je tiens à rappeler à tout le monde, nous n'éditerons rien dans index.html. Tout notre travail aujourd'hui se fait dans styles.css. Ce qui signifie que peu importe à quel point le projet final de chacun est différent, complexe ou complètement unique, ils sont tous basés sur le même contenu. Voyant à quel point votre présentation CSS peut faire une page peut aider à illustrer à quel point ce que nous apprenons aujourd'hui est puissant. 3. Un aperçu rapide de notre contenu: Bien que nous ne modifierons rien dans ce fichier HTML, nous allons y faire référence, beaucoup. Le CSS a beaucoup d'outils pour styliser le contenu de manière à la fois répandue et très précise. Mais ils dépendent tous de la façon dont votre contenu HTML est réellement écrit. Jetons un coup d'oeil à la façon dont notre contenu est présenté, maintenant, ne vous inquiétez pas de mémoriser tous ces détails que nous allons juste aller pour une compréhension globale en ce moment, je vais actualiser des détails spécifiques plus tard pour vous à mesure qu'ils deviennent pertinents. Vous pouvez toujours vous référer au fichier HTML à votre propre rythme. Le contenu lui-même contient également des conseils et des détails que nous pourrions ne pas couvrir directement dans ces vidéos. Allez-y et lisez pendant que nous travaillons le long, Il est important de se rappeler que tout en HTML est imbriqué. Par exemple, ici nous ouvrons l'élément Header et ici nous le fermons. Tout entre les deux est considéré dans l'en-tête, même s'il n'y a rien de visuel sur la page, pour vraiment vous en parler encore sans regarder le code, correctement indenter HTML vous donne des conseils sur l'imbrication par pousser des éléments imbriqués de plus en plus afin de rendre facile à juger en un coup d'œil, comme vous le voyez ici, gardez à l'esprit que les éléments peuvent être imbriqués plusieurs niveaux en profondeur. Juste en dessous de l'en-tête, nous avons un élément de navigation qui contient un élément de liste UL ou Unordered, qui contient un tas d'éléments LI, List, chaque élément qui contient un tas d'éléments LI, List, de liste a même un lien à l'intérieur d'eux, même s'ils ne sont pas divisés sur deux lignes séparées et en retrait. Pour empêcher les fichiers HTML incroyablement volumineux d'être inutilement longs. Plusieurs fois, le contenu simple, comme un lien à l'intérieur d'un élément de liste, est conservé sur une seule ligne, comme vous le voyez ici. 4. Boîte à outils CSS : Élements, cours et ID: Il existe trois méthodes principales d'application de CSS que nous utiliserons aujourd'hui, les éléments, les classes et les ID. Ces trois méthodes d'écriture des instructions CSS peuvent être utilisées ensemble pour appliquer nos styles avec précision et logique une fois que nous comprenons comment ils fonctionnent. Mais ne vous inquiétez pas d'ajouter un des CSS que je tape dans cette section, nous allons juste l'effacer dans un instant de toute façon. Je vous le ferai savoir quand nous commencerons à écrire du code que nous voudrons garder. Tout d'abord, parlons d'éléments. Un élément est le moyen le plus généralisé d'appliquer CSS au contenu. À peu près n'importe quel contenu d'une page HTML peut être considéré comme un élément stylable. Regardons le premier paragraphe de la page sous l'en-tête de contenu R. Le texte est enveloppé dans une balise p pour le paragraphe. Cette balise p est notre élément. Si nous devions écrire CSS pour agrandir tous les paragraphes de la page, nous pourrions utiliser cet élément général pour le faire comme ceci. Ensuite, nous avons des cours. Et si nous voulions ajouter quelques styles à certains de nos paragraphes, mais pas tous ? Les classes sont des noms réutilisables que nous pouvons appliquer à notre contenu pièce par pièce. Ils nous permettent de choisir et de choisir plus sélectivement que de cibler chaque élément de la page. J' ai ajouté des classes dans tout le contenu HTML, mais voyons les en action. Le premier paragraphe de chaque section comporte une classe de premier paragraphe. Nous pouvons utiliser cela pour tourner sélectivement ces paragraphes, et seulement ces paragraphes, en rouge. Notez que pour CSS, nous utilisons un point avant le nom de la classe pour indiquer à notre fichier qu'il s'agit spécifiquement d'une classe que nous appelons. Nous n'avons rien ajouté à notre élément. Enfin, nous avons des identifiants. Pensez à un ID comme une classe que vous n'utilisez qu'une fois par page. Eh bien, une classe est utile car elle est réutilisable et flexible et l'ID est tout au sujet d'être unique. Vous pouvez être sûr que tous les styles que vous appliquez à un ID ne s' appliqueront jamais qu'à ce contenu exact. Nous reviendrons plus tard dans les détails, mais les ID sont incroyablement utiles lorsque vous devez vous assurer qu'un certain contenu a un style unique, même si d'autres styles de classe sont en conflit. Alors que les classes obtiennent un point pour les distinguer, ID utilisent un symbole de hachage, comme ceci. 5. Mise en page Big Picture: Commençons à coiffer notre projet dès maintenant en regardant quelques-uns des changements les plus larges que nous pouvons apporter. Il devrait y avoir un élément déjà dans votre feuille de style le seul CSS que j'ai écrit pour vous avant le début de la classe. Il sélectionne l'élément body, qui est un élément qui contient tout ce qui est visible sur la page et définit la police sur Arial, avec un repli à n'importe quelle police Sans Serif si Arial est absent de votre système pour une raison quelconque. Nous commencerons par ajouter à cet élément. Pour l'instant, ajoutez CSS à mes côtés, en mettant la vidéo en pause comme un moyen d'apprendre et de pratiquer vos nouvelles compétences de codage. Une fois que nous atteindrons un certain point de la classe, je vous ferai savoir que le moment est venu d'ajouter votre propre touche créative et de rendre le projet complètement vôtre. D' ici là, nous travaillons tous vers le même objectif. Par défaut, notre navigateur ajoute un peu d'espace autour de notre contenu, sorte qu'il ne frotte pas directement sur les bords de la fenêtre. Bien que cela soit utile, nous voulons écrire nos propres règles pour la façon de disposer ce contenu, supprimons la marge et le remplissage de l'élément de corps comme ceci. Ça ne va pas avoir l'air super tout de suite, mais nous construisons vers quelque chose. Maintenant, il y a du contenu dispersé dans toute la page que j'ai senti mérité un peu d'accent, nous pouvons utiliser l'accent du nom de classe, que j'ai déjà ajouté à ces bits pour le faire. Il y a beaucoup de façons de mettre l'accent sur votre contenu, mais pour l'instant, rendons le gras, en italique, et le soulignons, là, cela devrait être plus difficile à manquer. Nous avons également du contenu qui fait référence au code réel comme exemples pour vous aider à apprendre. Le CSS est un peu plus compliqué ici et nous le décomposons plus en profondeur dans les leçons à venir. Pour l'instant, suivez et prenez des notes sur tout ce qui n'a pas de sens tout de suite. Nous allons ajouter deux classes, code et le commentaire de code. Nous voulons que le code ressemble à ce qu'il soit directement sorti de notre éditeur de code, donc nous allons le façonner et le colorer pour se démarquer. Voilà, ça ressemble un peu plus à notre éditeur de code pour le faire se démarquer. Maintenant, les commentaires de code ne sont pas fonctionnellement du code, mais de petits conseils ou notes pour moi sur ce qui devrait être dans votre code en dehors des exemples. Pour que nous ne soyons pas confus, mettons-les en vert et les séparons facilement visuellement. 6. Personnaliser l'entête: Ensuite, faisons en sorte que notre en-tête ressemble un peu plus à un en-tête réel. Dans la dernière leçon, nous avons appliqué une mise en page et des couleurs aux éléments de notre contenu avec une classe de commentaire de code et de code. Apportons également quelques détails de couleur et de mise en page à notre en-tête. abord, nous allons nous concentrer sur le titre de la page, l'élément H1. HTML utilise une série d'éléments d'en-tête : H1, H2, H3, etc. Ainsi, le contenu peut contenir de nombreux niveaux d'importance pour leurs en-têtes. Habituellement, vous verrez un seul H1 sur une page bien qu'il n'y ait aucune restriction obligatoire à ce sujet. H2 peut être utilisé pour noter une section particulière du contenu. Chacune des plus grandes sections de notre page, comme notre contenu, est en H2. S' il s'agit d'autres sections de cette rubrique, vous pouvez utiliser des H3 et ainsi de suite. Comme la balise body, les navigateurs ont généralement un espacement par défaut ajouté à ces en-têtes sur lequel ils se retrouvent si vous n'écrivez pas de règles spécifiques sur votre CSS. Dans ce cas, nous allons dire à nos éléments H1 exactement combien de marge nous voulons qu'ils aient. Nous voulons être centrés, et nous voulons avoir une couleur particulière. Maintenant, nous voulons que le plus petit sous-titre corresponde. Ce n'est pas dans le H1, mais plutôt son propre élément de paragraphe. Cibonnons cet élément comme nous l'avons fait précédemment et sélectionne certains styles. Nous voulons un peu plus grand donc il fait évidemment partie du titre visuellement. L' unité que j'utilise ici ems est une de taille relative pour les éléments typographiques. Je vais fournir des ressources pour plus de profondeur pour la recherche, mais pour l'instant, il suffit de considérer 1,2 em signifie 120 pour cent de la taille que le texte serait normalement. Nous allons également définir explicitement la marge et le remplissage ici pour remplacer l'espacement par défaut des paragraphes. Ajoutons un peu de couleur bleue fraîche, et ajoutons une bordure afin que nous puissions séparer le haut du bas du titre. Maintenant, l'en-tête est assez bon, mais je pense que notre CSS a eu quelques conséquences inattendues ci-dessous. 7. Comprendre le Fallout: Que s'est-il passé ? Nous avons pu exposer notre en-tête et notre titre exactement comme nous les voulions, mais les styles du sous-titre ont été transportés et appliqués à chaque paragraphe de la page. Cela rend notre contenu difficile à lire et manque complètement le point d'avoir des styles d'en-tête uniques en premier lieu. Croyez-le ou non, ce degré massif de style largement appliqué est l'une des plus grandes caractéristiques de CSS, pas un bug. C' est pourquoi on les appelle des feuilles de style en cascade. Tant que vous connaissez les règles, il est beaucoup plus facile de styliser un 1000 paragraphes sur une page avec cette cascade que de faire manuellement chacun. Comment pouvons-nous contenir cette cascade ? Il y a quelques façons que nous examinerons pendant la durée de ce cours, mais la plus simple est avec quelque chose qu'on appelle la spécificité. plus d'être un grand twister de langue pour dire cinq fois vite, spécificité est l'une des plus grandes méthodes d'écriture CSS pour se comporter exactement comme vous voulez qu'il fonctionne. Tu te rappelles comment on a parlé de nidification il y a quelques minutes ? CSS est très conscient de la façon dont votre contenu est imbriqué, et c'est ainsi que nous pouvons utiliser la spécificité pour sélectionner uniquement les éléments imbriqués que nous voulons. Voyez comment nos balises h1 et paragraphe sont imbriquées à l'intérieur de notre balise d'en-tête ? Voici comment nous reflétons cela dans notre CSS. Utilisez un espace entre les éléments pour cibler tout h1 situé à l' intérieur d'un élément d'en-tête et tout paragraphe situé à l'intérieur d'un élément d'en-tête. Nous n'avons qu'un seul élément d'en-tête dans notre contenu. Ce CSS cible exactement ce que nous voulons rapidement et efficacement. 8. Deep plonger sur la spécification: Avant de passer à autre chose, parlons un peu de spécificité. Mains hors du clavier à nouveau, pas besoin d'ajouter un des CSS que je vous montre ici. Ce sera juste un code factice pour expliquer de quoi je parle. Nous reviendrons à écrire du vrai CSS à partir de la section suivante. Nous avons vu deux exemples de la façon d'écrire la spécificité, les deux limitant nos styles à n'importe quel H1 ou n'importe quel paragraphe trouvé à l'intérieur d'un élément d'en-tête. Rappelez-vous, si nous avions 10 en-têtes différents sur cette page, ils suivraient tous ces nouvelles règles, mais quels autres outils sont disponibles dans la spécificité ? Tout d'abord, le niveau d'imbrication que vous commencez est arbitraire. Bien que nous ayons l'en-tête H1 ici, il pourrait également être écrit en HTML, body, header, H1. Tout dans cette page de contenu se trouve dans les balises HTML et body, mais nous n'avons pas besoin de le faire. C' est en grande partie le même effet pour notre CSS actuel. Il est important de savoir cependant, que plus votre CSS est spécifique, plus il est important. Par exemple, je peux définir la taille de police de notre H1 ci-dessus, puis la remplacer complètement ici avec CSS plus spécifique et maintenant, peu importe comment j'ai changé la règle moins spécifique, cela n'a pas d'importance. Il n'y a pas beaucoup de situations où une spécificité comme celle-ci devrait être votre outil de référence pour résoudre les conflits de style, mais cela peut être un excellent endroit pour commencer à chercher des bogues imprévus. Ensuite, regardons comment les classes et les ID s'intègrent dans cette image. Je les ai introduits dans l'ordre de l'élément, puis de la classe, puis de l'ID, pour une raison. Si vous écrivez un style pour un élément de paragraphe, alors un style différent pour notre classe sur cet élément de paragraphe, la classe gagne en importance. En outre, tout style attaché à un ID gagne à la fois sur l'élément et la classe. Voyez ici, vous pouvez utiliser une combinaison d'éléments, classes et d'ID lorsque vous créez un ordre de spécificité unique, comme nous le voyons ici. Nous n'allons pas ouvrir ces vers aujourd'hui cependant, il y a plusieurs méthodologies pour ce à quoi ressemble l'écriture de bon CSS, mais aujourd'hui, nous gardons simplement cela simple. Si vous voulez jouer avec une spécificité compliquée dans le cadre de vos personnalisations, n'oubliez pas ceci, les éléments individuels sont moins importants et les classes moins importantes que les identifiants. Plus votre CSS permet quelque chose comme ça, plus il est important. Ajouter plus de spécificité à un style si quelque chose est déroutant ou conflictuel, est l'option nucléaire, ne devrait pas en abuser. Enfin, une note sur quelque chose qui ressemble à une spécificité, mais ne l'est pas. L' utilisation d'une virgule comme celle-ci ne vise pas un H3 à l'intérieur d'un H2 à l'intérieur d'un H1. virgules en font une liste, disant à CSS que toutes les règles écrites devraient s'appliquer à tout ce qui se trouve dans cette liste. C' est un moyen rapide au lieu d'écrire H1, H2, H3, il vous fait gagner du temps et de l'espace et vous pouvez appliquer un code uniforme de cette façon. Maintenant, nous sommes à peine rayer la surface de toutes les nuances de spécificité, alors assurez-vous de poser des questions et de regarder à travers les matériaux supplémentaires fournis avec le cours pour obtenir une meilleure compréhension de ce sujet très important à l'avenir. 9. Travailler avec des listes et la navigation: Armés d'une nouvelle compréhension de la spécificité, nous allons avancer en stylisant notre navigation de page. Les listes sont très commun et très puissant moyen de structurer la navigation pour les pages Web et les ressources. Cela dit, ils viennent avec encore plus de styles de navigateur par défaut que la plupart des éléments. Nous devons nous assurer d'annuler cela à nos propres fins. Comme avant, nous allons commencer avec un plus grand élément contenant et travailler notre chemin vers le bas dans la spécificité imbriquée. Nous sommes sur le point de parler de ce que ce style de bloc d'affichage signifie réellement dans la section suivante, mais cela aide à préparer le terrain pour nos listes en ce moment. Accrochez-vous un peu plus longtemps sur celui-là. On y arrivera, je te le promets. Nous voulons que cette navigation soit large mais pas tout à fait toucher les bords du navigateur comme il l'est maintenant. Nous allons définir la largeur à 98 pour cent , puis utiliser le support des marges au centre comme ceci. Plus précisément, nous venons de dire au navigateur que notre élément nav devrait avoir une marge zéro en haut, une marge automatique des deux côtés, et 40 pixels de marge en bas. Enfin, juste au cas où, nous avons besoin de dire explicitement que nous ne voulons pas de rembourrage. Les styles de base pour la liste non ordonnée elle-même sont assez simples. Le dernier style que nous venons d'écrire pour cet élément dit que nous ne voulons pas que des puces, cercles, ou d'autres icônes de style liste soient appliquées à nos éléments de liste. Nous nous occuperons de cette disposition nous-mêmes. Merci beaucoup. Enfin, nous allons ajouter un certain nombre de styles aux liens eux-mêmes dans la liste. C' est là que la navigation commencera à passer d'une liste à une mise en page appropriée du site Web. 10. Mise en page et modifiez les formats d'affichage: Au fur et à mesure que nous sortons du domaine du texte brut, des puces et d'autres détails typographiques, nous devons examiner un autre aspect du CSS, de la mise en page du contenu et des formats d'affichage. Il existe quelques types principaux de valeurs d'affichage que nous utilisons régulièrement. Si nous regardons en arrière notre CSS déjà écrit, nous avons même les deux premiers. Dans notre menu de navigation, nous définissons les liens pour afficher la valeur appelée bloc. Sans aucun autre style explicite, cela signifie que ces éléments commencent naturellement sur les nouvelles lignes écrites et prennent autant de largeur que possible sur cette ligne. Nous allons commencer à restreindre cela bientôt avec plus de styles, mais un élément avec son ensemble d'affichage de bloc est très commun pour de nombreuses mises en page modernes. Dans la classe de code, nous utilisons pour afficher la valeur appelée inline-block. Cet affichage est similaire au bloc et comment nous pouvons y ajouter des marges et un motif avec une couleur d'arrière-plan. Il diffère cependant, en ne démarrant pas naturellement les éléments sur une toute nouvelle ligne à la largeur maximale. Il est idéal pour ajouter des styles et des mises en page personnalisées à travers le contenu sans casser la ligne de texte ou les fonctionnalités de mise en page complexes, exactement là où nous l'avons utilisé lorsque nous l'avons fait pour nos extraits de code. Il existe de nombreuses valeurs d'affichage supplémentaires que vous pouvez définir manuellement, y compris la table, l'élément de liste et plus encore. Beaucoup d'entre eux sont la valeur par défaut avec leur élément respectif, donc vous n'avez pas besoin de vous soucier d'utiliser le manuel très souvent. Il peut être bon d'être familier avec eux, mais juste au cas où. Dans la leçon suivante, nous allons examiner deux des dernières options d'affichage et comment leur puissant changement du jeu en ce qui concerne la mise en page CSS. 11. Flottants et Grid!) !): Pour comprendre les nouveaux outils puissants dont nous disposons en CSS, il est important de savoir ce qui a été utilisé jusqu'à présent. Dans les âges sombres de CSS, absolument tout était dans les tables. Imaginez visiter votre site Web moderne préféré et essayer de le reconstruire dans une feuille de calcul Excel. Ce n'est pas une pensée heureuse. Eh bien, les tables ont toujours leur place pour les données tabulaires, les informations. Ils ne doivent pas être utilisés pour structurer la mise en page globale d'une page. Pour mettre ce temps terrible derrière nous, nous avons commencé à utiliser quelque chose appelé flotteurs. L' utilisation prévue pour une valeur flottante dans CSS était de faire une mise en page simple, comme avoir un grand paragraphe enveloppé sur le côté d'une image liée. Pense comme un manuel, pour le meilleur ou pour le pire, mais ils sont capables de faire bien plus que ça. Voyons ce qui se passe lorsque nous ajoutons float à gauche à nos liens de navigation. Pour une seule ligne de CSS, ce n'est pas mal. Ils ressemblent beaucoup plus à des boutons et ils s'intègrent dans une rangée. Le principal problème avec les flotteurs est que parce qu'ils n'étaient pas destinés à la planification de la mise en page structurelle, il y a beaucoup de prises et de gotchas que vous devez couvrir chaque fois que vous les utilisez. Regardez ce qui se passe lorsque nous redimensionnons notre fenêtre un peu. Plutôt que de couvrir la façon de gérer tous les petits détails pour utiliser des flotteurs de façon semi-officielle, nous allons passer à autre chose et regarder l'un des outils les plus récents à notre disposition pour l'instant. Si vous continuez à apprendre en CSS cependant, il pourrait un jour devoir travailler sur le maintien du code de quelqu'un d'autre. sera important d'apprendre les tenants et les aboutissants des flotteurs. Ils sont encore largement utilisés dans les grands projets sur Internet. Prendre le temps de vous familiariser avec le matériel de cours supplémentaire vous servira bien. Parlons maintenant de flexbox. Cette valeur d'affichage a été l'une des plus puissantes à être ajoutée à CSS depuis un certain temps, et est la première étape dans une nouvelle ère de méthodes de conception et de mise en page. Voici comment ça marche. Vous déclarez display flex sur le parent des éléments imbriqués que vous souhaitez mettre en page, comme ceci. On dirait nos chars. Mais notre contenu maintenu à espacement beaucoup mieux, et regarder ce qui se passe quand nous rétrécions la fenêtre maintenant ? [ inaudible]. C' est beaucoup mieux. Plus important encore, flex nous donne accès à des outils de mise en page très importants. Pour notre navigation, nous allons définir l'alignement de l'élément, qui est centré de haut en bas, et la justification de l'élément, qui est centré de gauche à droite. Nous utilisons l'espace entre pour notre justification, ce qui est une valeur trompeuse puissante. Il prend le premier et le dernier lien et les met au début et à la fin respectivement de l'espace. Il calcule ensuite l'espace vide restant et le place uniformément entre tous les éléments restants entre les deux. Tenter de recréer que via des flotteurs serait compliqué et probablement assez fragile code à maintenir. Il y a beaucoup plus de valeurs pour la flexbox que je vous encourage à rechercher bientôt dans les matériaux supplémentaires des cours. Nous couvrirons quelques utilisations plus avancées à la fin de la classe. Mais une compréhension fondamentale est inestimable pour un concepteur et développeur moderne. 12. La puissance du CSS: Nous avons couvert beaucoup aujourd'hui. Un bon travail qui traîne là-dedans jusqu'à maintenant. En utilisant ce que nous avons appris, il reste étonnamment peu de travail à faire pour mettre en place la grande majorité du contenu toujours sur la page. Nous utiliserons des éléments dans les classes pour appliquer rapidement des styles de grande portée sur notre page. Si nous regardons index.html, la plupart de notre contenu est enveloppé dans des sections et des articles, alors commençons par les coiffer. La plupart des CSS devraient avoir l'air assez familier. Nous définissons une valeur d'affichage de bloc, une largeur de 90 % pour nous assurer que nos sections ne sont pas complètement sur la page, et nous avons mis en place une marge incluant auto des deux côtés, donc elles flottent au centre de la page au lieu de être à gauche ou à droite. Tous les articles ont l'air assez bon, nous allons de l'avant et de gérer le contenu en eux. Et si nous devions mettre à part ces premiers paragraphes dans chaque article afin qu'il semble vraiment unique par rapport au reste de notre contenu ? Voilà, une première section pour chaque article de contenu. Maintenant, nous pouvons rapidement trier les différents en-têtes aussi. Plutôt que de les laisser en texte brut cependant, nous allons avoir un peu de plaisir et vraiment les styliser. Nous allons opter pour une sorte d'onglet de dossier donc il est évident d'un coup d'œil quels titres sont connectés à quelles sections de contenu. On y va, ça a l'air mieux. Donnons un peu d'attention aux sous-en-têtes h3. Nous avons une dernière chose qui doit être arrêtée. Ce second bit de texte en haut de la page, si nous vérifions index.html, il ne fait pas partie d'une balise de paragraphe, son sous span. Pas étonnant que nos styles n'aient pas été appliqués. J' ai mis un ID là cependant, alors retouchons-le en utilisant cela. On y va, ça a l'air mieux. Bien que je ne les utiliserai pas pour cette classe, assurez-vous de noter que chaque section de contenu a un ID unique qui lui est associé. Utilisez cela comme un outil de spécificité pendant que vous travaillez dans vos propres personnalisations, et vous pouvez rendre chaque section complètement différente. 13. Pseudo-Classes: Nous approchons de la fin. Il y a un ensemble d'outils de plus puissant. Je veux montrer une action cependant, Pseudo Classes. Il y a assez de pseudo classes et de trucs incroyables pour remplir deux ou trois cours entiers. Mais couvrons les bases. Une pseudo-classe est utilisée pour définir l'état d'un élément. Il y a deux pseudo-classes que nous examinerons aujourd'hui pour aider à clarifier cette définition. Le premier est en vol stationnaire. Nous allons utiliser la pseudo-classe de survol pour indiquer à nos liens de navigation de changer leurs styles lorsqu'ils détectent la souris de l'utilisateur qui les survole. Cela signifie que l'état par défaut des liens est déplané. Lorsque vous changez alors en survol, nous voulons apporter quelques modifications aux styles. Le CSS lui-même est assez simple. Tout ce que nous faisons est d'échanger la couleur de fond, ordre et la couleur de la police et nous nous retrouvons avec un bouton assez cool qui interagit directement avec l'utilisateur. La pseudo classe est juste, deux-points, puis le type de pseudo-classe, Dans ce cas, survolez. Maintenant, la deuxième pseudo classe est un peu moins excitante, mais c'est très important pour la présentation. Cette pseudo-classe est appelée visitée. Un navigateur Web conserve la trace des liens que vous avez visités auparavant. Par défaut, les liens non visités sont bleu vif tandis que les liens visités sont violets. Pour s'assurer que nos boutons bleus n'ont pas soudainement une nuance de texte violet croisant les yeux, lorsque notre utilisateur commence à cliquer, nous utilisons visité, comme ceci pour s'assurer que le texte reste blanc. On y va. Maintenant, lorsque vous renforcez une règle comme celle-ci avec une pseudo-classe, où les liens sont déjà blancs par défaut, il y a un moyen encore plus rapide de le faire. Au lieu d'écrire la règle fraîche, ajoutez-la simplement avec une virgule. Comme ça. Assurez-vous de jeter un oeil supplémentaire sur les ressources de classe et de voir quelles autres pseudo-classes vous pouvez suivre pour vraiment amener votre projet au niveau supérieur de personnalisation. 14. Fancy Flexbox: Pour vous aider à penser à quelques ajouts créatifs à votre vision de ce projet, j'ai préparé une démo, quelques personnalisations amusantes par moi-même. Pour garder les choses simples, vous devez ajouter votre CSS personnalisé au bas du fichier styles.css dans lequel nous avons travaillé une fois que vous êtes prêt à commencer le codage. Pour votre référence cependant, j'ai ajouté tous mes nouveaux styles à custom.css. Ne vous inquiétez pas trop de la mécanique de l'ajout d'une autre feuille CSS. Sachez juste que tout ce que j'ai écrit dans custom.css est fait pour dépasser les styles que nous avons construits ensemble dans styles.css. Cela vous rend facile de vérifier, et de voir quelle est la différence qui a réellement transformé ma version personnalisée. Jetez un oeil à travers le contenu, et voyez ce que j'ai changé, la disposition de l'en-tête, les onglets de navigation animés, et bien plus encore. Voyez si vous pouvez choisir au moins un changement, puis traquer comment je l'ai fait dans custom.css. Une chose importante que je veux vous montrer est comment j'ai complètement réorganisé le contenu sur la page. La première chose que nous voyons dans ma version personnalisée est des ressources supplémentaires, qui est le tout dernier contenu d'un projet partagé, alors comment ferais-je cela sans réellement changer le HTML ? Avec la puissance de la flexbox. abord, j'ai réglé le corps entier pour afficher flex, ce qui me permet de contrôler grandement la façon dont toutes les sections individuelles sont disposées. Également important à noter, j'ai ajouté une propriété d'enveloppement flexible avec enveloppement de valeur. Par défaut, flexbox voudrait tout garder sur une ligne, et faire en sorte que cette page ait une énorme barre de défilement horizontale. Flex wrap juste collines notre contenu que nous ne voulions en effet envelopper, et rester sur la page. Ensuite, j'ai utilisé des ID uniques sur chaque section pour lui donner une couleur d'arrière-plan et une valeur de commande. Tous les éléments imbriqués dans une flexbox, comme ces sections dans le corps de la flexbox, peuvent être réorganisés à l'aide de cette valeur d'ordre. Comme vous pouvez le voir, j'ai mélangé et fait correspondre le contenu dans un nouvel ordre entièrement via CSS. J' encourage vivement à regarder plus loin dans flexbox avant de commencer votre propre travail personnalisé. Si vous voulez vraiment faire un splash, les devoirs de crédit supplémentaires sont de vérifier quelque chose appelé grille CSS. Ignorer tous les articles discutant de flex par rapport à la grille. Flex gère le contenu qui va dans une rangée. Bien que cette rangée puisse s'enrouler comme nous le faisons ici. grille ouvre la porte à des mises en page complexes avec plusieurs lignes et positions, mais elle est généralement exagérée pour un contenu simple comme nous le faisons. Ne soyez pas aspirés dans le piège de penser que c'est ou. Lorsque comprendre comment utiliser chacun ensemble est la meilleure voie vers l'avant. La classe de grille CSS par Rachel Andrews ici sur le partage de compétences est un excellent endroit pour commencer. 15. Votre tour et votre conclusion: Il y a tellement d'autres choses à apprendre sur tous les outils que CSS a à offrir, mais vous êtes maintenant équipé d'une compréhension fondamentale des règles. Il est temps de parcourir le matériel du cours, de trouver des guides de référence, idées de conception et plus encore, pour aider à renforcer vos propres conceptions créatives. Si vous avez vraiment aimé travailler sur CSS et que vous êtes intéressé à plonger dans des applications et des idées plus réelles, il y a beaucoup d'endroits pour commencer. Deux principes fondamentaux importants que je peux suggérer de faire de la recherche sont l'accessibilité et la conception réactive. L' accessibilité consiste à s'assurer qu'aucun de vos designs amusants et attrayants ne rend accidentellement plus difficile pour les utilisateurs de profiter réellement de votre contenu, tandis que la conception réactive ou la conception mobile réactive, c'est comment planifier et mettre en œuvre des conceptions pour bien paraître partout, depuis un téléphone jusqu'à un moniteur géant ou un téléviseur. Rappelez-vous, si votre projet est tellement lié en nœuds qu'il semble irrécupérable, vous pouvez toujours revenir aux liens fournis et commencer une nouvelle copie du projet. Il y a des liens pour les deux comme un tout premier lieu de départ sans CSS, ainsi que la version que nous avons tous écrit ensemble. N' ayez pas peur de plonger en profondeur et d'apprendre en brisant les choses. Être capable de voir votre code en action et de partager le projet, signifie que vous pouvez demander de l'aide à moi ou à l'un des autres étudiants. Une fois que vous êtes satisfait de l'aspect de votre projet, assurez-vous de le montrer. J' ai hâte de voir ce que chacun d'entre vous peut faire avec les leçons que nous avons abordées aujourd'hui.