Introduction au CSS : ajouter des styles fondamentaux à un site Web de style portfolio

1. Bande-annonce: feuilles de style en cascade nous permettent d'ajouter une présentation à notre page HTML uniquement fade. Dans cette classe, nous allons prendre notre site de portfolio de quatre pages uniquement HTML et le lier à un nouveau document CSS. Nous allons appliquer des styles de base à nos éléments et voir comment ceux-ci prennent effet sur notre document HTML. Nous commencerons dès le début de CSS, et couvrirons tous les éléments fondamentaux nécessaires pour obtenir la couche de présentation sur nos projets. Si vous n'avez jamais entendu parler de feuilles de style en cascade ou recherche d'un actualisation sur CSS, cette classe est faite pour vous. Nous allons couvrir les bases mêmes de la façon d'écrire des CSS connectés à nos pages et aussi parler de dépannage. Vous devriez connaître les bases du HTML avant de prendre ma classe. Si vous avez pris mon introduction à la classe HTML, c'est le suivi parfait. Je vais fournir le code HTML avec lequel je vais travailler pour que vous puissiez télécharger et suivre. Nos styles CSS peuvent être appliqués à n'importe quel HTML que nous voulons même s'il s'agit d'un site sur les chiens parce qu'ils sont mignons aussi. 2. Bienvenue !: Oh. Salut, nouveaux amis. Ravi de vous avoir ici. Je suis Jenn, et aujourd'hui, nous allons parler de CSS, autrement connu sous le nom de feuilles de style en cascade. CSS est le bon suivi pour si vous avez déjà pris ma classe HTML ou une autre classe HTML quelque part, ou si vous avez besoin d'un rafraîchissement sur CSS, comment cela fonctionne et ce qu'il peut faire. CSS est aussi impressionnant qu'il fournit des styles à toutes nos pages Web. Donc, les choses ont l'air un peu plus jolies, et hé, on aime tous ça. Avant de commencer, j'ai pensé te parler un peu de moi, et je pensais le faire en jouant deux vérités et un mensonge. Alors je vais te dire trois choses. Une chose sera un mensonge. Numéro un, le premier site web que j'ai créé remonte à 1999. Numéro deux, j'ai vu Bon Jovi deux fois en concert. Numéro trois, je suis allé une fois sur Price is Right et a gagné 700$ en jouant Plinko. D' accord. Donc, je n'ai pas gagné 700$ en jouant à Plinko. Pas encore de toute façon. Je digresse. Allons vers le bas avec le CSS. C' est la seule fois que je vais rimer toute cette classe. Je promets en quelque sorte. CSS signifie Cascading Style Sheets, et dans cette classe, nous allons construire un projet basé sur une base HTML pour notre portfolio. Nous avons un site Web de portefeuille de quatre pages, avec lequel nous allons travailler, et en plus de ce HTML simple, nous allons ajouter du CSS pour ajouter des textiles, des couleurs, et rendre les choses un peu plus agréables à nos yeux. Donc, nous allons prendre le HTML pour le portfolio de Jon Arbuckle ici, qui avec HTML ne ressemble qu'un peu à ceci, et nous allons prendre cela, et ajouter des styles en utilisant CSS. Donc, nous allons prendre notre HTML de ceci à cela jumelé avec CSS. Nous apprendrons un peu comment les couleurs de texte, les couleurs arrière-plan, les familles de polices et les tailles de polices, ainsi que la décoration de texte, peuvent ajuster nos pages en conséquence pour ajouter plus d'intérêt visuel à notre HTML ordinaire. Donc, une fois que vous êtes prêt à commencer, revenez pour la prochaine leçon, et nous parlerons des outils dont nous avons besoin pour commencer à construire notre site Web avec CSS. 3. Rassembler nos outils: Nous allons commencer par télécharger quelques outils dont nous aurons besoin pour écrire notre CSS. Tout comme un HTML, nous pouvons utiliser n'importe quel éditeur de texte pour écrire CSS. Les avantages de l'utilisation d'un éditeur de texte pour le code sont des choses comme la mise en évidence de la syntaxe, raccourcis clavier et l'aide au formatage, pour nous aider à écrire du code plus efficace. Si vous avez pris la classe Intro to HTML avec moi, alors vous serez familier avec Sublime Text 2. Nous allons utiliser Sublime Text 2 pour à nouveau. La chose qui est génial avec Sublime Text 2, c' est que vous pouvez l'utiliser pour Windows et Mac, et ils ont également un essai gratuit illimité, ce qui vous incitera à acheter le logiciel qui, si vous l'aimez, vous devriez, mais pendant que vous l'essayez, vous pouvez l'utiliser gratuitement. Vous trouverez ceci sur sublimetext.com/2 et à partir de là vous pouvez télécharger la dernière version basée sur le système d'exploitation sur lequel vous êtes. Alors, pourquoi ne pas aller de l'avant et télécharger cela si vous ne l'avez pas déjà fait, puis installez-le et revenez. Après avoir installé Sublime Text, la prochaine chose dont nous aurons besoin est un navigateur moderne. Je vais utiliser la dernière version de Chrome pour cela. Vous pouvez utiliser n'importe quel navigateur que vous souhaitez, je recommande d'utiliser le dernier car c'est généralement le plus facile à travailler avec et ils ont beaucoup plus d'outils pour les développeurs dans les versions ultérieures. Je vais utiliser Chrome spécifiquement parce que j'aime Chrome Web Inspector. Le Chrome Web Inspector, nous allons voir un peu plus tard, mais essentiellement il nous permet d'inspecter tous les éléments sur la page et d'être en mesure de voir le HTML et CSS pour eux. Donc, c'est vraiment soigné. Il est fortement recommandé d'utiliser Chrome pour cela. Si vous utilisez Firefox, Firefox a quelque chose de similaire en ce que vous pouvez inspecter les éléments sur la page. Ce sera très proche de ce que nous faisons dans Chrome. Internet Explorer dispose également d'outils de développement tout comme Safari. Donc, encore une fois, vous avez d'autres choix, mais j'utiliserai Chrome pour cette classe. Si vous voulez suivre ça, ce sera là. La dernière chose que nous allons avoir besoin est HTML pour cette classe, que vous serez en mesure de trouver à partir étapes du projet et de télécharger ce fichier jon-arbuckle-site.zip. Ici, vous allez décompresser votre fichier, puis stocker un endroit où vous pouvez le trouver facilement. Parfois, c'est sur votre bureau, parfois dossier de documents, parfois un dossier de sites, tout ce qui fonctionne pour vous, où vous ne l' oublierez pas et peut facilement être trouvé pour l'instant. Donc, obtenez toute cette configuration, puis continuons et commençons à regarder la vue d'ensemble des fichiers avec lesquels nous allons travailler. 4. Aperçu de nos fichiers de cours HTML: Dans l'introduction au cours HTML, nous avons créé un site pour le portfolio de Jon Arbuckle, notre client fictif. Nous allons utiliser le HTML pour cette classe comme base pour apprendre CSS. Si vous avez fait votre propre portfolio à partir de cette classe, ou qu'il y a un autre HTML avec lequel vous voulez travailler, c'est totalement bien. Si vous voulez suivre exactement ce que je fais ici, alors allez-y et prenez ce dossier et nous allons travailler avec ça. Donc, après avoir décompressé le fichier et que vous savez où est votre dossier, allons de l'avant et ouvrez Sublime Text. Lorsque vous ouvrez Sublime Text pour la première fois, vous ne verrez pas grand-chose. Le texte Sublime n'ouvrira aucun fichier dans lequel vous travailliez pour la dernière fois, vous devrez dire à Sublime Text que vous souhaitez qu'il ouvre le dossier ou le fichier sur lequel nous aimerions travailler. L' autre chose que nous allons vouloir faire est le personnaliser un peu selon nos préférences. Donc, la première chose est que je vais cliquer, Vue, Barre latérale, Afficher la Barre latérale, et la section Barre latérale s'ouvrira à nouveau. Encore une fois, c'est Vue, Barre latérale, Afficher la Barre latérale. Maintenant, nous allons pouvoir voir les fichiers avec lesquels nous travaillons. De là, je vais aller au fichier ouvert et parcourir le dossier dans ce cas, le dossier Jon Arbuckle avec lequel je voudrais travailler. Donc, Fichier, Ouvrir ou Contrôle ou Commande O, si vous souhaitez utiliser le raccourci clavier. Ensuite, je verrai le dossier du site Jon Arbuckle. Je pourrais ouvrir un des fichiers, mais j'aimerais voir tout ce que nous travaillons. Donc, je vais le garder en surbrillance sur le site Jon Arbuckle et puis je vais cliquer sur Ouvrir. Une fois que je fais cela, vous verrez le site Jon Arbuckle avec tous les fichiers et dossiers que j'ai dans ce dossier. Une autre chose que vous remarquerez, c'est un peu bizarre à propos de Sublime Text, c'est que cela s'ouvre en fait devant cette fenêtre en flocon que nous regardions juste. Chaque fois que vous venez d'ouvrir un fichier, il ouvre une fenêtre complètement nouvelle ou navigateur Chrome, sorte que vous pouvez tout simplement aller de l'avant et fermer l'ancien sur parce que nous n'avons plus besoin. Donc, une fois de plus pour vous guider, j'ouvre Sublime Text, je vais dans Fichier, Ouvrir, puis je navigue vers le dossier que je veux ouvrir et cliquez sur Ouvrir. Une autre option que vous avez pour afficher les fichiers, est que si vous avez votre dossier ici dans la barre latérale ici, vous allez juste de l'avant et faites glisser cela et les Fichiers s'ouvriront juste là sans ouvrir une autre fenêtre. Donc, maintenant que nous avons cette ouverture, jetons un coup d'oeil à certains des fichiers avec lesquels nous devons travailler pour le portefeuille Jon Arbuckle. Je vais ouvrir ceci dans le navigateur pour voir visuellement ce que nous avons. Donc, je vais ouvrir ce dossier, et je vais cliquer sur l'index HTML, qui se souvient est notre page d'accueil. Voir ici vous pouvez voir est la page d'accueil du portefeuille Jon Arbuckle. Nous avons un logo, qui renvoie à la page d'accueil ou à la page d'index du site. Nous avons la navigation principale qui relie trois sous-pages qui travaillent sur le sujet et le contact. Nous avons notre rubrique sur Jon Arbuckle, illustrateur indépendant et auteur. Nous avons notre image de héros qui sera remplacée plus tard une fois que nous saurons ce que sera cette image. Nous avons quelques titres, basés sur les trucs que Jon fait pour sa vie et son temps libre comme ses bandes dessinées web, avec la description et un lien pour en voir plus. Sa musique se dirige avec une image, pour son CD Polkaholic et je vais lier pour l'acheter. Nous avons un autre titre sur Jon sur Twitter avec un paragraphe, donc nous pouvons lire sur Jon sur Twitter en suivant son compte Twitter, dont le lien est ici. Nous avons un élément blockquote. Cet élément blockquote est un témoignage d'un client de Jon. Ensuite, nous avons un autre paragraphe avec un appel à l' action pour entrer en contact qui va à la page de contact. Ensuite, nous avons notre photo qui apparaîtra sur chaque page avec le copyright, ainsi que notre entité HTML copyright. Nous sauterons dans certaines de ces sous-pages, nous pouvons voir la page de travail a l'exemple de Jon Web Comics tels que les LASAGNA CHRONICLES et CAT TOWN. Aussi, nous pouvons voir que ce sont les portraits que Jon a offert de faire. Encore une fois, sa musique, Jon aime vraiment promouvoir sa musique. Ensuite, nous avons la page A propos. Sur la page À propos. Nous pouvons en apprendre un peu plus sur Jon aussi. Donc, nous ajoutons une image de Jon, un titre et ensuite nous avons deux paragraphes pour décrire Jon. Nous avons également un autre titre pour décrire la liste des services professionnels qu'il offre ainsi que la liste non ordonnée décrivant les choses que Jon fait. Encore une fois, vous verrez notre contenu de filtre ci-dessous. Enfin, nous avons notre page de contact qui vient d'expliquer que vous pouvez contacter Jon via son email avec un mail à lien, puis aussi un lien vers sa présence sociale sur Twitter, Facebook ou Pinterest sous la rubrique Ailleurs sur le Interwebs. Donc, regardons ce site dans le navigateur. Rappelez-vous que si vous voulez ouvrir l'un de vos fichiers, vous pouvez simplement double-cliquer pour les ouvrir tant qu'ils ont that.html à la fin d'eux, et ils s'ouvriront dans votre navigateur préféré. Revenons à Sublime Text et jetons un oeil au HTML. Donc, pour ouvrir un dossier, oubliez pas que si vous cliquez simplement une fois, il ne s'ouvrira pas, mais si vous double-cliquez, l'onglet apparaît, ce qui indique qu'il est Ouvrir. Vous pouvez voir la petite icône x ici, ce qui signifie qu'il n'y a pas de modifications à enregistrer en ce moment. Vous verrez aussi que ma police est assez petite. Donc, je vais le faire un peu. Je peux le faire avec la commande ou le contrôle plus. Il y a un raccourci pour cela. Vous pouvez également voir que j'ai ce petit minimap ici, et ce que cela fait, cela nous montre juste une petite carte de tout notre code. Je trouve que ce genre d'entrave mon chemin. Donc, je vais faire voir, cacher minimap, pour se débarrasser de cela, encore une fois voir masquer minimap et vous verrez que disparaît que je suis un fan de faire disparaître. Donc, en regardant notre page d'accueil, nous avons encore une fois notre balise doctype ou HTML. Dans notre tête, nous définissons l'attribut meta et charset, nous avons le titre de notre page qui est le portefeuille de Jon Arbuckle, puis nous descendons vers le corps, où nous avons nos informations d'en-tête. Nous marquons cela avec les commentaires HTML, notre lien d'ancrage vers la page d'accueil parce que nous voulons que cette image puisse relier à la maison. Les listes non ordonnées pour notre navigation, puis nous avons notre contenu de page. Dans notre contenu de page, encore une fois, vous pouvez voir que marqué par le commentaire juste pour garder notre code agréable et organisé. Nous avons notre titre de niveau 1 qui explique ce qu'est le site, l'image du héros, le titre Web Comics, c'est un h deux sous le h. Notre paragraphe relie, toujours en suivant la même formule, un autre titre, une autre image. Un niveau de titre trois parce qu'il se niche sous le niveau de titre deux de la musique. On a vu le Jon sur Twitter. Quand on l'a regardé dans le navigateur, on peut le voir ici aussi. Nous avons notre section blockquote, et à l'intérieur de notre blockquote, nous avons à nouveau nos balises de paragraphe avec nos entités pour nous assurer que nous obtenons les guillemets bouclés pour les guillemets corrects dans une entité de tiret pour obtenir cela. Ensuite, nous avons notre paragraphe avec un lien vers la page de contact et notre pied de page. C' est notre page d'accueil. Jetez un oeil à la page À propos. Encore une fois, l'en-tête devrait être le même parce que nous l'avons copié d'une page à l'autre, et juste le contenu de la page sera un peu différent avec une image h1. Quelques paragraphes de la liste non ordonnée ici. Ensuite, jetons un coup d'oeil à la page de contact. Les pages Contact sont assez courtes. Encore une fois, la seule chose différente sur toutes nos pages est la section du contenu de la page, et celle-ci a de nouveau un h1, que nous devrions avoir sur chaque page et c'est le titre le plus important. Notre paragraphe, puis notre ailleurs sur le web est avec notre liste non ordonnée. La dernière est la page de travail. La page de travail à nouveau, le contenu de la page est différent. Nous avons nos titres, nous avons des sous-titres pour le Web Comics, les titres dans celui pour les différents types de bandes dessinées. Sous la bande dessinée est le lien d'image, et sous la musique est le même genre de matériel ici. Alors, jetez un oeil à travers ça. Si vous n'avez pas fait ce portefeuille de Jon Arbuckle dans l'autre site, pas de problème. Prenez juste quelques minutes pour vous familiariser avec le code si vous souhaitez l'utiliser. Sinon, n'hésitez pas à utiliser n'importe quelle base HTML que vous souhaitez utiliser pour le site. Nous allons parler de CSS et qui peut être appliqué à n'importe quel HTML. Donc, pas de soucis du tout si vous ne voulez pas aider Jon Arbuckle. Je suis sûr qu'il ne le tiendra pas contre vous et commençons dans la section suivante en regardant exactement ce qui est CSS, et comment cela s'appliquera à notre HTML. 5. Qu'est-ce que le CSS ?: Alors, qu'est-ce que CSS ? Eh bien, CSS signifie feuilles de style en cascade et feuilles style en cascade sont ce que nous utilisons pour ajouter des styles à nos éléments HTML. Donc, des choses comme les mises en page, les couleurs, les polices , tout est contrôlé en utilisant CSS ou Cascading Stylesheets. C' est boucheux et difficile à dire cinq fois vite alors allons juste pour CSS à partir d'ici dehors. CSS est ce qu'on appelle la couche de présentation. Quand il s'agit de l'interface d'un site Web qui est ce que nous appelons fondamentalement comment vous basculez un design en code avant de frapper la technologie backend, donc des choses comme les bases de données, le front-end gère HTML, CSS et JavaScript autrement connu sous le nom de couches de contenu, de présentation et de comportement. CSS est donc la couche de présentation car elle gère toute la présentation. CSS a été créé afin que nous puissions séparer le contenu de la mise en forme, donc si l'un d'entre vous a fait un tas de conception Web dans les années 90 ou début des années 2000, vous pourriez vous souvenir de choses comme balises de police et nous avons fait beaucoup de choses dans HTML pour style pour elle. Des choses comme l'audace, l'utilisation de balises en gras juste pour obtenir un look audacieux, mais nous voulons le faire avec CSS maintenant parce que l'utilisation de CSS pour gérer le style signifie que notre HTML est plus portable. Cela signifie que nous pouvons le réutiliser pour différentes choses. Cela aide à l'accessibilité et nous pouvons formater plus d'un document super facilement et être en mesure de mettre à jour les styles vraiment facilement lorsque nous gardons les choses séparées. Le site csszengarden.com est un excellent exemple de tout ce que CSS peut faire. L' idée derrière le site quand il a été lancé est de prendre le même HTML et de voir comment en appliquant une feuille de style différente, nous pouvons obtenir mises en page très différentes et regarde l'esthétique au même code. Jetons donc un coup d'oeil à certains des designs qu'ils ont ici et voyons comment même s'ils utilisent tous le même HTML, ils ont l'air tout à fait différents. Si nous regardons le fichier HTML en regardant la source de la page, nous pouvons voir que ce même HTML est utilisé pour créer cette page d'accueil et c'est la même chose pour créer cette page, même HTML mais CSS différent, pour créer ceci ou ceci et ceci. Vous pouvez voir que même si le HTML est le même, il semble complètement différent. Nous pouvons donner à nos sites Web l'aspect que nous voulons qu'ils regardent simplement en changeant le CSS et les styles que nous appliquons à la page. Donc, ne vous inquiétez pas encore si vous ne voulez pas utiliser le même balisage, n'importe quel balisage fera l'affaire, nous pouvons utiliser le CSS en plus de cela, mais nous verrons comment appliquer des styles vous aurez tout le contrôle sur l'apparence de votre page. Ce qui est vraiment soigné, c'est si nous utilisons nos Chrome DevTools, encore une fois, nous pouvons voir ce qui se passe ici. Donc, si j'inspecte l'élément en cliquant avec le bouton droit ou en cliquant sur le contrôle, vous vous souvenez peut-être dans la classe HTML que nous avons utilisé ceci pour regarder nos éléments HTML mais aussi sur le côté droit, vous verrez ici est le CSS qui est utilisé dans afin de créer les styles pour le site. Donc, si je retourne en haut et que je jette un oeil à cet en-tête CSS ZEN GARMENTS, je peux voir que c'est un H1 et ensuite ici vous verrez ce sont tous les styles CSS appliqués pour que cela se produise. Ne vous inquiétez pas si tout cela n'a pas de sens en ce moment, ce sera le temps qu'on aura fini. Mais c'est ainsi que vous utilisez votre inspecteur et il le fera, donc vous verrez ici par exemple la couleur, et c'est la couleur bleue. Mais si nous regardons l'un des autres modèles et inspectons leur H1, nous verrons que le H1 est toujours le même que CSS Zen Garden. Remontons ça pour que vous puissiez voir ça un peu mieux. Vous pouvez voir les styles ici semblent assez différents de ce que nous avons vu là-bas, y compris la couleur qui est une sorte de cette couleur noire plus foncée. Donc, cela commence à vous donner une idée de la façon dont juste peaufiner les styles CSS nous serons en mesure d'obtenir différents looks. Alors, nous allons dans la façon dont nous écrivons CSS et la syntaxe et la terminologie dans la prochaine vidéo. 6. Syntaxe et terminologie du CSS: CSS est composé de deux parties, le sélecteur et la déclaration. Le sélecteur va nous dire la cible dont nous coiffons. Donc, quelque chose comme un paragraphe ou un titre. Quel que soit l'élément ou l'objet, nous voulons styliser. C' est ce que nous appelons le sélecteur. La déclaration va spécifier la propriété en valeur. Donc, ce que nous allons réellement changer à propos de cet objet. Donc, si nous voulons changer la couleur, ou si nous voulons changer la taille de quelque chose, il y a quelque chose que nous avions spécifié dans notre déclaration. Alors, qu'est-ce que ça veut dire exactement ? Eh bien, disons que nous voulions toutes les balises de paragraphe sur notre page. Donc, tous nos paragraphes qui sont marqués par une balise p en HTML, si nous voulons qu'ils soient tous bleus ? Eh bien, essentiellement les paragraphes deviennent alors notre sélecteur, et la valeur du bleu est ajoutée dans notre déclaration. Nous devons également spécifier la propriété à laquelle le bleu est appliqué. Dans ce cas, nous disons la couleur. Donc, en anglais simple, nous voulons changer la propriété de couleur pour être bleue de tous nos paragraphes. Eh bien, comment on écrit ça ? On peut crier sur l'ordinateur, mais il ne nous écoutera probablement pas. Donc, au lieu de cela, nous allons l'écrire avec CSS. Donc, ce que nous allons devoir faire, c'est que nous allons dire à notre CSS, ce qu'est notre sélecteur, puis nous allons lui dire la propriété que nous changeons, et la valeur à laquelle nous le changeons. Il ressemble exactement à ceci avec le sélecteur, puis la déclaration à l'intérieur est contenue dans les accolades. Nous notons la propriété, puis un deux-points, puis la valeur, et un point-virgule. Tout le formatage CSS ressemble à ceci. Donc, pour sous-dans un exemple du monde réel comme ce dont nous parlions juste pour le sélecteur de paragraphes. Nous disons p parce que c'est l'équivalent HTML d'une balise p. La propriété devient couleur car c'est la propriété CSS que nous changeons. La valeur devient bleue car c'est la valeur que nous voulons attribuer à la propriété. Donc, essentiellement, vous voulez toujours sous-dans cette formule avec ce que vous essayez de changer sur votre HTML avec CSS. Donc, n'importe quel sélecteur peut aller ici vos paragraphes, votre chacun un code bloc. Tout peut sauter ici, et nous le regarderons un peu plus tard. Il est également important de noter que nos déclarations peuvent avoir plus d'une paire de valeur de propriété. Nous ne voulons pas nous limiter à dire un texte qui peut être bleu. Donc, disons aussi que si nous voulions que la couleur de tous nos paragraphes soit bleue et que toute la taille de police soit de 14 pixels, nous pouvons le faire. Tout ce que vous devez faire à nouveau est d'écrire la taille de la police : 14 pixels ; Donc, encore une fois, propriété : valeur ; Le point-virgule indique essentiellement à votre CSS, que vous êtes sur le point de commencer à dire une nouvelle propriété, ou c'est la fin de la propriété. Il n'a pas besoin d'aller sur une nouvelle ligne tout comme les espaces HTML n'ont pas d'importance. Cependant, je trouve plus facile à lire surtout au début. Lorsque vous conservez toutes vos propriétés différentes sur une nouvelle ligne. Mais maintenant que nous savons comment écrire CSS. Comment obtenons-nous que cela s'applique réellement à notre HTML ? Dans la prochaine vidéo, nous allons parler de lier des choses comme nos paragraphes bleus à notre HTML réel pour que cela fonctionne. 7. Comment ajouter du CSS à nos pages: Alors, ajoutons le CSS à nos pages que nous avons déjà créées avec nos projets HTML. Si vous utilisez votre propre projet, allez-y et ouvrez cela dans Sublime Text, si vous utilisez jon-arbuckle porfolio, nous allons vouloir ouvrir cela aussi. Donc, ouvrez Sublime Text si vous ne l'avez pas déjà fait, et le fichier ouvert, et navigue vers ce dossier, dans ce cas, jon-arbuckle-site, et cliquez sur « Ouvrir ». Si vous avez votre barre latérale, vous verrez tous vos dossiers et fichiers sur le côté gauche, comme nous l'aimons. Nous avons trois options quand il s'agit d'ajouter du CSS à nos pages et c'est à travers les styles en ligne, dans la feuille de style interne et dans la feuille de style externe. Alerte spoiler, nous allons vouloir utiliser le dernier. Cependant, je veux vous guider à travers chacun d'eux pour expliquer les avantages et les inconvénients d'entre eux et pourquoi ils sont différents, et pourquoi vous pourriez vouloir utiliser certains d'entre eux et ce qu'il faut faire si vous les voyez. Donc, le premier avec lequel je vais commencer est les styles en ligne. Je vais ouvrir une de nos pages. Dans ce cas, je vais juste commencer par la page à propos. Ouvrez la page à propos du texte Sublime en double-cliquant. Juste un rappel, voici à quoi ressemble notre page sur le sujet actuellement. Donc, tout est stylé essentiellement avec ce qu'on appelle les paramètres par défaut du navigateur. paramètres par défaut du navigateur sont l'apparence de notre page sans CSS. Donc, dans ce cas, il dit que parce que c'est un H1 le navigateur dit, « Eh bien, rendre cela plus grand et plus audacieux que les autres polices sur la page. » Notre paragraphe est un texte qui est assez lisible dans une police Serif. Notre H2 est encore plus audacieux parce que c'est un cap, mais un peu moins grand que notre H1 parce que ce n'est pas aussi important. Notre liste a déjà des balles comme marqueur. Ce sont ce que l'on appelle les styles par défaut du navigateur. Ainsi, chaque fois que nous n'ajoutons pas de style, tout texte ou HTML que nous mettons dans notre page recevra les paramètres par défaut du navigateur. Nous allons remplacer cela avec notre CSS pour dire spécifiquement comment nous voulons que notre page ressemble. Donc, la première façon nous allons le faire avec ces styles en ligne. Je vais faire défiler jusqu'au texte de mon paragraphe, et dans ma balise de paragraphe, je vais ajouter quelque chose, et ce que je vais ajouter est un attribut. Vous vous souvenez de notre leçon HTML que les attributs fournissent plus d'informations à la balise. Ainsi, par exemple, sur nos balises liées notre référence H n'était pas attribut, ou ici, sur notre image, vous pouvez voir que la source est ce qu'on appelle un attribut, et le texte alt est un attribut. Ensuite, la valeur va toujours dans les guillemets après le signe égal. Donc, nos styles en ligne vont essentiellement être un autre attribut et cet attribut est l'attribut style. Comme tout autre attribut, nous allons commencer par dire ce que c'est dans ce cas, style, puis égal guillemets. Dans la valeur d'attribut, nous allons dire quel style nous voulons qu'il soit. Donc, dans notre dernière vidéo, nous avons regardé les déclarations qui sont jumelées avec des sélecteurs, et dans ce cas, notre déclaration avait une propriété et une valeur. Nous allons écrire la propriété et la valeur dans notre attribut de style. Donc, dans ce cas, la couleur, et tout comme nous l'avons fait dans l'exemple de syntaxe CSS, deux-points, bleu, demi-deux-points, alors je vais enregistrer le fichier. Rappelez-vous qu'il est toujours important d'enregistrer, je peux dire que mes fichiers non enregistrés parce qu'il a le cercle là-bas. Donc, fichier, enregistrer, ou contrôler S, ou commande S. Je vais laisser ouvrir cette page à propos d'un navigateur entrer, si vous ne l'avez pas ouvert à nouveau rappelez-vous juste naviguer vers elle. Dans votre Finder et vos documents, où que vous les ayez enregistrés. Ouvrez ce dossier, puis double-cliquez pour ouvrir. Donc, nous voici dans la page ouverte actualisée, et hé, vous y allez. Regardez que notre texte est maintenant bleu comme nous l'avons dit d'être avec un style en ligne. Si vous voulez ajouter quelque chose d'autre, si vous ne vous souvenez pas de notre exemple précédent, nous avons parlé d'avoir plusieurs propriétés et valeurs dans notre déclaration. Nous pouvons le faire dans un style en ligne aussi. Donc, juste après ce point-virgule, ce qui indique que la paire de valeur de la propriété est faite, nous pouvons écrire une autre propriété. Dans ce cas, nous allons changer la taille de la police. La propriété CSS pour faire cela est appelée taille FAAB. Donc, nous écrivons la taille de la police, un deux-points pour dire que nous allons donner la valeur de cette propriété, et nous allons juste passer à quelque chose comme 18 pixels. Pour dire que nous avons fini de déclarer notre valeur, un point-virgule. Encore une fois, nous allons vouloir enregistrer ceci, revenir sur, actualiser la page, et maintenant vous pouvez voir notre taille de police est modifiée. C' est le CSS que nous appliquons pour changer la couleur et la taille de la police, et nous l'avons fait avec ce qu'on appelle un style en ligne. Donc, le style en ligne dit, « Utilisons un attribut de style sur une balise afin d'obtenir la couleur, ou la taille, ou toute autre propriété CSS que nous voulons modifier. » Alors, que se passe-t-il si nous voulons que tous nos paragraphes soient bleus et que la taille de police soit 18 ? Eh bien, nous devrions aller à tous nos paragraphes sur une page et taper d'autres attributs de style. Ainsi, le style est égal à couleur, deux-points, bleu, taille de la police semi-deux-points, 18 pixels, demi-deux-points. Je peux enregistrer cela, revenir à Chrome, actualiser, et maintenant ce paragraphe est bleu et 18 pixels trop. C' est génial, je veux dire, c'est cool que nous ayons autant de contrôle, mais pouvez-vous voir à quel point cela serait fastidieux si vous avez plus de deux paragraphes sur votre site, ce que vous le ferez probablement ? Si vous pensez à de grands sites, imaginez devoir passer par et déclarer chaque propriété CSS que vous voulez juste sur la balise ? Ça pue vraiment, et je parie que vous avez de meilleures choses que vous aimeriez faire avec votre temps. Donc, cela devient un problème avec le style en ligne. Un autre problème avec le style en ligne est disons que vous décidez que vous détestez le bleu. Le bleu n'est qu'un idiot et vous ne voulez plus que vos paragraphes soient bleus. Disons, au lieu de vos nouvelles couleurs préférées rouge. Afin de le changer en rouge, vous pouvez entrer ici, supprimer le bleu, tapez rouge. Bien sûr, cela fonctionnera et si nous retournons et rafraîchissons, vous pouvez voir que c'est rouge, mais maintenant vous devez trouver tous les endroits où vous avez dit bleu et changer cela en rouge. Ce serait un processus très fastidieux, et beaucoup de changements et il serait vraiment facile pour vous d'en manquer un. Donc, la bonne nouvelle est que nous avons une meilleure solution. Jetons donc un coup d'oeil aux feuilles de style internes ensuite. Donc, je vais aller de l'avant annuler ces styles en ligne parce qu'ils ne sont pas la façon préférée que je voudrais écrire notre CSS. Donc je vais juste reculer ça. Ce que je vais faire, c'est essentiellement, je veux dire à notre CSS de s'appliquer à tout. Je veux fournir des informations sur les styles du document. Ça semble un peu familier ? Rappelez-vous où nous avons défini d'autres informations pour le document global et ce que cela signifiait ? Peut-être notre méta information ? On a gardé ça dans notre tête, non ? N' oubliez pas que la tête décrit les méta-données de la page. Donc, avec dans notre tête est en fait où nous allons définir notre document de style. Pour créer une feuille de style en ligne, nous allons avoir besoin d'une balise de style. Je vais ajouter l'élément de style dans notre tête. Je vais juste faire quelques, regarde, trop d'espaces. Juste deux espaces vers le bas juste pour que je puisse voir cela un peu mieux, et quand commencer par écrire et ouvrir la balise de style. S, comme vous pouvez le voir, dans Sublime texte l'une des choses qu'il fait parce que c' un éditeur de texte HTML est qu'il commence à suggérer la complétion automatique pour ce que nous essayons d'écrire. Donc, il me voit taper S, T, et il suppose que je voudrais écrire une balise de style. Bien sûr, ils sont corrects qui peuvent être vraiment bon si j'appuie sur Entrée, il auto-complétera cela pour moi. Cependant, je vais éteindre ça pour l'instant. Vous pouvez désactiver cela dans les préférences, et je vais le faire parce que ce sera un peu plus facile pour vous de voir ce que je fais si je tape tout, et parce que parfois je pense qu'il est important de taper les choses quand vous commencez à apprendre. Donc, pour ce faire, je vais aller à mes préférences Sublime Text et définir mes préférences utilisateur. moment, vous pouvez ou ne pas voir quoi que ce soit ici, ma taille de police est là parce que j'ai zoomé la taille de la police plus tôt et il a sauvé cette préférence pour moi. Donc, contex vous permet d'ajouter autant de préférences que vous le souhaitez. Vous pouvez en savoir plus sur les préférences de texte Sublime simplement par Googling. Donc, disons que je veux désactiver la saisie semi-automatique et que je ne savais pas comment. Je pourrais faire un rapide Google pour Sublime Text autocomplete, et vous obtiendrez les résultats pour cela. N' hésitez pas à le faire, et sinon, nous pouvons simplement copier ce que je fais ici, qui serait une virgule, parce que nous sommes sur le zoom d'une nouvelle propriété, alors je vais juste écrire, auto_complete, deux-points, faux. Je vais sauver ça, et maintenant quand je reviendrai et commencerai à taper, saisie semi-automatique serait désactivée. Encore une fois, rappelez-vous, si je voulais voir cela, ou si j'oubliais comment écrire quelque chose comme ça, je pourrais simplement aller sur Google et chercher Sublime Text pour la saisie semi-automatique. Vous verrez ici, ils vous donneront cette information. Dans ce cas, vous pouvez simplement copier et coller cela hors de là si vous le souhaitez, contrôler C ou la commande C pour copier ou modifier la copie, alors vous pouvez revenir dans vos préférences et simplement le coller là à la place. Bien sûr, nous n'avons pas besoin de le faire parce que je l'ai déjà tapé, donc je vais le sauvegarder et le fermer. Maintenant, revenons à nos balises de style, je fais du style ouvert et vous vous souviendrez du HTML que si je vais ouvrir une balise, je veux aussi la fermer. Donc je vais fermer ça là. Ensuite, avec la balise de style inline est l'endroit où je vais écrire mes sélecteurs et déclarations CSS. Donc, vous vous souvenez quand nous avons regardé la syntaxe, la syntaxe ressemble essentiellement à ceci, sélecteur, accolade, puis la propriété, deux-points, valeur, semi-deux-points. Tout ce que nous avons à faire est que si nous voulons appliquer des propriétés et des valeurs réelles à nos sélecteurs, c'est remplacer cette formule par ce que nous essayons réellement de manipuler. Donc, dans ce cas, dans le sélecteur, je vais en faire un P pour la balise P, la propriété que je change est la couleur, et les valeurs que je change sont bleues. Sublime Text nous donne la couleur de la mise en évidence de la syntaxe ici, donc il reconnaît que les valeurs que nous venons de mettre sont des propriétés et des valeurs CSS réelles, et c'est un élément réel ou un sélecteur de balise. C' est pourquoi je suis passé de la couleur blanche au rose et au bleu afin qu'il enregistre que c'est en fait une propriété CSS qui fonctionne. Donc, nous avons notre sélecteur de type, dans ce cas, le type est un paragraphe, un P. Nos couleurs sont la propriété et notre bleu est notre valeur. Sauvegardons ceci, revenez à Chrome, actualisez la page. Maintenant, tous nos paragraphes sont bleus. Rappelez-vous que notre contenu de pied de page est en fait un paragraphe avec nos informations de copyright, sorte que cela est devenu bleu aussi. Tout le reste devrait rester comme c'était parce que ce n'est pas un paragraphe, et c'est ainsi que nous commençons avec des feuilles de style internes. Même chose, si je veux appliquer plus de propriétés et de valeurs, je peux le faire. Je vais à une nouvelle ligne, je vais taper cette taille de police, propriété, donc taille de police 18 pixels. Nous allons jeter un oeil à la propriété de la couleur et de la police un peu plus tard, mais je veux juste que vous le voyez en action afin que vous puissiez voir comment elle se connectera à notre page. Je vais enregistrer ceci, actualiser la page, maintenant tous mes paragraphes sont de 18 pixels. Ainsi, notre feuille de style interne est certainement meilleure que nos styles en ligne. Plus facile à écrire, nous n'avons pas besoin de le copier dans chaque élément de paragraphe. On est plutôt cool, non ? Ça a l'air plutôt bien. Lorsque le problème avec les styles en ligne se pose est que très probablement votre site Web ne sera pas une seule page. Très probablement, vous voulez que chaque page de votre site Web soit similaire afin que les gens sachent qu'elle appartient au même site Web. Si nous voulions que les styles de notre page À propos soient également sur les styles de notre page de travail, nous devrions copier notre élément de style, ouvrir la page de travail, coller ici, enregistrer ceci. Ouvrez cette sauvegarde, allez sur notre page de travail, et là nos paragraphes sont bleus et 18 pixels. Je ne sais pas combien de paragraphes sur cette page, mais vous pouvez voir ce qui commence à devenir ennuyeux, non ? Maintenant, je dois copier et coller ceci dans l'élément tête de chaque page de mon site Web. Si vous avez un site Web de 40 000 pages qui ne va pas être une expérience agréable. Donc, cela nous laisse avec notre troisième choix, nos feuilles de style externes. La feuille de style externe est un fichier séparé qui va contenir notre CSS. Alors, faisons notre feuille de style externe. Nous allons créer un nouveau fichier, de sorte que vous pouvez soit déposer un nouveau fichier, soit vous pouvez faire un clic droit et cliquer sur le nouveau fichier dans le dossier. Je vais déposer un nouveau fichier. Ce que je peux faire ici maintenant, c'est commencer à écrire mon contenu CSS. Donc, dans ce cas, je vais copier tout ce que j'avais ici sans la balise de style dans ce qui sera mon document CSS. Souvenez-vous que je vais dire : « Je veux que tous mes paragraphes soient de couleur bleue. » Donc, P, accolades, couleur, bleu, point-virgule, et sauver. Maintenant, quand j'enregistre, il va m'inviter avec la boîte de sauvegarde, la boîte de dialogue d'enregistrement, Il va dire, « Que voulez-vous l'enregistrer ? » Maintenant, ne touchez pas retour trop vite car sinon il sera enregistré comme « P accolade » qui est la première ligne de notre document. Bien sûr, nous ne voulons pas cela. Ce que nous voulons qu'il sauve, c'est quelque chose comme, « Styles ». Maintenant, la partie vraiment importante est de le nommer as.CSS. Donc, tout comme nous had.HTML fichiers, pour dire que c'est un fichier HTML, nous avons le fichier got.CSS. Cela indique au navigateur qu'il s'agit d'une feuille de style en cascade et qu'il aura des styles pour notre HTML. Donc, vous pouvez enregistrer ceci sous, styles.css. J' aime l'appeler styles.css c'est un nom assez court à taper, c'est facile à retenir. Quelques noms comme JohnArbucklestyles.css qui est de type lot, allons juste avec styles.css. Nous allons l'enregistrer au même niveau que toutes nos pages HTML, alors sauvegardez. Maintenant, vous verrez dès que j'ai enregistré, la mise en surbrillance de la syntaxe de couleur a commencé parce que Sublime Text 2 sait que c'est le fichier a.CSS, ce qui signifie qu'il sait le mettre en surbrillance en fonction du texte CSS. Donc, maintenant, je vais retourner en arrière et sortir cette feuille de style interne. Je vais supprimer ça, je vais sauver cette sauvegarde. Allez sur Chrome, je suis sur la page de travail et je veux être sur la page À propos. Je vais juste cliquer en arrière, actualiser la page, et je suis de retour aux paramètres par défaut du navigateur. Eh bien, pourquoi est-ce que je retourne aux paramètres par défaut du navigateur ? J' ai dit que nous devrions utiliser cette feuille de style externe, non ? Eh bien, nous avons créé le styles.css, mais qu'est-ce qu'on n'a pas fait ? On n'a pas relié les deux fichiers en tout cas, non ? Nous avons dans about.html, nous avons un styles.css, nous ne lui avons pas dit d'appliquer styles.ccs à notre page A propos et HTML, donc nous devons le faire. Nous le faisons en attachant notre feuille de style externe avec une balise de lien. La balise liée est différente de notre balise ancre qui définit les liens, donc un peu similaire dans les noms, mais certainement une chose différente. Le lien va joindre le fichier que nous voulons utiliser pour notre CSS. Nous allons ajouter dans notre balise de lien pour définir un autre fichier auquel nous avons lié. Donc, nous allons taper crochet ouvert, lien, et ensuite nous allons avoir besoin de quelques attributs. Essentiellement, le lien est une balise autonome qui contient simplement des attributs et aucun contenu. Donc, la première chose que nous allons dire est rel="stylesheet ». Les attributs rel vont enregistrer la relation entre ce fichier de lien et le document. Dans ce cas, il dit que sa relation est qu'il s'agit d'une feuille de style. Donc, l'attribut suivant que nous écrivons devrait sembler familier comme vous avez vu auparavant et c'est le href. Rappelez-vous le href a dit que le document que nous liions est situé et nous allons faire la même chose pour l'endroit où nous devrions lier le fichier CSS à. Donc, href= " », alors nous allons le remplir avec l'endroit où se trouve la feuille de style. Donc, dans ce cas, ça va être assez facile. Tout comme notre travail sur les pages de contact a fonctionné, nous sommes actuellement sur la page À propos et nous voulons aller à styles.css. Donc, nous sommes au même niveau, ce qui signifie que nous n'avons pas besoin d'aller jusqu'à un niveau ou dans n'importe quel dossier. Styles.css, puis fermez notre balise de lien. Maintenant, si je tenais mon styles.css dans un dossier appelé CSS ou quelque chose comme ça, rappelez-vous, je devrais enregistrer le dossier dans lequel je voulais aller, puis une barre oblique va dans le dossier. Mais puisque nous sommes au même niveau, je vais supprimer cela et juste l'enregistrer un styles.css parce que c'est au même niveau dans notre structure de dossiers que notre page à propos. Je vais enregistrer avec la commande, contrôler S, revenir à notre navigateur à nouveau, rafraîchir la page, faire défiler ici. Vous pouvez voir que tous nos paragraphes sont bleus parce que notre feuille de style est maintenant liée correctement. Dans la vidéo suivante, nous allons examiner l'utilisation de l'inspecteur Web pour voir comment notre CSS est appliqué à la page et comment nous pouvons modifier les choses pour voir à quoi ressemblera les choses. Nous allons également examiner le dépannage. Donc, si vos styles ne s'affichent pas en ce moment, regardez la vidéo suivante et voyons comment nous pouvons nous assurer que regardez la vidéo suivante et voyons comment nous pouvons nous assurer queles fichiers sont reliés correctement et que nous pouvons les voir dans le navigateur. 8. Web inspector et la résolution de problème: Si vous ne voyez pas votre texte devenir bleu en ce moment, eh bien, c'est un super bummer. Jetons un coup d'oeil à certaines des choses qui pourraient mal tourner. abord, assurez-vous que vous regardez la bonne page. le moment, nous avons seulement ajouté notre balise de lien dans notre about.html. Nous ne l'avons ajouté à aucune des autres pages telles que notre travail, notre index ou notre contact. Donc, si vous regardez l'une de ces autres pages, alors ça ne marchera pas pour vous. Si vous placez la balise de lien dans l'une de ces autres pages, elle ne sera pas sur la page about. Donc, nous allons nous assurer que nous avons ouvert notre page à propos, et que notre balise de lien est à l'intérieur. Ensuite, il est vraiment important de vérifier des choses comme vos citations. Rappelez-vous, parfois, si vous laissez quelque chose comme ça, le CSS ne sera pas lu correctement. Donc, utilisez la mise en surbrillance de la syntaxe de couleur pour vous assurer que vous voyez réellement la syntaxe styles.css mise en surbrillance correctement. Ensuite, assurez-vous que votre chemin est correct. Avez-vous réellement nommé ceci, styles.css ? Si vous l'avez appelé différemment de moi, alors vous allez vouloir changer ça pour ce que vous l'avez appelé. Donc, si vous avez besoin de quelque chose comme colors.css ou catsrule.css, alors vous voulez vous assurer que c'est ce qu'il dit. Dans ce cas, nous avons dit styles.css. Parfois, ce que j'aime faire est s'il y a un nom compliqué ou peut-être quelque chose que je ne peux pas facilement taper, je peux cliquer ici pour Renommer, juste sélectionner tout pour le copier. Je ne vais pas vraiment le renommer. Je vais revenir sur le sujet et juste coller ça pour m'assurer que je l'obtiens exactement comme c'est censé être. Ensuite, tu t'es assuré que c'est au même niveau ? Si vous avez d'autres dossiers, oubliez pas que le chemin sera un peu différent. Donc, pour les images, nous devons aller dans notre dossier Image. C' est quelque chose que vous voudrez peut-être regarder. Une autre chose que vous pouvez faire pour vous assurer que le fichier est réellement lié à et donc le problème est dans le fichier et pas vos sélecteurs réels ici, à et donc le problème est dans le fichier et pas vos sélecteurs réels ici, est d'aller de l'avant et de regarder cela dans un navigateur. Donc, je vais sauver les choses comme elles étaient, revenir et me rafraîchir. Disons que ça ne marche pas parce que j'ai peut-être oublié de fermer ou d'ouvrir un devis. Si je reviens ici, vous pouvez voir que le styles.css ne fonctionne plus parce que mon attribut n'a pas été nommé correctement. Donc, une des choses que je peux faire est d'ouvrir la sauvegarde soit notre Inspect Element pour faire l'Inspecteur Web, soit je peux voir notre source. Donc, View, Developer, View Source, et vous remarquerez chaque fois que nous afficherons la source, nous verrons que nos liens sont bleus, comme nous l'avons vu dans les pages Web régulières. Si je voulais ouvrir ceci dans un nouvel onglet, je pourrais en fait parce que c'est un lien vers ce logo.png. Cela me fait savoir que ce lien fonctionne réellement et va au bon endroit. Donc, je pourrais essayer de faire la même chose avec les styles ici, donc ouvrez le lien dans un nouvel onglet et je vois cette page Web n'est pas trouvée, et je peux commencer à voir qu'il y a un problème ici parce que je vois cette citation ici, il ne devrait pas être une citation dans mon URL de fichier ? Alors, laisse-moi revenir ici et dire : « C'est bizarre. » Cela peut m'aider à identifier que quelque chose ne va pas avec la façon dont je le relie. Une autre chose que nous pouvons faire est d'utiliser notre validateur HTML. Vous vous en souvenez peut-être de notre dernière classe, donc vous voulez aller de l'avant au service de validation W3. Je vais copier tout mon code. Je vais le faire avec le contrôle A ou la commande A pour sélectionner tout, ou Modifier, Sélectionner tout. Je vais tout sélectionner et puis je vais copier. Je vais aller sur le validator.w3.org et aller à Entrée directe, coller mon code dedans, et cliquez sur Vérifier. Maintenant, vous verrez que je reçois une erreur maintenant quand je lance ceci via le validateur. Donc, laissez-moi descendre et voir quelle est l'erreur et l'erreur dit, « Dans la valeur d'attribut non citée. » C' est fabuleux, ça me dit exactement ce qui ne va pas. Donc, ligne 10 attribut non cité, je reviens ici. C' était avec la ligne 9, mais vous avez la zone générale et je vois, Oh shucks, j'ai oublié cette citation, et sauvegardez ça. Donc, c'est une façon. Maintenant, laissez-moi aller de l'avant et casser un peu, revenez sur notre navigateur, rafraîchissez ceci. Encore une fois, ça ne marche pas. Donc, nous allons revenir à ce que j'ai fait avant. Ce que j'ai fait, c'est que je me suis assuré que les styles étaient là. Une autre façon, je peux le faire en inspectant Element. Rappelez-vous, Inspecteur nous permet de voir tout le HTML sur la page ? Je vais ouvrir mon élément de tête, je vais aller à mon styles.css, je vais cliquer dessus, et je peux voir qu'il charge réellement le styles.css. Donc, le problème ne consiste plus à lier, le problème est quelque chose dans mon styles.css. D' accord, laisse-moi y retourner et vérifier ça. Donc, je passe à styles.css, et à ce stade, je ne suis pas vraiment sûr de ce qui ne va pas. Il est vraiment facile de manquer un point-virgule ou un deux-points de temps en temps. Donc, si je ne vois pas cela tout de suite, je peux à nouveau utiliser quelque chose comme un validateur. n'y a pas seulement la validation HTML, il y a aussi la validation CSS. Donc, je vais copier mon code à partir d'ici, puis je vais aller au service de validation CSS. C' est jigsaw.w3.org/css-validator ou simplement faire une recherche rapide Google pour CSS validator et cliquez sur ce lien qui apparaît. Je vais aller à Direct Input. Bien sûr, vous pouvez également mettre une URL réelle du document ou télécharger le fichier, mais j'ai déjà tout copié, alors laissez-moi simplement coller cela là-dedans. Je vais vérifier, et maintenant il va dire qu'ils ont trouvé une erreur sur 2, zone de texte p, couleur Parse Error bleu. Cela m'identifie où se trouve le problème. Maintenant, je peux trouver sur la ligne 2, et je peux regarder et dire, couleur, bleu point-virgule, oh attends, je n'ai pas vraiment mis de deux-points. Alors, laissez-moi ajouter le deux-points. Maintenant, vous pouvez voir Sublime Text aime parfois la saisie semi-automatique pour vous, ce qui peut être un peu ennuyeux parce que je ne le veux pas pour le moment. Donc, nous allons supprimer ça, puis je reviens à être tout prêt et en affaires. Donc, laissez-moi enregistrer cela, revenez à mon navigateur, actualisez ceci, et les choses sont à nouveau bleues. Donc, maintenant que tout fonctionne, continuons et copions la feuille de style externe dans nos autres fichiers. Souviens-toi, en ce moment, c'est seulement dans notre page. Donc, si je suis allé à notre maison, les paragraphes vont toujours être dans le style noir au lieu du style bleu que nous avons abordé. Donc, je vais aller à ma page à propos, je vais copier cet élément de lien, puis je vais ouvrir toutes mes autres pages. Je vais remplacer ça. Rappelez-vous, j'aime garder les choses soignées, donc je vais l'onglet là-dedans, aller à la page Contact, déposer ça là-dedans. Enfin, notre page d'accueil, vous pouvez ajouter cela là aussi, et enregistrer. On dirait que j'ai oublié de sauver le contact et j'ai oublié de sauver le travail, laissez-moi les sauver. Maintenant, si je retourne au navigateur, et actualise, nous pouvons voir que les styles sont appliqués. Nous pouvons également utiliser notre Inspecteur pour voir les styles actuellement appliqués. Tout comme nous l'avons utilisé pour rechercher chaque HTML, nous pouvons également voir notre CSS. Je vais faire défiler vers le bas pour voir ça. Vous pouvez voir que je suis sur mon blockquote, puis mon paragraphe et vous pouvez voir sur le côté droit ici, nous avons notre onglet Styles. Notre onglet Styles nous indique que la couleur du paragraphe est bleue. Ainsi, nous pouvons voir quels styles sont appliqués à notre page en inspectant les éléments de notre CSS également. Une autre chose soignée que vous pouvez faire dans l'inspecteur est en fait de voir à quoi ressemblerait une autre couleur. Donc, je peux aller ici, vous remarquez quand je clique, c'est mis en évidence, et disons que je ne veux plus que les choses soient bleues. Souviens-toi, on n'aime pas le bleu. Rendons le rouge. Je peux taper rouge, et maintenant vous pouvez voir que le texte est rouge. Donc, l'inspecteur nous laisse voir un aperçu en direct pour voir si peut-être nous aimons quelque chose de mieux. Bien sûr, cela ne sauvera pas dans votre CSS réel, mais vous pouvez tester les choses pour voir à quoi elles ressemblent, décider si vous aimez quelque chose et ensuite vous vous sentez comme, vous savez quoi , le rouge semble bon, revenir à vos styles et passer au rouge . Donc, c'est ainsi que l'utilisation de l'Inspecteur fonctionne et un peu sur la façon dont nous pouvons résoudre les problèmes pour nous assurer que nos styles arrivent réellement sur notre page. Bien sûr, nous venons de commencer à gratter la surface sur ce que nous pouvons faire avec CSS. Donc, dans la leçon suivante, regardons plus en profondeur les propriétés CSS avec lesquelles nous devons travailler pour appliquer à notre HTML. 9. Propriétés de la police de caractères: Les propriétés CSS sont ce que nous utilisons pour changer l'apparence de notre HTML. Dans ce cas, nous avons examiné deux propriétés CSS jusqu'à présent, couleur et la taille de la police. La taille de la police, comme son nom l'indique, change la taille de nos polices. Nous pouvons revenir à notre styles.css et réappliquer une taille de police à nos paragraphes. Dans ce cas, disons 16 pixels. Eh bien, nous ne voulons pas simplement changer nos paragraphes, nous allons probablement vouloir changer des choses comme nos en-têtes et notre liste. Pour l'instant, commençons simplement par nos en-têtes, et nous allons dire que notre h1 sera de 30 pixels. Maintenant, afin de faire une autre propriété pour un autre sélecteur, nous allons juste faire la même chose que nous avons fait ici et suivre notre syntaxe de valeur de propriété de sélecteur. Dans ce cas, notre sélecteur sera notre titre de niveau 1. Pour écrire cela, rappelez-vous que notre HTML est h1. Braces bouclés, c'est là que nous faisons nos déclarations. Dans ce cas, nous allons dire font-size : 30 pixels. Cela dit, utilisez l'unité de mesure de pixel et faites-le 30 pixels. Sauvons ça. Je vais ouvrir ma page de contact et je vais me rafraîchir, et voilà. Ça n'a pas l'air très différent, non. Jetons un coup d'oeil à ce qui se passe et assurez-vous que cela fonctionne réellement. Notre h1 est de 30 pixels, et nos paragraphes sont bleus et 16 pixels. Ok, donc peut-être que nous sommes un peu proches de ce que les paramètres par défaut du navigateur étaient de toute façon. Allons faire tomber ça. Combien devrions-nous le faire monter ? Je ne sais pas. Jouons ici jusqu'à ce qu'on trouve quelque chose qu'on aime. Je clique juste sur la flèche vers le haut. La flèche vers le haut et la flèche vers le bas modifient la valeur du pixel d'un montant. Hey, ça a l'air plutôt bien, 52. Je vais sauver ça. Eh bien, je ne peux pas le sauver d'ici. Je dois retourner et le changer ici pour mon dossier, et je vais le faire, maintenant faisons juste 50. Mon h1 50 pixels. C' est ainsi qu'il définirait la taille de la police. Pixels n'est qu'une unité de mesure que nous pouvons utiliser pour définir la taille de nos polices. Tout comme nous pourrions décrire des choses en mètres, pouces ou pieds, vous pouvez également décrire vos tailles de polices en différentes unités de mesure. Un autre exemple est l'utilisation d'un mot-clé. Certaines des valeurs de mots-clés que nous avons peut-être sont petites, ou extra, extra large, qui seraient écrites comme ceci. Nous pouvons enregistrer cela, retourner à notre navigateur et voir à quoi cela ressemble. Eh bien, ce n'est vraiment pas si grand par rapport à ce que nous avions avant, mais c'est comme ça que vous faites extra large. Vous pouvez voir cependant que nos paragraphes sont assez petits. Nous pouvons également voir à quoi il ressemble à extra small ou extra, extra small, et c'est tout à fait minuscule. Je ne porte pas encore de lunettes, mais je pense que je le ferais si tout était si petit. D' autres valeurs possibles que nous avons sont em, donc nous pourrions dire quelque chose comme 1em ou 5em. Nous pouvons enregistrer cela, rafraîchir, et vous pouvez voir que cela a été assez grand, et 1em est fondamentalement la taille par défaut de la police de toute façon. Vous pourriez utiliser des décimales dans cela aussi, donc vous pourriez dire quelque chose comme 1.5em ou 2em. Nous avons aussi des pourcentages, donc vous pourriez dire quelque chose comme 100 pour cent ou 300 pour cent. Sauve ça, retourne en arrière. La taille de la police est basée sur le pourcentage de l'élément parent. Dans ce cas, toute la page. Cette taille de police, vous pouvez creuser profondément dans le côté quelles mesures de taille de police sont les meilleures pour vous. Je dirai que les pixels sont les plus faciles à commencer et en quelque sorte les plus faciles à saisir votre tête parce que nous savons combien seront 16 pixels, donc nous allons le remettre à cela. Faisons la taille de police de 20 pixels pour les paragraphes, et h1 comme 40 pixels. N' hésitez pas à jouer avec certaines des autres unités que vous pouvez utiliser pour la taille de la police. La prochaine propriété de police que nous examinerons est le poids de la police. Et si nous voulons que notre poids de police soit en gras ? Eh bien, nous avons déjà vu des polices en gras avec nos en-têtes. Et si nous voulions aussi rendre nos paragraphes gras ? Eh bien, nous pouvons le faire avec la propriété de poids de police. Donc font-weight : gras. Je vais enregistrer cela, Fichier, Enregistrer et actualiser la page. Maintenant, vous pouvez voir mon texte de paragraphe est en gras. Si je voulais voir à quoi il avait l'air sans gras, juste un aperçu dans l'inspecteur du navigateur, permet simplement d'activer et de désactiver les propriétés, et vous pouvez voir les différences qu'ils font au fur et à mesure que nous allons. Maintenant, vous pourriez penser, « Comment pourrais-je savoir que le mot est audacieux pour cela ? » Oui, bien sûr, je te le dis maintenant, mais comment tu le sais ? C' est là que les Googles reviennent. Ne vous inquiétez pas de mémoriser tout ça maintenant. La bonne chose à propos de travailler en CSS est que vous allez écrire CSS sur un ordinateur. Maintenant, accordé en espérant que vous avez une connexion Internet, très probablement, vous êtes comme un onglet loin de juste Googling ce que la valeur de la propriété CSS est pour cela. Disons que je ne me souvenais pas, mais je savais que je voulais rendre mon poids de police audacieux. Je peux aller sur un site de référence. L' un des sites de référence que j'aime vraiment est HTML Dog. HTML Dog a cette liste de références sur le site. Vous avez peut-être regardé les balises HTML avant, nous pouvons également regarder les propriétés CSS. Je sais que je veux changer le poids de ma police, et ici, regardez sous Texte et polices, je vois le poids de la police. Je clique dessus, et ensuite ce qu'il fera ici est lister les valeurs possibles que je peux définir pour cette propriété. Normal, plus audacieux, plus léger, puis poids. Le poids commence du plus léger au plus audacieux. Dans ce cas, vous pouvez même voir un exemple, font-weight : bold, qui est ce que nous tapons ici. Vous pouvez également désactiver le poids de la police : bold des en-têtes si vous le souhaitez, et vous pouvez le faire en utilisant font-weight : normal. Pour le h1, je peux dire font-weight, puis écrire normal. J' ai encore cette valeur normale d'ici, je vais enregistrer mon dossier, revenir ici, et maintenant regarder le h1. Ce n'est plus audacieux parce qu'on a décidé de mettre ça à la normale. C' est ainsi que vous commenceriez à ajouter des poids de police à votre page. Vous voudrez peut-être laisser vos en-têtes en gras pour que les gens sachent que ce sont bien des en-têtes, mais nous avons déjà augmenté notre taille de police jusqu'à 40 pixels qu'il est assez évident que ce n'est pas seulement du texte de paragraphe que nous recherchons à. Pour l'instant, je me sens bien de supprimer les poids de police de gras et de le remettre à la normale. Ensuite, nous avons la propriété de style de police. Le style de police nous permet d'ajuster le style de la police. Les exemples que nous avons sont italiques ou obliques. Si on voulait faire, on va installer les H2s. Ils n'ont pas encore d'amour CSS. Donc, h2 pour notre sélecteur, accolades, puis à l'intérieur de cela sont la propriété et la valeur. Dans ce cas, nous parlons de styles de police, donc font-style፦ Alors disons italique. Sauve ça. Actualisez le navigateur et vous pouvez voir que notre titre de niveau 2 a changé en italique. Cela semble un peu lourd étant italique et audacieux, afin que nous puissions combiner des choses pour que nous puissions avoir le style de police et le poids de police. Donc, changons le poids de la police à normal et supprimez ce gras. Maintenant, nous avons notre cap, qui est italique et poids normal. Encore une fois, si je voulais savoir quelles options j'avais pour les polices, je pourrais revenir à mes propriétés CSS à htmldog et vérifier le style de police. Ici, vous trouverez les différentes options que j'ai. Donc, nous avons ajusté quelques choses de meilleure police jusqu'à présent, mais l'une des choses que nous n'avons pas changé du tout est la police réelle que nous utilisons. Peut-être que vous n'êtes pas un grand fan de cette police serif. Peut-être que vous voudriez utiliser une police sans empattement. Nous pouvons totalement ajuster cela et nous le ferons avec la propriété font-family et la font-family nous indique quelle police vous souhaitez utiliser. Donc, changeons nos paragraphes pour la famille de polices. Alors passons ça à la famille de polices d'Arial. Donc, ce que nous allons faire est pour la valeur par rapport à la propriété, nous allons écrire le nom de la police que nous voulons utiliser, dans ce cas Arial. Je vais dire ça et Arial est une police sans empattement. Donc, toutes les polices que nous avons cherché sont des sérifs, qui ont ces petits types de ligne à la fin sauf pour notre logo bien sûr, mais c'est une image. Je vais enregistrer ceci et maintenant vous verrez que notre texte de paragraphe a changé de notre navigateur par défaut à Arial. C' est ainsi que vous définiriez une police. Il existe plusieurs façons différentes de faire familles de polices et l'une d'entre elles est de décrire le bouton spécifique que nous utilisons tel qu'Arial, mais nous pouvons également utiliser une famille de polices générique. Donc, vous m'avez entendu utiliser le mot « Serif et sans empattement ». Eh bien, vous pouvez juste dire en général, que je veux n'importe quel sans-empattement. C' est ce qu'on appelle un nom de famille générique. Vous pouvez revenir ici, cliquez que vous verrez qu'il est assez similaire au navigateur que nous pourrions utiliser Arial. Mais ce qu'il fait essentiellement le navigateur dit « Trouver importe quel défaut sans-serif que vous avez et le servir. » Les autres noms de famille génériques que nous avons sont serif, comme nous l'avons vu pour que nous puissions revenir à un serif. On pourrait aussi faire cursive. Sauve ça. Revenez ici et vous pouvez voir qu'il passe à n'importe quelle police cursive par défaut de l'ordinateur est. La famille de polices générique suivante est monospace. Save ça, reviens ici et le monospace que tu verras est comme une carrière. Vous l'utilisez essentiellement pour quelque chose comme du code. Les échantillons sont quelque part que vous voyez que vous utilisez souvent et le dernier que nous avons qui pourrait être mon préféré pour les familles de polices génériques est la fantaisie. Sauve ça et tu auras quelque chose de gentil. Peut-être pour Pyros sur Mac ou Comic Sans si vous avez le plaisir d'utiliser Windows et de voir cette beauté. Donc, je vais très bien si tu veux mettre toute ta copie à la fantaisie. Je pense que c'est cool. Certaines personnes peuvent ne pas être d'accord, mais « Hé, c'est votre site Web. » Donc, l'une des choses qu'une famille générique fait est essentiellement qu'elle sert n'importe quelle police disponible pour la machine. Toutes les polices ne sont pas disponibles sur chaque ordinateur. Il existe différentes polices en fonction de si vous êtes sur une machine Mac, Windows ou Linux. Il existe différentes polices en fonction de si vous avez décidé d'installer des polices ou de supprimer des polices. Les polices sur chaque machine sont en quelque sorte jusqu'au système d'exploitation que vous exécutez et les préférences de l'utilisateur. Parce que toutes les polices ne sont pas sur chaque machine, nous sommes en quelque sorte limités dans ce que nous pouvons servir. Je veux peut-être servir Helvetica, mais ce n'est peut-être pas sur votre ordinateur. Ces familles génériques servent n'importe quelle police disponible dans ce genre de famille générique, donc il va chercher quelle que soit la valeur par défaut du système d'exploitation est cursive ou serif et c'est ce qu'il servira. Nous avons ce qu'on appelle Web Safe Polices. Les polices de sécurité Web avec cette liste de six polices qu'ils trouvé leurs services étaient disponibles sur presque toutes les machines. Donc Arial, Georgia, Verdana, Courier, Trébuchets, Times New Roman, ce sont des choses que vous verrez couramment sur la plupart des ordinateurs. Donc, vous pouvez être assez sûr en utilisant n'importe lequel de ces. Cependant, nous avons également la pile de polices et la pile de polices est un moyen de servir des polices de secours. Cela signifie que vous pouvez servir votre premier choix de police, puis si cette police n'est pas disponible, la police suivante de la liste sera servie à l'ordinateur à la place. Alors, voyons quelque chose comme dire : « Je voulais servir Helvetica. » Je pourrais écrire Helvetica, mais alors je veux dire si l'ordinateur n'a pas Helvetica, servir cette police à la place et je le ferais avec une liste séparée par des virgules. Donc, je peux fournir plusieurs valeurs à certaines propriétés avec une liste de valeurs séparées par des virgules. Donc, bien sûr, vous n'allez pas avoir de valeurs séparées par des virgules pour poids de la police parce que vous n'allez pas dire une virgule normale. La police va être en gras. Cependant, font-family est la situation où vous voudriez faire quelque chose comme celui-ci et où le travail peut être valide car vous pouvez avoir plusieurs polices spécifiées au cas où vous auriez besoin d'utiliser un secours. Donc, disons qu'il n'y a pas Helvetica servir Arial à la place. S' il n'y a pas d'Arial, la dernière police que nous voulons lister dans notre pile de polices sera le nom de famille générique. Dans ce cas, ce sont toutes des polices sans empattement, donc je vais vous dire si vous n'avez pas d'Helvetica et que vous n'avez pas Arial pour servir ce que vous pouvez déterrer sur cette machine. Donc, sauvegardons cela et actualisons la page. Donc, vous pouvez voir la mise à jour ici. Et si je mets une police folle, une police que je sais que je n'ai pas ? Lucida est une police qui a quelques versions différentes. Cette version de base de Lucida, je n'ai pas sur ma machine. Donc, si je l'ajoute ici et que je clique sur Enregistrer et Actualiser, je vais toujours obtenir la prochaine dans ma pile de polices parce que je n'ai pas cette police. Si vous voulez sortir de la police qui contient plusieurs noms tels que Times New Roman, vous le faites en la mettant entre guillemets. Alors, « Times New Roman » et reviens ici et maintenant tu verras ma police passer à Times New Roman. La bonne nouvelle est que les années passées, les gens en ont eu marre des six polices sécurisées Web et ont trouvé un moyen de finagler la technologie pour utiliser les polices Web, ce qui signifie que nous contrôlons en fait plus de polices. Donc, nous allons commencer avec ces six polices de notre site Web, mais ne vous inquiétez pas, vous aurez plus de choix plus tard. Donc, je vais mettre mon texte de paragraphe à un serif parce que parfois cela peut être facile à lire et je vais l'envoyer en Géorgie, avec une sauvegarde de serif et pour mes en-têtes je vais les faire Verdana. Donc je vais dire que la famille de police Verdana et la sauvegarde pour ça sera un sans-empattement. Même chose pour ma famille de polices Verdana, sans empattement. Je vais sauver ça, reviens. Donc, j'ai changé ça. Je n'aime pas vraiment l'Italic et Verdana ensemble. Donc, je vais l'enlever. Donc, je vais supprimer ce style de police. C' est un peu mieux pour moi. Je vais aller avec ça pour l'instant. Donc, nos polices sont un peu meilleures. Cependant, ce bleu est un peu horrible. Donc, dans la vidéo suivante, commençons à jeter un oeil aux couleurs, particulier la couleur du texte et les couleurs d'arrière-plan et voyons comment nous pouvons ajuster une partie de cela. 10. Couleur du texte et couleur d'arrière-plan: Donc, nous aimons avoir à notre propriété de couleur CSS, mais en ce moment nous avons juste ce bleu terrible. Eh bien, il existe différentes façons de définir nos valeurs de couleur pour notre propriété de couleur. Quand on dit bleu, c'est ce qu'on appelle un nom de couleur ou un mot clé. Il y a quelques choix de mots clés différents que nous devons utiliser. Voici quelques exemples. Vous pouvez voir que nous pouvons définir les choses comme noir, blanc, marron, fuchsia, c'est l'un de mes favoris avec aqua, jaune, olive, citron vert, vert. Il y a un tas de choix, mais ils rappellent tous milieu des années 90 et peut-être qu'on veut un peu plus de contrôle sur notre couleur. Ne vous inquiétez pas, on peut faire ça. Nous pouvons le faire avec ces autres options de valeur de couleur. Le premier que nous allons regarder est hexadécimal. Notations hexadécimales essentiellement pour trouver les valeurs rouges, vertes et bleues, en utilisant des nombres hexadécimaux à trois ou six chiffres. Il existe plusieurs façons différentes d'obtenir un nombre hexadécimal. Si vous avez un programme d'édition d'images, comme Photoshop, beaucoup de fois vous verrez le sélecteur de couleurs ici, et lorsque vous vous déplacez et changez la couleur, la valeur ci-dessous est notre nombre hexadécimal. Donc, peut-être que je veux un bleu un peu plus apprivoisé, peut-être un bleu-vert comme celui-ci. Ce que je peux faire est de copier ce nombre, ce nombre hexadécimal, revenir à mon Sublime Text, puis dans Sublime Text, je vais me débarrasser de notre mot clé bleu. Pour dire que nous faisons un nombre hexadécimal, nous commençons par le signe de la livre, puis nous collons notre numéro à six chiffres. À partir de là, nous allons cliquer sur Enregistrer, puis nous allons l'afficher à nouveau dans le navigateur. Donc quand je reviendrai me rafraîchir, tu peux voir que le bleu n'est plus aussi intense. Vous verrez toujours qu'il y a du bleu sur cette page et c'est en fait pour nos liens. Par défaut, les paramètres par défaut de notre navigateur rendent tous nos liens non visités en bleu. Mais notre paragraphe pour l'instant est plus de ce bleu-vert et semble un peu plus calme. Donc, on va changer ça. Nous allons en faire une valeur grise et nous allons utiliser la valeur grise de 333333, je vais sauver ça, rafraîchir. Là, j'ai maintenant des textes gris. Les nombres hexadécimaux peuvent être de trois ou six chiffres car vous pouvez écrire un raccourci pour eux si vous avez des nombres répétés. 333333 est le même que 333. Si vous aviez un nombre comme ff3300, vous pouvez aussi l'écrire comme f30. Le navigateur lira cela comme double répétition. Donc, dans ce cas, chaque fois que vous avez vos deux chiffres pour vos valeurs rouges, vertes ou bleues répéter, vous pouvez faire un raccourci. On va avoir 333 pour l'instant. Nous pouvons enregistrer cela comme notre valeur hexadécimale, mais nous avons d'autres options en plus de cela. Nous avons également des valeurs RVB ou rouge, vert, bleu. Donc j'ai dit que je voulais faire mes textes en couleur pourpre. Je pourrais saisir cette valeur RGB ici. Donc 129, 45, 112 et je pourrais brancher ça dans Sublime Text. Je vais me débarrasser de notre nombre hexadécimal et essayer une valeur RVB. J' écrirai RBG et entre parenthèses, et ma valeur pour le violet ira entre parenthèses. Donc, si je me trompe et regarde ce que c'était, soit 129, 45, 112, je peux revenir ici et dire 129, 45, 112. Ces valeurs sont la valeur rouge, la valeur verte ou la valeur bleue. Les valeurs séparées par des virgules s'appliqueront à ce RVB. Si je sauvegarde cela et retourne à Chrome et actualise, j'ai maintenant cette couleur pourpre dans la valeur RVB. RGBA est une autre valeur que nous avons, et qui signifie, rouge, vert, bleu, alpha. Nous pouvons utiliser le numéro alpha pour la transparence. Donc, si je change notre RVB en RGBA, puis ajoute une autre virgule pour une autre valeur, par défaut, c'est une valeur de 1, et cela signifie que c'est complètement opaque. Si je change ça à quelque chose comme 0,5, ça va faire 50 pour cent l'opacité. Donc, revenons à Chrome, et vous verrez quand je rafraîchis, qui s'estompe parce que nous avons réglé l'opacité au niveau alpha jusqu'à 0,5. Donc, c'est un peu sur la façon dont vous utilisez RVB et RGBA. HSL et HSLA sont très similaires à cela, sauf qu'ils représentent la teinte, la saturation, la légèreté. Si tu n'as pas Photoshop, c'est bon. Il y a aussi beaucoup de sélecteurs de couleurs en ligne. Ce site est colourlovers.com et Colour Lovers montre quelques palettes couramment utilisées. Si nous allons de l'avant et simplement parcourir quelques palettes, cela peut vous donner quelques idées de palettes de couleurs que vous pourriez utiliser sur votre site ou qui vous inspireront à utiliser différentes couleurs sur votre site. Vous pouvez cliquer dessus et en savoir plus si vous aimez une palette de couleurs comme celle-ci pour « Je demande une crêpe ». Si on fait défiler vers le bas, je ne suis pas sûr de vouloir une crêpe bleue mais j'aime le look de cette palette. Vous pouvez voir qu'ils vous montrent les couleurs ici, et vous pouvez voir qu'ils vous donnent la valeur hexadécimale ainsi que la valeur RVB. Vous pouvez donc brancher ces valeurs dans votre CSS si vous voulez utiliser quelque chose comme ceci. Pour que je puisse copier ceci, retourner à Sublime Text. J' utilise RVB et non RGBA, donc je vais changer cela ici et coller cela dans. Maintenant, quand je reviens, j'utilise la valeur grise que j'ai copiée d'ici. Ceci est le sélecteur HSL, et le sélecteur HSL vous donne un peu d'un curseur ici, et vous verrez que je déplace les choses autour, il change la couleur ici Vous pouvez changer toutes sortes de valeurs jusqu'à ce que vous obtenez la couleur que vous vouloir. Voici l'opacité ou la couche alpha pour que vous puissiez voir cela changer. Faisons tomber ça jusqu'à 1. On peut voir ça. Maintenant, on change de légèreté. Ensuite, si vous aimez cela, vous pouvez soit saisir le nombre hexadécimal, la valeur RBGA, puis la valeur HSLA qui utilise également des pourcentages pour la saturation et la légèreté. Donc, disons que j'aime cette couleur verte, et j'aime la valeur HSLA, je peux le copier, revenir à mon Sublime Text, et ensuite je peux changer la couleur de mes H1 en le collant, en cliquant sur Enregistrer et en revenir. Maintenant, mes niveaux de cap sont verts. ColorPicker.com est un autre sélecteur de couleurs similaire à la valeur Photoshop, et vous pouvez voir si vous pouvez juste ajuster, afin de choisir une couleur à partir de cela. Vous pouvez consulter d'autres outils comme kuler.adobe.com. Je me demande si c'est censé être la couleur prononcée. Je ne suis pas vraiment sûr. De toute façon, s'il a un sélecteur de couleurs, je me rends compte que je ne dis pas vraiment ces choses à haute voix que souvent, mais vous pouvez en quelque sorte définir une couleur de base ici, et modifier les choses et vous pouvez dire si vous voulez ou non monochromatique ou et il vous donnera des suggestions pour une palette de couleurs à utiliser, ainsi que les valeurs RVB et hexadécimales que vous pouvez utiliser dans vos documents. Donc il y a beaucoup d'outils là-bas. Si vous venez de faire la couleur CSS dans une recherche Google, vous obtiendrez une tonne d'entre eux qui, espérons-le, vous inspirer dans certains choix de couleurs. Donc je vais sélectionner ça. Maintenant, revenons à mon code, je vais dire couleur et coller là-dedans. Vous remarquerez que quand j'ai copié, c' était en majuscules pour les lettres. Peu importe. C'est insensible à la casse. Je vais juste rendre ma minuscule cohérente. Je peux également changer les noms de famille de polices en minuscules si je veux garder cela cohérent et ensuite enregistrer. Ainsi, vous pouvez voir, vous pouvez mélanger toutes sortes de valeurs. Vous pouvez avoir RGB, HSL, HSLA, hexadécimal. Toutes les valeurs fonctionneront pour ces couleurs. Sauvegardez ça, actualisez ici. Maintenant, vous verrez que nous avons d'autres couleurs sur notre page. Et si je veux changer toute la couleur de notre texte en même temps ? Que faire si je veux remplacer les styles du navigateur et faire en sorte que tout sur notre page soit d'une seule couleur ? Y a-t-il un moyen de le faire en plus de cibler tout le monde, le p, le H1, le H2 ? La réponse est oui. Ne serait-ce pas méchant si la réponse était non ? Ne t'inquiète pas, c'est oui. Donc, ce que nous pouvons faire est au lieu de définir nos propriétés sur quelque chose comme notre paragraphe ou H1 ou H2, nous avons quelque chose d'autre que nous pouvons utiliser. moment, nous venons d'appliquer la propriété de couleur à la balise qui entoure ce texte spécifique, mais nous avons une autre balise qui entoure notre texte H1 ou H2 ou paragraphe. C' est notre élément corporel. Tout comme notre H1 ou H2, nous pouvons également appliquer des styles au corps. Donc, en revenant ici, pour l'instant je vais supprimer nos propriétés de couleur. Alors je vais en ajouter un nouveau. Je vais l'ajouter en haut de la page, et ce sera pour nos éléments corporels. Donc maintenant dans le corps, comme n'importe quelle autre étiquette et dans n'importe quel autre sélecteur, je peux dire couleur. Ensuite, je peux utiliser un de nos mots-clés si je veux ici, comme vert. Je vais enregistrer et revenir à Chrome, rafraîchir et maintenant vous pouvez voir moins les liens qui sont contrôlés par les paramètres par défaut du navigateur et moins le texte dans le logo, tout le texte est vert parce qu'il est en cascade à tous nos éléments. C' est donc l'une des façons dont nous pouvons utiliser la balise body pour appliquer des styles. Une autre chose que nous pouvons utiliser la balise body est de changer toute la couleur de fond de notre page. Donc maintenant, nous avons ce blanc très brillant et peut-être que nous ne voulons pas ça. Ce que nous pouvons faire est de changer une autre propriété CSS, la propriété de couleur d'arrière-plan. Nous voulons appliquer cela à notre tag body car notre corps contient toute notre page. Alors allons-y et faisons-le. Donc maintenant, nous allons utiliser une nouvelle propriété, et cette propriété est background-color : et puis tout comme nous avons pu utiliser nos mots-clés ou les valeurs RVB ou hexadécimales, nous pouvons faire la même chose pour définir une couleur d'arrière-plan ici. Donc si je le voulais, je pourrais dire quelque chose comme Aqua. Je suis sûr que vous imaginez tous à quel point cela va être beau quand je l'sauvegarde et le rafraîchir dans le navigateur. Quand je me rafraîchis, regarde tes yeux tout le monde. C' est un design web lumineux, mais comme vous pouvez le voir, cela a fonctionné. Donc, nous pouvons utiliser notre tag body pour contrôler l'aspect général de nos pages, et ensuite nous pourrons remplacer plus tard si nous en avons besoin. Dans ce cas, nous pouvons vouloir revenir en arrière et modifier certaines de ces valeurs parce que, eh bien, cela semble un peu fort. Disons que je voulais le remettre au blanc. Eh bien, j'ai quelques façons de le faire. Je peux utiliser notre valeur de mot-clé, qui est le mot blanc. Je pourrais utiliser une valeur hexadécimale, telle que le nombre ffffff, qui est aussi la valeur hexadécimale pour le blanc. On pourrait utiliser un raccourci, qui serait juste fff. La valeur RVB pour cela serait 255, 255, 255. Comme vous pouvez le voir, il existe de nombreuses façons de définir les valeurs de nos propriétés. À vous, celui que vous voulez utiliser. Pour l'instant, on pourrait le mettre en blanc. Mais si vous voulez quelque chose peut-être un peu moins lumineux, juste ajuster cela à une couleur blanc cassé, dans ce cas la valeur hexadécimale de efebdf, et vous pouvez voir que c'est un peu plus facile sur les yeux. Je vais aussi changer la couleur de notre texte du vert à cette valeur hexadécimale de 27211f. Sauvegardez ça, rafraîchissez, et maintenant nous revenons à une couleur plus foncée traditionnelle. C' est un peu noir. Changons aussi la couleur de notre H1 parce que nous voulons qu'il soit différent de notre texte noir. Nous allons dire couleur, et ajoutons la valeur hexadécimale ici. Donc ce sera e96f4b. Maintenant, ça va nous donner un peu comme un saumon-ish, comme un saumon rose rouge, et maintenant nous faire savoir que c'est un titre plus grand. Nous pourrions également appliquer la même couleur à nos H2 si nous le voulons. Donc, nous pouvons copier et coller ceci ou le réécrire. Nous allons simplement copier et coller ça directement dans. Maintenant, nous avons ajusté les couleurs pour beaucoup d' éléments sur notre page ainsi que pour notre couleur d'arrière-plan. C' est ainsi que nous appliquons les couleurs. Jetons un coup d'oeil à la prochaine leçon sur la transformation de notre texte d'un peu plus que les tailles et les familles de polices que nous avons utilisées jusqu'à présent. 11. Style de texte de base: Donc, jetons un coup d' oeil à un autre style de texte que nous pouvons appliquer aux mots sur notre écran en utilisant CSS. Voici notre page À propos et pour notre À propos de Jon, nous avons un titre, une image, et nous avons du texte. Eh bien, passons un peu le texte. Par exemple, que se passe-t-il si nous voulons centrer notre cap ? Et si nous voulons que About Jon apparaisse au milieu de la page ? Eh bien, on peut le faire. Pour ce faire, nous utiliserons notre propriété text-align. Ainsi, notre propriété text-align est text-align. Nous avons quelques propriétés différentes pour cela, mais comme nous voulons notre ligne de centre technologique, nous allons utiliser la valeur du centre. Maintenant, quand je rafraîchis la page, vous pouvez voir que About Jon est maintenant centré sur notre site Web. Vous pouvez appliquer text-align : à gauche ou à droite ou justifié aussi. Donc, disons que nous voulions des choses sur la droite. Si nous passons juste à droite, maintenant vous pouvez voir notre texte est sur la droite. Je vais remettre ça au centre, et je vais aussi faire tout notre h2 centré aussi bien. Donc, maintenant, tous nos titres que nous avons jusqu'à présent apparaîtront centrés sur la page. Donc, en sauvegardant cela, et maintenant vous pouvez voir nos h1 et nos h2 sont centrés dans la page. Donc, c'est text-align. Nous pouvons également avoir une propriété appelée text-decoration. L' utilisation la plus courante de texte-décoration est de souligner notre texte. Donc, afin d'appliquer texte-décoration, c'est text-décoration, puis dans ce cas, nous allons dire souligné pour notre h1, et revenir en arrière et voir à quoi cela ressemble dans le navigateur. Je vois que notre rubrique a un soulignement. Il y a d'autres valeurs, dont certaines sont honnêtement un peu plus collantes que d'autres pour celui-ci, comme d'autres utilisent notre Inspecteur ici pour vous en montrer quelques-unes. Nous avons d'autres choix tels que overline pour la ligne au-dessus de notre texte, ou nous avons line-through, et cela fournit du texte biffé. Donc, si jamais vous avez besoin de ligne, de surligner ou de souligner, c'est ainsi que vous feriez cela. Dans ce cas, revenons à souligner cela dans notre Inspecteur ici afin que nous puissions voir à quoi cela ressemblera réellement. C' est une autre propriété que j'aime. Donc, je vais aller de l'avant et le copier sur le h2 aussi. Nous avons également une propriété text-indent. Donc, disons que nous voulions utiliser text-indent pour indenter le début de tous nos paragraphes. On pourrait faire ça. Donc, dans ce cas, je dirai texte-retrait, puis une valeur telle que 20 pixels. Enregistrez cela, actualisez, et maintenant vous pouvez voir que mon texte de paragraphe est mis en retrait de 20 pixels. N' oubliez pas que cela s'applique également à ma copie de pied de page de paragraphe. Le dernier que nous allons regarder est text-transform. La transformation de texte nous permet de faire des choses comme faire nos lettres majuscules. Donc, nous pouvons dire text-transform : majuscules. Sauvegardez ça. Maintenant, quand je rafraîchis, notre h1 est tout en majuscules. autres valeurs que nous avons pour cela sont des minuscules, qui changeront tout notre texte en minuscules, peu importe comment il est tapé dans notre HTML, et nous avons également majuscule, qui mettra en majuscule la première lettre, ce qui s'est passé pour être la façon dont nous l'avons écrit dans notre HTML de toute façon. Donc, vous ne verrez aucune différence là-bas. Donc, il y a quelques regards sur d'autres choses que nous pouvons faire avec notre texte et comment nous pouvons les contrôler sur notre page. Regardons quelques choses avancées dans nos prochaines leçons, comme l'espacement des lettres et la hauteur des lignes. 12. Contrôle de texte avancé: Jetons un coup d'oeil à notre texte de paragraphe et faisons quelques ajustements ici. abord, nous allons nous débarrasser de cette audacieuse, c'est un peu intense et nous n'avons pas vraiment besoin de cela pour la copie corporelle sur la page. Donc, n'oubliez pas que nous pouvons le faire soit en changeant ceci en font-weight normal, mais par défaut, notre texte de paragraphe était normal, donc nous n'en aurons pas besoin. Donc, nous pouvons simplement supprimer cette règle complètement et maintenant vous pouvez voir que nous sommes de retour à la Géorgie texte de poids normal. Cependant, je trouve que c'est un peu difficile à lire entre les lignes et j'aimerais séparer cela un peu plus. J' aimerais ajouter un peu d'air à ça. Souvent, vous avez peut-être entendu cela appelé laisser, en CSS plutôt que d'avoir une propriété de location, nous l'appelons une propriété de hauteur de ligne. Donc, si je passe à nos paragraphes, je peux dire hauteur de ligne et ensuite je peux le définir à la valeur que je cherche. Donc, en ce moment, notre taille de police est de 20 pixels, je pourrais la définir à une valeur de pixel telle que 40 pixels. Si je reviens ici et me rafraîchir, vous pouvez voir que la hauteur de la ligne a grandement sauté vers le haut ce qui est assez cool mais peut-être un peu trop. Nous pouvons également faire des valeurs sans unité pour la hauteur de ligne. Donc, si nous le remettons à un et nous rafraîchissons, vous pouvez voir que nous sommes de retour à être trop serrés. Je peux le définir à une valeur telle que 1.5 et maintenant vous pouvez voir que c'est beaucoup plus facile sur les yeux, me rend plus facile de numériser cela et de pouvoir lire ces paragraphes sur notre page. Donc, j'aime 1.5, peut-être que c'est un peu, peut-être que je veux aller à 1.4, c'est plutôt bon. Je peux lire cela assez facilement et c'est vraiment bon surtout si nous avons beaucoup de corps de texte. Donc, je vais laisser ma hauteur de ligne pour l'instant comme 1.4. Mais n'hésitez pas à jouer avec la valeur de hauteur de ligne et à la modifier pour qu'elle corresponde davantage à la façon dont vous aimeriez que vos lecteurs voient votre texte. Nous avons quelques autres choses que nous pouvons modifier quand il s'agit de notre texte. Si vous vous souvenez, nous avons fait notre A propos de John en majuscules. Lorsque vous faites des choses en majuscules parfois, cela peut être un peu serré et difficile à lire, alors ce que nous pouvons faire, c'est que nous pouvons ajuster les valeurs de crénage de ceci, et le crénage est l'espace entre chaque lettre. Nous ne l'appelons pas crénage en CSS, au lieu de cela, nous l'appelons l'espacement des lettres. Donc, si je reviens à mon h1, je vais appliquer une propriété d'espacement des lettres et ensuite je peux utiliser différentes unités de mesure. Dans ce cas, je vais dire un pixel et ça va appliquer un pixel d'espacement entre chacune de nos lettres. Donc, maintenant rafraîchissant, vous pouvez voir qu'il espace un peu ce qui est un peu plus agréable pour notre cap. La dernière propriété CSS de texte d'effet que nous allons examiner aujourd'hui est l'espacement des mots et tout comme cela sonne, cela affectera l'espace entre nos mots. Appliquons-le à nos paragraphes parce que nous avons quelques mots ici. Donc, l'espacement des mots et puis juste pour que nous puissions voir les choses en action, disons 15 pixels. Eh bien, c'est beaucoup d'espacement mais selon ce que vous essayez de faire peut-être que c'est dans votre ruelle, vous pourriez devenir encore plus fou bien sûr contrairement à 115, wow ce n'est pas facile à lire du tout mais peut-être que vous allez pour certains installation du site web art. Donc, prenez simplement note que la propriété est disponible pour vous, je vais supprimer l'espacement des mots parce que je veux que le navigateur le rend comme il le fait par défaut, ce qui est assez facile à lire, mais c'est ainsi que vous ajouteriez l'espacement des mots à votre sites Web. Donc, nous regardons bien ici, vous remarquerez qu'une chose qui n'a pas été affectée du tout jusqu'à présent, est notre liste d'articles ici. Donc, dans la leçon suivante, regardons quelques-unes des choses que nous pouvons faire pour modifier les propriétés de notre liste. 13. Propriétés des listes: Donc, en regardant nos articles de liste, nous voulons leur donner un peu d'amour aussi. ce moment, ils ont juste le style par défaut du navigateur. On peut vérifier tout ce qui leur est appliqué jusqu'à présent. Donc, vous pouvez voir ici qu'ils ont la couleur du corps mais c'est à peu près tout. Donc, modifions cela parce que nous voulons qu'ils obtiennent un peu d'amour aussi, et tout comme nous sommes capables de sélectionner nos paragraphes, notre corps et nos en-têtes, nous pouvons faire la même chose avec nos éléments de liste. Donc, en regardant cela, nos services professionnels sont un ul marqué avec des li. Donc, ce que nous pouvons faire est d'utiliser l'élément li comme notre sélecteur et de les styler en conséquence. Je vais aller demander la fin de notre page. Je vais juste faire quelques retours supplémentaires juste pour que vous puissiez voir ce que je tape facilement ici, et ici je vais écrire li, et puis je vais écrire la couleur, et nous allons modifier un peu la couleur. Faisons les 666 qui est un gris moyen. Donc, il y a notre première liste change, et vous pouvez remarquer que le texte et la puce que nous voyons ici ajustés pour être cette couleur grise. Vous remarquerez également que les puces notre liste de navigation non ordonnée ont également changé en gris car c'est aussi un élément li. Changons aussi la police ici. Définissons la famille de polices sur Georgia, et définissons la taille de la police sur 16 pixels. Taille de la police 16 pixels. Nous sauverons cela, et il y a notre liste mise à jour. Mais qu'en est-il de ces balles ? Et si je n'aime pas vraiment ces articles ? Eh bien, nous pouvons également changer cela avec notre propriété de type liste. Donc, pour changer les puces, nous allons dire list-style, et ensuite nous pouvons le passer à une variété de choix différents. Donc, par défaut, c'est un disque. Nous pouvons également le changer en cercle, et maintenant vous pouvez voir sont cercle vide. Il y a aussi des choix de choses comme le carré, et maintenant nous avons des balles carrées. Si vous ne voulez pas de balles, vous pouvez l'avoir aussi, et pour ce faire, vous en direz aucune, et maintenant nous n'avons plus de balles. Mais pour l'instant, revenons au carré, parce que c'est branché d'être carré et le monde de Jon Arbuckle et dans tous les nôtres. Donc, maintenant, nous avons des éléments de liste au carré. Si vous utilisez une liste ordonnée, vous pouvez également modifier la puce pour cela. Donc, juste pour que je puisse vous montrer à quoi ça ressemble, temporairement, je vais en faire une liste ordonnée. Donc, pour ce faire, on passe juste à un ol, je reviens ici et je me rafraîchis. Tout devrait ressembler à l'heure actuelle, car au lieu de coiffer l'ul, nous stylisons les li et les li sont également dans les ol. Mais maintenant, passons. Donc, rappelez-vous que si j'ai enlevé cela par défaut, les listes ordonnées ont des numéros. Donc, en ce moment, nous avons un type de liste décimal qui est ce que les choses sont par défaut avec une liste ordonnée, mais nous pourrions aussi dire quelque chose comme décimale leading-zero, et si nous revenons ici, vous pouvez voir qui ajoute un zéro avant notre nous avons également d'autres choix pour la liste ordonnée, tels que l'alpha inférieure, et maintenant notre liste ordonnée est à puces par ordre alphabétique. Nous pourrions aussi dire « bas-romain », et maintenant nous avons des chiffres romains inférieurs pour nos listes. Donc, vous pouvez voir qu'il y a beaucoup d'options pour cela. Je vais remettre cela à carré, et puis je vais aussi remettre ma page à propos à une liste non ordonnée parce que dans ce cas, nous tapons une liste non ordonnée, et sauvegardez cela. Donc, c'est un peu plus sur les listes, et dans la leçon suivante, regardons les images d'arrière-plan et comment nous pouvons commencer obtenir plus d'images sur notre page en utilisant CSS et pas seulement la balise image. 14. image d'arrière-plan: Notre site semble bien avec ce fond blanc cassé , mais disons que nous voulons devenir un peu plus intéressant. Donnons plus d'images sur notre page. Peut-être voulons-nous une image pour notre arrière-plan de notre site Web. Donc, obtenons un de ceux-ci et nous pouvons lier à des images de la même façon que nous ferions sur HTML avec un chemin absolu ou un chemin relatif. Disons que je veux mettre en valeur certains travaux de John et que je vais mettre en valeur cette image et je la veux en arrière-plan de notre page. Eh bien, je peux voir l'image et je peux saisir le lien d' ici et puis ajoutons à notre site web avec CSS. Jusqu' à présent, nous venons d'appliquer une propriété d'arrière-plan et c'est notre couleur d'arrière-plan, mais nous avons d'autres valeurs et propriétés que nous pouvons ajuster pour notre arrière-plan aussi, commençant par l'image d'arrière-plan. Pour écrire une image de fond, nous allons écrire une image de trait d'union d'arrière-plan, puis à partir de là, nous allons devoir dire au CSS où se trouve cette image, et nous le faisons en écrivant URL puis entre parenthèses, nous aura l'URL à laquelle nous essayons de lier. Cela peut être local ou un chemin relatif ou, dans ce cas, nous allons lier à un chemin absolu, un fichier image qui existe ailleurs sur Internet. guillemets, je vais coller ce Wikimedia Garfield and Friends PNG, je vais enregistrer le fichier, puis jetons un coup d'oeil dans le navigateur. Me voici, et je vais rafraîchir la page et wow. Je pensais que nous étions occupés avant, mais maintenant les choses sont allées à une fête sérieuse. Comme vous pouvez le voir, nous avons l'image ici et l'image d'arrière-plan se répète dans tout notre site. Peu importe la taille ou la taille de cette image, nous pouvons voir que l'image d'arrière-plan se trouve sur notre site Web. Nous sommes en mesure d'ajuster la façon dont cela se répète avec une autre propriété CSS, la propriété de répétition d'arrière-plan. Répétition de trait d'union d'arrière-plan et puis les valeurs que nous avons sont celles par défaut qui se répètent, nous pouvons certainement dire que c'est ce qui se passe maintenant. Une autre chose que nous avons est de ne pas répéter. Donc, si nous passons à aucune répétition, revenons et actualisons, vous pouvez voir que l'image est juste sur la page en arrière-plan une fois. Parce qu'il est dans l'image de fond, tout le texte sera assis au-dessus de cela. Les arrière-plans par défaut commencent également à la position gauche, une position d'arrière-plan de 0,0 allant des valeurs de gauche et de haut niveau. Nous pouvons également ajuster cela en utilisant notre propriété de position d'arrière-plan. Donc, la position de trait d'union d'arrière-plan et puis actuellement, c'est 0,0, même chose que dire zéro pixels, zéro pixels. Nous pouvons changer cela de sorte que c'est quelque chose comme 20 pixels de la gauche et 100 pixels du haut et maintenant vous pouvez voir qu'il est déplacé de la gauche 20 et du haut 100. Nous pouvons également utiliser des valeurs de mots-clés pour cela afin que nous puissions dire quelque chose comme centre, centre. Maintenant, vous verrez que l'image est centrée verticalement et horizontalement en fonction de la largeur et de la hauteur de notre page. Nous pourrions aussi dire quelque chose comme centre, haut et maintenant vous pouvez voir qu'il est centré en haut de notre page. Nous pouvons mélanger des valeurs, donc quelque chose comme le centre et 30 pixels et qui sera centré à gauche et à droite, mais ensuite 30 pixels à partir du haut. Différentes valeurs de répétition que nous avons sont sans répétition, répétez le trait d'union X, puis il se répète le long de l'axe X, et puis nous avons un trait d'union Y qui, comme vous pouvez le deviner, se répète le long de l'axe Y comme ça à travers le haut de notre page. C' est assez occupé et un peu difficile à lire, alors peut-être que nous voulons un autre type d'image de fond. Peut-être que nous voulons juste une image de fond subtile, peut-être un motif de bruit. Nous pourrions le faire, c'est un programme comme Photoshop dans lequel je viens d'appliquer une légère pixelisation de bruit à une couleur de fond, je peux alors enregistrer ce fichier. Donc, je vais enregistrer ceci en tant que JPG et je peux baisser la qualité certains et cela. Je vais juste enregistrer cela directement dans mon dossier images et je vais l'appeler bg-noise.jpg. BG juste pour moi, me fait savoir que c'est une image de fond et c'est un motif de bruit. Je vais enregistrer cela dans notre dossier de site John Arbuckle, à l'intérieur de notre dossier d'images. Maintenant, dans notre CSS, il y a un post lien vers cette image absolue qui est bonne parce que nous ne devrions pas vraiment être lié au contenu d'autres personnes à cause de droits d'auteur et/ou parce qu'ils pourraient la supprimer comme nous l'avons aucun contrôle sur leur lien vers Wikimedia afin qu'ils puissent toujours modifier cette extension de fichier ou la supprimer. Donc, nous allons nous assurer que nous hébergeons nos propres fichiers. Pour faire une URL d'image d'arrière-plan, nous voulons essentiellement faire la même chose que si nous liions à une image dans notre attribut source d'image. Actuellement, en ce moment, nous sommes dans styles.css. Nous allons devoir aller dans notre dossier img puis charger le bg-noise.jpg. Nous devons aller dans le dossier img et ensuite, pour aller dans un dossier, nous taperons notre /bg-noise.jpg. Quand je sauvegarde cela et revenir à Chrome et rafraîchir bien, afin que nous puissions voir que notre image Garfield a disparu et il est vraiment difficile de voir ici, mais vous pouvez voir, si vous regardez de très près, qu'au milieu de la page, il est ce bruit de fond qui se répète Y. Changeons cela parce que nous ne voulons pas qu'il se contente de répéter Y. Parce que c'est un motif de fond, nous voulons répéter les deux façons. Donc, je vais sauver ça et répéter. Maintenant, vous pouvez voir que nous avons un léger motif de bruit à l'arrière de notre site Web. Vous pouvez utiliser toutes sortes de motifs comme celui-ci, diagonales, rayures, cercles, quel que soit votre motif de fond préféré à ajouter. Si vous aimez les images d'arrière-plan bruyantes, conservez cela aussi. Mais c'est ainsi que nous allons ajouter un motif de bruit ou toute sorte d'image d'arrière-plan à nos pages. Jusqu' à présent, nous avons vraiment regardé notre page à propos, voyons comment notre CSS affecte le reste de nos pages et voir comment nous pouvons apporter des ajustements à l'avenir pour des éléments spécifiques. C' est à venir dans la prochaine leçon. 15. Ajouter des fichiers CSS sur l'ensemble de notre site: Jusqu' à présent, nous n'avons vraiment regardé que la façon dont les styles ont influé sur notre page à propos. Mais rappelez-vous que nous appliquons nos feuilles de style en cascade à l'échelle du site. Nous devons donc voir ce qu'il fait à nos autres pages. Voici donc notre page d'accueil, et nous pouvons voir que les styles sont venus ici aussi avec les retraits de texte, le centrage, les soulignements sur nos h2, tout cela affecte notre contenu à l'échelle du site. Voici notre page de travail, et enfin notre page de contact. Donc, j'ai commencé à examiner cela peut-être nous nous rendons compte que nous devons faire quelques ajustements globaux. Peut-être que le centrage ne fonctionne pas, peut-être que le retrait de texte ne fonctionne pas. Peut-être que nous voulons faire quelques ajustements et en fait centrer notre cap. Peut-être que nous voulons centrer cette image de logo. Ce ne serait pas bien si nous pouvions nous débarrasser de ces balles en plus de notre travail ou de notre contact, ou au moins les faire apparaître l'une à côté de l'autre au lieu de cette liste ? On peut faire ces choses. Une façon de le faire est d'appliquer notre texte aligné globalement sur l'ensemble de notre site. Donc, au lieu de simplement l'appliquer à notre h1, si nous appliquons notre centre text-align à notre balise body ? Donc, le trait d'union de texte s'alignent, puis il aide à aligner correctement l'orthographe, puis au centre. Maintenant, vous pouvez voir quand je fais que tout sur cette page est centré, rafraîchissant les autres pages, vous verrez aussi cela se produire, et là il est là, et là. Vous pouvez voir que cela a l'air un peu drôle autour de certaines choses sur les autres, alors peut-être que nous ne voulons pas faire ce site à l'échelle. Vous remarquerez également que lorsque nous centrons des choses comme nos articles de liste, certaines puces sont laissées tout le long de la gauche, et cela semble un peu farfelu. Il semble que ce dont nous avons besoin, c'est un peu plus de contrôle sur les choses. Bien sûr, on peut aller et dire d'accord que Li va les aligner à gauche, et on peut le faire juste en écrasant. Donc, nous disons le texte aligner à gauche, puis ceux qui remontent, mais ce n'est pas vraiment une solution à cela non plus. Ce que nous devons faire est de contrôler des choses individuelles comme la liste de navigation séparément des autres listes de notre page, ou le titre et le logo d'en-tête différemment de nos autres titres. Nous allons pouvoir le faire en utilisant quelques autres sélecteurs CSS dont nous n'avons pas encore parlé, sélecteurs d' ID, des sélecteurs de classes et des sélecteurs de descendants. Alors, jetons un coup d'oeil à la façon dont nous pouvons réparer notre site pour avoir un peu plus d'aspects uniques tout au long de celui-ci, dans la prochaine leçon. 16. Autres sélecteurs CSS : Donc, au lieu d'appliquer ce centre d'alignement de texte globalement, nous voulons l'appliquer à notre image de logo. Donc, revenons à notre CSS et supprimez le centre d'alignement du texte. Au lieu de cela, nous le voulons juste sur notre image d'en-tête. Donc, jusqu'à présent, nous avons juste regardé les sélecteurs d'éléments. Cela signifie que si nous voulons centrer cela, nous avons essentiellement une image et un A pour travailler. Mais nous allons en vouloir plus que ça. Nous allons vouloir cibler juste ce lien ou juste cette image. L' autre chose que nous allons vouloir faire pour l'alignement du texte, est envelopper avec jusqu'à présent est cet élément en ligne. Rappelez-vous que nous avons parlé à la fois des éléments en ligne et bloc dans notre classe html et les liens d'ancrage et les balises d'image sont des éléments en ligne, ce qui signifie qu'ils apparaîtront sur la même ligne, par opposition aux éléments de bloc qui feront un retour de ligne dure. Afin d'aligner le texte des choses centrées, nous devons appliquer à un élément de niveau bloc. Donc, nous allons aller de l'avant et nous allons imbriquer cette ancre dans une balise de paragraphe. Donc, nous allons ajouter du html. Donc, P et puis votre fermeture P. Vous trouverez que lors de l'ajout de CSS à une page, il est parfois nécessaire de revenir en arrière et d'ajouter éléments de conteneur sur votre html afin de styliser les choses correctement. Nous essayons d'éviter cela autant que possible, mais parfois vous allez avoir besoin de choses comme ça. Ensuite, nous avons ce paragraphe qui tient maintenant notre ancre et notre image. En revenant à Chrome, rappelez-vous qu'on a enlevé les choses. Donc, nous n'avons plus d'alignement de texte sur cette zone, nous avons juste un paragraphe qui l'entoure. Donc, ce que nous voulons faire est fondamentalement de centrer texte-aligner ce paragraphe. Nous ne voulons pas le faire pour tous les paragraphes , car chaque paragraphe de la page sera aligné au centre. Ce que nous pouvons faire, c'est utiliser une classe. Un sélecteur de classe nous permet de cibler un ou plusieurs éléments spécifiques avec un attribut de classe dessus. Pour appliquer une classe, il suffit d'ajouter un autre attribut. Dans ce cas, nous dirons la classe égale, puis le nom de ce que nous essayons de faire. Dans ce cas, nous allons dire que la classe est égale au logo. Nous voulons nommer des choses, des choses avec un sens sémantique. Donc, des choses qui ont du sens à ce que nous essayons de faire. Ce paragraphe contient notre logo, il est donc logique pour nous d'appeler cela une classe de logo, par opposition à une classe de, comme, visage d' éléphant, qui n'aurait rien à voir avec ce que nous faisons et serait juste pour vous, vos coéquipiers, tous ceux qui ont trébuché sur tout ça. Alors, allons avec quelque chose qui a un sens pour ça. Donc, quelque chose comme la classe est égal au logo. Maintenant, dans notre feuille de style, nous pouvons appliquer des styles à cette classe. Donc, ce que nous pouvons dire est .logo, parce que c'est comme ça que nous faisons une classe. Alors, comme nous le ferions n'importe quel autre sélecteur, nos accolades, et à l'intérieur de cela, nous allons appliquer notre déclaration. Donc, text-aligner le centre. Donc, tout ce qui a une classe de logo sera text-align centré. Quand je retourne en arrière et que je clique sur Actualiser, rien ne s'est passé. Rien ne s'est passé parce que je n'ai pas enregistré ma page de contact mise à jour. Donc, laissez-moi m'assurer que je garde ça, et je l'ai reconnu parce que le cercle était là. Je reviens à notre contact, je clique sur rafraîchir, et maintenant l'image est centrée parce que notre paragraphe avec la classe de logo a le centre d'alignement de texte appliqué à elle. Vous pouvez également appliquer la classe de logo à quelque chose d'autre, comme ce paragraphe ici. Maintenant, ce paragraphe sera centré car il a également une classe de logo. De même, les sélecteurs de classe sont des sélecteurs d'ID. Les ID sont très similaires aux classes en ce sens que nous disons que l'ID est égal à un attribut avec le nom de celui-ci, tout comme si vous vouliez nommer quelque chose ID égal au logo. Deux des différences sont au lieu de faire .syntax, pour dire que si une classe, nous utilisons un livre ou un hashtag pour dire que nous faisons un sélecteur d'ID. Vous ne pouvez avoir qu'un seul ID sur une page. Pour cette raison, cela peut être une sorte de limitation si vous décidez de réutiliser cela pour autre chose. J' ai tendance à utiliser des classes parce qu'elles sont plus réutilisables et plus faciles pour le traitement du navigateur. Mais, si vous voyez un ID sur la page ou si vous prenez en charge le code de quelqu'un d'autre et les identifiants de notification, il est important de savoir ce qu'ils font. Pour l'instant, cependant, nous allons nous en tenir à l'utilisation des classes. Appliquons d'autres classes. Donc, nous allons également centrer ces éléments de navigation. Nous pouvons le faire en leur appliquant une classe. Nous allons appliquer une classe de navigation ici, pour la navigation. Rappelez-vous, ils doivent aller dans des citations que j'ai juste fait mal, et j'ai été facilement capable de le repérer parce que ça ne changeait pas en jaune. Donc, classe égale nav citation, fin de citation. Nous avons maintenant une classe pour cibler cet UL spécifique afin que nous n'ayons pas à avoir les styles que nous voulons pour notre navigation sur d'autres listes plus générales et non ordonnées dans notre document. Donc, maintenant dans notre CSS, nous allons faire un autre sélecteur de classe, le sélecteur de navigation parce que c'est ce que nous venons de nommer nos éléments de navigation. Je suis allé avec nav au lieu de la navigation juste parce que c'était un peu plus court et plus facile à taper, mais toujours assez clair à quoi je faisais référence. Donc, ici encore, je peux dire text-align centre. Revenez sur le navigateur, actualisez, et cela ne fonctionne pas. Cela ne fonctionne pas parce que vous vous souvenez peut-être, j'ai spécifiquement écrit text-align à gauche sur nos LI. Nous voulons supprimer cela parce que tout a été remis à text-align à gauche maintenant. Nous allons examiner un peu la raison pour laquelle cela se produit dans la leçon suivante, mais jusque-là, changeons ceci en centre d'alignement du texte. Mais encore une fois, nous avons le problème avec les balles. Et si on enlève ces balles parce qu'on ne les veut pas, peut-être, sur notre navigation principale. Rappelez-vous, nous pouvons le faire avec notre style de liste. Donc, lister, style, tapez none, puis, et hors de notre navigation, nous avons un centre d'alignement de texte et un style de liste none. Je reviens ici. Encore une fois, nous avons rencontré le problème de rien n'a changé. C' est parce que j'ai en fait un carré de type d'élément de liste sur un élément LI, et le LI est plus proche de l'UL de notre texte réel. Donc, nous allons devoir remplacer ça, aussi. façon dont nous faisons cela est en utilisant quelque chose appelé un sélecteur de descendant. Un sélecteur descendant cible un élément à l'intérieur d'un autre élément. Donc, nous pourrions dire quelque chose comme toutes les ancres à l'intérieur des balises P et le cibler en disant P, espace, A dans notre CSS. Cela ferait de toutes les ancres à l'intérieur de mes balises de paragraphe la couleur rouge. Vous le ciblez avec un espace entre eux. Si vous écrivez P et A sans espace, vous obtiendrez PA, puis le CSS rechercherait un élément PA, ce qui n'est pas une chose. Donc, essentiellement, il dit que toutes les ancres à l'intérieur d'un paragraphe, appliquons le style à. Eh bien, nous pouvons également mélanger des classes et des éléments pour nos sélecteurs descendants, donc ce que nous pouvons dire dans ce cas, c' est n'importe quel LI dans nav, et puis au lieu de mettre ce type de liste aucun ici, nous voulons déplacer ce ici. Donc, maintenant nous avons trouvé des LI dans une classe nav, puis supprimez le style de liste. Donc, maintenant quand nous retournerons ici, vous verrez que ces balles ont disparu parce que nous avons spécifiquement remplacé le style LI avec le Nav LI. C' est ainsi que vous utiliseriez un sélecteur de descendant. Donc, faisons une autre chose avec notre élément de navigation. Tous nos liens apparaissent comme des éléments de niveau bloc car un élément de liste dans LI est un niveau de bloc. Cela signifie que nous avons le retour difficile l'un après l'autre. Et si nous voulons qu'ils apparaissent l'un à côté de l'autre ? Eh bien, tout comme la façon dont nous pouvons dire que les choses sont blocs ou en ligne basés sur les paramètres par défaut du navigateur, nous pouvons les remplacer également. Donc, en ce moment, par défaut, nos articles LI sont tous bloc d'affichage. Display est une autre propriété CSS et l'une d'elles que nous pouvons remplacer. Même si, tout comme notre liste avait des puces par défaut, nous pouvons les remplacer, nous pouvons également remplacer l'affichage. Donc, au lieu de bloc d'affichage, faisons-les afficher en ligne. Maintenant, quand je reviens au navigateur et que je clique sur rafraichir, ils s'affichent en ligne comme nos balises m, nos balises d'ancrage, ou nos balises d'image. Donc, c'est une autre chose que vous pouvez remplacer avec votre CSS. Donc, changer les choses en ligne ou en bloc est quelque chose d'autre que nous pouvons contrôler avec notre CSS. Un autre sélecteur que nous avons est le sélecteur universel. Le sélecteur universel sélectionne tout sur la page. Pour ce faire, nous utilisons un astérisque. L' astérisque dit appliquer ce style à tout. Donc, si on voulait faire de la décoration de texte sur tout, on utiliserait le sélecteur universel. Nous rafraîchissons cela, et puis, comme nous l'avons demandé, pour le meilleur ou pour le pire, il y a notre décoration de texte sur ligne sur tous nos éléments. Donc, c'est comme ça que vous utiliseriez le sélecteur universel. Nous avons vu que nous avons rencontré des choses qui peuvent être inattendues. Des choses avec héritage et en cascade. Dans la leçon suivante, regardons un peu plus sur les feuilles de style en cascade et en cascade et voyons comment cela fonctionne. 17. La Cascade: Donc, dans notre dernière leçon, nous avons vu comment nous n'avons pas encore utilisé les sélecteurs de descendants afin d'être plus précis avec nos styles pour nous assurer que nos articles de liste obtenaient les styles que nous voulions. C' est ce qu'on appelle la spécificité ainsi que l'héritage et la cascade. Ce sont toutes les façons dont lorsque nous utilisons CSS, affecteront les styles appliqués à nos pages. Alors, jetons un coup d'oeil à certaines des choses qui peuvent arriver. Débarrassez-vous de cette superposition que nous avons sur notre sélecteur universel, c'est un peu bizarre. Ne nous en servons pas du tout. Alors au revoir à ça. Maintenant, parlons un peu de la façon dont les choses sont appliquées à notre page. En ce moment, notre deux-points est appliqué à notre balise corporelle, et c'est en cascade vers le reste des éléments. Des choses comme nos paragraphes sont imbriquées dans notre corps ce qui signifie qu'il hérite du style du corps. Tout ce qui est imbriqué dans un autre élément prendra ces styles pour des choses comme la couleur. Donc, puisque nous disons que la couleur du corps est 27211f, le paragraphe obtient également cette couleur. C' est ce qu'on appelle l'héritage. Ce que nous allons faire si nous voulions changer la couleur du paragraphe pour être autre chose, c'est que nous devrions utiliser la spécificité pour dire qu'un paragraphe devrait être une couleur différente. Donc, en ce moment, il y a cette couleur noire foncée. Rafraîchissons ça, débarrassez-vous de ce gris. Mais que se passe-t-il si nous voulions que nos paragraphes soient verts ? Eh bien, si nous mettons la couleur verte, ce qui se passera, c'est que les paragraphes seront verts. Regardons notre inspecteur et voyons ce qui se passe. Essentiellement, lorsque la page se charge, l'ordinateur passe très vite et il commence en haut de notre document CSS. Donc, il lit la première règle, qui est appliquée au corps et dit « Ok, faisons tout la couleur noire. » Est-ce que c'est vraiment rapide ? Nous ne pouvons même pas voir ce qui se passe au moment où il va à notre balise de paragraphe et dit « Ok, attendez, maintenant il est dit que tous les paragraphes sont verts. » Donc, il passe de la couleur du noir à cette couleur de vert écrasant la balise body. On peut voir dans notre inspecteur où il est écrit « P color green ». Si vous faites défiler vers le bas, nous voyons en fait la couleur du corps gris et il est aligné. Il est aligné parce qu'il est écrasé par la spécificité de la couleur verte qui est appliquée sur nos balises de paragraphe. Ainsi, il peut vous montrer comment la spécificité affecte les styles qui sont appliqués à notre texte. C' est vraiment important si vous voulez savoir ce qui se passe. Peut-être que tu t'attends à ce que ça soit noir, mais ça finit par être vert. Cet inspecteur nous permet de voir rapidement comment les styles sont réellement appliqués. Que se passe-t-il si nous changeons notre paragraphe et notre corps. Donc, en ce moment, quand on a parlé de cette cascade, on a dit qu'elle allait de haut en bas. Donc, d'abord il a dit, « tout rendre noir », puis il a dit, « rendre tous les paragraphes verts ». Si nous avons tendance à dire cela, pensez-vous que les paragraphes seront verts ou noirs ? Retournons et découvrons. Vous pouvez voir qu'ils sont encore verts. Il y a quelques choses en jeu ici. D' abord, ça les a rendus noirs parce que c'est sur l'étiquette du corps. Mais en plus d'aller de haut en bas, l'autre chose qui est important quand il s'agit de CSS, est à quel point l'élément est proche ou spécifique que nous ciblons. Ainsi, comme le corps est le parent du paragraphe et la balise de paragraphe définie en vert est plus proche du texte réel, le style qui sera lu sera celui qui est appliqué plus près des éléments. Dans ce cas, le style de paragraphe vert est plus proche du texte de la page que du corps. Donc, une autre chose sur la spécificité est que les styles appliqués à son élément conteneur le plus proche sera celui qui sera appliqué au texte. C' est certainement un peu délicat. Il y a quelques articles que je vais mettre dans les ressources pour le suivi. Parfois, honnêtement, jouer avec cela et voir comment l'ordre affectera votre code, est l'une des meilleures choses que vous pouvez faire. moment, nous voyons que nous avons toujours cette classe de logo p appliquée à notre texte ici, et cela devient vert bien sûr parce que nos paragraphes sont verts. Que croyez-vous qu'il se passera si nous disons que le logo doit être rouge ? Eh bien, découvrons. Couleur rouge et maintenant, lorsque nous rafraîchissons, vous pouvez voir que ce spécifique sera écrasé par du rouge. Donc, vous pouvez voir qu'il a essayé d'obtenir la couleur verte, mais le logo sombre avait plus de puissance inhérente que la balise de paragraphe. Donc, d'abord, c'était ce noir puis c'était vert. Mais la classe sombre a eu plus d'impact sur le style. Vous pouvez voir dans cet article pratique, nous parlons de la plus grande valeur de spécificité et la moindre valeur de spécificité. L' attribut Style, puis ID, puis une classe, puis un élément, est comment cela fonctionne. Vous pouvez voir qu'il y a une sorte de système de points ici. Donc, les choses ont un style en ligne ou des ID ou des classes, comment cela sera déterminé quel style il faudra. Je recommande fortement de lire cet article et aussi juste jouer à nouveau et de voir comment les différents styles, classes et ordre affecteront les éléments de votre page. Je vous promets que plus vous travaillez là-dessus, plus vous vous habituerez à cela et tout commencera à avoir du sens. Regardons comment nous pouvons regrouper les sélecteurs dans notre prochaine leçon. 18. Sélecteurs de groupes: Donc, nous voulons toujours écrire des CSS efficaces et du code en général. Revenons en arrière et nettoyons un peu notre CSS, et assurez-vous que toutes nos pages sont à la recherche de ce que nous voulons. Donc, rappelez-vous que nous avons appliqué le paragraphe avec une classe de logo autour de notre logo, mais nous l'avons tous fait sur notre page de contact. Donc, revenons en arrière et mettons à jour notre HTML pour nous assurer que toutes nos pages ont le même texte. Je vais l'attraper sur la page de contact, obtenir une copie, et puis je vais juste mettre à jour toute cette ligne. Enregistrez, enregistrez et enregistrez. C' est un peu fastidieux, mais nous savons exactement ce que nous devons ajouter, alors assurez-vous de mettre à jour ces quatre pages. Nous nous souvenons aussi, nous sommes en train de jeter un oeil à la classe du logo. Nous ne voulons pas vraiment que la classe de logo apparaisse là. Alors, débarrassons-nous de ça. Donc, supprimons cette classe de logo. On y va. Il nous reste aussi ces paragraphes verts, ce que nous ne voulons pas vraiment. Donc, nous avons pris un peu regardé l'héritage, allons nous débarrasser de ce rouge, et débarrassons du vert, qui est ici. D' accord. Donc, les choses ont l'air un peu mieux que ce qu'elles étaient. Donc, vous remarquerez que je me suis souvenu de mettre à jour l'en-tête mais nous avons également mis à jour la navigation, non ? Je n'ai pas fait cette mise à jour quand j'ai fait ce changement. Donc, nous devons nous assurer que nous ajoutons la classe UL de navigation à tous nos ULS. Vous remarquerez que beaucoup de HTML et de CSS peuvent sembler un peu fastidieux, mais une fois que vous aurez compris ce que vous faites un peu plus, vous serez en mesure de repérer ces obstacles qui surgissent beaucoup. Des choses comme le dépannage, et des choses comme l'oubli de copier des choses deviendront beaucoup plus naturelles. Donc, actuellement, vous remarquerez que nos H1 et nos H2 ont tous les deux un soulignement de décoration de texte. Ils sont également centrés sur la page. façon dont nous avons fait cela jusqu'à présent est en répétant les propriétés et les valeurs CSS. Nous avons répété des déclarations entre ici et ici. Donc, sur celui-ci, nous avions la couleur était à la fois de la même couleur. Ils partagent également le poids de la police normal, leur famille de polices, leur centre d'alignement de texte et leur soulignement de décoration de texte. Sûrement, il doit y avoir un moyen plus efficace d'écrire ceci. Sinon, je ne vous en parlerais probablement pas. Mais je le suis, disons oui. Si nous voulons appliquer les mêmes styles à deux éléments différents, que ce soit les ensembles d'un sélecteur d'élément, un sélecteur de classe, un sélecteur d'ID, tout cela nous pouvons le faire. Comment nous faisons cela avec une liste séparée par des virgules de sélecteurs. Donc, H1, H2 et puis accolades. Cela signifie que les H1 et H2 recevront tous les deux tout ce que je mets ici. Dans ce cas, je pourrais supprimer couleur de ces deux et juste la liste à cette propriété là-haut. Je pourrais aussi supprimer la décoration de texte soulignée d' ici ainsi que d'ici et aussi la décoration de texte, la famille de polices et le poids de police sont tous répétés. Alors, laisse-moi fermer ça. Mets ça là. Débarrassez-vous du poids de la police, de la famille de polices et du text-align. Là, vous pouvez voir tout ce qui était appliqué à H2 en fait a été appliqué à notre H1. Donc, plus efficacement, j'aurais pu juste écrire ceci, mais je ne le savais pas jusqu'à ce que nous ayons passé cette expérience et peut-être que tous veulent remplacer quelque chose sur un H2 ici. Donc, laissons ça tel quel, sauvegardons et revenons et je peux voir que les choses ressemblent exactement parce que nous appliquons les mêmes styles d'une manière plus efficace. Nous pouvons aussi dire quelque chose comme fond couleur pourpre. Maintenant, vous pouvez voir que le violet est appliqué à nos deux H1 et H2 prouvant que cela fonctionne bien. Donc, disons que nous avons eu cela, disons que nous voulons aussi appliquer cela à nos H3. Nous pouvons simplement garder la liste de séparation des virgules, de sorte que tous nos en-têtes obtiennent au moins cette tuile de base. Ensuite, nous pouvons remplacer. Donc, disons que nous ne voulons pas que la couleur de fond du H2 soit violette. On peut dire qu'on veut qu'il soit jaune. Si nous sauvegardons cela, ce que le navigateur fera, nous allons passer et dire que nous allons rendre fond violet et puis nous rappeler la cascade. Donc, ça frappe d'abord, puis ça frappe ça. Donc, si je rafraîchis, c'est jaune. Si je passe à ce H2 sur le dessus, est-ce que ça va être violet ou jaune ? Ça va être violet. Écrire ceci est la même chose que d'écrire ceci. Il ignore toutes les autres virgules, donc c'est exactement ce que vous avez toujours voulu en tant que premier. La cascade va de haut en bas et il dit H2 violet d'abord, puis H2 jaune. C' est ainsi que cela fonctionne en termes de regroupement des sélecteurs. Vous pouvez l'utiliser là où vous trouvez plus efficace de pouvoir appliquer le même style à un groupe de sélecteurs. Débarrassez-vous de certains de ces mots-clés que nous avons ici parce que nous n'avons pas vraiment besoin de ceux qui nous enlisent les yeux. Décentrons aussi notre cap. Nos rubriques centrées peuvent être un peu distractions avec la plupart de nos technologies. Donc, retirons ça de notre titre général, et maintenant déplacez les choses vers la gauche. Débarrassez-vous également de cette transformation de texte sur notre H1. C' est un peu de crier dessus. Je ne pense pas qu'on ait vraiment besoin de crier sur John à qui que ce soit. C' est un peu plus sous contrôle. Donc, notre page A propos va bien maintenant. Moins criant, il est un peu plus facile de numériser et de lire avec tout ce qui reste aligné sur le CSS que nous avons fait jusqu'à présent. Notre page de contact semble assez bien et facile à lire. Voyons à quoi ressemble notre page d'accueil. Donc, ça a l'air bien. On peut peut-être faire quelques ajustements ici et là. Peut-être que nous voulons centrer notre rubrique sur notre page d'accueil, peut-être que nous voulons centrer notre image et H1 sur notre page d'accueil. Donc, jusqu'à présent, nous avons une classe pour faire ça. C' est notre classe de logo, sauf notre H1 et notre image de héros n'est pas vraiment un logo. Donc, si nous voulons réappliquer cette classe de logo à d'autres choses, appelons-le quelque chose un peu plus sémantique. Peut-être que nous pouvons nommer quelque chose comme des surlignements montrant que nous utilisons ce style pour mettre en évidence cette information. C' est plus logique parce que maintenant nous ne l'appliquons pas seulement à notre logo. Bien sûr, l'ordinateur va lire cela très bien, que vous l'appeliez ou non logo ou surligner. Mais ce sera plus facile pour nous, humains, de comprendre nos intentions quand nous rencontrerons quelque chose comme ça. Si vous remettez ceci à un client ou à un coéquipier, s'ils voient quelque chose comme la surbrillance, il leur sera plus logique pourquoi vous faites cela et quel guide de style que vous essayez de fournir en nommant quelque chose de cette façon. Donc, quand je retourne dans nos pages et je me souviens que nous avons supprimé la classe de logo. Donc, nous devons mettre à jour le surlignement. Nous allons le faire tout autour, les faits saillants est amusant mot à taper. Donc, c'est bien, mettez en surbrillance et maintenant appliquons aussi sur notre page Index. Pour H1, nous pouvons faire des classes égales surbrillance, puis ajoutons un autre de ces paragraphes de surbrillance autour de notre image. Donc, la classe P est égale surbrillance. Rappelez-vous, nous en aurons besoin pour centrer ceci, puis fermer cette balise de paragraphe. Maintenant, vous pouvez voir que le haut de notre page d'accueil a beaucoup plus d'éléments centrés et qu'il ressemble un peu plus à une zone de page d'accueil. À l'avance, CSS, bien sûr sera en mesure de faire plus d'ajustements à cela. Mais pour l'instant, nous sommes plutôt beaux avec nos styles de texte et nos styles d'alignement. Peut-être que nous voulons aussi changer les styles pour blockquote pour reconnaître que c'est quelque chose de différent. Faisons ça aussi. Donc, sous notre dernier élément, je vais garder nos cours un peu séparés à partir de maintenant. Je vais écrire blockquote et ici je vais changer le style de police en italique. Revenez ici et maintenant vous pouvez voir que notre style de police est italique, ce qui est quelque chose de commun que vous verrez quand il s'agit de guillemets. Mais nous ne voulons probablement pas que le Dr Liz Wilson soit une citation. Alors, changeons ça et nous pouvons le faire. C' est sur notre page d'accueil et nous sommes capables de cibler ce blockquote P, nous ne pouvons pas utiliser le sélecteur de phrases, non ? Parce que cela aura les deux Ps, nous pouvons appliquer une autre classe. Fondamentalement, nous disons qui est celui qui a dit cette citation. Alors, faisons-en juste une classe de qui. Retour à notre styles.CSS juste sous blockquote, écrivons qui et nous dirons font-style normal. C' est ainsi que vous remplacez cette cascade. Donc, maintenant, quand on se rafraîchit, ça revient à la normale. Peut-être que nous voulons aussi changer notre pied de page afin que vous puissiez dire qu'il s'agit d'une copie un peu différente de notre autre texte sur notre page. Peut-être va faire un gris plus clair et peut-être que nous allons le faire plus petit texte. Donc, actuellement, vous vous souviendrez que notre marqueur pour pied de page n'est qu'un paragraphe. Ajoutons une autre classe à cela. Donc, classe égale pied de page. Revenez à nos styles et nous dirons point pied de page et modifions la taille de la police à 12 pixels. Maintenant, il est beaucoup plus évident que c'est la copie de pied de page et non le contenu général du corps. Nous avons également cet appel à l'action pour Hire John pour vos besoins en portrait d'animaux de compagnie ! Donnons cette classe et c'est un appel à l'action. Donnons-lui une classe de CTA. Nous voulons qu'il apparaisse un peu différent, donc il attire une certaine attention visuelle. Donc, nous allons dire CTA et nous pourrions dire quelque chose comme le poids de police rempli et voir à quoi cela ressemble. Je peux voir qu'il est un peu plus évident que, encore une fois, c'est un type différent de contenu que nous avons sur notre page. Dans ce cas, un appel à l'action. Donc, enfin, nous avons la page Travail. Vous savez ce que je dis, je vois que vraiment le texte souligne ne fonctionne pas trop bien sur les H1. Donc, revenons en arrière et supprimons réellement le soulignement de la décoration de texte et voyons comment cela fonctionne. D'accord. Eh bien, peut-être qu'on en a besoin sur les autres ou peut-être qu'on devrait modifier ça. Ici, nous avons un H1 et H2 et un H3, vous pouvez voir que peut-être il devient un peu difficile de voir quelle la différence en termes de ce qu'est l'organisation de la tête. Alors, faisons quelques ajustements à cela. Changeons notre H3 pour être une couleur différente. Donnons-lui une couleur plus foncée comme le corps du texte que nous avons. Donc, nous n'utilisons pas vraiment était H2. Allons de l'avant et changeons ça en un H3. Vous n'avez pas à tout définir bien sûr. Nous allons dire que la couleur, ajoutons le signe de livre à l'avant sera cette couleur noire foncée à nouveau. Peut-être que nous voulons ajouter le soulignement à nos H2. Donc, en fait, récupérons ce H2. Donc, H2 text-décoration soulignent et ça a l'air correct. Peut-être qu'on veut changer nos H3 et qu'on veut qu'ils soient italiques. Peut-être qu'on veut qu'ils soient italiques et qu'on change la famille de polices. Faisons la famille de police ici, Georgia. Je veux dire venir là-bas et il y a nos H3. Vous pouvez voir que nos images apparaissent sur la même ligne que nos liens. C' est parce que rappelez-vous qu'ils sont à la fois des images et des liens sont des éléments en ligne. Nous pouvons ajuster cela de deux façons différentes. Premièrement, nous pourrions mettre la balise de lien dans un texte de paragraphe à l'intérieur de tout seul. Ou nous pouvons ajouter de la classe et au lieu de faire l'affichage en ligne, nous pouvons rendre un affichage noir. Dans ce cas, je veux revenir dans le H2 en fait un texte de paragraphe autour d'elle. Parce que nous pourrions soutenir qu'il pourrait s'agir d'un paragraphe. Alors, faisons ça. Nous allons dire paragraphe, paragraphe et je vais juste mettre en retrait pour que nous puissions voir cela un peu mieux et je vais faire la même chose ici pour Read the Lasagne Chronicles. Donc, P tag, P tag. Maintenant, quand je reviens et actualise, vous pouvez voir qu'ils obtiennent des styles de paragraphes et apparaissent sur la ligne suivante. Je peux aussi voir que peut-être nos H3 se perdent un peu avec la taille de la police, nous allons pomper un peu la taille de la police. Donc, nous pouvons faire la taille de la police. Faisons 22 pixels et voyons à quoi ça ressemble. C' est un peu mieux comparé à notre texte de paragraphe qui pourrait encore être un peu grand. Changons nos paragraphes à 18 pixels pour se détendre un peu. Revenons en arrière et voyons comment cela affecte le reste de notre site. N' oubliez pas que lorsque vous apportez une modification dans votre CSS, cela affectera tout autour. Faisons en sorte que les choses aient toujours l'air bien. Ils le font. Ils ont toujours l'air assez bien. Nous avons manqué un lien ici, alors assurez-vous d'ajouter un texte de paragraphe autour de cela. Donc, pour « Acheter ce CD » paragraphe et paragraphe. Quand je suis confus quant à savoir si je devrais ou non ajouter des paragraphes à quelque chose comme celui-ci, j' essaie d'imaginer s'il n'y avait pas de lien ici. Si nous tapions simplement « Acheter le CD », ce serait un texte de paragraphe, donc je peux aller de l'avant et insérer cela dans un paragraphe, pour sauver cela et revenir. Maintenant, notre page est plutôt bonne sauf pour une chose. Ces liens violets et bleus qui sont assez gnarly. Alors, dans la leçon suivante, regardez comment nous pouvons ajuster nos styles d'éléments de lien. 19. Liens et pseudo-classes: Enfin, nous allons vouloir regarder le style de nos liens. Donc, nous avons ces liens violet et bleu, violet pour les liens visités et bleu pour les liens non visités, et nous allons les rendre plus de notre style. Donc, un lien est comme n'importe quel autre sélecteur d'élément, ce qui signifie que nous pourrions le cibler en utilisant son nom d'éléments, qui est juste un A. Donc, gardons nos liens bleus. Il sera vraiment tout à fait évident pour tout le monde que c'est un lien en étant bleu, mais faisons en sorte qu'il ne soit pas aussi intensif un bleu. Donc, au lieu de cela, nous allons utiliser 42a795, et vous pouvez aller de l'avant et bien sûr choisir un bleu différent ou autre chose, un violet, jaune ou rouge, il y a beaucoup de couleurs à choisir. Donc, nous allons juste changer nos liens, donc il y a différents de la valeur par défaut. Nous allons enregistrer notre fichier, puis actualiser, et maintenant vous pouvez voir qu'il est moins d'un bleu aveuglant. De plus, nos liens violets ont changé en bleu aussi. Eh bien, nous avons défini tous nos A comme étant de nouveaux bleus, nous définissons également nos états visités et nos états de liaison. Les liens ont ce qu'on appelle des pseudo-classes et des pseudo-classes est un autre concept. Dans ce cas, nous avons des pseudo-classes pour nos liens. A-link est notre pseudo-classe par défaut, donc c'est à quoi ressemble un lien par défaut. A-visités serait la façon dont nous fournissons une couleur différente ou toute sorte de propriété de texte pour les liens qui ont été visités. Survolez et Focus, peut faire des choses similaires ce serait un bon sélecteurs de regroupement séparés par des virgules et c'est ce qui arrive pour Hover, c'est quand vous passez le curseur avec votre souris sur un lien, et Focus est lorsque vous utilisez votre clavier pour accédez à un lien. Active est pour lorsque vous appuyez réellement sur le lien avant de laisser tomber. Donc, ce sont des pseudo-classes de lien. Alors, voyons comment nous pouvons ajouter cela à notre feuille de style. Autre chose qui est important à noter, c'est l'ordre dont vous définissez comme important. Donc, si vous allez les trouver tous, vous devez les faire dans cet ordre lien visité, survoler, puis actif. Vous pouvez en laisser une partie, sorte que vous n'avez pas à le définir dans un lien visité. En fait, je vais laisser celui-là dehors. Mais, nous pouvons définir un lien, un vol stationnaire et un actif. Nous n'avons pas non plus besoin d'écrire un lien deux-points. Parce que par défaut, a est le même que le lien a. Donc, maintenant ajoutons un état de survol. Donc, nous allons dire un vol stationnaire, virgule a-focus. Nous définirons notre vol stationnaire et notre focus en même temps, car ils vont avoir le même effet. Nous voulons nous assurer que nos utilisateurs de clavier lorsqu'ils utilisent le clavier pour naviguer à travers nos liens, peuvent également voir quel lien il est actuellement sur et sur le point de visiter. Donc, pour cela, nous pouvons juste changer la couleur et rendre la couleur plus foncée lorsque nous survolons dessus. Je vais juste utiliser la valeur 5f6b69. Vous pourriez utiliser quelque chose comme le noir ou 333 serait un nombre hexadécimal pour quelque chose de plus sombre. Je vais sauver ça, je vais y retourner. Maintenant, vous pouvez voir, que lorsque je survole un lien, nous définissons l'état du vol stationnaire. Par conséquent, en changeant à quoi ressemble le lien. Si j'utilise mon clavier, moment j'appuie sur Tab, et le premier lien sur notre page est bien sûr notre logo, donc c'est ce qui se passe quand je pars du logo, nous aurons un aperçu. Ensuite, je passe à notre travail et vous pouvez voir que nous avons le contour bleu et le grand changement, parce que nous avons défini notre état d'orientation aussi. Cela permet aux utilisateurs du clavier de savoir sur quel lien ils sont sur le point de cliquer. Nous pouvons également définir un actif si nous lançons, donc a-active et peut-être que nous voulons dire quelque chose comme inquiétant, la couleur de fond sera blanche. Alors maintenant, quand je me rafraîchis, vous pouvez voir ça maintenant, je maintiens physiquement le bouton de la souris enfoncé, et pendant ce moment, c'est quand vous obtenez l'état actif. Donc, quand je libère, je vais sur cette page. Voilà mon vol stationnaire et mon actif. On va supprimer les actifs pour l'instant, donc ce n'est pas quelque chose dont on a vraiment besoin. Mais, si c'est quelque chose que vous voulez faire, peut-être que vous voulez ajouter un peu d'oeuf de Pâques d' une gemme pour les gens quand ils cliquent sur vos liens, et pour leur montrer quelque chose quand il est actif, vous pouvez certainement le faire. C' est ainsi que nous appliquons différents styles à notre lien. Rappelez-vous, vous n'avez pas à simplement échanger des couleurs, nous pourrions aussi changer des choses comme peut-être nous voulons enlever la décoration du texte, donc nous pouvons dire text-decoration none et ensuite peut-être sur la mise au point stationnaire, nous pouvons remettre le sous-jacent, donc texte-décoration soulignée. Vous pouvez voir à quoi cela ressemble ici, donc quand je survole, la ligne apparaît. Peut-être que je ne veux pas faire un changement de couleur alors, je peux juste faire un soulignement pendant que je survolle. Je vais remettre ça en arrière, parce que j'aime rendre mes liens agréables et évidemment, et je veux que les gens sachent que c'est un lien, alors nous allons laisser cela souligné là-dedans. C' est comme ça que nous allons styler nos liens. Dans notre dernière leçon, nous allons examiner une propriété abrégée, donc comment écrire des choses un peu plus facilement pour des choses comme ; couleurs, polices et propriétés d'arrière-plan. 20. Les propriétés raccourcies: Jusqu' à présent, nous avons examiné les longues façons d'écrire des choses. Nous avons regardé un peu le raccourci des couleurs. Donc, rappelez-vous que pour les nombres hexadécimaux, si les valeurs sont les mêmes. Donc, 666666, passez à six là-bas, on peut juste faire un 666. Donc, c'est comme ça que nous ferions des raccourcis de couleur, mais nous aussi des raccourcis pour d'autres choses comme les propriétés de police et les propriétés d'arrière-plan. Donc, en ce moment, nous disons que la taille de police sur nos paragraphes est de 18 pixels, et que la famille de polices est Georgia et Serif. On peut combiner ça ensemble en disant « Police ». Donc, police 18 pixels, Georgia, Serif sera la même chose que d'écrire ça, mais c'est comme ça que nous ferions le raccourci pour la police. Vous pouvez voir qu'il est toujours obtenir les mêmes styles, mais la police 18 pixels Georgia. En ce qui concerne le raccourci, l'ordre dans lequel nous écrivons les choses est important. Donc, disons sur nos h2s, nous avions une taille de police de 40 pixels, poids de la police est gras, style de police italique, et la famille de police, Fantasy. Je cherche toujours une excuse pour utiliser la fantaisie, donc on l'utilisera dans cette démo. Revenons ici et voyons nos h2 ont été ajustés. Maintenant, si nous voulons écrire ceci en raccourci, nous le pouvons, mais il est important que nous les écrivions dans un certain ordre. Donc, nous allons dire « Police », et l'ordre de notre raccourci de police commencera par le style de police, donc italique. Ensuite, poids de la police dans ce cas, Bold. Ensuite, nous allons faire notre taille de police, donc 40 pixels. Si nous avons des hauteurs de ligne, nous pourrions aussi le mettre ici, et nous le faisons en écrivant une barre oblique. On pourrait écrire ça comme une barre oblique de 80 pixels de hauteur de ligne. Ce sera très grand, et ensuite nous mettrons notre famille de polices, donc Fantasy. Donc, encore une fois, juste pour voir à quoi cela ressemblera [inaudible], ajoutons la hauteur de la ligne ici, afin que vous puissiez le voir, et c'est ainsi que nous l'écrivons en abrégé. Donc, si je supprime tout cela et que nous actualisons, nous pouvons voir que leurs h2s obtiennent toujours le style. Ils ajoutent également la hauteur de ligne que nous avons ajoutée, ce qui explique pourquoi elle est devenue un peu plus grande avant et après le texte, et c'est ainsi que nous écrivons notre raccourci. Si vous oubliez comment écrire des raccourcis, ne vous inquiétez pas. Il est juste une recherche Google loin pour un raccourci de police, et vous pouvez voir de nombreux résultats ici. J' aime les trucs CSS, donc je vais venir ici, et voir si cela me rappellera l'ordre, donc font-style, font-variant, font-weight, et un exemple de celui-ci en cours d'utilisation. Donc, italique, petites majuscules, normal 13 pixel/ 150%, Arial, Helvetica, Sans Serif, donc vraiment belle ressource pour vous assurer que vous vous souvenez comment écrire votre raccourci de police. Nous pouvons également écrire un raccourci pour notre expérience. Alors rappelez-vous, nous avons l'arrière-plan sur notre corps pour faire le bruit. Donc, au lieu d'écrire tous ces éléments, nous pouvons à la place écrire l'arrière-plan. Nous commençons par notre couleur, donc efebdf, puis nous écrivons notre image de fond. Dans ce cas, img/bg-noise.jpg. Ensuite, nous allons dire notre répétition, et comme nous répétons, nous n'avons plus besoin de la position d'arrière-plan, donc nous pourrions juste recommencer en haut à gauche, soit 00. Mais, si vous deviez faire une position de fond, ce serait à la fin après votre répétition. Donc, je vais supprimer ça. Nous nous débarrassons de ces quatre lignes, rafraîchissons, et tout reste le même bien sûr, parce que nous nettoyons ça. Si je passe à aucune répétition ici, alors vous pourriez voir qu'on les a juste dans ce coin supérieur. Rappelez-vous, nous pouvons toujours changer ces valeurs, donc 100 pixels, 100 pixels, et maintenant nous voyons notre carré s'est déplacé ici, 100 pixels. C' est un peu comme un jeu Word Waldo essayant de trouver ce modèle de bruit, mais c'est là qu'il est. Donc, ce sont quelques façons que vous pouvez écrire CSS plus efficace en utilisant ces raccourcis. Dans la prochaine vidéo, nous allons regarder les commentaires CSS. 21. Commentaires CSS: Donc, vous vous souvenez peut-être en HTML que nous avions des commentaires HTML mais nous avons aussi des commentaires pour CSS. Donc, quand nous nettoyons un peu nos styles, nous voulons ajouter quelques commentaires. Donc d'abord, nous allons déplacer le corps au-dessus du paragraphe juste parce que le corps contient tout. Donc je veux que ça soit d'abord sur notre page. Maintenant, ce que je vais faire est d'écrire une note pour moi-même ici et je vais écrire ma note pour dire quelque chose comme, « Styles pour le fond du corps ». Maintenant, bien sûr, cela va essayer d'être lu par le navigateur, donc je dois mettre quelque chose autour de lui qui rend le navigateur conscient que c'est un commentaire. Dans CSS, vous écrivez vos commentaires avec une barre oblique, étoile, puis une barre oblique, et vous pouvez voir dans Sublimetext, il est devenu gris. Peu importe s'il y a ou non des espaces ici. J' aime juste mettre des espaces pour qu'il soit plus facile à lire, et ceux-ci sont vraiment bons pour prendre des notes pour vous-même. Donc peut-être ici, je vais faire un commentaire qui dit, « styles de titre », et ici, je vais commencer à entrer dans les remplacements de classe, parce que c'est là que nous utilisons des classes pour remplacer nos sélecteurs d'éléments généraux. Vous pouvez laisser autant de notes que vous le souhaitez ici. N' oubliez pas qu'il est possible pour les gens de voir vos notes. Si quelqu'un veut voir votre source et voir votre CSS, il peut bien sûr le voir, alors n'écrivez rien de méchant ou n'écrivez rien mauvais goût parce que les gens pourraient éventuellement trouver cela. Vous pouvez également utiliser des commentaires pour commenter certaines sections de code si vous voulez voir à quoi ressemblera les choses. Et si je me disais : « Tu sais quoi, je ne sais pas vraiment si je veux avoir cette couleur, mais je ne veux pas la supprimer non plus. » Donc pour l'instant, je suis juste temporairement le commenter, revenir ici, revenir ici, et maintenant je peux voir comment les choses ont l'air si elles sont dans la couleur plus sombre de la classe de corps. Je ne suis pas vraiment un fan de cela donc je vais revenir en arrière et contrôler Z ou tout simplement aller de l'avant et supprimer ceux-ci. Je ne suis pas sûr de ce fantasme de famille de polices, alors peut-être que je veux commenter ça. Je vais donc commenter cela, et je peux aussi laisser quelques notes pour moi-même. Tout ce qui est dans les commentaires sera génial comme ça et vous pouvez noter que c'est un commentaire, et je peux laisser une note ici pour moi qui dit, « raccourci de police par exemple ». Alors, si je veux me dire, « J'ai commenté parce que ça n'a pas l'air joli. » ou quelque chose comme ça, et c'est une façon pour moi de savoir pourquoi je l'ai commenté. Plus tard, avant de passer en direct avec mon site, peut-être que je veux supprimer tous ces commentaires, mais pour l'instant, gardez-le et décidez plus tard si je change d'avis sur ce fantasme. C' est pourquoi les commentaires sont vraiment bons. Vous pouvez également faire quelques commentaires pour vous-même en haut de la page. Peut-être que vous voulez laisser des commentaires pour votre palette de couleurs. Donc, vous pouvez dire quelque chose comme - et rappelez-vous que vous pouvez faire n'importe quel formatage que vous voulez, alors peut-être que je veux faire toutes les majuscules pour que ce soit facile à voir, et je peux dire quelque chose comme la couleur noire que nous utilisons est le numéro 27211f, la couleur corail que nous sommes utilisant est ceci : e96f4p. Cela pourrait être un moyen pour les gens de voir facilement les couleurs. De cette façon, si vous changez d'avis, vous pouvez mettre à jour ici aussi, et c'est un endroit où les gens peuvent rapidement saisir ces valeurs et les brancher. Donc le bleu que nous utilisons est dans notre A. Reproduisons ça, et mettez-le ici. C' est juste quelques notes que vous pouvez garder pour vous-même si vous êtes intéressé à utiliser une palette de couleurs et peut-être que vous voulez la modifier plus tard, juste quelque chose de rapide et facile pour vous de garder votre CSS organisé. Parlons de la prise en charge du navigateur, une sorte de dérisoire, mais quelque chose à parler dans notre prochaine leçon. 22. Prise en charge du navigateur: Donc, tout comme un HTML où nous avons des spécifications différentes, nous avons différentes spécifications de CSS. Il y a eu différentes versions, brouillons et documents qui disent comment les navigateurs devraient lire CSS. Vous pouvez voir qu'il y a eu différents standards et brouillons de CSS, choses comme CSS Level 2 et Selectors Level 3, qui définissent les différentes propriétés CSS avec lesquelles nous devons travailler. Selectors Level 3 est devenu une recommandation en 2011 et a un certain soutien parmi la plupart des navigateurs modernes que nous allons utiliser. Cependant, tout n'est pas un navigateur moderne. Parfois, si vous regardez les analyses pour votre site, vous verrez que les gens viennent sur votre site à partir d'une sorte de navigateurs plus anciens, peut-être pas la dernière version de Chrome sur un Mac ou Firefox sur Windows. Vous voulez vous assurer que les propriétés CSS que vous utilisez peuvent être utilisées et seront bien prises en charge. Caniuse.com est un excellent site qui vous indique la compatibilité pour HTML5, CSS3, SVG, et d'autres choses en ce qui concerne la façon dont ils vont ressembler et réagir dans un navigateur. Nous pouvons jeter un oeil à la colonne CSS sur la gauche. S' il y a une propriété ici que vous envisagez d'utiliser, vous pouvez voir si vous serez en mesure de l'utiliser. Nous avons parlé un peu des différentes valeurs de couleur avant telles que HSL et RGB. Vous pouvez voir à partir de ce graphique que dans les dernières versions de beaucoup de navigateur, il y a un support pour cela. Mais de retour dans IE8, il ne supporte pas toutes ces couleurs CSS3. Ceci est important à savoir, si votre site est visité par beaucoup de personnes sur IE8, vous pouvez utiliser des valeurs hexadécimales à la place. Si vous êtes d'accord avec les gens dans IE obtenir une couleur de sauvegarde ou fournir deux valeurs, sorte que vous pouvez rouler dans la couleur hexadécimale, puis sur la diapositive suivante fournir une couleur RVB. C' est une autre façon de résoudre ce problème. C' est un peu de travail supplémentaire pour s'assurer que les gens dans IE8 peuvent voir cela et obtenir le support, mais c'est à vous et à votre chronologie pour votre projet. Commentons cela pour l'instant et disons à la place l'arrière-plan de ma page, je veux que ce soit RGBA et c'était 255, 255, 255,1. Essentiellement, c'est blanc. Ce que nous pouvons faire à la place si nous voulions soutenir les anciens navigateurs, vous dites le numéro d'arrière-plan fff. Ce qui se passe ici, ce sont les navigateurs qui comprennent cela, comme IE8, vont lire ceci. Et quand ils arriveront à cette ligne, on l'ignorera complètement. Pour les navigateurs qui supportent ceci ou lisent ceci, appliquez-le, puis remplacez-le par cette valeur. C' est une façon de contourner l'ancienne compatibilité. Nous avons jeté un oeil aux images d'arrière-plan plus tôt et il y a d'autres sortes de choses d'arrière-plan que nous pouvons ajouter dans CSS3, comme le clip d'arrière-plan ou la taille d'arrière-plan, et nous pouvons voir les différents supports pour des choses comme ça ici aussi. Lorsque vous jouez avec de nouvelles propriétés CSS, ce que je vous encourage vivement à faire après cette classe, assurez-vous simplement que vous faites référence à des choses comme caniuse.com pour voir quel type de support de navigateur est disponible. Dans la vidéo suivante, voyons quelques-unes des choses que nous pouvons utiliser et envelopper cela. 23. Les prochaines étapes: Eh bien, ça termine notre introduction au CSS. J' espère que vous vous êtes bien amusés. Je l'ai certainement fait, Steve aussi. N' oubliez pas qu'il y a beaucoup plus de propriétés que nous pouvons ajouter à notre site. Si vous voulez vérifier CSS3 Generator, cela va commencer à vous donner quelques exemples de choses. Nous examinons certaines propriétés de texte que nous contrôlons, mais nous pouvons également contrôler des choses comme l'ombre de texte. Donc, si nous regardons quelque chose comme celui-ci, vous pouvez voir ici un exemple de la façon dont nous appliquerions l'ombre de texte à notre page. Donc, nous pourrions copier cette ombre de trait d'union de texte , cinq pixels, cinq pixels, deux pixels, puis cette valeur X, et l'appliquer à certains de nos styles également. Donc, peut-être que nous voulons l'appliquer à nos rubriques. Eh bien, si on fait ça, tu peux voir, wow, ça n'a pas l'air bon. Mais comme vous pouvez le voir, il y a beaucoup plus de choses que nous pouvons commencer à ajouter avec CSS3 et d'autres propriétés. Nous avons aussi des choses comme les gradients CSS. Donc, vous pouvez voir que vous pouvez jouer ici, ajuster les couleurs comme ça. Si vous double-cliquez dessus, vous pouvez changer la couleur. Donc, peut-être que nous voulons supprimer certains d'entre eux aussi, peut-être que nous voulons ajouter un dégradé à notre arrière-plan de notre page et nous pourrions le faire si nous le désirons. Donc, disons que j'avais un dégradé comme ça. Donc, si j'avais ce dégradé ici, je peux cliquer sur « copier ». Venez à mon CSS, allez dans mon corps et au lieu d'utiliser ce fond, commentons ceci et collez dans le code généré par CSS ici. Revenez sur mon site et maintenant vous pouvez voir l'arrière-plan a cette image dégradée. Bien sûr, je dirai qu'il est important de comprendre ce que les propriétés CSS que vous faites, mais je pense aussi que c'est amusant de voir ce que vous pouvez faire et le genre de propriétés différentes que nous avons à jouer avec. Donc, je pense qu'il est important pour vous de savoir ce qu'il y a là-bas, savoir qu'il y a beaucoup de choses cool que nous pouvons faire avec CSS qui vont au-delà de ce que nous avons fait aujourd'hui. Donc, j'espère que vous continuez à essayer certaines de ces règles, retournez nettoyer votre CSS, nettoyez votre HTML, assurez-vous que les choses semblent efficaces et lisibles, et essayez de changer de choses. Essayez de changer de couleur, essayez de changer de taille de police, et voyez la combinaison que vous souhaitez utiliser pour votre CV, et les styles qui, selon vous, correspondraient Jon Arbuckle peut-être différemment de ce que nous avons fait ici aujourd'hui. J' espère vous voir tous dans la prochaine classe où nous parlons de CSS avancé pour la mise en page et le positionnement et arriver à creuser un peu plus profondément dans ce que CSS peut faire. Jusque-là, j'espère que vous avez beaucoup de plaisir à ajouter beaucoup de couleurs et de polices pour rendre Jon Arbuckle, ou votre site de portefeuille super génial. Jusque-là, je te verrai la prochaine fois.