Bon, je vais tenter une petite réponse plus pédagogique que ma précédente intervention dans cet échange...
Alors, commençons par le début... le big-bang donc... (nan, c'est pour rire
)
Basiquement, une page Html est constituée de deux zones aux rôles bien distincts :
- Les en-têtes, tout ce qui se trouve entre les balises "<head>" et "</head>" ;
- Le corps, tout ce qui se trouve entre les balises "<body>" et "</body>".
Déjà, en principe, rien de ce qui figure dans l'en-tête ne sera affiché dans la fenêtre du navigateur, seul le contenu du corps pourra être affiché.
Les en-têtes servent à insérer un tas d'informations et codes qui seront ensuite interprétés par les serveurs et par les navigateurs, et qui conditionneront de manière importante l'affichage du site.
Entre ces différents codes qui peuvent être placés dans l'en-tête d'une page Html, il y a les styles CSS, soit directement insérés dans le code de la page, soit par référence à un fichier externe autonome déjà existant en ligne.
Disons que, pour commencer, c'est peut-être plus simple d'insérer les styles Css directement dans le code de la page, on pourra de toutes façons toujours les mettre à part si nécessaire.
Une fois les styles en place, on doit créer un lien entre le code Html et les styles correspondants, afin que le navigateur puisse appliquer les bons styles aux bons objets, c'est ce principe de base qu'il faut bien intégrer.
Passons à un peu de pratique, ce sera plus clair je pense...
Donc, voici la structure de base la plus minimaliste possible d'une page Html :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Titre de la page</title>
<!-- En-têtes -->
</head>
<body>
<!-- Corps de la page -->
</body>
</html>
Bon, passons sur le "DOCTYPE", on aura sûrement l'occasion d'en revenir.
Entre les balises "<head>" et "</head>" il n'y a qu'un seule information obligatoire à mettre, le titre de la page, le reste des infos et codes seront placés après le titre, là où se trouve le commentaire "<!-- En-têtes -->".
Le corps, en revanche, ne reclame aucune donnée obligatoire, on peu y mettre ce que l'on veut à la place du commentaire "<!-- Corps de la page -->".
Voyons maintenant comment mettre un petit bloc de texte dans le corps et, surtout, comment le formater avec quelques styles.
Nous allons insérer un bloc de type "div" dans le corps et y placer un bout de bolo (faux texte), ce qui donne :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Titre de la page</title>
<!-- En-têtes -->
</head>
<body>
<div>
Non equidem insector delendave carmina Livi esse reor,
memini quae plagosum mihi parvo Orbilium dictare;
sed emendata videri pulchraque et exactis minimum distantia.
</div>
</body>
</html>
Tu peux déjà tester l'affichage de ce bout de code, tu verras que ce n'est pas bien zoli
Maintenant, admétons qu'on souhaite centrer le texte et le mettre en bleu par exemple, nous allons donc créer une feuille de style qui sera placée dans la zone "<head>" de notre page :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Titre de la page</title>
<style type="text/css">
<!--
div { text-align: center; color: blue; }
-->
</style>
</head>
<body>
<div>
Non equidem insector delendave carmina Livi esse reor,
memini quae plagosum mihi parvo Orbilium dictare;
sed emendata videri pulchraque et exactis minimum distantia.
</div>
</body>
</html>
Bon, petite explication :
Pour intégrer des styles dans une page Html, il faut utiliser les balises "<style type="text/css">" et "</style>" (tout ou presque fonctionne avec des balises dans le Html).
Ensuite, pour des raisons historiques et par habitude, on englobe l'ensemble des styles par des balises de commentaires Html "<!--" et "-->".
Enfin, les styles doivent se noter en indiquant a quel est le type d'objet ils s'appliquent, afin que le navigateur puisse faire correctement son job, tous les blocs "div" présents dans la page dans notre cas... il suffit de dupliquer le bloc "div" plusieurs fois pour s'en convaincre...
Maintenant, si on a 2 blocs div et qu'on souhaite les formater de manière différente, nous devons donner cette indication au navigateur, soit en utilisant les "id" soit par les "class" (leur rôle est différent, mais n'entrons pas trop dans les détails).
Alors, admétons qu'on veuille un bloc avec le texte bleu et l'autre avec le texte rouge et y mettant une couleur de fond jaune pale par exemple, voici ce que nous pourrions écrire :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Titre de la page</title>
<style type="text/css">
<!--
div.bleu { text-align: center; color: blue; }
div.rouge { text-align: center; color: red; background-color: #ffff99; }
-->
</style>
</head>
<body>
<div class="bleu">
Non equidem insector delendave carmina Livi esse reor,
memini quae plagosum mihi parvo Orbilium dictare;
sed emendata videri pulchraque et exactis minimum distantia.
</div>
<div class="rouge">
Non equidem insector delendave carmina Livi esse reor,
memini quae plagosum mihi parvo Orbilium dictare;
sed emendata videri pulchraque et exactis minimum distantia.
</div>
</body>
</html>
On ajoute donc, aux différents objets Html, les "div" dans notre cas, un identifiant de type "class" avec un nom, celui qu'on veut, mais suffisamment explicite sur l'aspect ou le rôle de l'objet.
Puis, dans la déclaration des styles, on ajoute ces mêmes noms pour différentier les formatages de chaque bloc "div" selon son identifiant "class"...
Voilà, grosso-modo, très grosso-modo, une première approche de l'utilisation des feuilles de style... à toi d'explorer tout ceci... n'hésites pas à chercher sur internet, il y a des tutoriaux très bien faits et des explications bien plus complètes et documentés qu'on ne peut faire sur un forum d'échanges...
à+
.
)
en haut à gauche de ce sujet.
