L'essentiel des CSS

Utiliser les liens dans le texte

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Mettez à plat les diverses possibilités apportées par les liens dans les pseudo-classes. L'ensemble peut être appliqué quel que soit la balise HTML, mais elle reste plus parlante avec les liens.
04:28

Transcription

Poursuivons cette exploration des pseudo-classes, et quoi de mieux comme sujet que les liens qui vont nous permettre d'explorer justement la fameuse interactivité Utilisateur avec le :hover qu'on a vu dans l'étape précédente ! Prenons quelques instants pour regarder toutes les possibilités que nous offrent les liens et les pseudo-classes. Déjà, par défaut les liens ici, on a un paragraphe, un simple élément de contenu classique, <h1 paragraphe. Par contre, on a trois liens dans notre page : un qui pointe vers une ancre interne au document - ça aurait pu être n'importe quel document en interne ; ici on a un lien <href avec un document qui pointe vers l’extérieur ; et ici on a une balise </a qui ne contient rien, qui n'a pas du tout d'information au niveau de ses attributs. Ici on se retrouve avec par défaut le navigateur colorant en bleu ce lien, et ce lien en mauve. On a l'habitude de connaître ce langage qui est le lien déjà visité. Mais le lien qui se trouve à l'intérieur de la masse de texte ici n'est pas du tout repéré. Alors on va prendre la main ici au niveau des CSS on va dire qu'on pourrait très bien définir une balise <a par exemple et dans cette balise <a on pourrait définir toute autre valeur. Par exemple si au lieu d'être bleu souligné, on pourrait dire qu'on veut être dans une couleur légèrement orange et souligné ou pas, mais on en prendrait la main. Alors c'est ce que je vous propose de faire. Donc on va commencer par changer la couleur déjà et puis de rajouter un text-decoration :underline. Ça veut dire qu'il y a un soulignement qui est apporté. Regardez ici quand j'actualise ma page, tous les liens sont repérés maintenant. Que les liens possède un <href ou pas, peu importe. On style la balise <a et cette fois-ci elle est stylée d'une couleur qu'on a définie et un text-decoration qui a été défini par nous aussi, qui est le fameux underline. Donc on va continuer maintenant, on pourrait rajouter par exemple un curseur. Si on rajoute par exemple un curseur que j'enregistre, que j'actualise ma page, voyez chaque fois que je vais survoler les éléments je vais pouvoir avoir ce curseur. Alors maintenant passons aux pseudo-classes, la balise <a entre autres, mais toutes les balises HTML peuvent être dotées de pseudo-classes. On va les citer dans l'ordre : il y a le pseudo :link, le pseudo :visited le :hover et :active Alors je vous propose qu'on comprenne un peu d'abord leurs ordres, Ça va être « Love - Hate », Love LV - Hate HA Vous voyez pour se rappeler de l'ordre. Surtout quand on verra au niveau des précédences : Qui passe devant en fonction des décorations que l'on a données ? Qui est par-dessus ? Qui va primer au niveau des couleurs s’il y a des conflits entre deux déclarations ? voilà donc l'ordre il est là. Maintenant à quoi sert le link si je vais peupler le link ? Je vais par exemple rajouter un text-décoration:none. Si je fais un 'ctrl+s' et que j'actualise ma page vous voyez que toutes les balises qui possèdent un vrai lien donc qui ont un link un <href sont text-decoration:none Il n'y a pas de surlignement. Par contre l'autre n'a pas été affectée parce qu'elle n'a pas de lien. Si je veux maintenant redonner le lien parce que dans ma communication visuelle je veux que les liens soient soulignés, je vais pouvoir le créer directement par exemple en rajoutant border-bottom de un pixel en pointillé avec une couleur donnée. Là vous voyez que maintenant tout ce qui a un link sont codés par des petits pointillés sous la ligne. Le visited qui était la partie basse, lui avait une couleur. Mais on va pouvoir lui donner une couleur sur la partie visited. Vous voyez que là la couleur à jouer, ce n'est pas tout à fait la même couleur. C'est vrai que j'aurais pu choisir une nuance un peu plus forte. Mais vous voyez le principe. Donc la partie visited peut me permettre d’affecter tous les liens qui ont été visités. Si je prends le :hover, c'est facile à comprendre ici le :hover, lui enregistré, il va pouvoir donner cet élément au moment du survol. Vous voyez vous avez une légère coloration qui apparaît derrière le background. C'est vrai que j'étais un peu léger sur le background. Je vais rajouter un 0,25. Voilà si j'actualise vous avez le stylage qui se passe au moment du survol. Et la partie active ça va être au moment où je clique. Alors là ça va pas être très intéressant au niveau d'un lien type HTML. Mais si on le prend du point de vue… Je vais enregistrer... Vous vous fabriquez un bouton. Vous vous fabriquez un élément de survol. À ce moment-là, ça va avoir son importance. Regardez ici quand je clique, ça devient rouge. Et bien sur, tous les liens quand je les clique vont devenir rouges. J'ai cliqué sur un lien extérieur, je suis parti, si je reviens sur ma page de départ et que je la réactualise. Voilà je vais passer en "visité", dans la partie :visited. Donc ici dans la partie :visited qui serait à cet endroit-là. Des pseudo-classes qui vont nous permettre de pouvoir venir styler globalement l'intégralité de nos liens, ou encore une fois, je le répète, de toutes les balises qui posséderaient ces attributs, et bien sûr qui serait pris en compte par les moteurs de rendu des navigateurs.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !