Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel des CSS

Créer des liens et l'arrière-plan

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Mettez en application les propriétés de couleurs, bordures et arrière-plans. Ainsi, vous allez pouvoir rendre des éléments textuels complètement visuels.
04:23

Transcription

Une mise concrète et directe en application des arrière-plans va être par exemple pour des liens. Regardez. Si ici je prends simplement 4 liens href avec un pointant vers un fichier pdf , un pointant vers un fichier xls, un pointant vers un site externe et un vers un fichier interne au site. On prépare 4 images. La première image est une icône d'un fichier excel, la deuxième celle d'un fichier pdf la troisième une icône qui va matérialiser un lien en interne donc vers le bas, un autre un lien en externe donc vers le haut. Si, on rentre dans la partie du style, ici on va pouvoir dire que par exemple on a un display block pour être sûr que notre élément a va être considéré comme un bloc et non pas comme une partie de phrase. On verra les éléments de boîte juste un peu après. On va lui demander d'avoir un padding left de 24 px. Si on regarde bien nos images, elles font 20px de large, si on prends 24 px de padding left, ça veut dire qu'on va écarter nos éléments de 24 px. Regardez ! Si j'enregistre et que j'actualise, on voit que nos éléments se mettent les uns sous les autres. Ici ils se sont un peu écartés de l'emplacement où ils auraient dû être. On va continuer. On va dire que maintenant on va mettre un background repeat qui n'a pas de repeat donc le background va être une seule image. On va mettre une position en left et centre, de façon à ce qu'il se centre au milieu de la phrase. Maintenant ce qu'on va faire, c'est élément par élément, vous vous rappelez des sélecteurs d'attribut, ici je dis : je cherche un sélecteur qui possède href. Qui possède href ? Tout le monde. Donc tous le monde va avoir un background image qui sera interne. Interne, rappelons-le, c'est ce lien ici. Parfait ! Maintenant, si je prends un deuxième filtre d'attribut, et ce filtre d'attribut je lui dit qu'il commence par http:// qu'est-ce qu'on va mettre ? On va mettre un background externe. Ce qui veut dire que le background externe avait aussi un href mais il ne sera pas pris car c'est le dernier qui parle qui a raison, donc il va prendre le dessus. Il me reste à faire la même chose en m'assurant de ce qui finissent par pdf en mettant l'image pdf et ceux qui terminent par xls en mettant l'image xls. Si j'enregistre et que j'actualise, on rajoute toutes les petites icônes devant nos petits liens directement. On peut faire une barre de menu avec une iconographie de cette manière-là. Prenons un autre cas d'école : un simple lien avec le mot accueil. On prépare un petit png, svg, base 64, format d'image que vous souhaitez. Ici, on va représenter une petite maison avec un fond transparent. Maintenant, on va revenir dans notre style au niveau de la balise a et on va dire on va faire un display block pour s'assurer d'être dans un élément autonome et sorti du contexte du flux de la phrase dans lequel il était écrit. Vous comprendrez par rapport au flux ce que je voulais dire quand on fera l'étape sur le modèle de boîte. Maintenant on va lui donner une largeur de 60 px fixe, on va donner une hauteur de 40 px fixe et on va dire le texte : il n'y est plus. On le met à -9999 px à gauche, donc on fait un text-indent. Ici, si j'actualise : on ne voit plus le texte. Le lien est toujours là mais il n'y a plus de texte. Donc il fait 60 px par 40 px mais on ne le voit plus. Maintenant, on va pouvoir travailler sur la peinture et le décor de cette boîte invisible. On va rajouter ici text-decoration none au cas où le texte serait apparu, si vous faites par un javascript revenir au moment du survol ou quoi que ce soit... On va faire un text-decoration none pour être sûr qu'il n'y ait pas ce surlignement puis on va continuer à dire, on va mettre un background image qui est cette image du fond d'accueil cette petite maison. On va mettre un background repeat négatif. On va mettre une position au centre et au centre pour être sûr qu'on soit bien au milieu. On aurait pu mettre 50%, 50%. Ici on va mettre un background color en bordure avec 4 px et puis un coin arrondi de 25 px. On n'est pas tout à fait sur du cercle. N'oublions pas qu'on a une hauteur de 40 et qu'on va mettre un demi-cercle sur le côté gauche. Si j'actualise, notre petit bouton a bien été mis en place. Il ne nous reste plus qu'à gérer l'état hover que vous avez vu avec les pseudo-classes pour pouvoir avoir directement un bouton. Si on voulait parfaire l'élément, on pourrait rajouter ce hover c'est élément enfoncé avec le 'actif'. Donc vous avez vu que directement en mettant en application les arrière-plans, les bordures et les couleurs, on peut, de suite, donner corps directement à des éléments HTML qu'on n'a pas l'habitude de consulter sous forme graphique mais plutôt sous forme textuelle.

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 !