[Cours & Questions] Drag' ♥

* La rattrape *

Citation :

Je sais qu'on les trouve dans le panneau d'administration, onglet affichage, partie gestion des couleurs, onglet feuille de style CSS. On peut en faire plusieurs il me semble. Elles servent à gérer l'apparence du forum (police d'écriture, couleurs, images, apparence de la PA...). C'est aussi dans ces lignes de codes que l'on peut modifier le nom de la chatbox, installer un QEEL et autres onglets qui sortent du côté de l'écran.

Niveau forum t'as tout compris n_n

Mais plus généralement, pour n'importe quel type de site / forum / pages web ... C'est tout ce qui touche à l'apparence, les couleurs, la mise en page. Toutes ces choses sont gérées seulement par le CSS, et il vaut mieux éviter de les utiliser via du HTML.

Donc par exemple, tout ce qui est <b>bold</b>, <i>italique</i>, et même <center> </center> sont à bannir de ta manière de coder car c'est vraiment des propriétés touchant à l'apparence.

Les seules choses "autorisées" (entre " " car bold, italique, center.. Sont des propriétés qui marchent, pas de soucis pour ça, mais disons que je trouve que ça manque de rigueur au niveau du codage) sont <em>emphasis</em> et <strong>strong</strong>.

• <em> emphasis </em> permet de donner une importance au texte. Emphasis signifie accentuation, insitance. C'est un texte qui sera mis en italique par défaut, mais la propriété em est modifiable par le CSS (dont tu peux très bien avoir un texte qui n'est pas en italique, mais avec un fond vert et en taille 42 si tu veux x) )
• <strong> strong </strong> permet de mettre le texte encore plus en relief que <em>. Strong signifie fort. C'est un texte qui sera mis en gras par défaut, mais la propriété est elle aussi modifiable.

Ces deux balise ont certes des attributs visuels, mais il me semble qu'elles ont un intérêt au niveau du référencement, et plus de logique au niveau de la sémantique.


Bon, revenons au CSS.
CSS veut dire Cascading Style Sheets, soit "feuille de style en cascade". Cette feuille de style fournit la mise en forme et l'apparence des éléments de ta page HTML. LE principe de ces feuilles de style est qu'elles sont utilisables sur autant de pages web que tu souhaites. Tu peux utiliser plusieurs feuilles de style pour une même page, c'est pour ça qu'elles sont appelées "en cascade".
Si tu as différentes propriétés CSS pour le même élément HTML, elles se cumuleront, et si deux propriétés se contredisent c'est généralement le dernier style de ta feuille de style qui est pris en compte par le navigateur.

Une feuille de style est composée d'élément #id, .class ou avec juste le nom de la balise, comme a, img, h1 ...

Le class="titre_de_class" renvoie à des propriétés CSS de ta feuille de style ( alors que le style="propriété:valeur;" est pour intégrer directement le style à ton élément, c'est ce que tu faisais jusqu'à présent).
Tu retrouveras aussi le id="nom_de_l_id" qui ressemble un peu au class="nom_de_class" dans le fait qu'il fait appel à des propriétés externes.

C'est via les class et les id que tu as besoin d'utiliser les feuilles de style se présentant sous cette forme :

Code:

.titre_de_class {
propriete1:valeur;
propriete2:valeur;
propriete3:valeur;
}

ou encore

#titre_de_l_id {
propriete1:valeur;
propriete2:valeur;
propriete3:valeur;
}

La différence entre id et class est que l'id ne peut être utilisée qu'une seule fois dans une page web ( par exemple si tu veux afficher ton header, tu n'auras besoin de cette propriété qu'une seule fois ) alors que la class peut être réutilisée 36 fois dans ta page si tu le souhaites.

Dans la feuille de style il y a une seule différence à faire quand tu écris des propriétés de class ou d'id :
• Tu mets un . avant le titre de ta class.
• Tu mets un # avant le titre de ton id.


Par exemple, dans notre page web on a une div :

Code:

<div> blabla </div>

Si tu avais voulu lui donner un style, jusqu'à présent tu aurais fait :

Code:

<div style="height:150px; background-color:#006699; color:#ffffff; text-align:center; font-size:15px; border:5px double #ffffff;margin:auto; overflow:auto;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt diam eget urna bibendum sit amet rutrum orci ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dapibus ullamcorper bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer convallis tincidunt dignissim. Aliquam quis massa lorem, in egestas orci. Aliquam erat volutpat. Sed imperdiet lacus vel nulla dictum sit amet sagittis quam consectetur. Curabitur convallis aliquet arcu, vel varius felis ultricies a. Etiam euismod est risus. Nullam placerat cursus dictum. In dapibus fringilla massa, at suscipit mi accumsan sit amet.

</div>

Mais avec une feuille de style, tu dois enlever toutes les propriétés de style pour aller les mettre dans le CSS.
La seule chose à faire, est de trouver un "titre" à ton style. Ici nous le nommerons divtest.
Comme c'est un style que nous pourrons ré-utiliser plus tard, on utilise une class="divtest".

On obtient donc

Code:

<div class="divtest"> blabla </div>

Et il ne reste plus qu'à ajouter les propriétés de divtest dans le CSS:

Code:

.divtest{
   height:150px;
   background-color:#006699;
   color:#ffffff;
   text-align:center;
   font-size:20px;
   border:5px double #ffffff;
   margin:auto;
}

Voilà, beaucoup de choses pour aujourd'hui, j'espère que j'ai été assez claire n_n Pose des questions si c'est pas le cas ;)

Bon, déjà je viens seulement de voir que tu avais répondu, et ensuite je vais relire ça deux trois fois et noter mes questions au fur et à mesure afin de tout comprendre . Merci d'avoir pris le temps de m'expliquer tout ça Ella ♥.