Passion Info

Comme promis, voici l'explication des grandes lignes de la feuille de style d'un over-blog.
D'abord, petit rappel sur les styles.
Une page web est composée d'éléments qui se posent où on leur dit. Chaque élément peut être définit par des balises html comme <img src="..." /> qui définit une image.
Chaque élément peut être relooké par l'application d'une feuille de style (CSS). Pour cela, il dispose d'une liste d'attributs (couleurs, taille, bordure, etc...) qui peuvent être adaptés à tout ce que l'on veut (ou presque).

Passons à la CSS d'over-blog. Les éléments sont regroupés par affinités:

• Les éléments principaux
• La structure de la page
• Les modules
• Les articles
• Les commentaires
• D'autres que je ne détaillerais pas ici

Passons en revue les éléments, et ce à quoi ils correspondent:
Éléments principaux:
body la page entière: pour définir une police, la couleur de fond (ou même une image)
h1 titre des pages
h2 sous titre de niveau 2
h3 sous titre de niveau 3
a liens: la couleurs, la mise en forme, etc..
a:hover liens, mais lors du survol de celui ci par la souris
li un élément d'une liste
img image: pour définir des bordures en général
input bouton, et autres éléments d'un formulaire

La structure de la page La class main correspond à la structure globale du blog
Le numéro après 'main' correspond au type de structure (2 ou 3 colonnes) Je n'aborderais que les blogs avec 3 colonnes. Il faudra transposer mon discours pour les autres;)
#main1 la page en elle meme
#main1 #rightnav la colonne de droite contenant des modules
#main1 #leftnav la colonne de gauche contenant des modules
#main1 #content la colonne du milieu contenant les articles
#main1 h2 les sous-titres

Les modules
.box la boite complète
.box h2 le titre d'un module
.box-top le haut de la boite (pour mettre une bordure en image)
.box-left le côté gauche
.box-right le côté droit
.box-bottom le bas de la boîte
.box-topLeft le coin en haut à gauche
.box-topRight le coin en haut à droite
.box-bottomLeft le coin en bas à gauche
.box-bottomRight le coin en bas à droite
.box-content le contenu de la boite
.box-content p un texte dans la boite
.box-content ul une liste dans la boite
.box-content li un élément d'une liste dans la boite

Les articles
#article un article (de manière générale).
#comment hr une séparation entre les articles
#article p le texte d'un article
#Date la date notée au dessus d'un article
#Option la signature sur un article

Les commentaires
#comment un commentaire de manière générale
#commentMessage le texte d'un commentaire
#commentOption les informations sur un commentaire: date, pseudo, etc..

Voilà un apercu relativement rapide des éléments que l'on peut personnaliser dans une css. En fait, il est possible de tout personnaliser, mais sachant que plus on modifie, plus on peut créer des bugs d'affichage.
Note: les CSS sont interpretées par le navigateur (Internet explorer, Firefox, Mozilla, Nestcape, Opéra, etc..) et ces interprétations sont parfois litigieuses. Ainsi, le même code validé ne sera pas présenté de la même façon sous tous les navigateurs. Il faut donc bien penser à tester sa CSS sur plusieurs navigateurs ;)


Prochain article prévu: les attributs des éléments dans une CSS

Voilà.

Après moults hésitations, j'ai décidé de créer ce blog pour parler d'informatique. J'aborderais les thèmes que je connais, que ce soit le matériel, internet ou la programmation. Les articles seront soit de la vulgarisation (pour être lus par le plus grand nombre), soit de la technique (pour une lecture par des personnes ayant déjà de bonnes bases).

La prévision est d'un article tout les 8-10 jours. On verra si j'arrive à tenir le rythme, surtout en période de fin d'année ;)

Voilà, c'est tout pour aujourd'hui. Prochain article: le CSS sur over-blog.