djib
Elite
Bon ben, chose promise ...
Le CSS (Cascading Style Sheets) est un fichier contenant des imformation de mise en page. Lors de la création d'une page web on peu ne pas inscrire les styles et les options de mise en page directement dans le code mais les inscrire dans un autre fichier.
Le plus facile est d'expliquer avec un example.
On crées une page oueb (sans mise en page pour l'instant):
Maintenant on va définir les styles. On va en créer 3. Un pour le Titre, un pour les sous-titres et un pour le bodytext. Chaque style aura un "nom". Un style ce définit de cette manière :
On crées le 1er style. Le style pour le titre. On va l'appeller ".titre" et aura pour caractéristiques d'avoir une taille de texte "x-large", d'être en Times et d'être en majuscules.
De la même manière on crées les styles pour les sous-titres (on va l'appeller ".s-titre") et pour le bodytext (on va l'appeller ".body")
On sauvegardes ce fichier en l'appelant par example "style.css".
Maintenat on retournes a la page web. Premièrement il faut indiquer que le style de la page dépends d'un fichier ccs externe, a savoir "style.css". Pour ça on va rajouter :
entre les balises <head> et </head>.
Le code de notre page est donc :
Il ne reste plus qu'a attribuer les styles. Pour ça on va utiliser les balises <span class="nom_du_style">.
Par example pour attirbuer sons style au titre on procède comme suit :
Ce qui donnes pour toute la page :
Voila. C tout. J'espère avoir été clair et n'avoir pas dis trop de conneries.
Il faut être conscient que ce que je viens d'expliquer la ne représentes qu'une infime partie de tout ce que proposent les CSS.
Le CSS (Cascading Style Sheets) est un fichier contenant des imformation de mise en page. Lors de la création d'une page web on peu ne pas inscrire les styles et les options de mise en page directement dans le code mais les inscrire dans un autre fichier.
Le plus facile est d'expliquer avec un example.
On crées une page oueb (sans mise en page pour l'instant):
Code:
<html>
<head>
<title>ma page</title>
</head>
<body>
Titre <br>
Sous-Titre 1 <br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitornec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitaetortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor. <br>
Sous-Titre 2 <br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitor nec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitae tortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor.
</body>
</html>
Code:
.nom_du_style {
caractéristique;
}
Code:
.titre {
font-size: x-large;
font-family: "Times New Roman", Times, serif;
text-transform: uppercase;
}
Code:
.titre {
font-size: x-large;
font-family: "Times New Roman", Times, serif;
text-transform: uppercase;
}
.s-titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: underline;
color: #333333;
}
.body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: smaller;
}
Maintenat on retournes a la page web. Premièrement il faut indiquer que le style de la page dépends d'un fichier ccs externe, a savoir "style.css". Pour ça on va rajouter :
Code:
<link href="style.css" rel="stylesheet" type="text/css">
Le code de notre page est donc :
Code:
<html>
<head>
<title>ma page</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
Titre <br>
Sous-Titre 1 <br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitor nec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitae tortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor. <br>
Sous-Titre 2 <br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitor nec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitae tortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor.
</body>
</html>
Par example pour attirbuer sons style au titre on procède comme suit :
Code:
<span class="titre">Titre</span>
Code:
<html>
<head>
<title>ma page</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<span class="titre">Titre</span><br>
<span class="s-titre">Sous-Titre 1</span> <br>
<span class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitor nec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitae
tortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor. </span><br>
<span class="s-titre">Sous-Titre 2</span> <br>
<span class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem mauris, porttitor nec, tristique ac, vehicula quis, risus. Ut pretium dui non dui. Ut a ipsum vitae
tortor aliquet adipiscing. Donec vel erat. Quisque lacus. Pellentesque nunc enim, rutrum a, tempor faucibus, bibendum at, dolor.
</span>
</body>
</html>
Il faut être conscient que ce que je viens d'expliquer la ne représentes qu'une infime partie de tout ce que proposent les CSS.