Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Remettre les styles CSS à zéro

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Voyez comment utiliser un reset CSS pour remettre à zéro tous les styles. Ainsi, vous allez gommer la plupart des différences entre les navigateurs.

Transcription

Dans le chapitre précédent, nous avons attentivement observé notre maquette Photoshop et nous en avons déduit de cette observation un code html que nous écrit ici dans notre éditeur de code, dans Brackets. Alors, on va aller voir ce que ça donne au niveau du navigateur, et là, nous sommes probablement très déçu puisque nous sommes encore loin du compte. Pourtant, tout le contenu y est. Regardez ici cette grande zone blanche, c'est le logo Didaxo qui est en blanc sur blanc, donc on ne le voit pas. Nous avons ensuite les icônes ici, qui nous proviennent de la police de caractère Font Awesome. Notre barre de liens est là également sous la forme d'une liste à puces. Vous avez cette grande image que vous reconnaissez probablement qui sera le titre principal de l'article de blog. Donc, qui sera affiché sur cette page. Ensuite, nous avons les éléments de la colonne de gauche. c'est à dire l'article en tant que tel avec le corps de texte et les autres éléments du texte. Nous avons ici la colonne de droite, avec la section à propos, partager la page et catégories. Remarquez dans la section partager, les différentes icônes, qui nous viennent du service AddToAny. Ces icônes sont d'ailleurs déjà actives. Regardez si je clique ici sur l'icône de Linkedin, je peux déjà partager ma page sur Linkedin ou encore sur Twitter en cliquant sur l'icône d'à côté. Si je continue à descendre, j'arrive au niveau du footer, au niveau du pied de page. De nouveau le logo Didaxo en blanc sur blanc. Et puis les autres éléments, notamment ici le sélecteur de langues, avec les deux drapeaux. Il nous ùanque bien évidemment la mise en forme de tout cela. Quand je dis qu'il nous manque la mise en forme, ce n'est pas tout à fait vrai parce que certains de ces éléments sont déjà mis en forme. C'est le cas par exemple de ces deux titres, légal et cette page en, vous voyez que ces deux titres sont en gras. Vous voyez également qu'il y a un espace entre ces titres et les autres éléments avant et après. Alors, ce ne sont pas les seuls éléments de la page qui sont mis en forme. Vous remarquez également ici que l'adresse est mise en italique. Vous remarquez d'autres petites choses Notamment au niveau des listes à puces et un numéro ici. Nous avons un retrait par rapport au début de la page. Remarquez également que les autres éléments ne touchent pas le bord de la page ici. Il y a donc, semble-t-il, une patite marge au début de la page. Nous avons également les titres ici, qui sont mis en forme avec des tailles de caractère différentes. D'où viennent toutes ces mises en forme ? Eh bien, je vais faire un clic droit, ici par exemple, dans le titre de niveau 1. Je vais inspecter ce titre ici. Alors, je vais l'inspecter dans la console. Vous remarquez quand je sélectionne ce titre, dans le panneau style qui se trouve ici, sur le côté, il y a déjà des styles qui sont appliqués à cet élément-là. Notamment une taille de caractère de 2em. Nous avons également des marges qui sont appliquées à cet élément. Et le fait que cette police de caractère, ici, est en gras. Eh bien, ces éléments proviennent de la user_agent_stylesheet. C'est à dire de la feuille de style du navigateur, de Google Chrome dans ce cas. Le navigateur va appliquer une feuille de style à notre page html. Et il n'y a pas moyen d'annuler ce processus. En effet, ça fait tout simplement du processus normal d'affichage de la page par votre navigateur. Alors moi, ça me pose deux gros problèmes. Le premier problème, c'est que, mon titre de niveau 1, je n'ai peut-être pas envie qu'il ait ces éléments-là. Je n'ai peut-être pas envie de le mettre en gras, qu'il ait une taille de 2em ou des marges. J'ai peut-être envie d'autre chose. Donc, je n'ai pas envie que le navigateur vienne mettre son grain de sel dedans, vienne m'empêcher de faire ce que moi, j'ai envie. Le deuxième problème que j'ai, c'est que les autres navigateurs, donc Firefox, Microsoft Edge, etc... Ils vont également appliquer leurs propres feuilles de style sur mon code html mais ça ne sera peut-être pas la même feuille de style. Ces éléments risquent d'apparaître un petit peu différemment en fonction du navigateur qui est utilisé. Avant de développer ma feuille de style css, je vais donc tout remettre à zéro. C'est à dire mettre tout le monde d'accord et mettre tous les navigateurs au même point de départ avant donc de développer ma propre feuille de style. Pour ça, j'ai été dans Google et j'ai tapé reset css. Et je tombe sur le premier lien, un site qui s'appelle meyerweb.com. Alors, je vais aller visiter ce site. Pour information, Eric Meyer, à qui appartient ce site, est une des personnes qui a contribué au développement du css. On peut donc supposer qu'il sait de quoi il parle. Et il nous propose une feuille de style css pour tout remettre à zéro. Vous avez ici en anglais you can grab a copy of the file to use. Vous voyez que c'est très facile à comprendre même si on n'est pas anglophone. On va donc cliquer sur ce lien. Et voici la feuille de style qui va tout remettre à zéro. Elle s'appelle reset.css. Je vais donc la sauvegarder. Ici, enregistrer la page sous. Dans le dossier css de mon site. Et je vais revenir au niveau de mon éditeur de code. Alors, voici la feuille de style que je viens de télécharger, reset.css. Que fait-elle, cette feuille de style ? Vous avez ici une liste impressionnante de balises html. Toutes ces balises, vous voyez qu'on les remets toutes à zéro. C'est à dire, pas de marges, pas de padding, pas de bordures. La même taille de caractère pour tout le monde. Et font : inherit, ça veut dire que tout ce qui est gras, tout ce qui est en italisue, sera de nouveau en normal. Vous avez également la liste de tous les nouveaux éléments introduits par html 5. Ça concerne les anciens navigateurs qui ne connaissaient pas ces éléments. On leur dit simplement ici, d'afficher ces nouveaux éléments comme des blocs. Remarquez également ici, la balise ol et ul, donc les listes à puces et à numéros, qu'on remet également à zéro Donc, on retire les puces et les numéros de ces éléments. Ce qui nous laisse le soin de choisir pour chacune de ces listes, le type de puces et le type de numéros qu'on désire utiliser. Je vais donc me rendre dans ma page html, et je vais lier ma page html à cette feuille de style. Et je vais bien prendre soin que le lien vers reset.css soit le premier lien vers une feuille de style. Je veux commencer par tout remettre à zéro et après, venir mettre des styles sur une page qui est remise à zéro. Donc pour ça, je vais écrire ici une nouvelle balise link, je vais faire de nouveau un lien vers une feuille de style. Voilà. Cette feuille de style se trouve dans mon dossier css. Elle s'appelle reset.css. Je sauvegarde ma page. Je vais retourner maintenant sur mon navigateur pour rafraichir ma page. Et voilà donc, tout est remis à zéro. Vous constatez qu'il n'y a plus de tailles et de caractère différents pour les titres. Vous constatez qu'il n'y a plus de gras ou d'italique. Au niveau des listes à puces et à numéros, il n'y a plus de puces et de numéros. Il n'y a plus de marges non plus, les éléments touchent le bord de la page. Donc voilà, j'ai un point de départ ici, qui est le même pour tous les navigateurs. Donc je peux maintenant construire ma feuille de style css sur des bases solides.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Cette formation est excellente!
Guillaume F.

Le formateur est très pédagogue. Il explique les choses d'une manière tres comprehensible tout en etant tres agréable à suivre. Une formation parfaite !!! Bien qu'ayant déjà de bonnes bases, cela ma permis de recadrer certaines idées et rendre les pratiques plus claires et faciles à réaliser. C'est cadré et propre !!!! Bravo

 

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 !