Tuto de Kayl n°...8 - Les bonnes pratiques css

Je suis pas sûre de moi là, c'est peut-être le 9 °°
BON j'arrête pas de voir des trucs horribles (nan en vrai ça va c'est juste que les navigateurs changent la façon de fonctionner). Bref on va virer ce qui est obsolète/pas bien et on va faire un cours sur les bonnes pratiques CSS

Au lieu de mettre que des div ce serait mieux de mettre la vraie balise qui correspond à l’élément. Donc :

• Un bloc quelconque c’est :

Code:

<div>

• Un titre c’est

Code:

<h1>

• Un texte long (le contenu, les Rps) c’est

Code:

<p>

• Un texte de 1 ligne (copyright, le Ft aussi) c’est

Code:

<span>

Et les balises de lien c’est

Code:

<a>

et images c’est

Code:

<img>

mais ça vous connaissez. Du coup en fiche Rp en vrai il faut mettre :

Code:

<div style=”le bloc général”>
<h1>Un titre ici</h1>
<p>Le texte</p>
</div>
<span> by Machin pour Truc</span>

Aussi faut bannir (BANNIR) les balises center. En fait c’est pas que c’est moche, c’est hyper pratique, mais… Les navigateurs sont en train de pas la reconnaître, donc bientôt elle sera plus reconnue, c’est comme si y avait un gros point d’interrogation, donc les éléments centrés avec ça seront juste euh plus centrés
À la place faut mettre : margin: auto; dans la div générale et dans tout ce qu’on veut centrer, et pour les titres donc text-align: center; comme d’hab


Et enfin dernière chose, un petit cours sur euh le display Ça permettra de remplacer au maximum les balises table qui sont pareil, pas hyper pratique et qui seront obsolètes uhu

Display donc, c’est une propriété, comme background, width etc. Elle peut prendre une valeur parmi ce que je vais indiquer.

• display: block;
Ça c’est la valeur de la plupart des balises. En gros si tu mets div puis div à la suite même sans saut de ligne, elles seront dans l’ordre, l’une au-dessus de l’autre. Comme ci-dessous, le bloc bleu est au-dessus de la div verte :

Code:

<div style="width: 100px; background: blue; height: 250px;"></div><div style="width: 200px; background: green; height: 250px;"></div>

• display: inline-block;
Cependant, les liens par exemple sont de base en inline-block c’est à dire que si tu écris :

Code:

<a href="url1">Texte 1</a><a href="url2">Texte 2</a><a href="url3">Texte 3</a>

Ils seront sur la même ligne :

Texte 1 Texte 2 Texte 3

C’est donc cette propriété qu’on va utiliser pour mettre notre bloc bleu et le vert côte à côte. On va, en gros, forcer les div qui sont implicitement en "display: block;" à se mettre en inline-block pour qu’ils soient côte à côte.
Donc tu rajoutes juste :
display: inline-block;
Dans chaque div que tu veux mettre côte à côte. Donc dans les 2 div, la bleue et la verte.

Code:

<div style="width: 100px; background: blue; height: 250px; display: inline-block;"></div><div style="width: 200px; background: green; height: 250px; display: inline-block;"></div>

Ce qui donne :



Bon voilà ça c'était pour les bonnes pratiques o/ La suite sur les background parce qu'on m'a demandé comment on fait les dégradés et tout, et pareil sur les textes DES BISOUS