Voici un résumé tres bien pensé et ecrit du blogger: Miss Moonlight
dont voici la source:
http://missmoonlight.over-blog.com/article-100999.html
CSS : comment ça marche
Voici les éléments du CSS dont je connais la signification. Si vous pouvez compléter ce qui me manque, laissez-moi un commentaire.
/* ELEMENTS PRINCIPAUX */
Body : concerne le corps de texte principal
margin : taille de la marge à gauche et à droite
font-family : le texte d'un article (texte principal est initialement en police 1 (la 1e de la liste). Si la personne qui regarde le site ne l'a pas, le site se met à la 2e, etc jusqu'à la dernière qui est la plus simple. Si on veut changer la police, on modifie le 1er ou on en insère une en 1ere place.
font-size : change la taille du texte principal (on peut mettre des pixels)
h1 : concerne le titre d'un article
color : couleur
margin-top : taille de la marge au-dessus du titre
h2 : concerne le titre des modules
h3 : ???
a : concerne les liens (toujours comme ça en CSS)
text-decoration: soulignements, etc.
a:hover : quand la souris passe sur un lien
legend : ???
li : ???
list-style-type : ?
img : concerne les images
input : concerne les boutons (exple : bouton recherche)
border : le tour des boutons
background : le fond des boutons (le contenu...)
color : le texte des boutons
/* STRUCTURE */
main = structure globale du blog (suivant si on a 1,2 ou 3 colonnes)
/* pour structure à deux colonnes */
text-align : alignement du texte
margin : marge en haut de la structure (au-dessus de la bande principale) pour la 1ere valeur, marge en bas sans doute pour la deuxième (?)
#rightnav : concerne la colonne de droite
padding : marges entre les bords de la colonne et les modules (gauche, droite, haut, bas)
width : largeur de la colonne
#leftnav : concerne la colonne de gauche
#content : concerne la "colonne du milieu"
padding : marges autour du texte central
border-left : taille et couleur de la bordure gauche (solid = type de bordure ?)
border-right : idem pour bordure droite
#main1 h2 : retouche les titres des modules (ds les commentaires ils mettent q ça retouche le titre des articles, mais je ne pense pas... ERREUR ?) en tous cas, ça met les titres des modules à l'emplacement fait pour.
#MainTab : décale l'ensemble de la page vers le bas-droite
#MainTab td :
vertical-align : s'aligne au choix en haut (top), ou en bas (bottom) (on doit pouvoir mettre gauche et droite, mais cela sert-il ?)
/* autres structures, ça ressemble */
/* entete */
#top :
padding : taille entre les bordures de l'entete et le texte
background-color : couleur du fond
border-bottom : taille et couleur de la bordure inférieure de l'entete
#top h1 : concerne le titre de la page
padding : espace entre les bords du "padding précédent" (celui de #top) et le texte
margin : marge
/* --- en gros dans l'entete, on fait un mix du #top padding, du #top h1 padding et du margin pour avoir le résultat souhaité --- */
/* bas de page */
#footer :
clear : ?
color : ?
border-top : concerne la bordure supérieure (comme pour border-bottom de l'entete)
#footer p :
margin : marge entre la page web et le pied de page
padding : espace entre les bords du pied de page et le texte du pied de page
background : couleur du pied de page
.cleaner : ???
/* BOX */
/* pour les modules */
.box :
width : largeur des modules
margin-bottom : taille de la marge en-dessous d'un module
ts les trucs avec les URL : concerne le contour des modules (ce sont des images prédéfinies, moi je les ai enlevées)
.box-content : contenu des modules
overflow : ?
padding : marges entre le texte contenu dans le module et les bords (forme : haut, droite, bas, gauche)
color : couleur du texte
.box-content p : modifie p
.box-content ul : modifie ul
.box-content li : modifie li (les puces à l'intérieur des modules)
list-style : forme de la style
color : couleur de la puce
margin : marge autour de la puce et du texte
padding : marge autour de la puce (sans bouger le texte)
/* Recherche */
#Recherche : concerne le module entier
padding : marge entre la colonne et le module "Recherche"
#WForm : quand on est ds la page Recherche
margin : marge entre les bords de la colonne centrale et le cadre de recherche
border : bordure du cadre de recherche (largeur et couleur)
padding : marge entre les bords du cadre de recherche et le champ de recherche
background : couleur du fond du cadre de recherche (mais pas des champs)
#WForm input : concerne le champ où on tape la recherche (et le bouton rechercher)
border : bordure de ces champs (taille et couleur)
font-size : taille des champs (et du texte dedans)
background : couleur de fond du champ
color : couleur du texte
#WForm input:hover : quand la souris passe sur ce champ
.RNum : ???
font-weight : ?
.RDesc : concerne l'extrait de texte trouvé
padding : marge autour de l'extrait
.ROut : concerne le nom de la page web où l'extrait est trouvé
font-style : style (italique, etc.) du texte
color : couleur du texte
a.RTitle : concerne le titre de l'article trouvé
text-decoration : style (souligné, etc.)
color : couleur du texte
a.RTitle:hover : quand la souris passe sur le titre de l'article
#GGResults : concerne la phrase qui dit combien de résultats sont trouvés
.Result1 : concerne le champ où le titre de l'article trouvé est inscrit
.Result2 : ?
/* Articles */
#article : concerne les articles
margin-top : marge au-dessus d'un article
padding : bordure autour des articles
#article p : concerne les paragraphes de l'article
padding : bordure autour des paragraphes (peut servir à laisser des espaces entre les paragraphes)
margin : marge autour des paragraphes
#Date : concerne la date de l'article
#Option : concerne les "options en-dessous de l'article (laisser un commentaire, etc.)
/* Commentaires */
#comment : ?
#commentMessage : concerne les messages laissés
#commentOption : concerne la ligne où on dit qui a écrit le commentaire
#formComment label : ?
#addTrackback : concerne le trackback
/* Calendrier */
.calendarTop1 : concerne l'entete où est le mois et l'année
.calendarToday1 : concerne le jour où nous sommes (sélectionné sur le calendrier)
.calendarDays1 : concerne le calendrier en lui-même
.calendarHeader1 : concerne les lettres de la semaine (L M M J V S D)
.calendarTable1 : concerne les lignes-contour du tableau
Voilà. J'espère que ça servira à quelqu'un.
