L'essentiel des CSS

Découvrir les langages clients

Testez gratuitement nos 1309 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Prenez le temps de comprendre l'imbrication des CSS au sein des trois principaux langages clients utilisés par les navigateurs. Il s'agit des navigateurs HTML, CSS et JavaScript.
05:03

Transcription

Avant d'explorer plus en détail l'utilisation et l'emploi du CSS, regardons de manière plus large les trois principaux langages que l'on utilise au quotidien lorsqu'on développe et qu'on met en place des sites web. Alors le langage le plus commun, le plus rencontré des trois, le plus ancien aussi, c'est le HTML qui va permettre de pouvoir entouré le contenu, en lui donnant un sens sémantique mais aussi une structure qui va permettre d'imbriquer les éléments les uns dans les autres. C'est un langage qui a peu de rendu visuel, pour ne pas dire pas du tout. Donc on va écrire sur fond blanc généralement en noir avec des liens en bleu. Comme image on aura que celles contenues dans la page, peu de [inaudible] visuel donc tout ça, ça été retiré au fil des étapes du HTML et donc c'est relégué au CSS, c'est-à-dire qu'il y a une tâche qui est reléguée au CSS. Donc le CSS c'est un langage de déclaration qui va permettre de définir les titres en bleu, les articles vont être avec des bordures, des encadrés, une typo de telle manière donc tout va pouvoir être défini au sein même des déclarations CSS. Le troisième larron de la bande, c'est le JavaScript. Le JavaScript va apporter une touche d'interactivité à l'utilisateur, va permettre de pouvoir donc apporter des éléments contenus dynamiques en fonction de la navigation, en fonction des choix et des sélections que va faire l'utilisateur. On va pouvoir modifier le contenu de ces pages en utilisant ce langage. Plutôt que de rester que dans l'aspect théorique maintenant que l'on a vu HTML, CSS, JavaScript, regardons un peu à quoi ils ressemblent. Alors ici le HTML on voit bien que c'est un langage à balises, c'est-à-dire avec des balises ouvrantes et des balises fermantes. Ici j'ai une balise ouvrante <nav et ici une balise fermante qui va permettre de définir un début et une fin à certaines natures de contenu. On va pouvoir imbriquer autant de balises que l'on veut au sein de ces balises et construire comme ça une certaine arborescence. On reviendra plus tard sur cette notion d'arborescence et de dôme justement au cours des étapes. Le CSS est un langage de description qui lui va être composé de plusieurs petits modules qui vont définir la nature et la représentativité de ces éléments. Donc ici par exemple body, voilà tout ce qui va caractériser le body. On va pouvoir caractériser la balise header, voilà. On va pouvoir donner un certain nombre de propriétés avec des valeurs chacune. On verra bien en détail la nature de ces propriétés valeur. Et puis on va pouvoir aller affiner avec les sélecteurs comme ça, en disant ici le header voilà sa nature mais le header h1, donc toutes les balises h1 contenues à l'intérieur de header, voilà leurs représentations. Et on peut avoir comme ça plusieurs feuilles de style différentes, alternatives, qui vont venir s'ajouter ou se remplacer au sein d'un seul et unique même document HTML. Donc le contenu, lui, ne changera jamais sauf si le JavaScript vient ici dire attention on va remplacer cette partie du document par telle partie, par tel complément d'information, etc. Alors ici c'est très, très, très sommaire mais c'est pour montrer un peu l'aspect de ce langage. Alors si je reviens ici maintenant dans mon langage HTML, que je le visualise dans un navigateur, on voit bien que c'est très, très pauvre. On a des listes, on a des titres écrits en gras. On a des liens, s'il y en a, qui sont écrits en bleu et soulignés, des images qui font partie du contenu mais qui sont posées tel quel dans le flux. Et si on vient activer maintenant une feuille de style. Alors ici, je vais activer la première feuille de style avec une feuille de réinitialisation pour remettre à plat les propriétés par défaut du navigateur. On verra ça également en détail au cours des étapes. Ici, si j'actualise ma page, maintenant, on voit bien que le contenu est mis en forme. Par contre, je n'ai aucune interactivité. Je peux cliquer partout. Ici, on voit bien qu'il y a un curseur qui me dit tu peux cliquer mais le clic n'est pas activé. On va aller donc de ce pas activer le JavaScript. Alors pour activer le JavaScript, il suffit ici que je place des commentaires de ce côté-là. J'utilise une librairie qui s'appelle jquery avec un simple petit coup de code qui va réorganiser mon visuel CSS. Voilà, ici je repasse dans le navigateur. Je charge ma page. Et maintenant quand je clique, vous voyez, on change la présentation de ce contenu. On va pouvoir aussi, comme je le disais tout à l'heure, utiliser une feuille alternative. Donc si ici maintenant, je décommente et j'utilise une autre feuille de style, que je n'utilise plus la première mais la seconde. J'enregistre ce document. Je rebascule dans le navigateur. Le contenu ne change pas mais ça disposition change. Vous voyez ici les paragraphes sont présentés de manière différente, les survols, etc. L'interactivité est toujours la même parce qu'elle a été prévue dans ce sens-là. Et puis surtout, ce qui est intéressant, c'est que si maintenant je redimensionne mon contenu, vous voyez ici qu'au lieu de le visualiser dans un navigateur de type ordinateur, je le regarde sur une tablette en mode portrait, on s'aperçoit que je vais pouvoir continuer à visualiser ce contenu, il s'adapte. Et bien entendu, si j'arrive sur un portable, le contenu va se présenter avec des images en moins parce que la bande passante, parce que etc. Mais tout ça c'est géré par les feuilles de style CSS. Donc on voit bien que les feuilles de style CSS vont accomplir une grande partie émergée de l'iceberg, parce que c'est surtout celle qu'on va voir, qui va nous permettre de pouvoir gérer le visuel de nos contenus et ce, quelque soit les 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 !