Plus de couleur avec le css!
C'est quoi le css?
Le css est un langage qui permettra de donnez du style à notre page, elle ce trouve dans une page externe que l'on appel "feuille de style". Car si par malédiction au site, vous perdez vos feuilles de style, le site ce viderait de c'est couleur... Enfin bref, vous verrez au moment venu, comment il fonctionne.
Quelles sont les logiciels?
Pour le xhtml, il faut le bloc note, ben pour le css... (suspence)
Le bloc note aussi! Quasiment tant que vous lirez mes tuto, vous devez avoir ce logiciel sous la main.
Mais voila, maintenant que vous commencez à devenir plus fort, peut être qu'il vous faut un logiciel de taille!
NOTEPAD++
http://sourceforge.net/project/showfile ... _id=102072
Attention, ce logiciel n'est pas obligatoire, c'est un simple éditeur de texte qui vous aide dans vos codes. Bref, un petit atout.
J'aime bien notepad++, car il est libre, donc puissant et performant.
Revenons à nos moutons!
Vos feuille style porterons l'extension .css .
Comment lie t-on une feuille de style à nos page xhtml?
Nous allons commencer par ce code:
- Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Le css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
On lie grâce au petit code suivant:
- Code: Tout sélectionner
<link href="theme.css" rel="stylesheet" type="text/css" title="Theme du site" />
Donc, ici, la seul chose qui nous interresse c'est href, que vous devez connaitre, on là etudié dans le chapitre des liens, et un petit nouveau, title, qui lui on marque le titre de nos liens.
Bon, partons d'un index.html:
- Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Le css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="theme.css" rel="stylesheet" type="text/css" title="Theme du site" />
</head>
<body>
<p><img src="http://img10.xooimage.com/files/b/4/0/linux-tux-14fd0d-1dc186.gif" alt="google" /></p>
<h1>Menu principal</h1>
<p>
<a href="index.html" >acceuil</a><br />
<a href="news.html" >news</a><br />
<a href="remerciement.html" >remerciement</a><br />
</p>
</body>
</html>
Donc voici, une petite capture de ce que je voit sur firefox:
http://www.enregistrersous.com/images2/ ... 091241.jpg
Bon maintenant, je créer theme.css, vous regardez, vous essayez de comprendre, et ensuite, je vous explique
- Code: Tout sélectionner
body
{
background-color: black;
}
h1
{
color: red;
}
a
{
color: white;
}
img
{
background-color: white;
}
On enregistre bien dans le même repertoire avec pour nom, theme.css .
Voila le résultat chez moi:
http://www.enregistrersous.com/images2/ ... 092457.jpg
Flagrant non,
Bon maintenant je vous explique comme le css fonctionne:
- Code: Tout sélectionner
nomdelabalisexhtml
{
nom de l'effet: argument;
}
donc, je sait pas si vous avez remarqué, nous avons vue 2 code différent, background-color et color. La première sert à faire apparaitre une couleur de fond de la balise (dans notre cas, body, qui exprime toute la page). Ensuite l'image, car elle est transparente, est que, le ventre en noir, sa ne le faisait pas, donc un fond blanc. Maintenant color permet de changez la couleur du texte. Mais voila, ensuite il faut donner des couleurs comme dans l'exemple
Comment exprimez une couleur en CSS?
La première façon, en donnant les nom anglais:
ainsi white veut dire blanc, black noir ect.
J'avoue que ce n'est pas très précis, même pas précis du tout!
Il existe les couleur xhtml, le seul problème elle s'exprime en hexadécimal
hexaquoi?
L'hexadécimal, nous pauvre humain, on compte comme ceci, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
Notre chere pc, lui, sait comptez différament, dont, le hexadécimal: 1 2 3 4 5 6 7 8 9 a b c d e f 10 12 13 14 15 16 17 18 19 1a 1b 1c 1d ect.
Bon, maintenant que vous connaissez le hexadecimal, je vais vous apprendre les couleur xhtml.
Les couleurs xhtml ce présente comme ceci:
#RRVVBB
Donc, le RR exprime l'intensité du rouge, le VV celui du vert, et le BB celui du bleu.
ainsi:
#000000 affiche du noir
#ffffff affiche du blanc
#ff0000 affiche du rouge
#a22565 affiche une couleur qui n' a pas de nom! (ressemble à du violet) Enfin bref, vous avez beaucoup de couleur à créer!
Voici le même code css,avec les même couleur, mais, avec des couleur xhtml
- Code: Tout sélectionner
body
{
background-color: #000000;
}
h1
{
color: #ff0000;
}
a
{
color: #ffffff;
}
img
{
background-color: #ffffff;
}
Voila c'est tout... dommage hein? la suite va arriver bientôt
