Tutorial CSS

Un journal de Journal Intime.com

Archive du journal au 27/12/2014.

Sommaire

Liens CSS

26 février 2007 à 16h35

Il existe tout un tas de tutoriaux très bien fait, voici une liste de ceux que j'utilise facilement :

Pour une approche relativement simple des balises CSS :
http://www.aidenet.com/css/index.htm

Les specifications officielles de la CSS2 (W3C) pour les expérimentés :
http://www.yoyodesign.org/doc/w3c/css2/cover.html#minitoc

Un autre site avec de nombreuses astuces pour obtenir des pages compatibles IE et FF:
http://edu.ca.edu/rubrique20.html

Présentation de font-familly , font-size, font-color

27 février 2007 à 15h01

Toutes les modifications de la feuille de style css se font dans :
l'espace membre>
espace écriture >
aspect visuel >
personnalisation de l'aspect visuel :
Fichiers modifiables > Feuille de styles.

Il faut, si on veut modifier l'apparence visuelle de notre journal éditer cette feuille, puis la modifier. C'est vrai que cette feuille peut paraître très compliqué, mais on peut pourtant modifier très facilement certaines valeurs.

En partant de l'aspect visuel par défaut, on va opérer quelques transformation afin d'ajuster certains paramètres.

Très facilement on peut modifier : La police : le style, la taille, et la couleur

On peut attribuer une police différente pour chaque élément du journal, il suffit de bien repérer dans la feuille css ces différents éléments.

Le style de la police en css c'est : font-family
la taille de la police c'est : font-size
la couleur de la police c'est : color ( si on ne précise pas la couleur ce sera noir par défaut)

On commence par préciser les paramètres valable pour toute la page dans la partie :
/* Définition des paramètres de la page */
Si on veut par exemple que le style de la police pour toute la page soit en Arial c'est ici qu'il faudra le préciser. Mais si je veux par exemple que seul le titre soit en Times et que le reste soit en Arial, je fixerais Arial pour les paramètres de la page, et je préciserais Times pour le titre.

Voilà ce que l'on trouve sur le fichier par défaut pour les paramètres de la page :

/* Définition des paramètres de la page */

body {

  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  background: url(fond2.png) no-repeat left;

}

Ce qui nous intéresse c’est donc : font-family et font size. Pas d’indication pour color, cela veut dire que par défaut la couleur de la police est noire.
On remarque qu’il y a trois type de styles différents définis pour font-family : Arial, Helvetica, sans-serif;
Pourquoi ?
En fait tout dépend des polices qui sont disponibles sur l’ordinateur qui visualise la page. Si l’ordinateur dispose de la police Arial c’est elle qui sera choisi en premier, sinon il essayera Helvetica puis en dernier sans-serif si les deux premières ne sont pas disponible. Il vaut mieux choisir des polices courantes pour être sur qu’elles soient disponibles. Attention à la ponctuation en css, ne jamais oublier les virgules entre les différentes polices, et le point virgule de fin. Pour les noms de polices composés de plusieurs mots comme Times New Roman, le nom est à mettre entre guillemets.

Exemple : Si je veux comme première police Verdana, en deuxième Times New Roman, et en dernier si les deux autres ne sont pas disponible je voudrais serif, je devrais alors avoir :

font-family: Verdana, "Times New Roman ",serif;

Et voilà j’ai adapter la police de ma page à ce que je désirais.

Passons à la taille de la police : font-size Ici par défaut la taille de la police est de 12px (pixels)
Je trouve que la police de ma page est trop petite, et bien je modifie pour avoir 14px. Pas encore assez grand, et bien je passe à 16px. Trop grand j’essaye alors 10px.

Maintenant je voudrais que la police de tout mon journal soit en grise, je rajoute alors en dessous de font-size : color: gray; (et oui en anglais, la css ne comprend pas le français) ce qui donnera donc :

/* Définition des paramètres de la page */

body {

  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: gray;
  background: url(fond2.png) no-repeat left;

}

Color disponible : Black , Silver, Gray, White, Maroon, Red, Purple, Fuschia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua.

A tester ! Voilà tout ce qu’il faut savoir pour modifier le style, la couleur et la taille de la police. Je reviendrais plus tard sur les différents endroits à modifier pour donner un aspect spécifique au corps de texte, au titre ou au bloc menu.

Remarque : Pour éviter le petit logo orange, supprimer la ligne :

background: url(rond.png) no-repeat left;
qui se trouve un peu plus bas dans h1

La couleur de fond

27 février 2007 à 15h58

La couleur de fond en css c'est background-color.
On peut lui attribuer une des couleurs suivante :
Black , Silver, Gray, White, Maroon, Red, Purple, Fuschia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua (les mêmes que pour color qui permet de donner une couleur à la police)

Ce qui donnera :
background-color : black;
pour obtenir un fond noir.

Si on veut un plus grand choix de couleur on pourra aussi utiliser le système de notation de couleur hexadécimal.

Ce qui donnera :
background-color : #000000 ;
pour obtenir un fond noir.

Le cas le plus classique : Je veux donner une couleur de fond pour toute ma page.

Je rajoute : background-color dans la partie body

/* Définition des paramètres de la page */

body {

  font-family: Verdana, Helvetica, sans-serif;
  font-size: 14px;
  color:  black;
  background-color : silver ;
  background: url(fond2.png) no-repeat left;
  }

(Finalement je préfère un fond gris)
Ou ce qui revient au même :

body {

  font-family: Verdana, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000 ;
  background-color : #c0c0c0;
  background: url(fond2.png) no-repeat left;
  }

Et voilà ma page a un fond gris et la police est en noir.
Remarque: Au passage je supprime la ligne background : url(fond2.png) no-repeat left; qui ne sert plus car le fichier fond2.png n'existe plus.

Palette de couleurs

27 février 2007 à 16h09

Ne pas oublier de rajouter le #



<center>

FFFFFF FFFFCC FFFF99 FFFF66 FFFF33 FFFF00
FFCCFF FFCCCC FFCC99 FFCC66 FFCC33 FFCC00
FF99FF FF99CC FF9999 FF9966 FF9933 FF9900
FF66FF FF66CC FF6699 FF6666 FF6633 FF6600
FF33FF FF33CC FF3399 FF3366 FF3333 FF3300
FF00FF FF00CC FF0099 FFFFFF FF0033 FF0000
CCFFFF CCFFCC CCFF99 CCFF66 CCFF33 CCFF00
CCCCFF CCCCCC CCCC99 CCCC66 CCCC33 CCCC00
CC99FF CC99CC CC9999 CC9966 CC9933 CC9900
CC66FF CC66CC CC6699 CC6666 CC6633 CC6600
CC33FF CC33CC CC3399 CC3366 CC3333 CC3300
CC00FF CC00CC CC0099 CC0066 CC0033 CC0000
99FFFF 99FFCC 99FF99 99FF66 99FF33 99FF00
99CCFF 99CCCC 99CC99 99CC66 99CC33 99CC00
9999FF 9999CC 999999 999966 999933 999900
9966FF 9966CC 996699 996666 996633 996600
9933FF 9933CC 993399 993366 993333 993300
9900FF 9900CC 990099 990066 990033 990000
66FFFF 66FFCC 66FF99 66FF66 66FF33 66FF00
66CCFF 66CCCC 66CC99 66CC66 66CC33 66CC00
6699FF 6699CC 669999 669966 669933 669900
6666FF 6666CC 666699 666666 666633 666600
<font color="#ffffff">6633FF</font> <font color="#ffffff">6633CC</font> <font color="#ffffff">663399</font> <font color="#ffffff">663366</font> <font color="#ffffff">663333</font> <font color="#ffffff">663300</font>
<font color="#ffffff">6600FF</font> <font color="#ffffff">6600CC</font> <font color="#ffffff">660099</font> <font color="#ffffff">660066</font> <font color="#ffffff">660033</font> <font color="#ffffff">660000</font>
33FFFF 33FFCC 33FF99 33FF66 33FF33 33FF00
33CCFF 33CCCC 33CC99 33CC66 33CC33 33CC00
3399FF 3399CC 339999 339966 339933 339900
3366FF 3366CC 336699 336666 336633 336600
<font color="#ffffff">3333FF</font> <font color="#ffffff">3333CC</font> <font color="#ffffff">333399</font> <font color="#ffffff">333366</font> <font color="#ffffff">333333</font> <font color="#ffffff">333300</font>
<font color="#ffffff">3300FF</font> <font color="#ffffff">3300CC</font> <font color="#ffffff">330099</font> <font color="#ffffff">330066</font> <font color="#ffffff">330033</font> <font color="#ffffff">330000</font>
00FFFF 00FFCC 00FF99 00FF66 00FF33 00FF00
00CCFF 00CCCC 00CC99 00CC66 00CC33 00CC00
0099FF 0099CC 009999 009966 009933 009900
0066FF 0066CC 006699 006666 006633 006600
<font color="#ffffff">0033FF</font> <font color="#ffffff">0033CC</font> <font color="#ffffff">003399</font> <font color="#ffffff">003366</font> <font color="#ffffff">003333</font> <font color="#ffffff">003300</font>
<font color="#ffffff">0000FF</font> <font color="#ffffff">0000CC</font> <font color="#ffffff">000099</font> <font color="#ffffff">000066</font> <font color="#ffffff">000033</font> <font color="#ffffff">000000</font>

</center>

Principales balises CSS

28 février 2007 à 16h00

<b>Type</b> <b>Propriété</b> <b>Valeur</b> <b>Description</b>
Police font-family Police précise (Arial, Times, Verdana ...)


Famille (serif, fantasy, monospace)
Définit un nom de police ou une famille
font-style normal, italic, oblic Définit le style d'écriture
font-weight - normal, bold, light, bolder, lighter
- valeur numérique
Définit l'épaisseur de la police
font-size xx-small, x-small, small, medium, large, x-large, xx-large

taille en points (pt), cm, %
Définit la taille de la police
font-variant normale, small-caps Définit une variante
font {font: bold italic} Raccourci permettant de mettre toutes les propriétés
Style text-align left, center, right Définit l'alignement du texte
text-indent en pouces (in), en cm, ou en % Définit un retrait
text-decoration blink, underline, line-through, overline ou none (clignotant, souligné, barré, surligné ou aucune) Définit une décoration
text-transform uppercase, lowercase, capitalize (majuscule, minuscule, première lettre en minuscules) Définit la casse du texte
color "#RRGGBB" Définit la couleur du texte
word-spacing En points (pt), pouces (in), en cm, en pixels (px), ou en % Définit l'espace entre les mots
line-height En points (pt), pouces (in), en cm, en pixels (px), ou en % Définit l'interligne
width En points (pt), pouces (in), en cm, en pixels (px), ou en % Définit la longueur d'un élément de texte ou d'une image
height En points (pt), pouces (in), en cm, en pixels (px), ou en % Définit la hauteur d'un élément de texte ou d'une image
white-space normal, pre, nowrap Espacement ou blanc
Arrière-plans background-color "#RRGGBB" Définit la couleur du fond
background-image URL Définit l'image d'arrière-plan
background-repeat repeat, repeat-x, repeat-y, no-repeat Définit la façon de répéter l'arrière-plan
background-attachment scroll, fixed Spécifie si l'image reste fixe avec les déplacements de l'écran
background-position - top, center, bottom, left, center ou right
- En points (pt), pouces (in), en cm, en pixels (px), ou en %
Position de l'image par rapport au coin supérieur gauche
background {background: test.jpg fixed repeat} Raccourci pour les propriétés d'arrière-plan
Marges margin-top En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge supérieure
margin-right En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge de droite
margin-bottom En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge inférieure
margin-left En points (pt), pouces (in), en cm, en pixels (px), ou en % Valeur de la marge de gauche
margin Raccourci pour les propriétés de marge
Bordures border-top-width En points (pt), pouces (in), en cm, en pixels (px), ou en % Epaisseur du bord supérieur
border-right-width En points (pt), pouces (in), en cm, en pixels (px), ou en % Epaisseur du bord droit
border-bottom-width En points (pt), pouces (in), en cm, en pixels (px), ou en % Epaisseur du bord inférieur
border-left-width En points (pt), pouces (in), en cm, en pixels (px), ou en % Epaisseur du bord de gauche
border-width En points (pt), pouces (in), en cm, en pixels (px), ou en % Raccourci vers les propriétés d'épaisseur de trait
border-color "#RRGGBB" Couleur de la bordure
border En points (pt), pouces (in), en cm, en pixels (px), ou en % Raccourci vers les propriétés de bordure
padding-top En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord supérieur
padding-right En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord droit
padding-bottom En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord inférieur
padding-left En points (pt), pouces (in), en cm, en pixels (px), ou en % Ecartement entre l'élément et le bord gauche
padding Raccourci vers les propriétés d'écartement
Listes list-style-type disc, circle ou square Type de puces et de numérotation
list-style-image URL Permet de remplacer les puces par une image
list-style-position inside ou outside Spécifie si les puces sont à l'intérieur ou à l'extérieur du texte
list-style Raccourci vers les propriétés de liste

Le titre de mon Journal

6 mars 2007 à 11h51

Comment configurer le titre de mon Journal :

Tout ce qui concerne les paramètres du titre ce trouve :

/* On place le titre du journal */

h1 {

  font-size: 1.2em;
  padding: 1.8em;
  margin-left: 1.2em;
  margin-top: 1.5em;
  background: url(rond.png) no-repeat;
  }h1 a { font-size: 2.5em; color: #000; text-decoration: none; }

Etudions la première partie :

h1 {

  font-size: 1.2em;
  padding: 1.8em;
  margin-left: 1.2em;
  margin-top: 1.5em;
  background: url(rond.png) no-repeat;
  }

h1 définit le titre.
Comme nous l'avons vu précédement font-size permet d'ajuster la taille de la police.
Mais comme nous allons définir la taille dans la deuxième partie, afin de simplifier un peu la feuille je supprime cette ligne.

background: url(rond.png) no-repeat; place le petit rond orange dans le titre, en modifiant l'url on peut y mettre une autre image, mais nous verrons ça un peu plus tard. Pour le moment je le supprime.

Maintenant il ne reste plus que:

h1 {

   padding: 1.8em;
   margin-left: 1.2em;
   margin-top: 1.5em;
    }

Nous allons pouvoir placer le titre.
Pour cela on utilise les fonctions margin et padding.
Pour comprendre leur utilisation, rien de mieux qu'une image :

Le titre réagit comme une boite, dont le contenu est le texte, et avec une marge interne : padding ; et une marge externe : margin

padding: 1.8em;
Ce qui appliquera une marge interne sur les 4 cotés.

margin-left: 1.2em;
margin-top: 1.5em;
Qui appliquera ici une marge externe sur la gauche de 1.2em et sur le haut de 1.5em.

Pour placer le titre il ne reste plus qu'a faire varier les valeurs des margin left et top.

Etudions la deuxième partie :

h1 a { font-size: 2.5em; color: #000; text-decoration: none; }
Que l'on pourrait aussi présenter de cette façon :

h1 a{

  font-size: 1.5em;
  color: #000;
  text-decoration: none;
  }

font-size permet d'ajuster la taille de la police.

L'unité utilisé ici est em qui comme px est une unité de taille ou de longueur.
Je trouve que mon titre n'est pas assez gros, je passe alors à 2.0em.
Je trouve que mon titre est trop gros, je passe à 1.0em.

color permet d'ajuster la couleur de la police.
Je veux une police Rouge pourpre pour mon titre, ce qui correspond a la notation : #660000

text-decoration permet de souligner le titre si on le désire.

text-decoration: none; pas de soulignement

text-decoration: underline; texte souligné.

Ce qui me donnera pour la deuxième partie:

h1 a{

  font-size: 2.0em;
  color: #660000;
  text-decoration: none;
  }

Je veux donner une police particulière à mon titre : Aucun probleme !

Je rajoute dans la deuxieme partie la police que je désire (Comic Sans MS) , ce qui donne :

h1 a {

     font-size: 2.0em;
     color: #660000;
     text-decoration: none;
     font-family: "Comic Sans MS", Helvetica, sans-serif;
     }

Ce qui donnera avec la première partie :

/* On place le titre du journal */

h1 {
   padding: 1.0em;
   margin-left: 1.2em;
   margin-top: 1.2em;
    } h1 a { 
     font-size: 2.0em;
     color: #660000;
     text-decoration: none;
     font-family: "Comic Sans MS", Helvetica, sans-serif;
     }

Et voilà mon titre configuré!

La couleur de mes liens

15 mars 2007 à 10h56

La couleur des liens est configurée par défaut en bleu et en violet.
En bleu quand ils n'ont pas encore été visités.
En violet quand ils ont déjà été visités.

Voyons comment faire pour leur donner une autre couleur:

Pour cela la CSS nous offre la fonction a.
(Comme dans h1 a qui définit la couleur du titre du journal qui est un lien vers la page d'acceuil du journal)
Je dis fonction mais en fait comme margin ou padding il s'agit d'une balise css.

Un exemple pour mieux comprendre:

a {
  color: red;
  text-decoration: none;
  }

color : red; permet de donner une couleur rouge à mes liens.
text-decoration: none; les liens ne sont pas soulignés.

Placé dans la partie : /* Définition des paramètres de la page */
On fixe tout les liens de la page en rouge et non souligné.

Un autre exemple:

a {
 color: #000000;
 text-decoration: none;
 }

Qui me donnera des liens noirs non soulignés.

Ce qui donnerait a peu près çà:

/* Définition des paramètres de la page */

body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: gray;
        }
a { 
  color: #000000; 
  text-decoration: none;
  }

Et voilà tout mes liens deviennent noirs non soulignés.
Sauf les liens qui sont défini dans le reste de la feuille CSS.
Nous avons vu ensemble h1 a qui défini les paramètres du titre.

Parcourons la feuille, et dans l'ordre nous allons trouver:

Mais ce n'est pas tout! la CSS offre de multiples possibilités.
Voyons comment fixer une couleur à mes liens quand mon curseur passe dessus:

a : hover {
 color: red;
 text-decoration: none;
 }

Qui donnera des liens rouges non souligné quand mon curseur passe dessus.

Mes bordures

20 mars 2007 à 9h42

Dans mon visuel je les trouve :

Autour du Bloc Menu (Forum, S'abonner et les Archives)
Autour de l'introduction du Journal
Sous le titre des écrits
Dans le visuel par défaut les bordures sont pointillées et de couleur orangé (#EF991E)

Voyons la balise qui défini les bordures en CSS :
border
Pour spécifier que mes bordures sont :

Pointillées : dashed

Couleur : ici #EF991E pour orangé.

L'épaisseur de ma bordure en px ou em.

Emplacement de la bordure il s'agit en rajoutant top, left, right, et bottom.
Ce qui me donnera quelquechose ressemblant à :

border-right: 0.2em dashed #EF991E;

Bordure de droite pointillée orangée et de 0.2em d'épaisseur.

Etudions un peu notre feuille CSS et particulièrement la partie concernant le Bloc Menu:

#blocmenu {
  background: url(fond07.png) no-repeat bottom right;
  width: 10em; float: left;
  border-right: 0.2em dashed #EF991E;
  border-top: 0.2em dashed #EF991E;
  border-bottom: 0.2em dashed #EF991E;
  padding-right: 1em; margin-right: 1em;
  padding-left: 1.5em; padding-bottom: 5em;
  padding-top: 1em;
  margin-top: 2em;}

Nous retrouvons nos trois bordures, haut, bas et droite.
La premiere ligne background concerne un éventuel fond que l'on pourrait lui rajouter, mais j'y reviendrais une autre fois.
Les margin qui permettent de placer le bloc, et les padding qui permettent de placer le texte à l'intérieur du bloc.
Et nous découvrons la balise width qui permet de fixer la largeur du bloc.

Je peux donc facilement changer l'épaisseur et la couleur de la bordure.
Je veux par exemple la bordure de droite gris clair et de 2pixels (px) d'épaisseur:

border-right: 2px dashed silver;

Nous avons vu dashed pour une bordure pointillée, mais nous pouvons aussi utiliser:

dotted: pointillée fin
dashed: pointillée grossier
solid : pleine
double : double
groove; ridge; inset; outset : les bordures 3D qui passent très bien sous Fire Fox, mais qui ne passe sous Internet Explorer que pour des épaisseurs de bordure supérieur à 5px (à vérifier).

Je veux ma bordure de droite pleine, grise, et de 2px d'épaisseur:

border-right: 2px solid silver;

Je peux maintenant modifier la couleur, le style et l'épaisseur des bordures du bloc menu.
Voyons les autres bordures que l'on trouve dans notre feuille CSS.

Les bordures autour de l'Intro du Journal :
texte_journal

#texte_journal {
  border: 2px dashed #EF991E;
  margin-bottom: 2em;
  padding: 0.5em;
  font-family: Georgia, "Times New Roman", Times, serif;
  background: url(fond00.gif) no-repeat bottom right;
  min-height: 5em;
  margin-top: 0.8em;}

On peut configurer notre bordure:

border: 2px dashed #EF991E;Que je transforme pour obtenir une bordure pleine, gris claire et de 2px d'épaisseur:

border: 2px solid silver;

Je remarque que je peux donner aussi une police particuliere, et meme mettre une image de fond à mon Intro.

La bordure sous le Titre des Ecrits: h2

h2 { border-bottom: 0.1em dashed #EF991E; margin-bottom: 1em; }

Une seule bordure, vers le bas (bottom) de 0.1em d'épaisseur, pointillée, de couleur orange, et avec un espace de 1em entre la bordure et le titre h2. Je voudrais une bordure pleine, grise claire, de 2px d'épaisseur :

h2 { border-bottom: 2px solid silver; margin-bottom: 1em; }

Et Voilà!

Si j'avais oublié ou mal expliqué quelque chose, merci d'avance de me le signaler dans le forum.