L'essentiel des CSS

Parcourir les autres modes d'affichage

Testez gratuitement nos 1250 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Le mode d'affichage ne s'arrête pas à la gestion des éléments de type bloc et inline. Intervenez également sur tout types d'éléments et transformez leur mode d'affichage selon les diverses possibilités.
08:30

Transcription

Le changement de mode d'affichage ne s'arrête pas simplement à inverser le mode de type inline vers du bloc ou du bloc vers du inline ou l'amalgame entre inline bloc. Regardez, ici on a une partie HTML qui contient trois sections. Une première section qui a une ID de type list marquée avec que des éléments de type span à l'intérieur, que des éléments de type en ligne qui sont enfilés pêle-mêle les uns à la suite des autres. On a une deuxième section qu'on appelle table, qui contient trois articles. Ces trois articles ont un titre et du contenu, paragraphe. Enfin, on a une section qui contient les listes de définition, donc une DL qui contient un DT pour le titre, le mot à définir, et du DD, le contenu de la définition. data title, data data. Définition data. On va voir qu'on va pouvoir, grâce au CSS, modifier tout ça. Premièrement, on va demander à chacune des sections, il y en a trois, d'avoir d'une part un width de 60%, pour tenir moins de place en largeur, et d'avoir un margin de 10 pixels en hauteur et auto, de façon à se centrer sur la largeur. Là le A a été mal pris. 10 pixels. Si j'arrive dans ce sens-là, on voit bien qu'on a l'intégralité de notre contenu qui est réduit à 60, on va passer à 80%, 60 ça fait peut-être un peu beaucoup. Donc voilà, 80%. Et avoir un margin top et bottom de 10 pixels et auto, c'est-à-dire que le système va centrer automatiquement, va placer autant de marge à droite qu'à gauche en fonction de la largeur et la largeur de la page également. Maintenant, on va s'occuper de la partie span, donc tous les éléments de type span. On pourrait simplement coder du span, mais ce que je préfère faire dans ce cas, uniquement pour que ce soit plus clair à la relecture, c'est de faire un list span. On considère que la section de ID type list, on va prendre tous les span qu'il y a à l'intérieur, et on va faire un display; list item. Tous les span vont se considérer comme si c'était des éléments de liste. Ils sont directement mis les uns à la suite des autres, etc. Tout ce qu'on pourrait apporter comme propriétés aux listes vont pouvoir être apportées maintenant à ces éléments, puisque ce sont des éléments de type list. On va aller sur quelque chose d'assez sympa maintenant, c'est sur la partie table. Alors là pareil, on aurait pu ne pas placer l'ID table, puisque c'est vrai qu'il n'y a que des articles dans de ce contenu, mais je vous propose de garder ça, pour avoir une meilleur visibilité au moment du débugage. Si je dis «Tous les articles qui sont à l'intérieur de l'ID table, je veux que leur mode d'affichage display soit de type table cell», ce sera des cellules de tableau. On n'est pas obligé de reconstruire un tableau, on n'est pas obligé d'avoir un conteneur parent dont la section, table, qui serait de type table, table raw, etc. Bien qu'on ait accès à tous ces éléments, quand je suis ici, en table je peux avoir table column, table raw, table column group, footer, header, raw, on peut avoir accès à toutes les notions d'affichage tableau. Mais on n'est pas obligé de reconstruire un tableau pour que ça soit pris en compte. Et si maintenant, puisque ce sont des table, je lui dis que le width va être de 33%, on va avoir exactement trois colonnes de tableau qui sont en mode affichage. On a tous les avantages de la mise en page en tableau, sans avoir les spaghettis tableau (balise de table, table raw etc.) qu'on aurait dans le HTML. Donc il ne faut pas s'en passer, c'est vraiment très intéressant. C'est très intéressant, pourquoi ? Quand vous allez faire du CSS, si vous avez déjà fait du CSS, vous savez comme il est compliqué de venir mettre une couleur qui puisse être sur trois éléments div qui vont être côte à côte, qui fassent la même longueur si ceux-là n'ont pas le même contenu. Si je mettais une couleur de fond à cet élément-là, sa couleur va s'arrêter ici. Donc il y a plein de hacks et de manières détournées du HTML pour lui dire «Non, j'aimerais que la couleur s'étende jusqu'en bas». Ici je vais venir dans table, et je vais lui dire «On a un élément qui s'appelle couleur fond» Cet élément couleur fond, il est là. C'est la colonne numéro 2, qui a une classe, la plus petite ici, classe couleur fond. Si je lui demande maintenant de faire un background color à cet élément là, je reviens dans la couleur de fond, je lui dis «Met-moi une couleur de fond sur cet élément» Regardez si j'actualise, la couleur de fond va bien jusqu'en bas du tableau, puisque c'est une cellule de tableau elle fait forcément partie d'une rangée et elle va se colorer jusqu'en bas. Donc c'est complètement stratégique de définir des tableaux en CSS, ne vous en privez pas. Regardez quand-même la compatibilité et la portabilité des navigateurs. En fonction de ce que vous développez, vous avez ça sous le capot. Maintenant regardons les derniers, ici si je prend la liste des définitions, on va rentrer sur définition. Donc je vais définir les DT, les titres, et les définitions DD (les data) Je vais leur dire que leur display est en mode inline. Et de ce fait, si j'actualise tous se suivent. Alors là, le mot à définir va être là et l'autre définition va être là. Ce que je vais demander maintenant, c'est un peu particulier ici, grâce à l'élément DD, faites attention si vous avez plusieurs DD à l'intérieur, que cela ne cause pas un soucis à votre mise en page. Donc regardez quel va être le dernier élément de votre définition. Si vous lui dites, ici, à DD after juste après je vais mettre un pseudo, ici je vais utiliser un content un peu particulier, je vais mettre des caractères unicode. Vous savez qu'on a la possibilité, on l'avait déjà fait au préalable, on avait mis des caractères unicode. Là comme caractère unicode, je vais mettre le backslash 000D suivit directement d'un backslash 000A. D'après vous, qu'est ce que peut vouloir dire ce caractère ? C'est simplement le caractère de fin de ligne. On va aller vite le voir, et je vais lui dire juste après le white space. C'est-à-dire que si tu utilises un espace au niveau de la fin de la ligne, tu vas l'utiliser comme si tu étais en mode d'écriture pre, vous savez la balise pre HTML. c'est-à-dire si il y a un retour de ligne tu le prends, si il n'y a pas de retour de ligne tu ne le prends pas, tu mets un white space qui va continuer. Regardez maintenant, je vais vous amener sur Wikipédia, caractère fin de ligne. Ici sur le caractère de fin de ligne, dans Wikipédia, on a tous les caractères en fonction des systèmes d'exploitation. Donc carriage return line feed, retour de chariot avec la ligne complète c'est 000D 000A. Donc si je place cet élément en fin de ligne, j'enregistre ici et que je viens actualiser ma page ici, on voit bien qu'on a le caractère qui a été placé. Là, il y a une toute petite erreur qui m'arrive, c'est que ici j'ai mis des o et pas des zéro. J'actualise ma page, on voit bien que maintenant on a Mot à définir qui est là, Autre définition qui est passé à la ligne, on a bien eu un retour. Par contre, on n'a pas de retour, parce qu'on a un espace sur la gestion des autres contenus. Donc maintenant ce qu'on va pouvoir faire, c'est dire «Attention, après le DT par exemple...» Je vais copier cette partie-là, ça ira plus vite. On pourrait dire que après le DT, pas après le DB, mais cette fois-ci après le titre, on pourrait mettre un content avec un espace, deux points, un espace, par exemple. Ici, on n'a pas besoin de placer ça, et juste pour pouvoir définir un autre aspect de la définition, pour le rendre un tantinet plus visuel, je vais rajouter ici... Vous avez vu je copie-colle beaucoup, je suis un peu flemmard du clavier (rit). Ça évite tellement d'erreurs de syntaxe. font weight je vais dire que je veux du bold, on va mettre du 700, qui correspond à du bold n'importe comment. J'actualise. Voyez, je viens de mettre mes mots à définir en gras, j'ai mis les deux points après, je les ait placés juste sur la ligne sur le côté inline avec la suite de la définition. Quelque chose qui nous échappe un peu, c'est ici ce gros espace-là. C'est que par défaut, le DD vous savez il est rentré, ou les DT ils sont rentrés ils ont des marges. Il suffit de venir dans cette partie-là faire un margin 0 ici à cet élément-là, on actualise et on n'a plus de marge par défaut qui était affectée à ces éléments. Donc il nous est totalement possible de redéfinir la nature des éléments tels qu'ils ont été définis dans le W3C et donc par les navigateurs, de pouvoir les transformer et leur donner un mode d'affichage différent pour pouvoir nous permettre d'aller plus rapidement et plus précisément dans la disposition de nos pages, de nos contenus.

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 !