L'essentiel des CSS

Affecter les éléments

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
La première approche dans le codage des CSS consiste à mettre en application des règles simples. Le mieux est de cibler des éléments HTML et il vous est alors important de bien comprendre le DOM (Document Object Model).
07:00

Transcription

Nous avions vu dans une étape précédente que pour pouvoir créer une règle, il fallait commencer par un sélecteur. C'est à dire, définir dans le document HTML quel va être l'élément qu'il va falloir affecter. Est-ce article que je veux affecter, est-ce ce h1 ou bien est-ce le h1 qui est à l'intérieur de section ou le h1 qui est à l'intérieur de aside ? Qui doit être affecté par le visuel, par la déclaration que l'on va faire au niveau de nos CSS ? Pour mieux comprendre cette partie-là des sélecteurs de premier niveau, il est important de bien comprendre le DOM. Alors qu'est-ce que le DOM ? C'est le Document Object Model c'est une norme qui a été définie par le W3C, qui à l'époque était propre à chaque navigateur. Chaque navigateur créait son propre DOM. A l'époque de la guerre d'IE3 face à Netscape3 on a vécu des guerres de DOM. Donc, W3C est arrivé à standardisé le DOM et c'est devenu la manière de représenter l'arborescence d'un contenu. Si je prends cette page, en termes de contenu, je vais pouvoir regarder comment est constitué ce DOM. Si on regarde bien dans la partie haute, on a le doc-type et le HTML qui sont en première figure, qui vont définir d'une part la nature du HTML que l'on va utiliser donc doc-type HTML veut dire qu'on travaille en HTML5. Sinon, on aurait pu rentrer dans des doc-type où vous pouvez trouver des vieux documents avec des doc-type de niveau 4, HTML4, xhtml1.0 etc. Le doc-type va définir la nature du html. HTML va dire : "Ici à l'intérieur va commencer l'intégralité du contenu". On a un premier attribut qui va être la langue utilisée pour dire si je suis en français. On pourrait aussi avoir des attributs de type right to left ou left to right si j'écris de gauche à droite ou de droite à gauche, mais pour l'instant on va dire que par défaut, ce n'est pas trop important. Si je regarde bien à l'intérieur de cette balise HTML unique, qui s'ouvre en partie haute du document et qui se ferme ici en partie basse, voilà ensuite deux balises head et body qui vont contenir chacune pour la première les informations sur le document, donc l'encodage qui a été fait, quel est son titre, est-ce qu'il a des documents externes qui sont reliés. comme des scripts, des CSS entre autres... Et dans la partie body on va avoir le pur contenu du document qui doit être affiché dans la page du navigateur. Ici, dans la partie head on a l'encodage, le titre et les liens extérieurs notamment par la feuille de style CSS. Dans le body, on a un article. Vous voyez cette forme d'arborescence qui se crée. Article est à l'intérieur de body. Et à l'intérieur de article, je vais avoir deux autres balises. La balise h1 qui contient le titre de l'article et la balise p qui contient du contenu. Je peux avoir autant de balises p que je veux mais j'arrive à une balise section maintenant. En fait, on s'aperçoit que section est bien au même niveau que p. Si je continue, à l'intérieur de section, je vais avoir du contenu mais si on regarde bien ici plus bas, on a aside qui est le frère, on appelle ça des siblings le Document Object Model ce sont des coéquipiers de même niveau qui sont donc h1, p, section et aside. A l'intérieur de section, bien entendu on a encore du contenu qui sont h1, après on a le titre de la section. Le lorem ipsum pour le paragraphe, et à l'intérieur de aside pareil. Une fois qu'on a bien compris cette méthodologie d'arborescence on s'aperçoit que si je veux cibler par exemple la section Elle se trouve ici. Est-ce que j'aurai une section au même niveau d'article ? Ça aurait pu être le cas. Si je veux cette section, on est bien d'accord que c'est celle qui est à l'intérieur de article, qui est à l'intérieur de body. Si je veux ce h1-là ou ce h1-là, c'est distinct. Si je dis h1-article celui-là et celui-là seront touchés. Pourquoi ? Parce que tous les deux sont des h1 qui sont à l'intérieur de article. Si je dis article section h1, on s'aperçoit que je ciblerai celui-là et pas celui-là. Donc une fois qu'on a compris ça, on va pouvoir le mettre en application dans notre page HTML. Ce que je vous propose de faire, (il y a une petite page CSS qui a été récupérée) on va faire un peu de place à ce niveau-là. On va demander à Chromium de passer au même niveau. Je vais faire un peu de place ici. Là, on va pouvoir venir commencer à coder. Si je dis, règle n°1, j'ouvre mon sélecteur p . Je dis : tous les paragraphes de mon document, quels que soit les paragraphes de mon document, leur font-size va être de 16 pixels. Vous allez voir qu'il ne va rien se passer, pourquoi ? Parce que par défaut, tous les navigateurs affichent en 16 pixels. Donc ici il ne se passe strictement rien. parce que c'est le font-size par défaut. Si je fais un color maintenant, et que je rentre dans une couleur, je vais prendre une couleur au hasard #00698C par exemple, qui est une couleur bien pétante je suppose. Si j'enregistre et que j'actualise mon document. on s'aperçoit que tous les paragraphes sont devenus de cette couleur. Comme ça, je vais pouvoir dire, maintenant les h1 tous les h1 font-size 18 pixels et il va réduire, parce que par défaut le navigateur est forcément supérieur à 18 pixels. Là, ils se sont tous réduits. Il n'y a plus cette fameuse imbrication qui était faite par défaut par le navigateur qui disait qu'eux devaient être des h2 donc ils devaient être plus petits. Ils sont tous au même niveau. Si par contre je veux cibler que les h1 qui sont à l'intérieur de ma section, à ce moment-là je vais faire section h1 et ici dans ma section h1, je vais dire que ma color va être #85B200 cette fois-ci. Ça va être un vert. Voilà, ce vert n'existe que pour le titre de la section, tous les autres titres n'ont pas été affectés. Alors, comme ça, je vais pouvoir aller faire mon marché et cibler tous les éléments un par un que je veux. Parfois il faut avoir des sélecteurs qui sont très complexes, mais ça nous permet de voir que simplement en écrivant le nom de la balise, en mettant un espace puis l'autre nom de balise, on va redescendre dans le DOM et pouvoir aller cibler nos éléments. Il existe un sélecteur de balise général, standard, planétaire, qui va être le * et si je tape * et que je dis que je veux un margin de 0 pas besoin de préciser l'unité puisque c'est 0, donc 0 c'est 0. Il n'est pas nécessaire de préciser une unité. Dès que je dis qu'il n'y a plus de marge, voyez ce qui se passe. Plus aucun n'élément n'a de marge. Que ce soit les h1, les paragraphes ou les éléments. Si j'enlève ça ici, que je le mets au paragraphe, je fais ctrl+S, il n'y a que les paragraphes qui n'ont plus de marges. Entre eux ils sont tous aplatis. Par contre, il y a toujours les marges au niveau des titres. Si je mets les marges à 0 au niveau des titres, ctrl+S vous voyez bien que tous les paragraphes ont leur marge. Là, c'est qui ? La marge du paragraphe ou la marge du titre ? C'est la marge vers laquelle il collapse marge il y a des affaissements de marge entre eux. mais là c'est bien le paragraphe qui existe. alors que si je le mets maintenant simplement dans le sélecteur universel, ici on a bien tout le monde qui a une marge à 0. Donc première règle : pouvoir cibler les éléments un par un, ou les éléments imbriqués directement par la règle des sélecteurs de balises.

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 !