{"id":120,"date":"2021-03-12T10:34:36","date_gmt":"2021-03-12T10:34:36","guid":{"rendered":"https:\/\/kaay-coder.2sweb.sn\/kc\/?page_id=120"},"modified":"2022-04-03T01:15:52","modified_gmt":"2022-04-03T01:15:52","slug":"css-3","status":"publish","type":"page","link":"https:\/\/kaay-coder.2sweb.sn\/kc\/langages\/css-3\/","title":{"rendered":"CSS 3"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"120\" class=\"elementor elementor-120\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1a99f56 elementor-section-full_width elementor-section-height-min-height elementor-section-height-default elementor-section-items-middle\" data-id=\"1a99f56\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ab6f976\" data-id=\"ab6f976\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0e0bd51 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0e0bd51\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-bd57093\" data-id=\"bd57093\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8ed4063 elementor-widget elementor-widget-accordion\" data-id=\"8ed4063\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-accordion\">\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1491\" class=\"elementor-tab-title\" data-tab=\"1\" role=\"button\" aria-controls=\"elementor-tab-content-1491\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Qu'est ce que CSS ?<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1491\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"region\" aria-labelledby=\"elementor-tab-title-1491\"><p>CSS est l\u2019acronyme de \u00ab Cascading Style Sheets \u00bb ce qui signifie \u00ab feuille de style en cascade \u00bb. Le CSS correspond \u00e0 un langage informatique permettant de mettre en forme des pages web (HTML ou XML).<br \/>Gr\u00e2ce au\u00a0<b>CSS<\/b>, vous pouvez en effet appliquer des r\u00e8gles de mise en forme (titrage, alignement, polices, couleurs, bordures, etc.) \u00e0 plusieurs documents simultan\u00e9ment.<\/p><p>Par exemple, on peut s\u00e9lectionner\u00a0tous\u00a0les \u00e9l\u00e9ments d&#8217;une page HTML qui sont des paragraphes et afficher leurs textes en rouge avec ce code CSS :<\/p><pre class=\"brush: css notranslate\"><code><span class=\"token selector\">p<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> red<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/code><\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1492\" class=\"elementor-tab-title\" data-tab=\"2\" role=\"button\" aria-controls=\"elementor-tab-content-1492\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Inclusion de style<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1492\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"region\" aria-labelledby=\"elementor-tab-title-1492\"><p>Il existe trois (3) m\u00e9thodes d&#8217;utilisation de CSS:<\/p><p><span class=\"fontstyle0\">Dans l&#8217;ent\u00eate<\/span><\/p><p><span class=\"fontstyle0\">Pour inclure du CSS dans l&#8217;en-t\u00eate d&#8217;une page HTML, il faut utiliser la balise \u00ab style \u00bb \u00e0 l&#8217;int\u00e9rieur de la balise \u00abhead \u00bb :<\/span><\/p><pre> <span class=\"fontstyle0\">&lt;<\/span><span class=\"fontstyle0\">head<\/span><span class=\"fontstyle0\">&gt;\n\u00a0 \u00a0 \u00a0&lt;<\/span><span class=\"fontstyle0\">title<\/span><span class=\"fontstyle0\">&gt;Titre de la page&lt;\/<\/span><span class=\"fontstyle0\">title<\/span><span class=\"fontstyle0\">&gt;<\/span><span class=\"fontstyle0\">\n\u00a0 \u00a0 \u00a0 &lt;<\/span><span class=\"fontstyle0\">style<\/span><span class=\"fontstyle0\">&gt;\n  \u00a0 \u00a0   *{padding:0px;margin:0px;}\n  \u00a0 \u00a0   body{background-color:#ffffff;}\n  \u00a0   &lt;\/<\/span><span class=\"fontstyle0\">style<\/span><span class=\"fontstyle0\">&gt;\n&lt;\/<\/span><span class=\"fontstyle0\">head<\/span><span class=\"fontstyle0\">&gt;<\/span> \n<\/pre><p>Dans un fichier externe<br \/><span class=\"fontstyle0\">Pour inclure un fichier CSS externe, il faut utiliser la balise \u00ab link \u00bb \u00e0 l&#8217;int\u00e9rieur de la balise \u00ab head \u00bb :<\/span><\/p><pre> <span class=\"fontstyle0\">&lt;<\/span><span class=\"fontstyle0\">head<\/span><span class=\"fontstyle0\">&gt;<\/span><span class=\"fontstyle0\">\n\u00a0 \u00a0 &lt;<\/span><span class=\"fontstyle0\">link <\/span><span class=\"fontstyle0\">href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\" \/&gt;\n&lt;\/<\/span><span class=\"fontstyle0\">head<\/span><span class=\"fontstyle0\">&gt;\n<\/span><\/pre><p><span class=\"fontstyle0\">Dans une balise<br \/><\/span><span class=\"fontstyle2\">Pour d\u00e9finir un style CSS directement dans une balise, il faut utiliser l&#8217;attribut <\/span><span class=\"fontstyle2\">\u00ab style \u00bb :<\/span><\/p><pre><span class=\"fontstyle0\">&lt;p style=\"font-color=#000000\"&gt;Texte de couleur noir&lt;\/p&gt;<\/span><\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1493\" class=\"elementor-tab-title\" data-tab=\"3\" role=\"button\" aria-controls=\"elementor-tab-content-1493\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Les s\u00e9lecteurs<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1493\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"3\" role=\"region\" aria-labelledby=\"elementor-tab-title-1493\"><p><span class=\"fontstyle0\">Il existe deux types de s\u00e9lecteurs en CSS : \u00ab class \u00bb et \u00ab id \u00bb.<\/span><\/p><ul><li><span class=\"fontstyle0\">Le s\u00e9lecteur \u00ab class \u00bb\u00a0 <\/span><br \/>Ce s\u00e9lecteur est utilis\u00e9 lorsque l&#8217;on veut reproduire un style sur <span class=\"fontstyle2\">plusieurs <\/span><span class=\"fontstyle0\">\u00e9l\u00e9ments <\/span><span class=\"fontstyle0\">HTML. Dans une feuille de style, le nom du s\u00e9lecteur \u00ab class \u00bb est toujours pr\u00e9c\u00e9d\u00e9 d&#8217;un \u00ab . \u00bb :<\/span><pre> <span class=\"fontstyle0\">&lt;<\/span><span class=\"fontstyle0\">p <\/span><span class=\"fontstyle0\">class=\"droite\"&gt;paragraphe de la class&lt;\/<\/span><span class=\"fontstyle0\">p<\/span> \n.droite { <span class=\"fontstyle0\">\u00a0<\/span><span class=\"fontstyle0\">\n\u00a0 \u00a0text-align:right;\n}\n<\/span><\/pre><\/li><li><span class=\"fontstyle0\">Le s\u00e9lecteur \u00ab id \u00bb<\/span><\/li><\/ul><p><span class=\"fontstyle0\">Ce s\u00e9lecteur est utilis\u00e9 lorsque l&#8217;on veut attacher un style \u00e0 <\/span><span class=\"fontstyle2\">un seul <\/span><span class=\"fontstyle0\">\u00e9l\u00e9ment HTML. Dans une feuille de style, le nom du s\u00e9lecteur \u00ab id \u00bb est toujours pr\u00e9c\u00e9d\u00e9 d&#8217;un \u00ab # \u00bb :<\/span><\/p><pre><span class=\"fontstyle0\"> &lt;p id=\"paragraphe\"&gt;paragraphe de l'id&lt;\/p&gt; <br \/><\/span><span class=\"fontstyle3\">#paragraphe {<br \/>\u00a0 \u00a0 \u00a0 \u00a0 text-align:right;<br \/>\u00a0 \u00a0 }<\/span> <\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1494\" class=\"elementor-tab-title\" data-tab=\"4\" role=\"button\" aria-controls=\"elementor-tab-content-1494\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Les propri\u00e9t\u00e9s de types font<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1494\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"4\" role=\"region\" aria-labelledby=\"elementor-tab-title-1494\"><p><span class=\"fontstyle0\">Les propri\u00e9t\u00e9s CSS de type <\/span><span class=\"fontstyle2\">font- <\/span><span class=\"fontstyle0\">vont nous permettre de modifier l\u2019apparence de notre police d\u2019\u00e9criture, et donc de nos textes. Par exemple on peut transformer la taille, le poids, et le style de notre police.<br \/>les propri\u00e9t\u00e9s de type font- les plus utilis\u00e9es sont:<br \/>font-size: <span class=\"fontstyle2\">pour modifier la taille de nos textes ;<br \/><\/span>\u00a0 font-style: <span class=\"fontstyle2\">pour modifier le style de nos textes ;<br \/><\/span>\u00a0 font-weight<span class=\"fontstyle2\">: pour modifier le poids de nos textes. <br \/>\u00a0 font-family: pour modifier le type de nos textes ;<\/span><\/span><\/p><pre> <span class=\"fontstyle0\">body{<br \/>font-family: \"source code pro\", verdana, sans serif;<br \/>}<\/span> <\/pre><p>\u00a0<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1495\" class=\"elementor-tab-title\" data-tab=\"5\" role=\"button\" aria-controls=\"elementor-tab-content-1495\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\"> Les propri\u00e9t\u00e9s de types Text<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1495\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"5\" role=\"region\" aria-labelledby=\"elementor-tab-title-1495\"><p>\u00a0<span class=\"fontstyle0\">Les propri\u00e9t\u00e9s CSS de type <\/span><span class=\"fontstyle2\">text <\/span><span class=\"fontstyle0\">vont nous permettre de changer <\/span><span class=\"fontstyle3\">la mise en forme <\/span><span class=\"fontstyle0\">de nos textes et leur apparence.<br \/>Les propri\u00e9t\u00e9s les plus utilis\u00e9es sont:<br \/><\/span><span class=\"fontstyle4\">\u00a0 \u00a0 <\/span><span class=\"fontstyle0\">La propri\u00e9t\u00e9 <\/span><span class=\"fontstyle2\">text-align <\/span><span class=\"fontstyle0\">(g\u00e8re l&#8217;alignement) ;<br \/><\/span><span class=\"fontstyle4\">\u00a0 \u00a0 <\/span><span class=\"fontstyle0\">La propri\u00e9t\u00e9 <\/span><span class=\"fontstyle2\">text-transform <\/span><span class=\"fontstyle0\">(g\u00e8re la mise en majuscules \/ minuscules) ;<br \/><\/span><span class=\"fontstyle4\">\u00a0 \u00a0 <\/span><span class=\"fontstyle0\">La propri\u00e9t\u00e9 <\/span><span class=\"fontstyle2\">text-decoration<\/span><span class=\"fontstyle0\">(g\u00e8re la d\u00e9coration) ;<br \/><\/span><span class=\"fontstyle0\">\u00a0 \u00a0 La propri\u00e9t\u00e9 <\/span><span class=\"fontstyle2\">text-indent <\/span><span class=\"fontstyle0\">(g\u00e8re l&#8217;indentation) ;<br \/><\/span><span class=\"fontstyle0\">\u00a0 \u00a0 La propri\u00e9t\u00e9 <\/span><span class=\"fontstyle2\">text-shadow <\/span><span class=\"fontstyle0\">(g\u00e8re les ombres).<\/span><span class=\"fontstyle0\"><br \/><\/span><span class=\"fontstyle2\">Exemple:<\/span><\/p><pre><span class=\"fontstyle2\">p { text-align: center; }<\/span> <\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1496\" class=\"elementor-tab-title\" data-tab=\"6\" role=\"button\" aria-controls=\"elementor-tab-content-1496\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Les bordures<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1496\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"6\" role=\"region\" aria-labelledby=\"elementor-tab-title-1496\"><p><span class=\"fontstyle0\">De nombreuses propri\u00e9t\u00e9s CSS permettent de modifier l\u2019apparence des bordures. border regroupe l\u2019ensemble de ces propri\u00e9t\u00e9s ; on peut utiliser jusqu\u2019\u00e0 trois valeurs pour modifier l\u2019apparence : largeur(en pixels), couleur (mettre le nom de la couleur ou la valeur hexad\u00e9cimal ou valeur RGB), type de la bordure(none, solid, dashed, double,inset, \u2026.).<\/span><span class=\"fontstyle0\">Exemple <\/span><span class=\"fontstyle2\">: pour avoir une bordure rouge, en trait simple et \u00e9paisseur \u00e9gale 3pixels, voici le <\/span><span class=\"fontstyle2\">code :<br \/><\/span><\/p><pre><span class=\"fontstyle0\">h1{<br \/>\u00a0 \u00a0 border : 3px red solid ;<br \/>}<\/span> <\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1497\" class=\"elementor-tab-title\" data-tab=\"7\" role=\"button\" aria-controls=\"elementor-tab-content-1497\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Les marges<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1497\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"7\" role=\"region\" aria-labelledby=\"elementor-tab-title-1497\"><p><span class=\"fontstyle0\">Pour affecter des marges aux diff\u00e9rents \u00e9l\u00e9ments d&#8217;une page web, les propri\u00e9t\u00e9s CSS \u00e0 utiliser sont \u00ab margin \u00bb, pour les marges ext\u00e9rieures, et \u00ab padding \u00bb pour les marges int\u00e9rieures. Pour chaque \u00e9l\u00e9ment HTML, on peut donc d\u00e9finir l&#8217;espacement qui le s\u00e9parera des autres\u00e9l\u00e9ments (\u00ab margin \u00bb) et les espacements int\u00e9rieurs dont il peut b\u00e9n\u00e9ficier (\u00ab padding \u00bb).\u00a0<\/span><\/p><pre> <span class=\"fontstyle0\">p {<br \/>\u00a0 \u00a0 \u00a0width:200px;<br \/>\u00a0 \u00a0 \u00a0padding:40px;<br \/>\u00a0 \u00a0 \u00a0margin:auto;<br \/>}<\/span> <\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1498\" class=\"elementor-tab-title\" data-tab=\"8\" role=\"button\" aria-controls=\"elementor-tab-content-1498\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Largeur et hauteur<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1498\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"8\" role=\"region\" aria-labelledby=\"elementor-tab-title-1498\"><p><span class=\"fontstyle0\">Les propri\u00e9t\u00e9s CSS width et height <\/span><span class=\"fontstyle2\">permettent de contr\u00f4ler <\/span><span class=\"fontstyle0\">la largeur et la hauteur <\/span><span class=\"fontstyle3\">du contenu <\/span><span class=\"fontstyle2\">des \u00e9l\u00e9ments de type bloc et ceux remplac\u00e9s. <\/span><span class=\"fontstyle2\">Pour fixer la largeur vous pouvez utiliser la propri\u00e9t\u00e9 <\/span><span class=\"fontstyle5\">width. Exemple: <\/span><span class=\"fontstyle2\">Nous allons d\u00e9finir la longueur et la largeur d&#8217;un <\/span><span class=\"fontstyle5\">div<\/span><\/p><pre><span class=\"fontstyle5\">div {\n\u00a0 \u00a0witdth : 200 px;\n\u00a0 \u00a0height : 100px;\n}<\/span><\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1499\" class=\"elementor-tab-title\" data-tab=\"9\" role=\"button\" aria-controls=\"elementor-tab-content-1499\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Les ombrages en CSS<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1499\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"9\" role=\"region\" aria-labelledby=\"elementor-tab-title-1499\"><p><span class=\"fontstyle0\">La propri\u00e9t\u00e9 <\/span><span class=\"fontstyle2\">text-shadow <\/span><span class=\"fontstyle0\">permet de cr\u00e9er des ombres sur un texte. Cette propri\u00e9t\u00e9 s\u2019utilise de la fa\u00e7on suivante :<\/span><span class=\"fontstyle0\">Pour cr\u00e9er des ombres autour des boites \u00e0 l&#8217;int\u00e9rieur ou \u00e0 l&#8217;ext\u00e9rieur, vous pouvez utiliser la propri\u00e9t\u00e9 <\/span><span class=\"fontstyle2\">box-shadow <\/span><span class=\"fontstyle0\">qui prend deux quatre valeurs diff\u00e9rentes dans l&#8217;ordre suivant:<\/span> <\/p><pre> <span class=\"fontstyle0\">p {<br \/>\u00a0 \u00a0border: 3px solid yellow;<br \/>\u00a0 \u00a0box-shadow: -5px -4px 5px yellow<br \/>}<\/span> <\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-14910\" class=\"elementor-tab-title\" data-tab=\"10\" role=\"button\" aria-controls=\"elementor-tab-content-14910\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Image de fond<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-14910\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"10\" role=\"region\" aria-labelledby=\"elementor-tab-title-14910\"><p><span class=\"fontstyle0\">L&#8217;image de fond permet de casser avec les fonds unicolores traditionnels et donne, si elle est bien choisie, une v\u00e9ritable identit\u00e9 au site. L&#8217;image de fond s&#8217;attache g\u00e9n\u00e9ralement \u00e0 la balise \u00ab body \u00bb mais il est possible de l&#8217;attacher \u00e0 n&#8217;importe quel \u00e9l\u00e9ment de type bloc. Dans l&#8217;exemple suivant, l&#8217;image est attach\u00e9e au corps de la page (\u00ab body \u00bb) :<\/span><\/p><pre><span class=\"fontstyle0\"><span class=\"fontstyle2\">body {<br \/>\u00a0 \u00a0color:black;<br \/>\u00a0 \u00a0background-color:white;<br \/>\u00a0 \u00a0background-image:url(images\/fond.png);<br \/>}<\/span>\u00a0<\/span> <\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-14911\" class=\"elementor-tab-title\" data-tab=\"11\" role=\"button\" aria-controls=\"elementor-tab-content-14911\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Apparences dynamiques<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-14911\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"11\" role=\"region\" aria-labelledby=\"elementor-tab-title-14911\"><p><span class=\"fontstyle0\">Lors de la navigation dans des sites web, des \u00e9v\u00e9nements comme un clic, une s\u00e9lection ou un survol, se produisent. Avec CSS, vous avez la possibilit\u00e9 de modifier l&#8217;apparence de certaines sections dynamiquement lorsque ces \u00e9v\u00e8nements se produisent.<br \/>Pour cela, on utilise pour cela les pseudo-formats :<br \/>\u2013 <\/span><span class=\"fontstyle0\">:hover<br \/><\/span><span class=\"fontstyle0\">\u2013 <\/span><span class=\"fontstyle0\">:active <\/span><span class=\"fontstyle0\">modifie l&#8217;apparence des liens au <\/span><span class=\"fontstyle2\">moment du clic <\/span><span class=\"fontstyle0\">;<br \/>\u2013 <\/span><span class=\"fontstyle0\">:visited <\/span><span class=\"fontstyle0\">lorsqu&#8217;un <\/span><span class=\"fontstyle2\">lien a d\u00e9j\u00e0 \u00e9t\u00e9 visit\u00e9 <\/span><span class=\"fontstyle0\">;<br \/>\u2013 <\/span><span class=\"fontstyle0\">:focus <\/span><span class=\"fontstyle0\">permet de modifier l&#8217;apparence d&#8217;un <\/span><span class=\"fontstyle2\">\u00e9l\u00e9ment s\u00e9lectionn\u00e9<\/span><span class=\"fontstyle0\">.<\/span> <\/p><pre> <span class=\"fontstyle0\">a<\/span><span class=\"fontstyle1\">:hover <\/span><span class=\"fontstyle3\">\/* Apparence au survol des liens *\/<br \/><\/span><span class=\"fontstyle1\">{ <\/span><span class=\"fontstyle0\">text-decoration<\/span><span class=\"fontstyle1\">: <\/span><span class=\"fontstyle0\">underline<\/span><span class=\"fontstyle1\">;<br \/><\/span><span class=\"fontstyle0\">\u00a0 \u00a0color<\/span><span class=\"fontstyle1\">: <\/span><span class=\"fontstyle1\">green<\/span><span class=\"fontstyle1\">;<br \/>}<\/span> <\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-14912\" class=\"elementor-tab-title\" data-tab=\"12\" role=\"button\" aria-controls=\"elementor-tab-content-14912\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Menu d\u00e9roulant CSS<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-14912\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"12\" role=\"region\" aria-labelledby=\"elementor-tab-title-14912\"><p><span class=\"fontstyle0\">Cet effet ne sera support\u00e9 que sur des navigateurs r\u00e9cents et il faudra plut\u00f4t privil\u00e9gier Javascript pour que cela fonctionne sur tous les navigateurs. L&#8217;avantage majeur de CSS est sa l\u00e9g\u00e8ret\u00e9 et c&#8217;est pourquoi le sujet m\u00e9rite d&#8217;\u00eatre abord\u00e9.<\/span> <span class=\"fontstyle0\">Le contexte est simple, on a deux listes imbriqu\u00e9es, une qui affiche les ent\u00eates des menus et une autre qui affiche les rubriques :<\/span><\/p><pre><span class=\"fontstyle0\">-------------------Le code html du menu-------------------------<br \/><\/span><span class=\"fontstyle2\">&lt;<\/span><span class=\"fontstyle2\">div <\/span><span class=\"fontstyle2\">id=\"menu\"&gt;<br \/>\u00a0 \u00a0&lt;<\/span><span class=\"fontstyle2\">ul<\/span><span class=\"fontstyle2\">&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;<\/span><span class=\"fontstyle2\">li<\/span><span class=\"fontstyle2\">&gt;&lt;<\/span><span class=\"fontstyle2\">a <\/span><span class=\"fontstyle2\">href=\"#\"&gt;Menu 1&lt;\/<\/span><span class=\"fontstyle2\">a<\/span><span class=\"fontstyle2\">&gt;&lt;\/li&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;<\/span><span class=\"fontstyle2\">li<\/span><span class=\"fontstyle2\">&gt;&lt;<\/span><span class=\"fontstyle2\">a <\/span><span class=\"fontstyle2\">href=\"#\"&gt;Menu 2&lt;\/<\/span><span class=\"fontstyle2\">a<\/span><span class=\"fontstyle2\">&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;<\/span><span class=\"fontstyle2\">ul<\/span><span class=\"fontstyle2\">&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;<\/span><span class=\"fontstyle2\">li<\/span><span class=\"fontstyle2\">&gt;&lt;<\/span><span class=\"fontstyle2\">a <\/span><span class=\"fontstyle2\">href=\"#\"&gt;sous-menu 1&lt;\/<\/span><span class=\"fontstyle2\">a<\/span><span class=\"fontstyle2\">&gt;&lt;\/<\/span><span class=\"fontstyle2\">li<\/span><span class=\"fontstyle2\">&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;<\/span><span class=\"fontstyle2\">li<\/span><span class=\"fontstyle2\">&gt;&lt;<\/span><span class=\"fontstyle2\">a <\/span><span class=\"fontstyle2\">href=\"#\"&gt;sous-menu 2&lt;\/<\/span><span class=\"fontstyle2\">a<\/span><span class=\"fontstyle2\">&gt;&lt;\/<\/span><span class=\"fontstyle2\">li<\/span><span class=\"fontstyle2\">&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/<\/span><span class=\"fontstyle2\">ul<\/span><span class=\"fontstyle2\">&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/<\/span><span class=\"fontstyle2\">li<\/span><span class=\"fontstyle2\">&gt;<br \/>\u00a0 \u00a0&lt;\/<\/span><span class=\"fontstyle2\">ul<\/span><span class=\"fontstyle2\">&gt;<br \/>&lt;\/<\/span><span class=\"fontstyle2\">div<\/span><span class=\"fontstyle2\">&gt;<\/span><br \/>--------------------Le code css du menu----------------------<br \/><span class=\"fontstyle0\">#menu ul {<br \/>\u00a0 \u00a0 \u00a0margin:0;<br \/>\u00a0 \u00a0 \u00a0padding:0;<br \/>\u00a0 \u00a0 \u00a0list-style-type:none;<br \/>\u00a0 \u00a0 \u00a0text-align:center;<br \/>}<br \/>#menu li {<br \/>\u00a0 \u00a0float:left;<br \/>\u00a0 \u00a0margin:auto;<br \/>\u00a0 \u00a0padding:2px;<br \/>\u00a0 \u00a0background-color:#E4E4E4;<br \/>}<br \/>#menu ul li ul {<br \/>\u00a0 \u00a0display:none;<br \/>}<br \/>#menu ul li:hover ul {<br \/>\u00a0 \u00a0display:block;<br \/>}<br \/>#menu li:hover ul li {<br \/>\u00a0 \u00a0float:none;<br \/>}<br \/>#menu li ul {<br \/>\u00a0 \u00a0position:absolute;<br \/>}<\/span> <\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-28b0833\" data-id=\"28b0833\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a6f313f elementor-widget elementor-widget-sidebar\" data-id=\"a6f313f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"sidebar.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"search-2\" class=\"widget widget_search\">\n<form role=\"search\" method=\"get\" class=\"searchform\" action=\"https:\/\/kaay-coder.2sweb.sn\/kc\/\">\n\n\t<label>\n\n\t\t<span class=\"screen-reader-text\">Recherche pour\u00a0:<\/span>\n\t\t<input type=\"search\" id=\"searchform-1\" name=\"s\" value=\"\" placeholder=\"Rechercher &hellip;\" title=\"Appuyez sur Entrer pour rechercher\" \/>\n\n\t\t\n\t\t\t<button value=\"Search\" class=\"wpbff wpbff-search\"><\/button>\n\n\t\t\n\t<\/label>\n\n<\/form>\n<\/div><div id=\"calendar-2\" class=\"widget widget_calendar\"><div id=\"calendar_wrap\" class=\"calendar_wrap\"><table id=\"wp-calendar\" class=\"wp-calendar-table\">\n\t<caption>juin 2026<\/caption>\n\t<thead>\n\t<tr>\n\t\t<th scope=\"col\" aria-label=\"lundi\">L<\/th>\n\t\t<th scope=\"col\" aria-label=\"mardi\">M<\/th>\n\t\t<th scope=\"col\" aria-label=\"mercredi\">M<\/th>\n\t\t<th scope=\"col\" aria-label=\"jeudi\">J<\/th>\n\t\t<th scope=\"col\" aria-label=\"vendredi\">V<\/th>\n\t\t<th scope=\"col\" aria-label=\"samedi\">S<\/th>\n\t\t<th scope=\"col\" aria-label=\"dimanche\">D<\/th>\n\t<\/tr>\n\t<\/thead>\n\t<tbody>\n\t<tr><td>1<\/td><td>2<\/td><td>3<\/td><td>4<\/td><td id=\"today\">5<\/td><td>6<\/td><td>7<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>8<\/td><td>9<\/td><td>10<\/td><td>11<\/td><td>12<\/td><td>13<\/td><td>14<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>15<\/td><td>16<\/td><td>17<\/td><td>18<\/td><td>19<\/td><td>20<\/td><td>21<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>22<\/td><td>23<\/td><td>24<\/td><td>25<\/td><td>26<\/td><td>27<\/td><td>28<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>29<\/td><td>30<\/td>\n\t\t<td class=\"pad\" colspan=\"5\">&nbsp;<\/td>\n\t<\/tr>\n\t<\/tbody>\n\t<\/table><nav aria-label=\"Mois pr\u00e9c\u00e9dents et suivants\" class=\"wp-calendar-nav\">\n\t\t<span class=\"wp-calendar-nav-prev\"><a href=\"https:\/\/kaay-coder.2sweb.sn\/kc\/2021\/03\/\">&laquo; Mar<\/a><\/span>\n\t\t<span class=\"pad\">&nbsp;<\/span>\n\t\t<span class=\"wp-calendar-nav-next\">&nbsp;<\/span>\n\t<\/nav><\/div><\/div>\n\t\t<div id=\"recent-posts-2\" class=\"widget widget_recent_entries\">\n\t\t<h4 class=\"wpbf-widgettitle\">Articles r\u00e9cents<\/h4>\n\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t<a href=\"https:\/\/kaay-coder.2sweb.sn\/kc\/hello-world\/\">Kaay-Coder !<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t<\/ul>\n\n\t\t<\/div><div id=\"archives-2\" class=\"widget widget_archive\"><h4 class=\"wpbf-widgettitle\">Archives<\/h4>\n\t\t\t<ul>\n\t\t\t\t\t<li><a href='https:\/\/kaay-coder.2sweb.sn\/kc\/2021\/03\/'>mars 2021<\/a><\/li>\n\t\t\t<\/ul>\n\n\t\t\t<\/div><div id=\"media_gallery-2\" class=\"widget widget_media_gallery\"><div id='gallery-1' class='gallery galleryid-120 gallery-columns-2 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/accueil\/html\/'><img decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html-150x150.png 150w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html-300x300.png 300w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html.png 421w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/dmxbe\/'><img decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/dMXbE-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2\/'><img decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2-150x150.png 150w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2.png 250w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/wordpress_logo_8-1-1024x1015\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-150x150.png 150w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-300x297.png 300w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-768x761.png 768w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1.png 1024w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Qu&#8217;est ce que CSS ? CSS est l\u2019acronyme de \u00ab Cascading Style Sheets \u00bb ce qui signifie \u00ab feuille de style en cascade \u00bb. Le CSS correspond \u00e0 un langage informatique permettant de mettre en forme des pages web (HTML ou XML). Gr\u00e2ce au&nbsp;CSS, vous pouvez en effet appliquer des r\u00e8gles de mise en forme [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":88,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-120","page","type-page","status-publish","hentry","wpbf-post"],"_links":{"self":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/comments?post=120"}],"version-history":[{"count":35,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/120\/revisions"}],"predecessor-version":[{"id":1218,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/120\/revisions\/1218"}],"up":[{"embeddable":true,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/88"}],"wp:attachment":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/media?parent=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}