16 jui

Une nouvelle plateforme et une autre philosophie

Bonjour à tous et à toutes,

Le week-end approche à grand pas !

Pour ceux et celles qui veulent profiter de ces quelques jours de repos pour "travailler à leur blog", voici un petit tutoriel rédigé par mon collègue Stany, responsable du service clientèle francophone.

D'après lui, "sans comprendre le principe de la CSS, on ne va nulle part !". Ci-dessous, sa vision ;-)

Et pour les plus studieux d'entre vous, en fichier inséré, un petite document qui devrait vous être bien utile lors de vos pérégrinations HTMLCSSesques. SKYNET_SKINS.doc

Courage !
Julie (toute aussi nulle que vous en HTML & CCS et qui a de la lecture pour ce week-end)

------------------------------------------------------------------------------------------------------------------------------------------------------------------

Une nouvelle plateforme et une autre philosophie : HTML & CSS

C’est bien connu, les informaticiens adorent les acronymes barbares et les trucs complexes. Nous blogueurs, on aime beaucoup moins ça (en général…). Voici donc un petit explicatif sur ce que sont ces fameuses « feuilles de style », CSS ou Cascading Style Sheet. Mise(s) en relation avec le code HTML de la page, elles vont donner l’aspect du blog. Ce qui permet en réalité de séparer totalement l’aspect contenu (texte, photos, vidéos…) de l’aspect présentation (police, gras, taille des photos, agencement de la page.

Ceci n’est pas un manuel sur comment faire du CSS, mais simplement une présentation du fonctionnement du système.

Pour bien comprendre comment ça marche, il faut se représenter sa page (et son code HTML) un peu comme un set de tupperwares. Nous appelons chaque boîte une « DIV ». Chaque boîte contient une partie du contenu, et surtout, une étiquette (id) et/ou une étiquette de catégorie (classe). Dans le code, ça donne ça pour la classe:

<div class=’’legumes’’>
Cette boîte (comme toutes les boîtes de la même classe) contient des légumes
</div>

Et ça pour l’étiquette (id)

<div class=’’légumes’’ id=’’poireaux’’>
Cette boite contient des légumes, et ce sont des poireaux
</div>

Les boîtes peuvent contenir d’autres boîtes (plus petites), toujours rectangulaires (ou carrées).

Ça, c’est le code HTML. Venons-en maintenant à la feuille de style. Il s’agit d’un fichier séparé, grand maître des boîtes. Dans ce fichier, on va trouver toutes les caractéristiques de chaque boîte, ou de chaque « série » de boîtes. On va donc pouvoir dire que les boîtes « légumes » doivent avoir un fond vert, que la police doit être du Verdana en taille 12, que les boîtes font 112 pixels de large et 234 pixels de haut et qu’elles ont une bordure noire de 1 pixel de large. Dans le code, ça donne ça :


.legumes{                                       (le "." indique qu’on parle d’une classe)
font-family : Verdana ;                      (Police : Verdana)
font-size : 12px ;                             (Taille de la police : 12)
width : 112px ;                                (Largeur de la boite : 112 pixels)
height : 234px ;                               (hauteur de la boite : 234 pixels)
border : 1px solid black ;                  (bordure de 1 pixel continue et noire)
Background-color : #15670a ;           (15670a est le code hexadecimal d’un vert foncé)
}

Ceci sera donc valable pour toutes les boîtes de la classe "légumes".

Ensuite, on peut ajouter ou changer des caractéristiques pour une boîte en particulier, comme celle des poireaux :

#poireaux{                                       (le "#" indique qu’on parle d’un id)
width : 50px ;                                  (La boîte ne fait que 50 pixels de large)
height : 50px ;                                 (La boîte ne fait que 50 pixels de haut)
}

Ceci ne sera valable QUE pour la boîte spécifique "poireaux". Les autres caractéristiques de cette boîte poireaux (Police, taille de la police, …) resteront les mêmes que pour toutes les boîtes « légumes », puisqu'elle fait partie de la classe "légumes".

Mais où donc est la cascade des merveilleuses « Cascading Style Sheet » ?

On appelle ce système « en cascade » parce que les caractéristiques définies pour une boîte « cascadent » sur toutes celles qui se trouvent à l’intérieur. Exemple :

Dans le code HTML de l’ensemble « frigo », on a différentes boites : Le frigo en lui-même, le bac à légumes, le bac à boissons et le bac congélateur, dans lequel se trouvent les viandes et les glaces. En code, ça donne donc ça :

<div id= ‘’frigo’’>
.   <div class=’’bac_a_legumes’’> c’est ici qu’on met les légumes </div>
.   <div class=’’bac_a_boissons’’> C’est ici qu’on met les boissons </div>
.   <div id=’’congélateur’’>
.        <div class=’’viandes’’> C’est ici qu’on met la viande </div>
.        <div class=’’glaces’’> C’est ici qu’on met les glaces </div>
.   </div>                                                               (fin de la div « congélateur »)
</div>                                                               (fin de la div « frigo)

Si on définit les caractéristiques de « frigo », tout ce qui se trouve à l’intérieur prendra les mêmes caractéristiques. SAUF si vous en décidez autrement, en définissant des caractéristiques différentes pour chacune des parties se trouvant à l’intérieur.

Dans ce petit explicatif, j’ai tenté de faire simple et imagé, et le CSS, c’est en fait relativement (bon, pas complètement, c’est vrai) simple. Et surtout, c’est extrêmement puissant ! Grâce à ce système, où le contenu est totalement séparé de la présentation, vous pouvez changer les couleurs, les polices, les tailles de colonnes,… sans jamais toucher à votre contenu et en ne modifiant que quelques lignes dans un seul fichier. Et ça, c’est super pratique !

Bonne chance !
Stany

Fotolia_7086862_XS.jpg

16:14 Écrit par Skynet Blogs |  Facebook | |