CSS - Des propriétés structurantes

Bonjour à toi !

Voici un second tutoriel sur la CSS, qui va te permettre de mettre en page tes codes jusqu'au bout.
Tout d'abord, pour pouvoir comprendre ce tutoriel, tu dois avoir lu et compris ces tutoriels :
• Les bases du HTML
• Les principales balises
• Lier CSS et HTML

Maintenant que tu as tout lu, je vais te donner pleins de petites propriétés avec lesquelles tu vas pouvoir structurer visuellement tes codes


N'oublies pas qu'après chaque propriétés CSS tu dois mettre ";" pour que ça soit pris en compte.

En CSS, tu peux commenter afin de mettre des indications dans ton code. Les commentaires s'écrivent comme ceci :

Code:

/* Mon commentaire */

Tout d'abord, saches que nous utilisons toutes les propriétés suivantes sur des balises "block" : les balises dites "inline" ne prennent pas en compte la largeur, la hauteur ou encore les margin ou padding top & bottom.
Si tu souhaites qu'un élément "inline" adopte une structure particulière : c'est possible, il faut lui dire de se comporter en block comme ceci :

Code:

display:block;

Par exemple :

Je suis un lien /// Je suis un second lien et je suis juste après le lien précédent, je le suis car je suis "inline". Les propriétés de largeur et hauteur ne nous affectent pas

Code:

<a href="#" style="width:400px;">Je suis un lien </a> /// <a href="#" style="margin-top:10px;">Je suis un second lien et je suis juste après le lien précédent, je le suis car je suis "inline". Les propriétés de largeur et hauteur ne nous affectent pas</a>

Mais si je leur demande d'être en "block"

Je suis un lien /// Je suis un second lien et je suis en dessous du lien précédent car je suis un "block" maintenant. Les propriétés de largeur et hauteur nous affectent

Code:

<a href="#" style="width:400px;display:block;">Je suis un lien </a> /// <a href="#" style="margin-top:10px;display:block;">Je suis un second lien et je suis juste après le lien précédent, je le suis car je suis "inline". Les propriétés de largeur et hauteur nous affectent </a>

Voyons la suite


Pour fixer une largeur : width:Y px
Pour fixer une hauteur : height:Y px

Leurs valeurs peuvent être en px (pixels) ou en % sans souci. Voilà deux petits exemples :

Code:

<div style="width:300px;height:150px;background:#000;">Je suis un bloc qui fait 300px de large et 150px de haut</div>

Code:

<div style="width:50%;height:150px;background:#000;">Je suis un bloc qui fait 50% de large et 150px de haut</div>

Bien souvent, ces 2 propriétés CSS sont confondues.

> Padding = remplissage: on ajoute du “vide” entre le bord du bloc et son contenu
> Margin = espace extérieur: on ajoute du “vide” à l'extérieur du bloc.

Pour t'aider à retenir ça, voici une image "pense-bête" :



Que ce soit le "margin" ou le "padding", l'écriture reste la même. Tu peux l'écrire de manière décomposée :
>>> CAS 1 :

Code:

padding-top: 13px;
padding-right: 4px;
padding-left: 8px;
padding-bottom: 2px;

>>> CAS 2 :

Code:

padding-top: 13px;
padding-right: 4px;
padding-left: 4px;
padding-bottom: 13px;

>>> CAS 3 :

Code:

padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 20px;

ou de manière simplifiée :
>>> CAS 1 :

Code:

padding: 13px 4px 2px 8px;

>>> CAS 2 :

Code:

padding: 13px 4px;

>>> CAS 3 :

Code:

padding: 20px;

de manière simplifier, ça s'écrit donc :
haut droite bas gauche
ou
haut/bas droite/gauche


Il faut également savoir que le "padding" ajoute du "vide" dans le bloc. Ce "vide" s'ajoute à la largeur que tu as indiquée. Par exemple :

Code:

.bloc{
 padding: 10px;
 width: 200px;
}

le padding 10px signifie que je vais avoir 10px de remplissage :
- en haut
- en bas
- à droite
- à gauche

ma largeur fera donc 220px au lieu des 200 que j'ai indiqué.

Pour régler ce souci, il existe une propriété CSS : box-sizing. Voici l'explication de la doc de mozilla : clic.

Si on écrit :

Code:

.bloc{
 box-sizing: border-box;
 padding: 10px;
 width: 200px;
}

Notre bloc fera bien 200px malgré les padding


Si je veux que mon texte ne soit pas collé au bord de bloc :

Code:

<div style="width:300px;height:150px;background:#000;padding:10px;">Je suis un bloc qui fait 300px de large et 150px de haut</div>

Mais on voit que mon bloc est plus grand qu'avant (il fait 320 px de largeur et 170px de hauteur) : on lui met un box-sizing :

Code:

<div style="width:300px;height:150px;background:#000;padding:10px;box-sizing:border-box;">Je suis un bloc qui fait 300px de large et 150px de haut</div>

Et maintenant je veux que mon bloc soit à 200px de la gauche :

Code:

<div style="width:300px;height:150px;background:#000;padding:10px;box-sizing:border-box;margin-left:200px;">Je suis un bloc qui fait 300px de large et 150px de haut</div>

Petite astuce : pour centre un bloc dans ta page, tu peux lui appliquer une marge automatique : margin:auto;

Code:

<div style="width:300px;height:150px;background:#000;padding:10px;box-sizing:border-box;margin:auto;">Je suis un bloc qui fait 300px de large et 150px de haut</div>

---

N'hésites pas à faire pleins de tests, et si tu as des questions, n'hésites pas à les poser Et n'hésites pas non plus à regarder sur le net, cette liste n'est pas exhaustive, il en existe vraiment beaucoup