{"id":11,"date":"2023-12-21T21:01:53","date_gmt":"2023-12-21T21:01:53","guid":{"rendered":"https:\/\/yzaz.net\/html\/?page_id=11"},"modified":"2024-11-03T10:01:03","modified_gmt":"2024-11-03T10:01:03","slug":"span-div","status":"publish","type":"page","link":"https:\/\/yzaz.net\/html\/span-div\/","title":{"rendered":"Regroupement avec span et div"},"content":{"rendered":"

Les \u00e9l\u00e9ments <span> et <div> servent \u00e0 regrouper et structurer un document et seront souvent utilis\u00e9s avec les attributs class et id.
\nDans cette le\u00e7on, nous verrons de plus pr\u00e8s l’utilisation des deux \u00e9l\u00e9ments <span><\/p>\n

Le regroupement avec <span>
\nL’\u00e9l\u00e9ment <span> est un \u00e9l\u00e9ment neutre, qui n’ajoute rien au document. Mais CSS peut utiliser l’\u00e9l\u00e9ment <span> pour ajouter des caract\u00e9ristiques visuelles \u00e0 des parties sp\u00e9cifiques du texte des documents.
\nExp:<\/p>\n

\r\n<p>T\u00f4t couch\u00e9 et t\u00f4t lev\u00e9 fortifie, enrichit et rend avis\u00e9.<\/p> \r\n<\/pre>\n
Pour accentuer en rouge des parties de cette citation . Dans ce but, on utilise la balise <span>. Chaque span re\u00e7oit un attribut class d\u00e9fini dans la feuille de style\u00a0:<\/p>\n
Fichier HTML<\/p>\n
\r\n<p>T\u00f4t couch\u00e9 et t\u00f4t lev\u00e9 <span class="benefit">fortifie<\/span>, \r\n<span class="benefit">enrichit<\/span> et <span class="benefit">rend avis\u00e9<\/span>.<\/p> \r\n<\/pre>\n
Fichier CSS<\/p>\n
\r\nspan.benefit { color:red; } \r\n<\/pre>\n
On peut utiliser l’attribut id pour ajouter du style aux \u00e9l\u00e9ments <span>, tant que vous appliquez un id unique \u00e0 chacun des trois \u00e9l\u00e9ments <span>.<\/p>\n
<span> s’utilise dans un \u00e9l\u00e9ment de type bloc, <div> sert \u00e0 regrouper un ou plusieurs \u00e9l\u00e9ments de type bloc.
\nLe regroupement avec <div> fonctionne plus ou moins de la m\u00eame fa\u00e7on.
\nExp: Deux listes de pr\u00e9sidents des \u00c9tats-Unis r\u00e9partis selon leur affiliation politique\u00a0:<\/p>\n
Fichier HTML<\/p>\n
\r\n<div id="democrats"> \r\n  <ul> \t\r\n         <li>Jimmy Carter<\/li>\r\n         <li>Bill Clinton<\/li>\r\n         <li>Barack Obama<\/li>\r\n         <li>Joe Biden<\/li>\r\n  <\/ul> \r\n<\/div>\r\n<div id="republicans"> \r\n  <ul>\r\n        <li>Ronald Reagan<\/li> \r\n\t<li>George Bush<\/li>\r\n \t<li>George W. Bush<\/li>\r\n        <li>Donald Trump<\/li> \r\n  <\/ul> \r\n<\/div> \r\n<\/pre>\n
Fichier CSS<\/p>\n
\r\n#democrats { background:blue; }\r\n#republicans { background:red; } \r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Les \u00e9l\u00e9ments <span> et <div> servent \u00e0 regrouper et structurer un document et seront souvent utilis\u00e9s avec les attributs class et id. Dans cette le\u00e7on, nous verrons de plus pr\u00e8s l’utilisation des deux \u00e9l\u00e9ments <span> Le regroupement avec <span> L’\u00e9l\u00e9ment <span> est un \u00e9l\u00e9ment neutre, qui n’ajoute rien au document. Mais CSS peut utiliser l’\u00e9l\u00e9ment <span> pour ajouter des caract\u00e9ristiques<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/11"}],"collection":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":1,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/11\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}