salut

avant de venir vous demandez de l'aide sachez que j'ai cherché, recopié le code, essayé de le comprendre plusieurs heures sans succes

dans un cours de pierre giraud il y a 3 cas ou je n'arrive vraiment pas a comprendre le resultat

tout le reste je comprends meme la suite de son cours mais je suis revenu a ce passage pour le comprendre

le cas 1: je n'arrive vraiment pas a comprendre pourquoi "autre element" est plus petit que 12

https://www.pierre-giraud.com/html-css-apprendre-coder-cours/cascade-heritage/

si j'ai bien compris le css"ul .petit" est prioritaire car il a plusieur combinateur donc 12 px sera appliqué pour la taille et le .bigorange ne compte pas sauf pour la couleur orange

mais pourquoi le texte fait moi de 12px ? on voit bien qu'il est plus petit car "element de la liste 1" fait 12 px et est plus grand que lui

CAS 2:

ici je comprend pas pourquoi le titre ne fait pas 30px

le premier paragraphe fait 24 px donc le titre devrait etre plus grand car sont styl est font-size: 30px vu que le style est ecrit apres le link

CAS 3:

ici malgres l'explication je ne comprend pas les marge et le inherit

les marges des deux element de liste sont de 50px pour l'un et 10px pour l'autre mais le css inherit vient en dessous donc est prioritaire donc les elements de la liste aurait du avoir juste une marge equivalente a celle de "ul"

mais au lieu decela leurs marges a doublé..... la je seche lol
Au pire si le inherit ne remplace pas mais rajoute une marge equivalente a la marge de "ul" a chacun des elements de la liste on aurait du avoir marge"ul"+50px et marge"ul"+10px mais la on a 50px x2 et 10px x2

j'ai essayé de copier les codes puis en enlever puis changer l'ordre mais jarrive pas a comprendre l'action de inherit ici

mise a jour : je viens de comprendre le 3eme cas
j'ai mal lu lol les 50px et 10 px ne sont pas les marge de li mais de ul ...

-
Edité par AbcAbc6 7 septembre 2021 à 13:03:24

CAS 1 :

'autre element' fait parfaitement 12px, comment tu sais que 'element de liste 1' fait 12px, tu ne l'a précisé nulle part dans ton code css.

'ul .petit' vise tout les class='petit' dans les <ul>, et comme 'autre element' possede 2 class (bigorange et petit), il est atteint par le code et il fera 12px, 'autre element' ne fait pas 24px alors qu'il a le class='bigorange' car le css cherche le selecteur le plus precis, le plus complet, et 'ul .petit' l'est ducoup il execute le 'font-size' de ce dernier ( maintenant tu pourrais me dire et donc pourquoi il ignore tout simplement pas le .bigorange et le texte ne doit pas devenir orange, c'est parceque il n'y a pas de conflit niveau color entre les 2 selecteurs mais seulement au niveau de la taille, si 'ul .petit' avait une color blue, le texte sera alors bleu et non orange ).

CAS 2 :

ici le code situe dons ton fichier css sera lu avant puisque le <link> se situe avant le <style>, ton element s'affiche en orange car le <style> est lu en dernier,

j'imagine que comme il y'a un conflit au niveau de la taille, il choisit le class='petit' car il doit etre plus precis, je ne suis pas sur pour ce cas.

pour le cas 1  j'avais compris tous cela a l'exception que j'ai oublié la signification ul .petit veut dire tous les class petit dans les balises ul et non comme je pensais les balises ul et les class petit

sa change tout

du coup le "element de la liste 1" est de taille predefini par le navigateur comme le premier paragraphe. moi je pensais que c'etait 12 px ... pour cela que je trouvais le "autre element" plus petit que 12px

merci a toi

pour le cas 2

de ce que j'ai compris le style est en dessous donc prioritaire sur le conflit et .petit vu qu'il nest pas avec un autre combinateur n'est pas plus precis apres c'est sure que j'ai tord car le titre fait bien 12 px maintenant j'en suis sur mais de ce que j'avais compris style prevaut sur link si il est apres car dans un autre exemple dans le cour il montre sur le meme html et css mais en echangeant les places entre style et link que le titre devient bleu car le h1 est lu en dernier donc prioritaire sur le style

du coup je comprend pas pourquoi le .class serait plus precis

a voir si une autre personne peut le confirmer

-
Edité par Mwam44 7 septembre 2021 à 12:32:08

Bonjour, j'ai modifié le titre de votre sujet, en effet "besoin d'aide" n'a rien à y faire. si vous postez on se doute que vous avez besoin d'aide, l'indiquer dans le titre du sujet est inutile et cela n'apporte rien de plus quand à l'indication du contenu du sujet.

Plutôt que des captures écran de code, utilisez l'outil d'insertion de code du forum soit le bouton code </>.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

Pour ce qui est de la cascade, pour un même sélecteur et pour des propriétés identiques c'est la dernière déclaration écrite dans le code qui prime.

Cela serait simple si il n'y avais pas également le poids des déclarations qui rentre en jeux. Pour un sélecteur composé d'une class et d'un sélecteur HTML celui ci aura plus de poids que un sélecteur de class seul.

Pour mieux comprendre je t'invite à lire cet article et n'hésite pas à parcourir les autres articles de ce blog.

https://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations/

Si tu as encore des questions après lecture...

-
Edité par AbcAbc6 7 septembre 2021 à 13:18:53

ok pour le titre et les screen

je vais regarder le blog

merci

maj: le lien explique tres bien et c'est beaucoup plus facile en comptant avec un systeme de poids

-
Edité par Mwam44 8 septembre 2021 à 3:41:45