L'essentiel des CSS

Comprendre l'héritage et le principe de cascade

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez voir en détail le principe de cascade ainsi que la notion d'héritage. Comprenez en quoi cela peut avoir son incidence sur les déclarations.
07:58

Transcription

CSS pour « Cascading Style Sheets » veut dire que, déjà, on a des feuilles de style en cascade. Elles vont s'imbriquer les unes dans les autres, qui vont se compléter, parfois même se remplacer. Ce qui est important de comprendre, c'est comment fonctionne d'une part la cascade au sein des navigateurs, et ensuite comment fonctionne l'héritage également au sein de nos contenus HTML et stylés par des feuilles de style CSS. Déjà, il faut savoir que le style du navigateur, on a parlé du style par défaut, mais le navigateur peut permettre à l'utilisateur de changer visuellement le site. Donc, on a d'une part le style du navigateur, qui peut être modifié, puis le style de l'utilisateur, qui lui aussi peut être modifié. Si parfois, dans le style navigateur, on va pouvoir surcharger, donc on va pouvoir modifier depuis les CSS certaines propriétés, certaines ne pourront pas être modifiées, et seront laissées libre cours au navigateur et à l'utilisateur. Donc, il faut faire attention et prendre en compte cette dimension-là. Et en fin de compte, on a le style de nos documents qui sont les CSS qui sont propres au site sur lequel elle est en train de travailler. Avant d'aller dans le détail de cette explication, je vous propose de prendre un exemple plus concret, avec une simple page HTML contenant un body qui a une couleur d'arrière-plan d'un gris léger et d'une couleur d'écriture qui est olive. La taille de la typo n'a pas été définie. Je l'ai mise en commentaire dans cette partie. Cette taille vient bien de quelque part. On a vu qu'on avait des styles par défaut. Mais au-delà des styles par défaut, on a des préférences dans le navigateur ici, qui vont nous permettre de s'accorder sur une certaine dimension d'écriture au démarrage, une certaine typo, etc. Si je regarde dans les paramètres avancés de Chromium ou de Chrome, c'est pareil, vous voyez qu'ici, dans le contenu web, on a personnalisé les polices. Et si j'appelle cette fenêtre de dialogue, on voit que tout a été personnalisé en 16. Donc, tout est encore 16. On peut bien entendu modifier les familles de police. Ce que certains utilisateurs font. Tout les navigateurs aujourd'hui se sont entendus de travailler sur du 16. Si je prends Firefox maintenant, c'est pareil. On va pouvoir avoir ici dans les options de paramètre ici, dans l'aperçu Contenu, ici, une taille de 16 modifiable. Si je passe en 20 ici, par exemple, par défaut, vous voyez bien que ma page est passée en 20. Il n'y a pas besoin de la recharger. C'est instantané. Si je reviens ici et que je passe encore 10, par exemple, quand je reviens, je suis passé encore 10. Ça peut également être modifié par l'utilisateur à la demande. Ça, c'est la police par défaut. Je vais repasser, si ça vous embête pas, à 16 directement. Donc, ce qui est la valeur par défaut. Mais l'utilisateur, dans le menu Affichage, c'est particulier à Firefox, tous les navigateurs ne proposent pas cela, mais vous pouvez avoir le Zoom texte seulement. La différence, c'est qu'au lieu de zoomer telle une image, si je fais Ctrl++, ici, vous voyez, je zoome, un peu comme si je zoomais avec une loupe d'un Photoshop. Si je reviens à zéro, je vais pouvoir inversement zoomer négatif. Mais si je veux, je peux demander ici, et ce que certains font, surtout les personnes qui ont des soucis de malvoyance, passer ici en Zoom texte seulement, et quand ils vont faire +, en fait, c'est que le texte qui bouge. Là, on voit pas la différence sans image, mais ça va être que le texte. La mise en page du contenu va pouvoir s'adapter de manière liquide. Et ça, vous avez pas de contrôle là-dessus, puisque c'est un contrôle qui est laissé à l'utilisateur. Donc, faites bien attention à cette prise en compte. De plus, certains navigateurs proposent des possibilités de pouvoir styler eux-mêmes leurs documents. Si je viens dans Stylish ici, je peux dire : je voudrais prendre le style noir/jaune. On peut venir, ici, Gérer les styles, et on va pouvoir, en passant dans les Styles utilisateurs, créer un nouveau style, et on peut créer tous les styles que l'on veut. Dès qu'on les enregistre, ils vont apparaître maintenant dans le menu de Stylish, qui est cette extension de Firefox, qui vont maintenant dire : j'arrive pas à lire, j'ai un très mauvais contraste entre ce vert olive et ce gris. Donc, je vais pouvoir dire : je veux mon style noir/jaune. Et quand je vais activer mon style noir/jaune ici, je vais demander bien sûr à activer tous les styles. Et là, il n'y a rien que vous puissiez faire, puisque ça a été un choix de l'utilisateur. Donc, si on revient maintenant sur notre exemple, ici dans Chromium, on sait qu'on a une typo de font-size 16. Si je décommente cette partie dans ma feuille de style, on voit bien que maintenant, le style peut prendre la main dessus. Mais on a vu que pour le noir/jaune, on pouvait pas prendre la main. On a vu que pour le Ctrl++, Ctrl+-, on pouvait pas prendre la main non plus, c'était l'utilisateur. Donc, il faut penser à cette sorte de cascade qui va être mise en place. La cascade va plus loin si je prends l'exemple de cette deuxième page ici, où je vais avoir des styles embarqués dans ma page ici, directement, et qui disent : mon font-size est de 24, et ici, ma couleur d'écriture est le olivedrab. Et qui a cette couleur d'écriture ? C'est la section. Si je regarde bien, la section englobe toute une certaine partie de document. De quel fait, tous les enfants qui vont être directement placés dans section, s'ils n'ont pas de couleur propre qui leur est définie, vont bénéficier de cette couleur-là. Donc, certaines propriétés des parents vont pouvoir se répercuter sur les enfants. Alors, il est certain que si j'avais mis une bordure à la section, je n'aurais pas une bordure à tous les éléments enfants. Mais si je mets une couleur, une typo, une taille, etc., tout ça va pouvoir se répercuter. L'héritage va passer du conteneur parent vers le conteneur enfant. Ensuite, dans quel sens va-t-on embarquer la couleur ? Mais on va regarder ici si j'ai spécifié le h1 couleur red. Le h1 se trouve bien à l'intérieur de la section, mais du fait qu'il a sa propre couleur elle devient rouge. Si par contre, j'avais une feuille de style externe, et cette feuille de style dirait que le h1 est de couleur purple. Quand je viens ici, si je décommente cette ligne ici, et que donc je dis : je lis cette feuille de style, quand je vais recharger ma page, vous voyez que le titre est devenu purple. Pourtant, ici, je le dis rouge. Tout simplement parce que le dernier qui parle a raison. Le dernier qui parle, c'est lui, pas lui. Le navigateur va lire la page du haut en bas. Automatiquement, celui-là va dire : c'est moi qui commande. De la même manière, si ici, je place une seconde... Alors, c'est vrai que mettre un h1 juste après un h1, ça saute aux yeux. Mais quand vous écrivez une feuille de style et que vous avez 7, 8, 900 lignes de codes CSS au sein de la page, c'est facile de venir comme ça écraser une déclaration. Cette déclaration que je vais écraser va dire que je suis darkolivegreen. Quand je vais faire un enregistrement, je suis passé en darkolivegreen. De la même manière, si je prends mon link ici, et au lieu de le placer en bas, je le place au-dessus, instantanément, mon titre redevient rouge, puisque c'est lui le dernier à parler. Maintenant, il va y avoir ce qu'on appelle les surcharges, c'est-à-dire que pour l'instant, c'est que des h1 qu'ils définissent ici et ici. Si maintenant, ici, au lieu de définir une balise h1 tout court, j'enregistre, et je dis : c'est une... Là, si je recharge, c'est le darkolivegreen qui reprend, puisque je viens de désactiver tout ça. Si j'ajoute une balise et je dis : section h1, Ctrl+S, j'enregistre, vous voyez qu'il prend le dessus. Pourtant, c'est le premier à avoir parlé. C'est lui qui prend le dessus, parce qu'il a une spécificité de balise plus lourde que l'autre. Donc, il a un poids plus important. En résumé, on va pouvoir dire qu'en complément de la cascade, on a l'héritage, et qu'au niveau de l'héritage, on va avoir l'ordre de chargement. Sont-ce des styles externes, internes ? On peut charger plusieurs feuilles de style externes. Dans quel ordre vont-elles être lues par le navigateur ? Ensuite, on va avoir l'héritage qui va se faire en héritage simple entre les conteneurs parents et enfants pour certaines des propriétés. Et enfin, on va avoir le poids des règles, avec toutes les spécificités des sélecteurs qui vont passer prioritaires, parce qu'ils seront plus lourds. Pour cela, je vous invite à passer à une autre étape pour mieux décortiquer l'ensemble de ces spécificités.

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 !