[LES CSS] la base

Statut
N'est pas ouverte pour d'autres réponses.

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):
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>
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 :
Code:
.nom_du_style {
	caractéristique;
}
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.
Code:
.titre {
	font-size: x-large;
	font-family: "Times New Roman", Times, serif;
	text-transform: uppercase;
}
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")
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;
}
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 :
Code:
<link href="style.css" rel="stylesheet" type="text/css">
entre les balises <head> et </head>.
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>
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 :
Code:
<span class="titre">Titre</span>
Ce qui donnes pour toute la page :

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>
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.
 

MbK_

Etudjant
merci bien. j'imprime tout ca et jle lis a mon bureau :D
 

Esta

Boy's dream
thx . j'en prend note :wink:
 

pyrO

arN[pounz]
dsl mais j'ai fait copier coller pour le garde bien précieusement :wink:
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut