L'essentiel des CSS

Travailler sur des éléments inline

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez décortiquer le modèle de boîte des éléments de type inline. Vérifiez leur comportement au niveau des marges, padding, bordures et arrière-plans.
05:34

Transcription

Alors commençons par explorer le modèle de boîte de type inline. Pour cela, on a un petit espace de travail dans lequel on a réinitialisé les CSS, vous voyez, on a un reset CSS, donc il n'y a pas de marge, il n'y a rien par défaut, tout est contrôlé par le code que l'on va écrire. On va pouvoir s'en servir comme un petit laboratoire. Dans le body de la feuille de style, un background qui est une image en grille 32 qui va permettre d'avoir un surlignement rose tous les 32 pixels et des lignes verticales placées tous les 32 pixels également. Alors pour pouvoir travailler là-dessus, on va utiliser deux span qu'on va mettre côte à côte ici, si j'enregistre, on voit que ces deux éléments se suivent. Entre le « o » et le « S », il n'y a pas d'espace, puisqu'il n'y a pas d'espace, ils sont générés où que ce soit, ici. Donc c'est en ligne, ils se collent les uns aux autres. Histoire de pouvoir travailler de manière précise, on va coder les span, et on va dire à ces span d'avoir une font-size de 32 pixels et d'avoir un line-height qui serait également de 32 pixels, ici. De façon à pouvoir écrire vraiment dans notre hauteur. Et vous voyez que ma première ligne suit bien la seconde. Alors théoriquement, n'oublions pas qu'un line-height devrait avoir un rapport de 1,5, donc, je devrais avoir 48 pixels pour avoir une meilleure lisibilité, mais là on ne cherche pas la lisibilité, on veut mesurer au pixel près ce qu'il se passe. Pour mesurer ce qu'il se passe, je vais classer cet élément, je vais l'isoler, donc je l'appelle « isole », par rapport à l'autre, et je viens sur « isole », travailler et lui demander donc d'avoir une marge, par exemple, de 32 pixels. Donc est-ce que tu acceptes d'avoir une marge de 32 pixels ? Là est ma question. Il me dit « oui, j'accepte ». Vous voyez que la marge de 32 pixels est bien portée à l'avant, elle est bien portée après, puisque le « o » et le « S » sont séparés, par contre il n'y a rien ni au-dessus, ni en dessous. Donc on va dire que les modèles de type inline n'acceptent ni de marge top, ni de marge bottom, par contre, ils acceptent bien les marges left et right. Fait-il pareil avec le padding ? Donc si je prends un padding de 32 pixels, donc tout le tour, on va l'abréger encore ici, 32 pixels tout le tour, oui, c'est accepté. Vous voyez, sur la partie gauche, on voit bien le 32, on comprend qu'entre le « o » et le « S » il y a 32, par contre, toujours rien verticalement. Est-ce qu'il accepte les bordures ? Là, ça va être un peu plus rock 'n' roll. On va mettre du 32 pixels aussi, on va le mettre en solid et on va le mettre en red. Je vais pas faire un red, je vais faire un rgb(255, 0, 0), par contre, je vais faire un alpha, je vais mettre 0.45, soyons fous, et ici, il me faut un petit a, voilà, ctrl+S. Donc j'ai mis en rouge à 45 pour que ce soit pas trop violent. Eh bien oui, ça le fait. Donc vous voyez, la bordure va bien se placer en premier plan, donc on a la marge, la bordure, le padding, ici on a la suite du texte, on a également une bordure qui s'est mise en dessous, et vous avez vu, bizarrement, elle a pris en compte le padding. Alors que le padding n'était pas dessiné, il ne poussait pas, le padding existe bien dans le sens de la bordure. Donc on a bien cette bordure qui suit tout l'élément. C'est vrai que si on ajoute cet élément-là, je le supprime puisqu'on a vu ce qu'on voulait voir avec, j'actualise la page, et là notre modèle de boîte se met aussi bien au-dessus qu'en dessous et tient compte du padding. C'est assez particulier de vérifier cela. Je vais commenter ça juste pour ne pas être perturbé par ce mode d'affichage, j'enregistre, et je viens derrière ce span rajouter un texte long. Ce coup-ci, j'ai un texte long. Si j'enregistre, que se passe-t-il ? N'oublions pas, on a enlevé la bordure, on a toujours notre padding et notre margin à droite, c'est lui qui nous a poussés. La preuve c'est que si je viens, on voit bien que le texte long part à la suite. Le texte long ne s'est pas mis à la suite tout seul, en le voulant. Pour le faire aller à la suite tout seul, en le voulant, on va mettre un br, un back return, et on va donc lui demander de passer. Là on ne voit rien, mais il est resté à la ligne, donc si j'agrandis, il reste à la ligne, pas de soucis, il ne suit pas « Suscipit ipsa quo ». Il est resté bien derrière. Ce que je vais faire maintenant, c'est lui demander s'il peut travailler avec un text-indent. Je vais appeler la classe « long », et dans cette classe, je vais simplement faire un text-indent de 32 pixels. text-indent: 32px voilà, ctrl+S, je l'envoie. Ah ! Il me donne l'impression de ne pas l'accepter. Il ne l'accepte pas. Donc il ne nous reste plus qu'à explorer les éléments de décor. Ici, je vais ajouter un énième span, qui passe bien à la suite, avec bien sûr le br qui va nous permettre d'avoir un retour, et ici, dans la partie du décor, on va chercher, en ne lui plaçant aucune bordure, de façon à supprimer la bordure, ça évite d'avoir à taper border-top, border-right, border-bottom, donc on fait border-none, et juste après, on fait border-left il n'y a que lui qui va se réécrire, et on lui met 32 pixels, une couleur rouge, solid, et ici maintenant, un background-color hsla. On va voir ce qu'il se passe, j'enregistre, et oui, effectivement, on peut mettre la bordure, on l'a vu avec le premier élément, et on peut mettre un background-color en arrière-plan de cet élément. Donc les éléments de type inline ont un modèle de boîte un peu particulier, car ils n'acceptent ni les text-indent, ni les marges hautes et basses, ni le padding haut et bas, mais tout le reste peut être plus ou moins géré.

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 !