- Les feuilles de style CSS
-
Un document bien mis en forme, à l'aide des CSS - Suite
Maintenant que nous avons notre document de base, avec son contenu,
nous allons nous intéresser à sa mise en page.
Je vous invite, dès maintenant, à cliquer sur ce lien [
Démo ]. Il ouvrira une fenêtre pop-up qui vous présentera
l'aspect de ce que nous avons vu lors de l'étape précédente.
Si JavaScript est activé dans votre navigateur et que vous avez bien
voulu ouvrir la pop-up, vous avez pu constater que la présentation était
pour le moins sommaire.
Cependant, ce type de code s'affichera sur tout type de navigateur, que
ce soit un navigateur en mode texte, braille, graphique, tv... et ce,
quelque soit la version du navigateur ou la plate-forme utilisée par
l'internaute.
Étape 2 :À partir de maintenant notre souci est de donner à notre page un
aspect un peu moins sobre.
Commençons par le commencement. ;o))
Où et comment placer nos CSS dans notre document ?
Il y a plusieurs façons d'appliquer un style,
1°) dans une balise :
<tag style="Attribut: Argument;">Blabla bla</tag>
2°) dans un fichier séparé, (par exemple mes_css.css) :
<!-- début du fichier "mes_css.css" -->
Élément{
Attribut: Argument;
}
...
<!-- fin du fichier "mes_css.css" -->
3°) dans la section <head> du document HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Un document bien mis en forme, à l'aide des CSS</title>
<style type="text/css">
<!--
<!-- Ici nous placerons nos styles -->
-->
</style>
</head>
<body>
...
Vous l'avez sûrement compris, c'est cette méthode que nous allons
explorer plus en détail.
Nous allons, par exemple, définir une couleur de fond à notre document
de base :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Un document bien mis en forme, à l'aide des CSS</title>
<style type="text/css">
<!--
body{
background-color: #ffebc9;<!-- On affecte du beige comme couleur
de fond au document. -->
}
-->
</style>
</head>
<body>
...
Ce qui nous donne : [
Démo ]
Bon, je suis d'accord avec vous, ça ne change pas grand chose, mais
c'est un début. LOL
Nous allons maintenant centrer notre titre principal, lui donner une
bordure, une couleur de fond et changer son type de police :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Un document bien mis en forme, à l'aide des CSS</title>
<style type="text/css">
<!--
body{
background-color: #ffebc9;
}
h1{
text-align: center;
<!-- Centre le texte pour la balise H1 -->
border: 1px;
<!-- définit une bordure de 1 pixel -->
border-style: solid;
<!-- affecte le style solide* -->
border-color: #800000;
<!-- affecte la couleur marron à la bordure -->
background-color: #ffcc99;
<!-- affecte un beige plus foncé comme couleur de fond pour la
balise H1 -->
font-family: comic sans ms, arial, ms sans serif;
<!-- détermine les polices à utiliser par ordre de préférence -->
}
-->
</style>
</head>
<body>
...
Ce qui nous donne : [
Démo ]
On avance, mais on est encore assez loin d'avoir un document d'enfer.
;o))
Bien, maintenant que nous en avons fini avec le style de la balise H1,
passons à celui de la balise H2, si vous le voulez bien.
Nous souhaitons que nos titres secondaires (<h2>...</h2>) soient décalés
du bord gauche de la page de 50 pixels, qu'ils aient le même type de
police que notre titre principal et qu'ils soient soulignés.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Un document bien mis en forme, à l'aide des CSS</title>
<style type="text/css">
<!--
body{
background-color: #ffebc9;
}
h1{
text-align: center;
border: 1px;
border-style: solid;
border-color: #800000;
background-color: #ffcc99;
font-family: comic sans ms, arial, ms sans serif;
}
h2{
text-indent: 50px;
<!-- décale le texte de 50 pixels vers la droite -->
font-family: comic sans ms, arial, ms sans serif;
<!-- détermine le type de polices à utiliser par ordre de préférence
-->
text-decoration: underline;
<!-- souligne le texte -->
}
-->
</style>
</head>
<body>
...
Ce qui nous donne : [
Démo ]
Pour finir, nous allons nous occuper des paragraphes de notre document.
Ils devront avoir une largeur de 80 % par rapport à la fenêtre du
navigateur, le texte justifié, une police de type Arial, de préférence,
et que la première ligne d'un paragraphe soit en retrait de 20 pixels
par rapport au reste du texte.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Un document bien mis en forme, à l'aide des CSS</title>
<style type="text/css">
<!--
body{
background-color: #ffebc9;
}
h1{
text-align: center;
border: 1px;
border-style: solid;
border-color: #800000;
background-color: #ffcc99;
font-family: comic sans ms, arial, ms sans serif;
}
h2{
text-indent: 50px;
font-family: comic sans ms, arial, ms sans serif;
text-decoration: underline;
}
P{
width: 80%;
<!-- détermine une largeur de 80 % -->
text-align: justify;
<!-- justifie le texte -->
font-family: arial, comic sans ms, ms sans serif;
<!-- applique le type Arial -->
text-indent: 20px;
<!-- ajoute un retrait de 20 pixels à la première ligne du texte -->
}
-->
</style>
</head>
<body>
...
Ce qui nous donne : [
Démo ]
Voilà, nous sommes arrivés au terme de cette petite introduction aux CSS.
Bon, je vous l'accorde, nous n'avons pas vraiment fait une œuvre d'art
;o))
mais cela vous donne une idée sur les possibilités et l'emploi des CSS
dans un document HTML.
Merci à Rick pour ces explications.
Retour à l'accueil
-
Retour au début
|
