http://www.alsacreations.com/static/gabarits/styles/base.

css

/* ============================================== FEUILLE DE STYLES DES GABARITS HTML/CSS Elephorm & Alsacreations.com Conditions d'utilisation: http://creativecommons.org/licenses/by/2.0/fr/ ============================================== */

/* --- STYLES DE BASE POUR LE TEXTE ET LES PRINCIPAUX LMENTS --- */ /* Page */ html { font-size: 100%; /* Voir -> Note 1 la fin de la feuille de styles. */ } body { margin: 0; padding: 10px 20px; /* Note -> 2 */ font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif; /* 3 * font-size: .8em; /* -> 4 */ line-height: 1.25; /* -> 5 */ color: black; background: white; } /* Titres */ h1, h2, h3, h4, h5, h6 { margin: 1em 0 .5em 0; /* -> 6 */ } h1, h2 { font-family: Georgia, "Bitstream Vera Serif", Norasi, serif; font-weight: normal; /* -> 7 */ } h1 { font-size: 3em; /* -> 8 */ font-style: italic; } h2 {font-size: 1.8em;} h3 {font-size: 1.2em;} h4 {font-size: 1em;} /* Listes */ ul, ol { margin: .75em 0 .75em 24px; padding: 0; /* -> 9 */ } ul { list-style: square; } li { margin: 0; padding: 0; } /* Paragraphes */ p { margin: .75em 0; } li p, blockquote p { margin: .5em 0; } /* Citations */ blockquote, q { font-size: 1.1em; font-style: italic; font-family: Georgia, "Bitstream Vera Serif", Norasi, serif; } blockquote { margin: .75em 0 .75em 24px; }

1 sur 3

28/02/2012 18:04

http://www.alsacreations.com/static/gabarits/styles/base.css

cite { font-style: italic; } /* Liens */ a { color: mediumblue; text-decoration: underline; } a:hover, a:focus { color: crimson; } a img { border: none; /* -> 10 */ } /* Divers lments de type en-ligne */ em { font-style: italic; } strong { font-weight: bold; color: dimgray; }

/* --- STYLES POUR CERTAINS CONTENUS DES GABARITS --- */ pre, code { font-size: 100%; font-family: "Bitstream Vera Mono", "Lucida Console", "Courier New", monospace; } pre { width: 90%; overflow: auto; overflow-y: hidden; margin: .75em 0; padding: 12px; background: #eee; color: #555; } pre strong { font-weight: normal; color: black; } #copyright { margin: 20px 0 5px 0; text-align: right; font-size: .8em; color: #848F63; } #copyright a { color: #848F63; text-decoration: none; } #copyright a:hover, #copyright a:focus { text-decoration: underline; }

/* --- NOTES --1. Ce "font-size: 100%" est normalement inutile. On l'utilise uniquement pour viter un bug de redimensionnement du texte dans Internet Explorer. Par dfaut, les navigateurs ont un padding (ou, pour certains, un margin) de 6px pour l'lment BODY. C'est ce qui vite que le texte ne soit compltement coll aux bords de la zone de visualisation du navigateur lorsqu'on affiche une page brute, sans mise en forme. Mais ce retrait de 6px est un peu faiblard: on le renforce donc. Notez bien que les feuilles de styles des gabarits pourront augmenter

2.

2 sur 3

28/02/2012 18:04

http://www.alsacreations.com/static/gabarits/styles/base.css

ce retrait, ou bien l'annuler. 3. Voici quelques exemples de collections cohrentes de fontes (proprit CSS "font-family"): font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-family: Georgia, "Bitstream Vera Serif", Norasi, serif; font-family: "Times New Roman", Times, "Nimbus Roman No9 L", serif; Taille du texte de base de la page. Dpend de la taille du texte par dfaut du navigateur (souvent 16px), et des rglages de l'utilisateur. adapter en fonction de la fonte choisie, et du rendu souhait. En gnral, on utilisera une valeur de base entre .65em et 1em (ou 65% et 100%). Hauteur de ligne. adapter en fonction de la fonte choisie, et des besoins particuliers (lignes de texte longues ou courtes, titre ou corps de texte...). En gnral, les styles par dfaut des navigateurs font que les marges en haut et en bas des titres sont quivalentes. Ici, en diminuant la marge du bas, on cherche rapprocher le titre du contenu qu'il introduit. Les styles par dfaut des navigateurs mettent les titres en gras. Si on souhaite passer des caractres normaux, on doit utiliser font-size: normal. Pour un lment en "font-size: 3em", la taille du texte sera le triple de la taille du texte de l'lment parent. noter: on aurait pu crire "font-size: 300%" pour le mme rsultat. Par dfaut, les listes UL et OL ont un retrait gauche qui peut tre, suivant les navigateurs: - un padding-left de 40px; - ou bien un margin-left de 40px. On met tout le monde d'accord avec une marge gauche de 24px, et pas de padding. Les navigateurs donnent souvent aux images places dans des liens une bordure disgracieuse. On annule ce style souvent gnant en appliquant un "border: none" aux images qui se trouvent l'intrieur d'un lien.

4.

5.

6.

7.

8.

9.

10.

*/

3 sur 3

28/02/2012 18:04