07-01-2008
DECRYPTAGE DE LA FEUILLE DE STYLE GENERALE
La feuille de style c'est quoi d'abord !?
Une feuille de style permet de spécifier des caractéristiques de mises en formes d'un
document Htlm, qui sont rattachées à des balises.
Plus clairement, ça permet de définir pour chaque balise HTML, une mise en forme spécifique.
Exemple :
Prenons la balise <H2> qui permet sur Canalblog de définir la date dans les messages, On va pouvoir rattacher une
police, une taille, un code couleur, centré, souligner, mettre en majuscule etc...
Chaque fois qu'on utilise la balise <H2> dans un document, tout le texte
situé entre cette balise <H2>Le texte</H2> recevra cette mise en forme.
C'est pas facile au début de savoir à quoi correspondent tous ces blocs de codes dans la feuille de style...
Ce que j'appelle un bloc c'est ça :
#content {
float: left;
width: 600px;
background-color: #FDF7FB;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
Tous les blocs commencent par un # ou un . (point) sauf le premier celui du body.
Ensuite c'est le nom du bloc, (content dans cet exemple)
Suivi d'une parenthèse d'ouverture {
Puis au milieu les lignes ce code qui définissent les spécificités
le bloc se terminent par une parenthèse de fermeture }
Pour vous faciliter la tâche du décodage, j'ai noté au dessus de chaque bloc en rouge, à quoi il correspondent et en bleu le détails des lignes de code.
Feuille de style générale décryptée
Feuille de style générale décryptée (version Bloc-notes)
feuille de style décryptée
|
Salut Guy [Salut]
Bonne année à toi également...[Super]
Bin j'suis d'accord avec toi....[G][S]navlinks .title[/S][/G] concerne tous les titres des blocs...je n'ai pas dit le contraire [Chesse] sauf que je les ai appeler "titres des catégories" mais oui ce sont des blocs...ce qui n'est pas forcément clair pour tout le monde.
Pour [G][S].navlinks ul[/S][/G], j'ai fais un test, mais je n'ai vu le changement que sur les commentaires...alors j'en ai déduit qu'il ne servait qu'à ça [Chesse]
Merci de ta visite [Fleur]
|
Oup's...je viens de voir que j'ai eu un problème de copier coller pour le [G][S].navlinks ul[/S][/G] dans mon doc, je vais modifier ça tout de suite !
[Salut]
|
Qu'est ce qui se passe ? Où est passé toute la liste de feuille de style pour savoir à quoi correspondait chaque bloc ? Pourquoi ça n'y est plus ?
|
[Salut]
Bin si le lien est en bas du message...[je cherche]
avec une flèche rouge devant...
[Img]:url://www.01gif.com/base/les_gifs_objets_vetements/lunettes/lunettes003.gif[/Img]
Il en faut peut être une fluo [Chesse]
http://storage.canalblog.com/39/64/251752/20829564.rtf
|
coucou demolite!!
j'ai trouver enfin je crois l'utilité du navlinks.item en fait item corresponds au lien RSS
voilou si ca peux apporter de l'eau au moulin...[Chesse]
|
j'ajoute que navlinks.item formate le contactez l'auteur..
je l'ai trouver grace a ta page d'accueil décryptée..[Super]
|
oops !
Salut Démolite, c'est encore moi !
J'ai un petit souci avec la taille de la police de mon pied de message...[sos] Sais-tu par quoi je dois remplacer 'small' pour que ca soit écrit le plus petit possible ?!
Merci beaucoup !
Mp[Fleur]
|
^^
bonjours, tout d'abord pour te dire, que tes tutoriels m'ont bien aidé, et que ton blog est très pratique. Je me permet de te laisser ce commentaire, car effectivement, je trouve que l'écriture de mes messages est beaucoup trop espacée. J'aimerai, si cela un possible, un peu d'aide pour pouvoir résoudre ce problème. Merci d'avance.
|
[Salut]
tu passes le "line-height" à 100%
.blogbody p {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: medium;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
line-height: 200%;
margin-bottom: 10px;
}
Bye
[Salut]
|
^^
Encore merci, pour ton aide.[Chesse]
|
^^
Bonjour[Chesse], les messages de mon blog sont en gras, et je ne sais pas comment faire pour retrouver l'écriture normale.
Merci d'avance.
|
^^
Re-bonjour, entre temps, j'ai réussi à remettre l'écriture d'origine. * Mauvaise manipulation dans la page d'accueil. Voila, au revoir.[Salut]
|
J'avais pas ouvert assez grands mes yeux.. vient de voir qu'il fallait cliquer pour avoir le décryptage !! super tes explications !! mais comme d'hab !!
[Fleur]Merci Démolite [Fleur]
|
Bonjour !
J'aimerais savoir s'il est possible de mettre des polices et couleurs de polices différentes dans les colonnes ? Si oui comment faire car j'ai bien essayé en ajoutant font-family et color dans ma feuille de style mais ça ne fonctionne pas.Je suis en mode avancé,évidemment.
|
Merci beaucoup ;o)
Merci MILLE FOIS pour tout le contenu de ton blog, ton aide m'a été très précieuse [Coeur]. J'arrive enfin à me dépatouiller du mode avancé sur Canalblog.
Encore merci à toi, à Alérion et à Persé sur le forum, vous êtes d'une patience d'ange !!![Super]
[Fleur]Merci encore ...
Mariane S.
|
Salut et bonne année,
Quelques remarques sur ta feuille de style décryptée.
.navlink : définit les zones d'affichage de TOUS les "blocs" (derniers messages, derniers comentaires, liens d'amis, archives ....) qui sont dans les colonnes de droite et de gauche. En conséquence :
- .navlinks .title : concerne TOUS ls titres de ces "blocs" (et pas seulment les "derniers commentaires"
- .navlinks ul (et il) : concernent la liste des éléments de TOUS ces blocs (et pas seulement les commentaires)
.navlinks .item reste effectivement un mystère. Il n'est appelé que par le bloc "albums photos" et semble faire double emploi avec ".navlinks li". Serait-il utilisé pour l'afichage des couvertures des albums-photos? je l'ai supprimé "pour voir" et tout marchait bien !!!!
Pour la colonne des messages "#content" dont les styles sont définis dans le bloc ".blogbody", je trouve que ".blogbody p" fait double emploi avec ".blogbody" qui définit déjà les textes par défaut.