Le Deal du moment :
Clé licence Windows 10 professionnel 32/64 bits ...
Voir le deal
0.48 €

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Présente quelques heures par semaine =)
----
Idea Viens papoter avec nous sur le discord

Messages : 3991
https://tambouille-raleuses.forumactif.com/

CSS - Des propriétés structurantes Empty CSS - Des propriétés structurantes

Dim 28 Avr 2019 - 11:13

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 Smile

Règles d'écriture

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 */

Inline ou block ?

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;

Arrow Par exemple :
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"
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 Smile

Gérer la largeur et la hauteur d'un bloc

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 :

Je suis un bloc qui fait 300px de large et 150px de haut

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

Je suis un bloc qui fait 50% de large et 150px de haut

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

Padding et margin : quelles différences ?

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" :
CSS - Des propriétés structurantes Marges10

Ecriture

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;

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

Gérer les problèmes de dimensions liées aux "padding"

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 Smile

Exemple

Si je veux que mon texte ne soit pas collé au bord de bloc :
Je suis un bloc qui fait 300px de large et 150px de haut

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 :
Je suis un bloc qui fait 300px de large et 150px de haut

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 :
Je suis un bloc qui fait 300px de large et 150px de haut

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>

Idea Petite astuce : pour centre un bloc dans ta page, tu peux lui appliquer une marge automatique : margin:auto;
Je suis un bloc qui fait 300px de large et 150px de haut

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 Smile Et n'hésites pas non plus à regarder sur le net, cette liste n'est pas exhaustive, il en existe vraiment beaucoup Smile

Tutoriel rédigé par Mäven et Miettes ensemble

Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses