Aujourd'hui, nous allons parler de liens de style et de listes de styles.
Quand vient le temps de styliser les liens sur votre page,
il est vraiment important que vous vous souviez que les liens sont ce qui constitue un site Web.
C' est cette interconnectivité qui aide les gens à acquérir des connaissances.
C' est ce qui aide les moteurs de recherche à lier votre texte et votre
contenu au texte et au contenu de quelqu'un d'autre.
Donc, aujourd'hui, nous allons parler spécifiquement des liens parce
que je veux que vous pensiez à la façon dont vous coiffez.
En général, lorsque vous allez à styliser un lien, vous pouvez utiliser
tous les mêmes attributs différents que vous avez utilisés pour tout le reste.
Vos en-têtes, vos paragraphes, des choses comme ça.
Cependant, les liens ont une propriété supplémentaire spéciale
appelée text-decoration.
Donc, dans cet exemple ici, ce que je me passe, c'est qu'
au lieu d'avoir mes liens en ligne, ce qui signifie qu'ils vont l'un à côté de l'autre
, je vais dire, hey, je veux que mes liens soient séparés, un sur l'autre.
Donc, j'espère que la plupart de ce code vous semble familier.
Vous avez cette idée que l'affichage est bloqué, il ira l'un en dessous de l'autre.
Le poids de la police, je veux qu'il soit un peu audacieux.
J' ai défini une nouvelle couleur et une nouvelle couleur d'arrière-plan.
Maintenant, j'ai défini une largeur, et, si vous essayez de définir une largeur et que
cela ne fonctionne pas, souvenez-vous juste que les liens par défaut sont en ligne et
ils ne prennent pas une largeur à moins que vous les modifiez en bloc ou en bloc en ligne.
Je vais aussi aligner le texte, ajouter du remplissage, et cette décoration de texte,
aucun, c'est nouveau.
Ça dit, hé,
je veux me débarrasser de ce soulignement qui apparaît habituellement sous les liens.
Donc je suis passé de ça ici dans le coin supérieur
à quelque chose d'un peu plus stylé ici en bas.
En fait, ça ne ressemble presque pas du tout à un lien.
Alors parlons de ça.
Parfois, lors de l'installation de leurs liens,
les gens essaient vraiment de le faire ressembler beaucoup plus à des boutons.
Et nous voulons éviter cela parce que nous voulons être sémantiques.
Si vous voulez un bouton, utilisez plutôt un élément bouton.
Et vous pouvez le faire très simplement en mettant simplement la balise bouton au lieu de
la balise ancre.
Et encore une fois, de la même manière, vous pouvez le coiffer de nombreuses manières différentes.
Mais ce que je veux que vous compreniez, c'est qu'il y a
tellement de choses différentes que vous pouvez faire avec les liens et tant de style que vous pouvez
faire avec eux, assurez-vous que les gens comprennent que c'est un lien qu'ils regardent.
Ou, s'ils utilisent un lecteur d'écran, c'est un lien dont ils entendent parler.
Donc, une autre chose nouvelle sur les liens,
que nous n'avons pas vu auparavant, est cette idée que les liens ont des états.
Avez-vous déjà remarqué que, lorsque vous allez sur une page Web,
certains des liens sont parfois bleus, et certains d'entre eux sont violets ?
Et, vous réalisez, après un peu,
ceux qui sont violets, ils sont là parce que vous leur avez rendu visite, avant.
Donc, ce que nous avons, c'est que nous avons ces différents états.
Et je vais les examiner très rapidement et plus tard,
quand on parlera de ce qu'on appelle des pseudo-classes, on en parlera encore plus.
Mais rapidement, un a avec ce lien deux-points juste ici
dit simplement que c'est juste un lien normal, vous l'avez vu avant,
un ; visité dit ici un lien et mon navigateur me dit.
Il sait que j'ai déjà cliqué dessus.
Par défaut du navigateur, ce sera une couleur différente.
Nous avons également un lien avec l'activité de vol stationnaire au-dessus.
Donc vous avez probablement vu ça quand vous tenez votre souris sur quelque chose, un
peu comme si je tenais le stylo ici. C'
est que ça va faire quelque chose de fou.
Peut-être que ça changera la couleur ou des choses comme ça.
Donc, le survol est activé en maintenant votre souris sur un lien.
Quel genre de soulève une question intéressante de
cela fonctionne-t-il sur les écrans tactiles ?
Lorsque vous développez votre page, vous devez vous rappeler que le survol ne
fonctionnera pas nécessairement si les gens y accèdent sur un téléphone ou une tablette ou quelque chose comme ça.
Ce qui m'amène à un autre état appelé Focus.
Donc, l'état de focus est ce qui se passe quand quelqu'un parcourt votre page.
Comme ils frappent onglet, il va sauter d'élément en élément.
Et quand il arrivera à ce lien particulier, il saura que je suis concentré, donc
si vous voulez faire quelque chose de différent, peut-être la même chose que vous faites quand les gens planent,
c'est ainsi que vous pouvez déclencher cette activité.
Ok, et le dernier est celui que je pense vraiment être le plus bizarre de tous,
je l'appellerais peut-être même stupide, mais je n'ai pas créé Internet et HTML et
je respecte, mais c'est vraiment bizarre, parce que ce que celui-ci dit c'est hey,
c'est le lien juste comme je clique dessus.
Et la raison pour laquelle je pense que c'est bizarre, c'est parce que pour la plupart d'entre
nous, quand nous cliquons sur un lien, nous allons à une nouvelle page donc
nous ne allons même pas voir quel style s'est passé.
D' accord ?
Allons de l'avant et parlons de la façon dont nous faisons ça.
Mais avant moi, nous revenons une fois de plus à cette idée de préséance. Les
feuilles de style en cascade sont très grandes à ce sujet.
Si vous décidez d'utiliser ces différents états,
vous devez vous souvenir de quelques règles lorsque vous écrivez vos feuilles de style.
Un, si vous allez utiliser un:hover, il doit venir après un:link.
Et ensuite, un:visited et un:active, ils doivent venir après un:hover.
Donc, c'est juste cette hiérarchie qui se passe pendant que vous couvrez vos pages.
Alors regardons un exemple maintenant de code et comment je coiffe mes liens.
Dans cet exemple,
ce que j'ai ici, c'est que j'ai juste trois liens que je n'ai pas stylés de quelque façon que ce soit.
J' ai un lien vers l'introduction à la conception web,
un lien vers l'Université du Michigan, et un lien vers l'Université d'État de Kent,
où j'ai fait mon premier cycle.
Mais que se passe-t-il quand j'y ajoute du CSS ?
En haut, j'ai toutes les choses typiques dont nous avons parlé auparavant,
la largeur et la couleur.
J' ai ajouté la décoration de texte, et
ce que je voulais aussi ajouter est cette idée de marge où je peux centrer chacun de mes liens
l'un sur l'autre avec un peu d'espace entre eux.
Bon, alors jetons un coup d'oeil à ce que ça ressemble et
vous pouvez voir que j'ai chaque lien a l'air très différent, ok.
Et vous pouvez voir quand je vois mon stylo,
quand je survole chacun d'entre eux, ce qui se passe, c'est que la couleur change.
Comment j'ai réussi à faire ça, c'est juste ici.
Chaque fois que mon lien passe dans un état survol,
il sait changer la couleur d'arrière-plan et la couleur de la police.
Ok, bien qu'est-ce qu'un : focus, et ce que j'ai ici un peu, un : actif ?
Ce qui se passe ici, c'est que j'ai mis dans le a:focus pour
les personnes qui tabulent à travers ma page.
Alors que vous me regardez onglet, vous pouvez voir Introduction to Web Design se
met au point, puis l'Université du Michigan,
puis Kent State, et je le fais en tapant la page.
La dernière règle, la règle active, c'est quelque chose que je vais te montrer et
ensuite, une sorte de rupture de là.
Le fonctionnement de l'actif est que lorsque vous cliquez réellement sur une page,
il va ajouter une bordure autour de ce lien.
Le genre de chose bizarre, c'est que dès que j'aurai fini de
cliquer, on ira à une nouvelle page.
Donc ça se brise un peu, tu ne peux pas vraiment voir cette frontière à
moins que je la tienne très délibérément, juste comme ça.
Donc, dans cet exemple, j'ai essayé de vous montrer les deux façons différentes que vous pouvez
styliser les liens.
Maintenant, continuons et réfléchissons à cela dans un peu plus en détail.
Lorsque vous stylisez ces liens, encore une fois je ne peux pas insister assez sur l'importance de
l'accessibilité, nous voulons nous assurer que vos liens sont des liens et
que les gens savent qu'ils sont là.
Une fois que vous avez terminé de jouer avec les liens, continuons et
commençons à penser aux éléments de liste de style.
Lorsque vous stylisez des listes, type de propriétés par défaut, elles sont toutes identiques.
Vous avez un, deux, trois ou le cercle, cercle, cercle, cercle, mais
nous pouvons changer tout cela, nous pouvons changer les choses au-delà de
la police et de la marge pour regarder le style que vos listes prennent.
Donc, certaines des choses que nous pouvons regarder sont votre type de liste,
votre liste-style-image.
La position du style de liste, et juste le style de liste lui-même.
Le type de style de liste indique essentiellement comment voulez-vous que j'indique les différents
éléments de la liste ?
Par défaut pour les listes ordonnées à nouveau, nous avons un, deux, trois, mais
vous pouvez donner des valeurs différentes.
Vous pouvez dire que je veux que ce soit un chiffre romain inférieur, un chiffre romain supérieur, un
chiffre alpha inférieur, vous pouvez jouer avec ça pour avoir la sensation que vous voulez.
Donc, dans ce cas, nous sommes passés de 1 et 2 à A
et B. Et si au lieu de cela j'avais fait alpha inférieur, nous aurions eu une minuscule a et b.
Lorsque vous faites list-style type pour les listes non ordonnées, typiquement ce que vous avez, et
cela dépend de votre navigateur, est le petit cercle ou le petit disque.
On peut changer ça, et
on peut mettre exactement ce que tu veux s'assurer que ça va être.
Une autre option que vous pouvez jouer est cette idée de se débarrasser
complètement de ces marqueurs par défaut, et à la
place, d'utiliser une image personnalisée au lieu de ce marqueur traditionnel.
Et quand vous faites cela,
cela revient en quelque sorte à cette idée de la position de style liste.
Plusieurs fois, vous allez déplacer votre position,
en fonction du style de liste que vous utilisez.
Ici, j'ai un exemple d'où je dis que je veux mon image de style de liste.
J' ai le carré d'abord, ça dit, hé, si vous ne trouvez pas la photo, allez de l'avant et
utilisez carré, sinon je veux que vous utilisiez cette photo ici.
D' accord ? Alors allons de l'avant et
regardons un autre exemple.
Dans le fichier list.html, ce que j'ai mis ici sont deux types de liste différents,
une liste non ordonnée et une liste ordonnée.
Et je les ai juste renseignés avec des informations différentes.
Et quand tu regardes cet écran, que je vais faire un peu plus grand pour
toi ici, si je peux.
Vous pouvez voir que les listes non ordonnées utilisent simplement les cercles, et
les listes ordonnées utilisent les numéros par défaut.
Alors, jouons avec ça maintenant.
Allons de l'avant et mettons dans une feuille de style.
Dans ma feuille de style, je suis allé là-bas dit, ce que je veux faire avec mes
styles de liste, c'est que je veux le passer en haut romain et numéral et aussi utiliser un carré à la place.
Donc, c'est à ça que ça ressemblait avant, et c'est à ça que nous ressemblons après.
Donc, vous pouvez voir, il y a juste un peu plus de quelque chose.
Et, c'est un moyen très simple de changer votre page par
rapport à la façon dont les autres personnes font généralement leur page.
Une autre option que je voulais juste vous montrer,
parce que tout le monde aime vraiment cela, est cette idée d'utiliser l'image de style de liste.
Donc, je vais descendre ici et décommenter ce code.
Et si vous vous souvenez, si vous avez prêté attention à cette idée que quand vous avez la
priorité cette nouvelle règle ici va écraser toutes les règles au-dessus.
Alors allons de l'avant et assurez-vous que j'ai sauvegardé ma page, et rechargeons.
Et maintenant, dans ce cas, ce qui s'est passé, c'est qu'on a enlevé ces marqueurs réguliers
et j'ai mis mon petit éclair à l'intérieur.
Donc, faire des choses comme ça ne sont pas difficiles, mais
pour être honnête, cela prend un peu de temps, surtout si vous utilisez des images,
pour vous assurer que vous avez tout écrit exactement de la même manière. Les fautes de
frappe sont vraiment le tueur.
Ce n'est pas une question de difficulté,
c'est une question à propos de vous juste être très prudent quand vous faites ces choses.
Ok, alors allons-y et passons en revue ce dont nous avons parlé jusqu'à présent.
Et pas seulement dans cette conférence, mais dans le cours que nous avons obtenu aujourd'hui.
Et ce que je veux souligner, c'est que jusqu'à présent, nous avons stylé des balises, et
ces balises peuvent toujours prendre ces paires de valeur de propriété et
vous pouvez transformer votre page en quelque chose de vraiment génial.
Nous sommes sur le point d'aller dans quelque chose de nouveau et un peu différent.
On va parler des pseudo-classes, des identifiants et des sélecteurs.
Et je veux m'assurer que vous êtes à l'aise de
construire ces différentes règles par vous-même avant de progresser.
Être à l'aise ne signifie pas que vous êtes parfait.
Ça ne veut pas dire que tu sais tout faire.
Ce que cela signifie, c'est que vous êtes assez confiant pour
commencer à utiliser certains des outils disponibles pour améliorer votre site.
Je énumère deux d'entre eux juste parce qu'ils sont tous les deux très bien connus dans
le cas du site Chris Pederick, ou personnellement je les ai trouvés vraiment utiles.
Une autre option est juste de rappeler que vous pouvez aller là-bas et
vous pouvez faire une recherche Web pour les outils de développement.
Tu n'es pas le premier, et tu ne seras pas la dernière personne à avoir
des problèmes quand tu coiffes ta page.
Mon espoir global serait que vous allez vraiment sur les forums du
cours Coursera ou dans n'importe quelle classe dans laquelle vous êtes et demandez de l'aide à vos collègues étudiants.
Parce que vraiment, la seule façon d'apprendre est de pratiquer, de
pratiquer, de rencontrer des problèmes, d'obtenir de l'aide et de continuer.
Comme vous faites de plus en plus de web design, j'espère que vous gagnez la confiance
pour aider à faire quelque chose de vraiment cool dont vous allez être fier.
Alors restez là-dedans.
Merci.