Salut.
Bienvenue à notre première conférence vraiment technique dans notre cours CSS.
Il s'agit d'ajouter du style à vos pages.
Si vous êtes venu à ce cours avec moi à partir de notre cours HTML,
vous savez que je sais que vous pouvez créer des fichiers HTML généraux.
Mais jusqu'à maintenant, vous ne les avez peut-être pas du tout stylisé.
Ce que je veux que vous sachiez avant même que nous commencions à coiffer, et vous commencez à mettre vos
propres petits rebondissements sur les pages, c'est que le même fichier HTML peut sembler
différent lorsqu'il est visualisé sur différents navigateurs, et il y a quelques raisons à cela.
Tout d'abord, certaines balises ne sont pas prises en charge dans certains navigateurs alors qu'elles sont dans d'autres.
Donc, si vous avez déjà utilisé la balise details, vous pouvez voir que parfois votre page
aura de petites flèches ou différentes petites marques sur eux et d'autres fois, elle ne le sera pas.
Cela revient donc aux balises qui sont prises en charge.
Mais aussi, chaque navigateur a son propre style par défaut différent.
Et ce que ce style par défaut dit, c'est à quoi je veux que mes en-têtes H1 ressemblent, ou
c'est la quantité de rembourrage que je veux autour de mes paragraphes.
Donc, si vous allez à la même page sur différents navigateurs, il peut être difficile de le
dire, mais vous verrez de minuscules petites différences dans la façon dont les choses sont faites.
Mais en général, ce look par défaut est vraiment clair.
Et la plupart des gens que je connais ne veulent pas que leurs pages soient claires.
Ils veulent mettre un peu de style.
Commençons donc à chercher des moyens de le faire.
Une façon d'ajouter du style est de penser à l'ajouter directement dans le texte.
Maintenant que le HTML évoluait, nous sommes passés d'avoir des balises qui étaient distinctement sur la couleur,
et sur le centrage différent, et des choses comme ça.
Pour dire non, non, nous ne voulons pas de balises qui ont à voir avec le style.
Nous voulons seulement des balises qui ont trait au contenu.
Les gens ont dit, d'accord, on peut faire ça, mais je veux rendre ça joli.
Donc, comment ils ont fait cela est qu'ils ont ajouté des attributs de style.
Donc, dans ce cas, j'ai pris une balise h1 et ajouté l'attribut style et
simplement dit « color:blue ».
Et ce que cela va faire, c'est que ce titre h1 particulier
a une police bleue.
Donc c'est très simple.
C' est une bonne façon d'y aller et d'ajouter un style simple à votre page.
Cependant, cela enfreint encore notre règle
de vouloir séparer le contenu du style.
Parce que si vous voulez le changer en, disons, rouge ou vert ou
quelque chose comme ça plus tard, vous devrez entrer et
changer la balise, parce que vous allez devoir changer l'attribut.
J' ai donc vraiment essayé de ne pas utiliser cela du tout, et au lieu de
prendre l'habitude de faire les choses de la bonne façon.
Et la bonne façon de styliser vos pages est d'utiliser CSS.
Les feuilles de style en cascade sont essentiellement un moyen pour vous d'écrire des règles qui indiquent comment vous
souhaitez styliser tous les paragraphes, comment vous souhaitez styliser tous vos en-têtes ou
comment vous souhaitez styliser certaines de vos images.
C' est une
façon vraiment agréable et spécifique que tout le monde peut suivre pour faire ces choix de style.
Et les règles sont établies comme ça.
Vous devez d'abord mettre en place votre
sélecteur, et le sélecteur est juste une façon de dire ce que vous voulez style.
Dans notre cas, nous allons commencer par donner au sélecteur
différents noms de balise tels que h1 ou paragraphe.
Une fois que vous avez trouvé la balise que vous voulez style,
vous dites quelle propriété il est que vous voulez changer.
Donc on peut regarder des choses comme la couleur, la couleur de fond,
combien d'espace on y met, on va couvrir tout ça.
Mais pour l'instant, on va commencer très simple et s'occuper des couleurs.
Ensuite, vous devez donner à chaque propriété une valeur, en
indiquant la couleur que vous voulez qu'elle soit.
Donc, d'un côté, nous avons le très générique, comment nous écrivons une règle.
Et d'autre part, j'ai écrit une règle très spécifique qui dit, hey,
chaque fois que vous voyez un titre h1, je veux que vous fassiez la couleur bleue de la police.
Nous avons donc fait exactement ce que nous avons fait lorsque nous avons intégré la balise style,
mais maintenant c'est très générique, et nous ne parlons pas d'un titre spécifique.
Nous ne parlons pas d'une étiquette spécifique.
Donc, lorsque vous écrivez ces règles, la syntaxe est très importante.
Beaucoup de fois, quand vous écrivez du HTML, le navigateur est vraiment sympa pour vous et
si vous oubliez de fermer une balise, ça va,
je sais ce qu'elle veut que je fasse et ça va aller de l'avant et mettre la page en place de toute façon.
Lorsque vous faites du CSS,
si vous êtes bâclé avec ce que nous appelons votre syntaxe, vous allez avoir des problèmes.
Ainsi, les crochets et les points-virgules sont très importants.
Alors, laissez-moi vous montrer encore une fois,
vous pouvez voir que j'ai un crochet de début et
un support de fermeture, et j'ai ce point-virgule juste à la fin.
Vous devez vous rappeler de les inclure.
Et l'une des raisons pour lesquelles je parle de cela est que lorsque vous commencez à écrire votre code,
lorsque vous choisissez un bon éditeur, et que la plupart des éditeurs sont assez bons, tels que Sublime
ou TextWrangler, TextEdit, Notepad ++, ils mettront des couleurs pour vous.
Donc tout d'un coup si vous regardez vos règles CSS et
que vous êtes comme, woah, je m'attendais à ce que les choses soient différentes, mais à la
place tout est blanc ou tout est rouge.
Cela vous donne un indice que vous avez foiré sur la syntaxe de votre règle.
Dans la même ligne, je veux juste jeter ici que lorsque vous écrivez votre règle,
vous pouvez mettre des commentaires pour vous aider à déboguer et
vous aider à vous expliquer ce que vous allez.
Et c'est ainsi que les commentaires sont faits en CSS.
Vous faites juste le /*, */ à nouveau.
Que se passe-t-il si vous voulez faire plus qu'une seule propriété ?
Et si au lieu de dire juste que vous voulez que la couleur soit bleue,
vous voulez également que la couleur de fond soit jaune ?
Eh bien, pas de problème.
Vous pouvez avoir autant de combinaisons de valeurs de propriété que vous le souhaitez.
Vous avez juste besoin de vous rappeler de les séparer avec des points-virgules.
Donc, dans ce cas, encore une fois,
j'ai réglé la couleur sur le bleu et la couleur de fond sur le jaune.
Bon,
maintenant que tu saches écrire une règle, comment on les fait travailler ?
Il y a deux façons et
la première façon dont je vais vous parler est d'appeler en utilisant une feuille de style interne.
Donc, comme vous pouvez le voir ici dans mon code, j'ai le modèle de base de notre fichier.
Et à l'intérieur des balises de tête, j'ai mis cette balise de style, c'est là que
vous allez vouloir mettre vos règles, elles sont définies dans ce style.
Donc maintenant, à l'intérieur de la balise de style, j'ai ajouté le h1, la couleur bleue, et
j'ai terminé ma balise de style.
Donc, ce qui se passe maintenant, c'est que quand le navigateur ouvre votre page,
il arrive à la section principale, il dit, oh génial,
elle a écrit quelques règles, voyons ce qu'elle veut que je fasse.
Et il saura parcourir votre page et
appliquer cette règle à toutes les balises H1.
Et si vous avez plusieurs règles, y compris des paragraphes, des images, des choses comme
ça, ça saura, je veux appliquer ceci à toutes les instances du fichier entier.
D' accord.
Maintenant, il y a de très bonnes chances que vous allez gâcher parce que je fais ça 80%
du temps quand je me développe en classe, et
ce que je fais c'est que j'oublie de fermer cette étiquette de style.
Et si vous oubliez de fermer cette balise de style en bas,
en fait, votre page peut finir par être vide.
Donc, ne paniquez pas lorsque vous commencez à faire cela si votre page est vide,
cela signifie probablement que vous avez oublié de fermer la balise de style.
D' accord.
Donc, les feuilles de style internes sont vraiment sympas
lorsque vous essayez juste de styliser une page.
D' accord ?
Et je le fais souvent juste pour que je puisse garder tout mon code dans un seul fichier au lieu d'aller
et venir et d'aller et en arrière.
Mais imaginez que vous avez un site où vous allez avoir 10,20, 1 000
pages différentes et vous voulez qu'elles aient toutes un regard très cohérent à leur sujet.
Vous ne voulez pas avoir à entrer et dire que si vous voulez changer une couleur,
vous ne voulez pas avoir à entrer et ouvrir chacun de ces fichiers afin que
vous puissiez changer la couleur en rouge ou en vert.
Au lieu de cela, ce que vous voulez utiliser est que vous voulez utiliser quelque chose appelé
feuilles de style externes.
La façon dont cela fonctionne avec une feuille de style externe est que vous placez vos règles
dans un fichier différent.
Donc, vous ouvrez un fichier,
vous allez l'enregistrer quelque chose comme mystyle avec une extension de fichier .css.
Alors maintenant le navigateur sait, oh tout en HTML, c'est le contenu.
Tout dans .css, c'est la mise en page.
Maintenant, lorsque vous créez votre feuille de style externe, il semble juste comme nous
l'avons fait en interne, sauf que vous n'utilisez pas de balise de style.
Ensuite, une fois que vous avez placé vos règles dans un fichier séparé,
tout ce que vous avez à faire est d'ajouter un lien dans la section de tête.
Donc, dans ce cas, je suis entré,
j'ai mis mon lien, je dois lui dire la relation cuz de la feuille de style.
Et vous devez vous rappeler de mettre le nom du fichier.
donc, encore une fois, c'est là qu'il sera vraiment important
que vous nommez les choses de la façon qu'elles font depuis pour vous.
Vous pouvez créer des liens vers autant de feuilles de style différentes que vous le souhaitez, la
plupart du temps nous commençons par une.
Donc maintenant que nous avons eu cette feuille de style,
chaque fichier qui y est lié partagera tous cette feuille de style.
Alors rappelez-vous quand j'ai mentionné que vous pourriez avoir un site avec 10, 20,
1000 pages et que vous décidez de changer cette couleur du bleu au rouge ou vert ou
quelque chose comme ça ?
C' est génial.
Tout ce que vous devez faire est d'ouvrir style.css, de changer une ligne de code, et
vous avez maintenant juste changé potentiellement des milliers de pages Ok,
alors parlons une seconde de cette idée de feuilles de style en cascade.
Qu' est-ce que ça veut dire que nous sommes en cascade ?
Eh bien, quand le navigateur va faire votre page, la première chose qu'il va regarder
est de partir, d'accord, peut-être qu'ils ne me disent rien.
Comment faire normalement des en-têtes h1 ?
Quelle taille dois-je faire cette police ?
Avoir son propre type de valeurs par défaut.
Mais alors il va et il semble et il dit, oh y a-t-il des feuilles de style externes.
Parce que si c'est le cas, je vais écraser les paramètres par défaut de mon navigateur et
mettre dans les règles qui sont dans cette feuille de style externe à la place.
Ensuite, il va vérifier le style interne.
Ce style que vous avez dans la section tête.
Parce qu'en général, le navigateur pense, hm, peut-être qu'il y a quelque chose de vraiment spécial
à propos de cette page particulière, et ici elle veut que je fasse ces règles à la place.
Enfin, n'importe lequel de ces styles en ligne où vous utilisez la balise d'attribut,
ceux-ci auront la priorité la plus élevée de tous.
Donc, cela peut être vraiment déroutant, parce que vous pourriez commencer à écrire différentes règles,
et vous ne pouvez pas comprendre pourquoi certains fonctionnent et d'autres ne le sont pas.
C' est là que la partie en cascade entre à nouveau.
D' abord, il examine les valeurs par défaut, puis externe, puis interne, puis en ligne.
C' est pourquoi vous voulez vraiment éviter d'utiliser n'importe quel style en ligne car
cela annule à peu près toutes vos règles de style.
Bon, donc nous savons comment vont ces quatre, mais que se passe-t-il si vous avez un sélecteur et
que vous avez lié à deux ou trois feuilles de style différentes, et
que ce même H1 a été défini comme étant bleu, vert et jaune, mais dans des fichiers différents.
Comment le navigateur sait-il quoi faire ?
Eh bien, comment cela fonctionne, c'est que les règles du fichier le plus récent ont priorité.
Et ce que je veux dire par le fichier le plus récent, cela signifie qu'il va dans la section tête
et il va un, deux, trois, et il regarde en quelque sorte quel ordre vous les avez répertoriés,
et le dernier que vous avez répertorié est celui qui aura la priorité.
D' accord ?
Et si vous avez un sélecteur dans le même fichier, et
que vous avez écrit H1 plusieurs fois.
Cela peut se produire un peu.
Surtout si vous décidez de faire partie d'une grande société de développement,
vous écrivez du code, puis quelqu'un d'autre écrit du code, ou,
comme je le dis à mes étudiants, peut-être que vous êtes sorti et vous avez passé un bon moment un soir,
et vous êtes rentré à la maison et avez décidé, je vais coder !
Et tu oublies que tu as déjà écrit des règles.
Eh bien, si c'est le cas, encore une fois,
le navigateur va regarder celui qu'il a vu en dernier.
Donc, dans ce cas, j'ai deux règles pour h1.
On écrit à la couleur au bleu.
Et j'ai dit, hé, je veux que tu utilises cette famille de polices aériennes.
Et plus tard, il pourrait y avoir tout un tas de trucs ici,
peut-être rien, et je dis bon, je veux que tu utilises une famille de polices Times.
Comment le navigateur va regarder ça, il va tomber,
doo-doo-doo-doo-doo-doo et dire, je vais rendre toutes les polices bleues, et
je vais aller de l'avant et faire de la famille de polices Times.
Il va toujours utiliser le dernier qu'il a vu.
Donc, encore une fois, la règle la plus récente a priorité,
que ce soit dans votre code ou qu'elle provienne de fichiers différents.
Il existe, cependant, un moyen d'écraser cela.
Supposons que vous écriviez quelque chose et que vous savez que vous voulez que quelque chose soit comme ça.
Vous vous souciez que quelqu'un d'autre l'écrase.
Vous voulez vraiment vous assurer que les gens n'utilisent pas le style en ligne,
différentes choses comme ça.
Ce que vous pouvez utiliser, c'est que vous pouvez utiliser le ! Attribut important ici.
Donc ici, j'ai une famille de police, Arial, et j'ai de l'importance ici.
Donc, même si plus tard je décide de l'écraser avec des temps, le navigateur va
dire non, je sais qu'elle voulait vraiment que j'utilise Arial, et ça marche.
Alors allons de l'avant et regardons un exemple de ce que je veux dire par tous ces précédents.
Je sais que l'écoute peut devenir un peu accablante, donc j'ai un
exemple qui vous montre les différentes façons et ensuite je terminerai cette conférence.
Commençons donc en utilisant l'attribut style.
Comme vous pouvez le voir ici, j'ai écrit le code, et
j'ai utilisé l'attribut style pour cet en-tête h1, et ce paragraphe.
Donc, dans ce cas, je veux que mon titre h1 soit bleu, et mon paragraphe soit rouge.
Et ce que je veux vraiment vous montrer, c'est que
le seul paragraphe qui a été changé en texte rouge ou en police rouge était le premier.
L' autre est encore noire.
Donc, la seule façon de styliser est si vous entrez et que vous changez
chaque étiquette pour la faire ressembler comme vous le souhaitez.
Si je voulais que tous les paragraphes soient rouges, je devrais y aller et
mettre le style égal, le style égal.
Dans cet exemple, il n'y en a que deux,
mais vous pouvez imaginer comment ça serait vraiment ennuyeux si vous en aviez beaucoup, ok.
Dans notre exemple suivant, nous avons un style interne.
Dans ce cas, j'ai mis dans ma balise de style en haut et j'ai ajouté des règles pour les
paragraphes et les en-têtes H1, et il devrait gérer les deux.
Donc maintenant il n'y a plus rien ici, mon étiquette est toute seule.
Et si vous regardez le résultat, allons-y.
Vous pouvez voir que maintenant, même si mon HTML n'a aucun type de style
, les deux paragraphes sont rouges ici et l'en-tête est de même.
D' accord ?
Le dernier exemple que j'ai eu pour vous est, j'ai pris exactement ces mêmes règles et
je les ai mises dans une feuille de style externe.
Encore une fois, il n'y a pas de tag de style ici.
C' est juste les règles elles-mêmes.
Et puis j'ai dû revenir au fichier HTML, et vous pouvez voir ici,
près du haut, j'ai hey, nous allons lier à la feuille de style que je veux.
Maintenant, je tiens à vous le signaler très attentivement.
Si vous remarquez, j'ai CSS/ExternalStyle feuille.
Cela signifie que ma feuille de style est dans un dossier spécial appelé css.
Les développeurs soulignent vraiment que vous faites cela,
parce que vous voulez que votre code soit en quelque sorte organisé en différentes parties.
Donc encore une fois, de la même manière,
j'ai maintenant une page qui utilise des feuilles de style externes et semble vraiment bonne.
Donc tout ce code sera disponible pour que tu le regardes, mais
je veux que tu joues avec autant que tu peux.
Mais, je veux utiliser ce dernier exemple pour
vous aider à comprendre comment fonctionne la cascade.
Donc ici, j'ai ma feuille de style externe.
Je vais y aller une seconde.
Va à mon, et je vais ajouter, une dernière chose.
Désolé, ça va être gênant.
Et je vais dire que tu sais quoi ?
Au lieu de cela, je veux que cette police soit de nouveau noire, et je la termine.
Je vais te montrer ce qui se passe quand tu gâches très vite.
Je vais la sauver, je vais recharger ma page et tout a disparu.
C' était de ça que je parlais.
Tu veux vraiment t'assurer d'inclure cette balise de style.
Fais-le. Assurez-vous de le fermer.
D' accord.
Donc maintenant, ce que je me passe ici, c'est que mon navigateur a son navigateur par défaut.
Il a une feuille de style externe, et maintenant il a également une feuille interne.
Alors voyons de quelle couleur ça va être,
si ça va être bleu ou si ça va être noir.
Et comme vous pouvez le voir, c'est noir.
Ainsi, lorsque vous commencez à coiffer, il sera très important que vous examiniez
différentes façons de séparer votre contenu de votre mise en forme.
En plus de regarder les différentes façons que vous pouvez faire ce formatage.
Donc, l'une des premières choses que je veux que vous pensiez
est comment cette idée de
feuilles de style externes et internes joue vraiment dans la séparation du contenu du formatage.
Et en même temps, je veux que vous compreniez que nous ne
suivons pas toujours toutes les règles.
Au début, nous devons toujours commencer par des
exemples vraiment simples pour vous aider à solidifier ce qui se passe avec CSS.
Donc, je vais juste terminer cela maintenant avec une
brève démo d'un exemple qu'ils ont sur csszengarden.com parce que
je pense que cela ramène vraiment à la maison l'idée que CSS peut être très puissant.
Alors jetons un coup d'oeil.
Donc, sur ce site,
CSS Zen Garden, Ils ont fait un très bon travail de montrer
toutes les différentes façons que vous pouvez formater un même fichier exactement, mais de différentes manières.
Donc, ici, si vous jetez un oeil, vous pouvez voir que c'est la feuille de style d'une personne
pour décorer ou coiffer ce document.
Maintenant, sans changer le HTML du tout, quelqu'un d'autre est venu et a dit, hé,
tu sais quoi, c'est sympa, mais je vais le coiffer de cette façon.
Ça a l'air complètement différent.
C' est le même HTML exact mais il semble complètement différent.
De la même manière, nous avons celui-ci ici, même HTML exact.
Mais vous ne pouviez pas avoir l'air différent,
car ils ont ajouté du CSS et du JavaScript qui est différent.
Alors viens avec moi.
On va beaucoup coder dans ce cours.
On va jouer beaucoup avec ce cours.
Tu vas gâcher beaucoup dans ce cours.
Mais j'ai hâte que
vous développiez quelque chose qui reflète vraiment l'apparence de votre page.
Merci.