Formation HTML/CSS

Vos exos sont tout bons désormais !
Alors on passe au CSS !

Partie 2 : CSS

Allez, attaquons de suite avec le langage complémentaire du HTML : le CSS.

On va donc commencer par voir où ça se met le CSS. En fait, on peut mettre du CSS dans une page de 3 manières différentes.

Nous allons commencer ici par une des 3 manières, qui consiste à mettre notre CSS dans l'attribut style.

Hé oui, on passe au CSS pour mieux revenir sur le HTML :langue:, car si vous vous souvenez bien, les attributs sont les choses du genre : attribut="".
Ici, ce sera style="NOTRE CSS"
Cet attribut se met sur n'importe quelle balise HTML comprise entre <body>(incluse) </body>.
En gros, on pourra faire :

Code:: <body style="notrecss">
<div style="notrecss">
<p style="notrecss">
<i style="notrecss"></i>
</p>
<img src="tortue.png" alt="tortue" title="tortue" style="notre css" />
</div>
</body>

Voilà pour cette première méthode, que nous allons continuer d'utiliser un petit moment ! Pas de question ? Wink

Concernant la formation en elle même : on avance bien, sans souci, vous comprenez bien, c'est vraiment cool !
Avec le CSS ça va devenir un peu plus long et compliqué, mais ça va aller sans problème Wink

Et vous, comment ressentez-vous la formation ? C'est un plaisir de la lire chaque jour ou c'est plutôt une contrainte ? Les cours vous semblent-ils explicites ? Pensez-vous progresser ? Que pensez-vous de la qualité des cours ?
Voili voilou Wink

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Ca donc c'est la manière en codant le HTML et le CSS dans le même fichier c'est ça ? Donc, après l'attribut style c'est du code CSS ? du genre

Code:: <body>
<div style="background:yellow;
text-align: center;
font-family: tahoma, arial;"
<p>
<i></i>
</p>
<img src="tortue.png" alt="tortue" title="tortue"/>
</div>
</body>

C'est comme ça que ca se présente ?

Et pour l'instant la formation ça me va nickel =D A chaque fois j'ai hâte de voir la chapitre suivant !
Et pour le moment la qualité de cours me semble très correct (:

C'est cela ! Sauf que du coup, on met tout en ligne Wink

. Mais je vais revenir dessus tu t'en doutes bien Wink

.

Cool !

Tout compris !

Pour le moment, ta formation est très agréable, et la plupart du temps très clair. Tu fais ça très bien ! Smile

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

D'accord (:

Le CSS a lui aussi une forme à respecter, bien plus courte que celle du HTML.

En fait, la voici :
propriété: attribut;
On commence par indiquer la propriété (par exemple font-size (on la voit juste après !)), puis on met les deux points ( Smile

, puis l'attribut, donc par exemple 15px (on voit ça juste après aussi), et enfin, le point-virgule ( Wink

.

Nous allons, pour commencer, voir le CSS permettant de mettre en page du texte.
Bien évidemment, je ne vous donnerai que les propriétés les plus courantes, ce sera donc une liste non exhaustive.

C'est parti :
(je prendrai à chaque fois pour exemple la balise span, avec l'attribut style="")
Pour la taille du texte :

Code:: <span style="font-size: Npx;">Pour la taille du texte : </span>

font-size: Npx;, avec N, un nombre de pixels. Par exemple, font-size: 15px;

Pour la couleur du texte :

Code:: <span style="color: COULEUR;">Pour la couleur du texte : </span>

color: COULEUR; : COULEUR désignant une couleur soit en anglais (si tu veux mettre en bleu, il suffira d'écrire blue), soit une valeur hexadécimale (par exemple : #0000FF pour bleu). Tu les trouveras sur code-couleur.com.

Pour la police d'écriture :

Code:: <span style="font-family: POLICE;">Pour la police d'écriture : </span>

font-family: POLICE; : POLICE désignant le nom de la police. Par exemple : Comic Sans Ms

Pour mettre le texte en gras :

Code:: <span style="font-weight:bold;">Pour mettre le texte en gras : </span>

font-weight: bold;

Pour mettre le texte en italique :

Code:: <span style="font-style: italic;">Pour mettre le texte en italique : </span>

Pour l'écart entre les lettres :

Code:: <span style="letter-spacing: Xpx;">Pour l'écart entre les lettres : </span>

letter-spacing: Xpx; avec X : nombre de pixels. Par exemple, 30px.

Jusqu'ici ça va ?

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Nickel monsieur ! =D

Oui, pas de soucis Smile

Sachez qu'il est bien évidemment possible de mettre plusieurs propriétés CSS dans un seul et même attribut style (bien évidemment, pour les mêmes éléments html ^^)

Par exemple, si on veut un paragraphe avec le texte à l'intérieur de coloré en rouge, et en gras, on aura :

Code:: <p style="color: red; font-weight: bold;">Nous vous rappelons que les délais appliqués ici sont :
Première relance : 4j après votre dernier message ;
Seconde relance : 8j après la première relance ;
Troisième relance : 16j après la seconde relance ;
Toute annulation de formation par le staff est sanctionnée par le temps qu'à pris votre demande.

N.B : Nous ne vous relancerons pas plus de trois fois. Toute quatrième relance équivaudra à l'annulation de la formation.</p>

Résultat:

Maintenant, on veut que les deux dernières phrases soient en italique, bleues, et en gras :

Code:: <p style="color: red; font-weight: bold;">Nous vous rappelons que les délais appliqués ici sont :
Première relance : 4j après votre dernier message ;
Seconde relance : 8j après la première relance ;
Troisième relance : 16j après la seconde relance ;
Toute annulation de formation par le staff est sanctionnée par le temps qu'à pris votre demande.
<span style="font-style: italic; color: blue;">N.B : Nous ne vous relancerons pas plus de trois fois. Toute quatrième relance équivaudra à l'annulation de la formation.</span></p>

Résultat:

Comme vous le voyez, je n'ai pas remis font-weight: bold;
Car de toute manière, le span est dans une balise (le <p>) qui met déjà le texte en gras.

Donc :
Les éléments d'une balise html (ce qu'il y a entre l'ouverture et la fermeture de la balise, le plus souvent, du texte (par exemple : <p>je suis du texte, qui est l'élément de la balise</p>)), prennent le style (le css) de la dernière balise dans laquelle ils sont, puis de la deuxième balise, puis de la troisième et ainsi de suite. Mais dans tous les cas, ils les prendront tous.
Par exemple, dans un code comme celui, où toutes les balises ont un style css :

Code:: <div>
<p>
<span>
<i>Texte</i>
</span>
</p>
</div>

Le texte (entre les balises <i>) prendra d'abord le css de la balise <i> puis celui du <span> puis celui du <p> puis celui de la <div>.
Mais il prendra tous les css. Donc si dans la div on dit que le texte est en gras, il sera en gras, même si c'est 4 balises au dessus.
Imaginons ce code :

Code:: <div style="font-weight: bold;">
Texte 1
<p style="font-style: italic;">
Texte 2
<span style="color: blue;">
Texte 3
<i style="font-family: Arial;">Texte 4</i>
</span>
</p>
</div>

Notre "Texte 4" sera donc : en gras, en italique, en bleu et en Arial.
Imaginons maintenant que nous voulons que seulement le "Texte 3" soit en bleu, et pas notre "Texte 4". Lui on veut qu'il soit en rouge. Il nous suffira de repréciser la couleur :

Code:: <div style="font-weight: bold;">
Texte 1
<p style="font-style: italic;">
Texte 2
<span style="color: blue;">
Texte 3
<i style="font-family: Arial; color: red;">Texte 4</i>
</span>
</p>
</div>

Nous voilà donc confrontés à un problème.. Si on ne veut pas que notre élément hérite de tous ces styles.. Que l'on ne veut par exemple qu'il ne soit pas en italique !
Il nous suffira en fait de mettre initial comme attribut à la propriété qu'on veut enlever. Par exemple :
font-style: initial;
font-weight: initial;
En effet, ces codes se traduisent par : "Italique ? NON, à l'initial" ou encore "Gras ? NON, à l'initial".

Donc on revient sur notre code précédent : on ne veut pas que notre Texte 4 soit en gras, et on ne veut pas qu'il ait une couleur particulière. On aura donc :

Code:: <div style="font-weight: bold;">
Texte 1
<p style="font-style: italic;">
Texte 2
<span style="color: blue;">
Texte 3
<i style="font-family: Arial; color: initial; font-weight: initial;">Texte 4</i>
</span>
</p>
</div>

Résultat:

Compris ?

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Compris

Compris !

On va continuer dans notre lancée avec d'autres propriétés agissant toujours sur la mise en forme du texte Wink

.

Afin de souligner un mot

Code:: <span style="text-decoration: underline">souligner</span>

text-decoration: underline;

Afin de barrer un mot

Code:: <span style="text-decoration: line-through;">barrer</span>

text-decoration: line-through;

Afin de sur-ligner un mot

Code:: <span style="text-decoration: overline;">sur-ligner</span>

text-decoration: overline;
Pour annuler l'héritage de text-decoration, on utilisera text-decoration: none; ou text-decoration: initial;

Afin de mettre le texte en petites capitales

Code:: <span style="font-variant: small-caps;">le texte en petites capitales</span>

font-variant: small-caps;
Pour annuler l'héritage de font-variant, on utilisera font-variant: initial; ou font-variant: normal;

Afin de mettre le texte en majuscule

Code:: <span style="text-transform: uppercase;">texte en majuscule</span>

text-transform: uppercase;

Afin de mettre la première lettre de chaque mot en majuscule

Code:: <span style="text-transform: capitalize;">la première lettre de chaque mot en majuscule</span>

text-transform: capitalize;
Pour annuler l'héritage de text-transform, on utilisera text-transform: none; ou text-transform: initial;

Afin de mettre de l'ombre sur du texte
Attention /!\ code non interprété par les versions antérieures à IE9 /!\

Code:: <span style="text-shadow: 4px 5px 2px black;">de l'ombre sur du texte</span>

text-shadow: 4px 5px 2px black; avec :
- 4px = taille horizontale
- 5px = taille verticale
- 2px = taille du fondu
- black = couleur de l'ombre
Pour annuler l'héritage de text-shadow, on utilisera text-shadow: none; ou text-shadow: initial;

C'est bon ?

Si oui, j'aimerais que tu me donnes le code pour faire :
Texte en arial black, gras, petites capitales, de 11px, avec un espace de 13px entre les lettres, souligné, en italique, de couleur verte !

Des questions ? ~~Dieu~~ Professeur Eluknow est là xD

Salut !

J'ai pas de questions, mais je voulais juste signaler que tu avais oublié un point virgule là :

Dieu Elu' a écrit:

Afin de souligner un mot

Code:

Code:: <span style="text-decoration: underline">souligner</span>

Sinon, ton cours est toujours aussi bien Cool

EDIT Eluknow : c'est corrigé ! Merci Wink

Coucou

Désolé du temps de réponse, j'avais des amis d'internet qui sont venus me rendre visite quelques jours !

Joyeux Noël aussi, sinon Wink

Comme on l'a vu dans l'exercice précédent, mettre du CSS dans l'attribut style="" devient vite fastidieux et illisible quand on a beaucoup de propriétés. Rien que dans cet exercice, le CSS nous prend une ligne et demie, de codes entassés ! Et nous n'avons que mis quelques propriétés pour mettre en page le texte ! Tu imagines quand on mettra en forme toute une page ? Cela deviendrait vraiment trop le bazar !

Du coup, les codeurs préfèrent utiliser la méthode 2 : Mettre le CSS entre balises style, car cette méthode épure bien plus les codes, et on s'y retrouve bien mieux, tout n'est pas entassé !

Là encore, on doit suivre une forme bien particulière :

Code:: .nom{
CSS
}

ou

Code:: #nom{
CSS
}

Dans le premier cas, notre css est une class, dans l'autre, un id.
Du coup, à chaque fois, on aura le choix entre un point (.) ou un dièse (#) selon si notre CSS est une class ou un id.
Maintenant, comment savoir quand utiliser l'un ou l'autre ?
En fait, c'est une question d'arithmétique logique :p.
On utilisera un id, quand on utilisera notre code CSS qu'une seule fois dans notre page.
Prenons notre code précédent :

Code:: <p style="font-family: Arial Black; font-weight: bold; font-variant: small-caps; font-size: 10px; letter-spacing: 13px; text-decoration: underline; color: green; font-style: italic;">Texte en arial black, gras, petites capitales, de 10px, avec un espace de 13px entre les lettres, souligné, en italique, de couleur verte ! </p>

Et mettons-le dans une page html quelconque :

Code:: <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Formation</title>
<style type="text/css">
</style>
</head>
<body>
<h1 style="font-size: 25px; font-weight: bold;">Mon titre 1 (25px et en gras)</h1>
<h2 style="font-size 14px; font-style; italic;">Mon titre 2 (14px et en italique)</h2>
<p style="font-family: Arial Black; font-weight: bold; font-variant: small-caps; font-size: 10px; letter-spacing: 13px; text-decoration: underline; color: green; font-style: italic;">Mon paragraphe 1</p>
<h3 style="font-size: 14px; font-style: italic;">Mon titre 3 (14px et en italique)</h3>
</body>
</html>

Nous voyons que notre paragraphe a une mise en page (Arial Black, en gras, petites capitales, 10px....) que lui seul utilise. Du coup, pour le CSS de notre paragraphe, on utilisera un id.
Pareil pour notre titre 1, puisque lui seul utilise la mise en page qui lui est définie.
Par contre, pour notre titre 2 et notre 3, ils ont tous les deux les mêmes codes CSS (font-size 14px; font-style; italic;), donc pour eux, on utilisera une class.

Alors le problème maintenant, est de savoir comment on utilise tout ça. Et bien, ce n'est pas très compliqué :
Il suffit de donner un nom à nos id ou nos class, qu'on donnera à nos attributs HTML qui appellent leur CSS, soit avec l'attribut id="", soit avec l'attribut class="", selon si notre élément utilisera un id ou une class.

Voyons ce que ça donne avec notre paragraphe.
On a vu précédemment que l'on utilisera un id, pour le paragraphe.
Je décide de l'appeler container.
Du coup, on a :

Code:: <p id="container"'>Paragraphe 1</p>

Et entre les balises style :

Code:: <style type="text/css">
#container{
CSS
}
</style>

A la place de "CSS", on peut mettre :
-des propriétés CSS :
Nous en avons déjà vues ! Tu sais, ceux sont par exemple font-size, font-style etc etc.
Donc on aura :

Code:: .nom{
propriété1: attribut;
propriété2: attribut;
propriété3: attribut;
}

Et pour notre paragraphe, ça nous donne :

Code:: <style type="text/css">
#container{
font-family: Arial Black;
font-weight: bold;
font-variant: small-caps;
font-size: 10px;
letter-spacing: 13px;
text-decoration: underline;
color: green;
font-style: italic;
}
</style>

-des commentaires.
Les commentaires en CSS sont sous la forme /** Commentaire CSS **/.
Donc :

Code:: .nom{
/** Propriété 1 **/
/** Propriété 2 **/
/** Propriété 3 **/
/** Etc. ******/
}

Comme tu le vois, il est possible de mettre autant d'étoiles que l'on veut (astérisques), tant qu'il y en a minimum 2 à chaque extrémité du code Wink

.

Et on peut même mettre des commentaires pour notre paragraphe !

Code:: #container{
font-family: Arial Black; /** Le texte sera en Arial Black**/
font-weight: bold; /** Le texte sera en gras **/
font-variant: small-caps; /** Le texte sera en petites capitales**/
font-size: 10px; /** Le texte sera de taille 10 pixels **/
letter-spacing: 13px; /** L'espace entre les lettres sera de 13 pixels **/
text-decoration: underline; /** Le texte sera souligné **/
color: green; /** Le texte sera en vert **/
font-style: italic; /** Le texte sera en italique **/
}

Et du coup si on reprend notre page entière, on aura :

Code:: <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Formation</title>
<style type="text/css">
#container{
font-family: Arial Black; /** Le texte sera en Arial Black**/
font-weight: bold; /** Le texte sera en gras **/
font-variant: small-caps; /** Le texte sera en petites capitales**/
font-size: 10px; /** Le texte sera de taille 10 pixels **/
letter-spacing: 13px; /** L'espace entre les lettres sera de 13 pixels **/
text-decoration: underline; /** Le texte sera souligné **/
color: green; /** Le texte sera en vert **/
font-style: italic; /** Le texte sera en italique **/
}
</style>
</head>
<body>
<h1 style="font-size: 25px; font-weight: bold;">Mon titre 1 (25px et en gras)</h1>
<h2 style="font-size 14px; font-style; italic;">Mon titre 2 (14px et en italique)</h2>
<p id="container">Mon paragraphe 1</p>
<h3 style="font-size: 14px; font-style: italic;">Mon titre 3 (14px et en italique)</h3>
</body>
</html>

Voyons maintenant ce que ça donnerait pour le CSS de notre titre 2 et de notre titre 3.
On a vu qu'on utiliserait une class. Je vais donner comme nom à cette class titles.
On a alors :

Code:: <h2 class="titles">Mon titre 2 (14px et en italique)</h2>
<h3 class="titles">Mon titre 3 (14px et en italique)</h3>

Et dans les balises style :

Code:: .titles{
font-size: 14px;
font-style: italic;
}

Et le code complet :

Code:: <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Formation</title>
<style type="text/css">
#container{
font-family: Arial Black;
font-weight: bold;
font-variant: small-caps;
font-size: 10px;
letter-spacing: 13px;
text-decoration: underline;
color: green;
font-style: italic;
}

.titles{
font-size: 14px;
font-style: italic;
}

</style>
</head>
<body>
<h1 style="font-size: 25px; font-weight: bold;">Mon titre 1 (25px et en gras)</h1>
<h2 class="titles">Mon titre 2 (14px et en italique)</h2>
<p id="container">Mon paragraphe 1</p>
<h3 class="titles">Mon titre 3 (14px et en italique)</h3>
</body>
</html>

As-tu des questions jusqu'ici ?
Ca fait beaucoup d'un coup, je sais ! Et c'est hyper hyper important !
Alors, si tu as la moindre question, faut vraiment que tu me la poses Wink

.

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

De mon coté c'est tout bon (:

Joyeux Noël à vous deux !

Tout compris aussi Smile

Joyeux Noël Wink

Bon, et bien après ce long cours sur les class et les id et la forme du CSS dans les balises style, on va continuer d'apprendre des propriétés CSS, mais cette fois-ci, pour les expliquer, je les mettrai directement dans la forme qu'on utilise dans les balises style. Pour rappel :

Code:: .name{ /**Ici j'ai mis une class pour l'exemple, mais je peux très bien mettre un id hein **/
/**CSS**/
}

On va d'ailleurs continuer de voir les propriétés en rapport la mise en page du texte. Mais ce coup-ci, on va voir comment le placer dans nos balises !

Afin de centrer le texte dans une balise, on utilisera text-align, de la sorte :

Code:: .name{
text-align: center;
}

Si on veut aligner le texte à gauche, ou à droite, on utilisera text-align: left; ou text-align: right;
Par exemple :

Code:: .name{
text-align: right;
}

Pour aligner le texte de manière "justifiée", on aura text-align: justify;

Code:: .name{
text-align: justify;
}

On peut espacer le texte du bord de la balise qui le contient grâce à text-indent. Néanmoins, seule la première ligne du texte entier sera touchée par cet espacement.
La première ligne sera alors espacée du bord gauche de la balise du nombre de pixels défini.

Code:: .name{
text-indent: Npx; /** N : le nombre de pixels défini **/
}

Si on veut modifier l'espacement présent entre les lignes d'un texte, on pourra utiliser line-height :

Code:: .name{
line-height: Npx; /** N : le nombre de pixels entre les lignes **/
}

Voici un paragraphe dans lequel la première ligne du texte est espacée de 30px grâce à text-indent, dans lequel le texte est justifié et dans lequel l'espace entre les lignes est de 20px.

screen de l'exemple

Des questions ?
Si tu n'as pas de questions, tu me donnes le code de ce paragraphe justement ? Smile

. (avec un id, qui aura pour nom : container)

Bonjour

Maintenant qu'on a ~~torturé~~ mis en page nos textes en long, en large et en travers, on va s'intéresser à mettre en page la balise dans laquelle il y a ce texte (ou dans n'importe quelle balise hein :p).

A commencer par ses contours, contours que nous allons appeler bordures.
Il existe plusieurs types de bordures, nous allons les voir ensemble :
Bordure de type solide :

Bordure de type solide avec la couleur #98bf21

Code:: <p style="border: 5px solid #98bf21;">Bordure de type solide avec la couleur #98bf21</p>

Bordure de type pointillée avec la couleur #98bf21

Code:: <p style="border: 5px dotted #98bf21;">Bordure de type pointillée avec la couleur #98bf21 </p>

Bordure de type "tirets" avec la couleur #98bf21

Code:: <p style="border: 5px dashed #98bf21;">Bordure de type "tirets" avec la couleur #98bf21 </p>

Bordure double avec la couleur #98bf21

Code:: <p style="border: 5px double #98bf21;">Bordure double avec la couleur #98bf21 </p>

Bordure de type groove avec la couleur #98bf21

Code:: <p style="border: 5px groove #98bf21;">Bordure de type groove avec la couleur #98bf21 </p>

Bordure de type ridge avec la couleur #98bf21

Code:: <p style="border: 5px ridge #98bf21;">Bordure de type ridge avec la couleur #98bf21 </p>

Bordure de type outset avec la couleur #98bf21

Code:: <p style="border: 5px dotted #98bf21;">Bordure de type outset avec la couleur #98bf21 </p>

Bordure de type inset avec la couleur #98bf21

Code:: <p style="border: 5px inset #98bf21;">Bordure de type inset avec la couleur #98bf21 </p>

Si maintenant on souhaite mettre une bordure que à droite, que à gauche, que en bas, ou que en haut, on utilisera border-right, border-left, border-bottom et border-top par exemple :

Code:: .name{
border-top: 1px solid red; /** Bordure du haut de 1px solid et rouge **/
border-left: 2px inset black; /** Bordure de gauche de 2px inset et noire **/
}

D'acodac ?

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Oké m'sieur le professeur (:

Pas de soucis pour moi =)

Alors, maintenant qu'on a vu le CSS permettant de mettre en page le contour de notre balise, on va voir le CSS permettant de mettre en page l'intérieur de la balise! Par exemple, son fond !

Bon, comme vous devez l'avoir remarqué, de départ, le fond d'une balise est... Transparent.
Du coup, pour changer le fond, on peut mettre... De la couleur, ou une image !
Et c'est possible avec la propriété background !

Voici ce que ça donne en CSS :

Code:: .name{
background-color: couleur;
}

Et pour l'image :

Code:: .name{
background-image: url('lien_de_l'image');
}

Et si on veut, on peut même faire les fainéants !

Code:: .name{
background: couleur ou url('image');
}

Bon, jusqu'ici, ça va !
Bon alors, non, je vais vous dire la vérité : ça ne va pas... entièrement !
En fait, si on met une image en fond de toute la page là, elle se répétera indéfiniment jusqu'au bas de la page, et de gauche à droite !
Du coup, afin de gérer cette répétition, il existe une propriété bien pratique ! Le background-repeat !

Code:: .name{
background-image: url('image_lien');
background-repeat: no-repeat; /**Ici, l'image ne se répétera pas. C'est à dire qu'elle se mettra une fois sur la page et stop !**/
}

Mais si on veut que l'image se répète on fait comment du coup ?
Et bien, on ne met pas le background-repeat, vu qu'elle se répétera automatiquement Wink

(ou alors background-repeat: repeat;)

Si par contre, on veut qu'elle se répète uniquement de haut en bas (verticalement) ou de gauche à droite (horizontalement), on spécifiera une nouvelle valeur à background-repeat !

Code:: .name{
background-image: url('image_lien');
background-repeat: repeat-x; /**Ici, l'image se répétera horizontalement (de gauche à droite). **/
}
.foo{
background-image: url('image2_lien');
background-repeat: repeat-y; /**Ici, l'image se répétera verticalement (de haut en bas) **/
}

Mais ce n'est pas fini !
Si on veut que notre image de fond soit centrée sur la page ou en haut à droite, comment on fait ? Là encore, le css fait bien les choses ! background-position est notre ami !

Code:: .name{
background-image: url('image');
background-position: left top; /** L'image se placera à GAUCHE en HAUT **/
}

Comment ça fonctionne ? En premier, on met la base "horizontale", donc soit gauche (left), soit milieu (center), soit droit (right).
En second, on met la base "verticale", donc soit haut (top), soit milieu (center), soit bas (bottom).
On peut aussi spécifier ces valeurs avec un nombre de pixels.
Par exemple :

Code:: .name{
background-position: 10px 200px;
}

Si on suit ce que l'on a dit, le 10px gère la valeur "horizontale" (donc ici, l'image sera décalée de 10px à partir du bord gauche de la page), puis 200px gère la valeur "verticale" (donc ici, l'image sera décalée de 200px à partir du haut de la page)

Et avant de partir, résolvons un dernier petit problème.
Si notre page est grande, très grande, une barre de défilement (appelée scrollbare) se mettra en place (la barre souvent grise sur le côté droit d'une page !) Et si on bouge la scrollbare, l'image ne bougera pas. Cela veut dire que si on descend dans la page, l'image restera en haut et on finira par ne plus la voir.
Si on veut qu'elle reste, on utilisera background-attachment.

Code:: .name{
background-attachment: fixed;
}

Voilà !

N'hésitez pas à tester sur notepad++ si vous avez des doutes sur le rendu de certains des codes Wink

.
Des questions ?

Mode Professeur Layton : ON

"Tout est clair, désormais !"

Mode Professeur Layton : OFF What a Face

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Ok pour moi également ! (:

Si on préfère, il existe une syntaxe permettant de tout mettre sur la même ligne.

Code:: .name{
background: blue url('image.jpg') no-repeat fixed center;
}

Oula ! Que fait ce code ?
Alors, ce code donnera un fond bleu, avec au centre (vu qu'il y a center), une image nommée image.jpg, fixée (elle restera au centre de la page même si tu utilises la scrollbare pour monter ou descendre sur la page, on la verra donc toujours), qui ne se répétera pas.
Donc en réalité, le code est :
background: couleurdefond* url('lien_de_limage') larépetition fixéeounon placement;
* = optionnel. Si on met une image en fond, on n'a pas forcément besoin d'une couleur de fond.

Et si jamais l'envie vous prenait de redimensionner votre image de fond, alors il faudrait utiliser background-size !
Mais attention ! . Cette propriété n'est pas supportée par les versions d'Internet Explorer (abrégé IE) inférieure ou égale à 8 !

Code:: .name{
background-image: url('image');
background-size: Npx Apx; /** N et A désignant des nombres non nuls de pixels. N désignant la largeur, A la hauteur **/
}

PS : Aucune des propriétés repeat, size, attachment, position ne fonctionnent avec une couleur de fond. Forcément.

Si c'est tout compris, j'aimerais que vous me donniez le code CSS permettant de mettre une image en fond, fixée, redimensionnée en 350px * 350px, qui ne se répète pas, en bas à gauche de la page !

Et comme toujours : des questions ? Je suis là Wink

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Coucou !
Je suis désolée du retard je me suis laisser mourrir au fond de mon lit et à petit feu par un méchante grippe. Je fais ça ce soir, promis !