Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel des CSS

Comprendre les règles et la déclaration CSS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Le cœœur des CSS est composé de règles et de déclarations. Pour directement passer à l'action, apprenez une règle et des déclarations vous plaçant le pied à l'étrier.
03:49

Transcription

Le cœur du fonctionnement d'une CSS fonctionne à ce qu'on appelle une déclaration. Une déclaration est une paire de propriétés valeurs Par exemple couleur-rouge. Dès qu'on va pouvoir définir ces éléments-là, on va pouvoir commencer à travailler avec des CSS. La somme de ces déclarations sont définies dans ce qu'on appelle une règle. Généralement, une règle va être composée de plusieurs parties. Ce que je vous propose c'est qu'on décortique ces diverses parties. La première partie va être le sélecteur. Le sélecteur est un peu l'indicateur qui va pointer vers l'élément à affecter. Ici on affecterait section p Si je prends un exemple sur une page web, j'ai trois paragraphes qui sont écrits sur une page. Ils sont écrit de manière brute de décoffrage, comme le navigateur l'écrit par défaut sans avoir quelques recommandations que ce soit de définies. Si maintenant je regarde la page code source qui compose cette partie, si on regarde de plus près, on n'a pas trois paragraphes, on a deux paragraphes qui sont constitués d'une section, et un troisième paragraphe ici. Si je définis la règle section b à cet endroit-là ça veut dire "Je voudrais utiliser tous les paragraphes qui sont dans une section." Quelque soit la section dès qu'il y a un p à l'intérieur de la section, je vais pouvoir le cibler. SI je reviens maintenant sur mon explication ici, on s'aperçoit qu'on a un sélecteur qui va pouvoir définir un certain nombre de déclarations dans une règle qui doit être composée par ces accolades. Chaque fois que je vais avoir une accolade comme ça, je vais pouvoir affecter toutes ces propriétés descriptions comme je disais tout à l'heure couleur rouge, par exemple, à ce sélecteur. La deuxième partie va être la déclaration qui est tout ce bloc. On va décortiquer à l'intérieur des propres propriétés color ces propriétés on ne les invente pas - on les verra toutes en détails, comment on peut les appréhender toutes - vont être définies par les CSS. Chacune de ces propriétés peut prendre un certain nombre des valeurs parfois des chiffres, parfois des textes, parfois des mots clefs, on verra tout ça en détail également qui va pouvoir également affecter une valeur à une propriété. Si maintenant, je reviens à mon exemple ici, et que je me dis ; je vais rajouter une famille de font qui serait Arial voir Sans Serif si tu ne disposes pas de la Arial un font size qui serait de 2,25 em unité de mesure un petit peu particulière qu'on verra également en détail. On va définir une typo, on va définir une taille d'écriture, une hauteur de ligne, un interlignage qui serait de 125% alors là, on aurait très bien pu dire 1.25 on n'est pas obligés de rentrer dans de l'unité, on peut donner un simple rapport d'ordre par rapport à l'unité en cours. On reverra tout ça en détail, ne vous inquiétez pas. ici, vraiment, on ne fait que survoler. Ici, on va pouvoir demander d'avoir une couleur qui serait du HSL Tête de Saturation Luminosité avec une couche alpha qui va pouvoir définir la couleur. Si j'enregistre cette partie-là, que je reviens à ma page de navigateur pour venir tester et que j'actualise, on s'aperçoit que seuls les deux paragraphes qui sont dans la section ont été affectés. Ils ont changé de typo, de couleur, de taille et d'interlignage. C'est aussi simple que ça. Un petit dernier détail qu'on est souvent amenés à utiliser c'est ce qu'on appelle le commentaire. Vous voyez ici, j'ai une ligne qui est grisée dans mon éditeur encadrée par un /* et fermée par un */ à la fin. pour dire au moteur de rendu : ignore cette partie-là n'en tiens pas compte. C'est ce qu'on appelle des commentaires. Ici, si je reviens à cette partie-là, on peut très bien placer le font-size en commentaire, tout simplement, ce qu'on va faire c'est placer un /* et */ autour de cet élément-là, et ça devient un commentaire. Pour écrire des feuilles de style CSS, tout se passe directement dans des déclarations que l'on va pouvoir définir au sein d'une règle.

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 !