Salut tout le monde.
Bienvenue de retour.
Il est temps pour nous de commencer notre projet final.
J' espère vraiment que quand tu auras fini avec ça, tu auras quelque chose dont
tu te sens vraiment fier et que tu voudras partager.
Encore une fois, notre objectif est que nous allons écrire une feuille de
style et styliser trois fichiers HTML différents.
Maintenant, quand vous commencerez,
je vais supposer que vous avez fait la deuxième mission de pairs.
Vous pouvez vous sentir libre de modifier cela autant que vous voulez, mais
j'ai besoin de savoir que ces changements sont terminés.
D' accord, alors laissez-moi vous montrer notre avant et notre après pour
savoir où nous allons avec ce projet final.
Alors regardons ce que nous avons fait jusqu'à présent dans ce cours.
Nous avons eu notre première vue HTML.
Notre prochain, nous l'avons rendu très clair.
Notre troisième, où nous avons ajouté dans un style différent.
Et enfin,
sur notre quatrième, cela ne semble peut-être pas très différent sur cette première page, mais
où je vais vraiment vous concentrer, c'est sur la page Équipes, et sur cette table.
Vous pourrez voir que je suis vraiment sorti et
mis beaucoup de style dans cette table.
Et la raison pour laquelle j'ai choisi des tables est parce que ce sera une chance pour nous d'entrer et
d'utiliser ces pseudo-classes.
Utilisez ces pseudo-éléments, utilisez des gradients,
toutes ces petites choses qui peuvent être un peu difficiles à réaliser,
mais une fois que vous l'avez fait, ça a l'air vraiment bien.
Parlons donc de chacune de ces petites parties.
Donc, une fois de plus, juste un petit rappel, faites une seule feuille de style.
Je ne veux pas une feuille de style différente pour
chaque page, vous en voulez une qui couvrira tout le monde.
Et nous allons utiliser des pseudo-éléments et des pseudo-classes.
Donc, si vous semblez un peu confus à ce sujet, n'oubliez pas,
nous avons des diapositives qui couvrent cela ainsi que certains de nos exemples de code ensemble.
Commençons donc par la table parce que c'est la majeure partie de la page.
Au minimum, je veux que vous alliez de l'avant et stylisez la police, la largeur
et la marge.
Maintenant, lorsque vous stylisez la police, il y a beaucoup d'options différentes que vous pouvez regarder.
Vous pouvez avoir différentes familles de polices.
Vous pouvez modifier la taille, le poids et la hauteur de la ligne.
L' une des raisons pour lesquelles je recommande la hauteur de la ligne, est que lorsque vous faites
cela, il est beaucoup plus facile de centrer le texte dans les lignes si vous avez fait de
la hauteur de la ligne la même que la taille du texte.
Pour ta largeur, je ne veux pas que ta table prenne toute la page.
Je veux qu'il prenne quelque part probablement entre 75 et 90 %.
Et l'une des raisons pour lesquelles je veux que tu le fasses,
c'est parce que je veux que tu caches la table.
Je veux que tu joues avec cette propriété de marge.
Et découvrez comment vous pouvez prendre juste la bonne quantité d'espace et
le mettre là où vous le voulez.
Ensuite, nous allons regarder le titre de la table.
Donc, le titre de table semble un peu différent des autres lignes, et
il a vraiment cette signification sémantique importante.
Donc, en utilisant les balises de titre de table, nous allons être en mesure de doubler cette
idée que nous le coiffons différemment et que cela signifie quelque chose de différent.
Donc, d'abord, changez la couleur de fond.
Une fois que vous obtenez que cela fonctionne,
je veux que vous essayiez de mettre une couleur d'arrière-plan dégradé.
Maintenant, n'oubliez pas que pour utiliser le gradient,
vous allez devoir mettre des préfixes de navigateur.
Ensuite, ajoutez une bordure mais je veux seulement que vous arrondiez les deux coins supérieurs,
pas tout, et ensuite que la bordure inférieure soit plus épaisse.
Enfin, quand vous avez fini avec cela, allez-y et
ajoutez juste au moins une autre propriété, quelque chose qui vous semble cool.
Une fois que vous avez fait le titre de table, continuons et mettons un peu de style pour
les rangées de table.
La première chose que je veux que vous fassiez, et il y a une raison
à cela, c'est que je veux que vous définissiez l'opacité des lignes de table à une valeur d'environ 0,8.
Quelque part par là.
Où vous pouvez toujours lire le texte, mais il est un peu fané.
Ensuite, je veux que vous vous assuriez que la première colonne de chaque ligne de tableau
est alignée à gauche et les deux autres sont centrées.
Maintenant, vous pouvez faire ce style dans vos éléments de ligne de tableau, ou
vous pouvez le faire dans les éléments de tableau, ces TDs.
Cela dépend vraiment de la façon dont vous entrez et essayez de styliser ceci.
Enfin, je veux que vous alliez et mettiez une autre pseudo-classe.
Lorsque quelqu'un passe au-dessus de l'une des lignes,
il va passer d'une sorte de fané à une couleur plus foncée.
Et je vais te montrer un exemple de ça avant de continuer.
Donc, si vous remarquez dans ce tableau,
le texte est un peu évanoui d'être une couleur de police noire solide.
C' est là que l'opacité entre en jeu.
Maintenant, quand je survolerai chaque nom d'équipe,
vous verrez que la police devient un peu plus sombre.
Je n'ai pas changé la couleur de la police ici, je n'ai pas changé la famille de polices, ni
le type, ou quoi que ce soit du genre.
Au lieu de cela, ce que j'ai changé, c'est l'opacité de le définir à 1.
Donc maintenant, quand mon vol stationnaire s'éteint,
il revient à ce type de valeur originale fanée.
Chacun des éléments de la table peut prendre n'importe quelle quantité de style que vous
voulez lui donner.
Mais ce que je veux vous voir faire, c'est que je veux vous voir coiffer le rembourrage, la
couleur de la police et la couleur de fond.
Et je veux que vous définissiez le rayon de la bordure à deux pixels.
Vous ne seriez jamais en mesure de voir ce genre de
différence indiscernable ou subtile sur la table.
Donc je veux que vous le mettiez, juste pour que quand je vous le dise,
vous remarquiez qu'il y a un vrai changement là-bas.
Enfin, ce serait une bonne chance pour
toi de faire quelque chose que je ne me suis pas couvert. Une
partie d'être un concepteur web consiste à apprendre à aller là-bas et à
rechercher différentes propriétés avec lesquelles vous pouvez jouer.
Donc, je vous encourage à sortir et regarder text-shadow.
C' est quelque chose que j'utilise dans mon exemple.
Donc, si vous voulez vraiment essayer de le répliquer, allez-y et essayez de l'utiliser vous-même.
Encore une fois, nous utiliserons la notation par les pairs pour cette tâche.
Et les notes seront basées à la fois sur le niveau d'achèvement et sur un certain niveau d'esthétique. Des
normes de codage appropriées s'appliqueront toujours, mais
vous pouvez spécifier la taille d'écran que vous préférez.
Donc, si quelqu'un décide de prendre votre CSS et de l'appliquer au HTML, vous
pouvez lui faire savoir que cela semble vraiment le mieux sur un grand écran ou un petit appareil mobile.
Maintenant, il y a en fait
de nombreuses façons de changer cette feuille de style.
Et donc je ne veux pas que vous vous souciez d'abattre toutes les normes.
Mais si vous décidez de quelque chose d'un peu fou, un peu différent, et
quelque chose que les autres pourraient ne pas comprendre.
Je vous recommande vraiment de mettre ça près du bas de votre feuille de style.
Pour que les gens qui regardent votre code puissent vraiment se concentrer sur les exigences réelles
et ensuite être surpris par vos innovations vraiment cool.
J' espère donc que c'est quelque chose qui aidera vraiment à solidifier votre
compréhension de CSS.
Si vous rencontrez des problèmes, vous devriez vous sentir libre d'utiliser les forums de discussion et de
demander vraiment aux gens tout ce que vous n'êtes pas tout à fait sûr.
Ou juste partager quelque chose de cool que tu dois travailler.
Bonne chance.