|
LE LANGAGE CSS
Cours css pour colorer vos textes et decorer la page web, etudie la coloration le font-size le style les images et couleur de fond.
Dans la partie précédente nous avons appris comment créer une page Web
C’est vrais qu'elle est toujours moche sans couleur ni format, nous ne pouvons pas centrer
les images ou les mettre où l’on veut etc. …
C’est ce que nous allons faire avec le CSS, qui n'est pas plus compliqué que la XHTML, il est différent car il sert à réaliser la présentation de votre page Web.
Dans le CSS il y a plus de balises, vous n’avez pas à tous les retenir un aide mémoire seras disponibles pour vous à la fin du cours.
|
Dans ce cours nous allons voir:
Chapitre 1: Où mettre du CSS ?
Chapitre 2: Appliquer un style à des balises
Chapitre 3: Utiliser les class et id
Chapitre 4: Taille du texte
Chapitre 5: Polices
Chapitre 6: Alignement
Chapitre 7: Effet de style
Chapitre 8: Les couleurs
Chapitre 9: Le fond
|
Chapitre 1: Où mettre du CSS ?
Dans ce premier chapitre, nous allons voir la théorie sur le CSS : que vous devez connaître car ça constitue la base du CSS. C'est d'ailleurs la seule chose que je vous demanderai de retenir par cœur en CSS, le reste pourra être retrouvé dans l’aide mémoire.
Le code CSS est écrit dans un fichier à part (à l'extension .css au lieu de .html).
C'est dans ce fichier qu’on écrit l'apparence que notre site doit avoir : la couleur et la police du texte, la taille des titres, la position des menus, la couleur ou l'image de fond etc..., le CSS permet de faire une foule de choses
On peut écrire le code CSS à 3 endroits différents, selon ce qu'on veut
1. dans l'en-tête du fichier XHTML
Il est possible de taper du CSS directement à l'intérieur même du fichier XHTML, entre les balises <head> </head>.
Vous devrez y ajouter une balise <style> </style> à l'intérieur, comme ceci :
Code XHTML
<!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>Exemple le CSS dans le head</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Vous taperez votre code CSS ici */
</style>
</head>
<body>
<p>Cette page comporte du CSS directement dans le header.</p>
</body>
</html>
2. dans les balises (la moins recommandée)
On ajoute un attribut style sur les balises pour leur appliquer un style particulier. N’importe quelle balise.
Par exemple sur un titre :
Code XHTML
<h1 style="/* Votre style pour cette balise ici */">Titre</h1>
Avec cette méthode non seulement le CSS sera peu lisible à l'intérieur des balises, mais en plus ça ne nous permet pas de profiter de tous les avantages du CSS, comme la possibilité de changer la couleur de tous les titres du site en un coup. Je vous parle de cette méthode seulement pour en prendre connaissance.
3. Dans un fichier CSS (la plus recommandé)
Retournez dans notre fichier XHTML.
Il faut y ajouter une ligne entre les balises <head> et </head>
qui va permettre de "dire" au fichier XHTML quel fichier CSS il doit charger :
Ouvrez notepad++ et tapez le code suivant:
Code XHTML
<!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> Utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="fichier" href="fichier.css" />
</head>
<body>
<p>Cette page comporte une feuille de style externe. C'est la meilleure méthode à utiliser quand on fait du CSS.</p>
</body>
</html>
La balise <link /> comporte plusieurs attributs. Vous pouvez en modifier deux d'entre eux pour le moment :
• title : c'est le nom de votre feuille de style (mettez ce que vous voulez)
• href : c'est l'emplacement de votre feuille de style sous forme de lien relatif. Dans cet exemple le CSS se trouve dans le même dossier que notre page html.
Jusqu'ici nous travaillons sur un seul fichier, le .html. A partir de ce moment nous allons travailler sur 2 fichiers : un .css et notre bon .html.
Dans cette méthode le fichier css peut servir pour toutes les pages html de votre site ce qui allègera la taille des fichiers et rendra donc votre site plus rapide.
Haut de page
|
Chapitre 2:Appliquer un style à des balises
Dans un CSS, on trouve 3 éléments différents :
• Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, pour modifier l'apparence de tous les titres <h1>, je dois écrire h1
Des propriétés CSS : les "effets de style" de la page sont rangés dans des propriétés:
Il y a par exemple:
la propriété color qui permet d'indiquer la couleur du texte
la propriété font-size qui permet d'indiquer la taille du texte etc .
..
Il y a beaucoup de propriétés CSS et, comme je vous l'ai dit au début, je ne vous oblige pas à les connaître toutes par cœur.
• Les accolades. On écrit le nom de la balise (par exemple h1), et on ouvre des accolades pour mettre les propriétés et valeurs que l'on veut à l'intérieur.
balise1(exemple : h1)
{
propriete: valeur ;
propriete: valeur ;
propriete: valeur ;
}
Chaque propriété est suivie du symbole "deux-points" (:) puis de sa valeur correspondante. Enfin, chaque ligne se termine par un "point-virgule" (;) . Le point-virgule n'est pas obligatoire s'il n'y a qu'une seule propriété,mai ne les oubliez pas s’il y a plus qu’une propriété.
Si par exemple nous voulons modifier tous les paragraphes pour qu'ils soient écrits en bleu, avec une taille de 18 pixels.
Comme tous les textes de mes paragraphes sont entre des balises <p> </p>, je vais donc écrire le code CSS
suivant :
Code CSS :
p
{
color: blue;
font-size: 18px;
}
Ouvrez le notepad++, faites Nouveau fichier puis dans le menu langage choisissez CSS .
Taper le code ci-dessus.
Enregistrez ce code CSS dans un fichier "essai.css" par exemple, dans le même dossier que notre fichier essai.html .
Vous obtiendrez ça
Il faudrait maintenant déclarer notre feuille de style CSS. On ajoute donc la balise <link /> pour indiquer où se trouve notre fichier CSS.
Pour ouvrir le code du fichier essai html click droit puis edit with notepad++
Code : HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> Mon site !</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css"
title="Essai" href="essai.css" />
</head>
<body>
On n'ouvre jamais directement un fichier .css
Modifiez le fichier CSS, en mettant une autre couleur ("red" pour rouge par exemple, et "20px" pour
avoir un texte écrit plus gros).
ajoutez le code CSS suivant à votre feuille de style essai.css :
Code : CSS
h1
{
color: red;
}
h2
{
color: green;
}
Cela signifie : "Je veux que le texte de mes titres <h1> soient écrits en rouge" Et <h2> en vert
Votre page Web commence à prendre de la couleur ?
Les commentaires dans le CSS
Comme en XHTML, on peut mettre des commentaires. Qui nous indique des informations, pour nous y retrouver dans un long fichier CSS.
Pour faire un commentaire: vous tapez pour commencer le commentaire /*, suivi de votre commentaire, puis */ pour terminer votre commentaire.
Vos commentaires peuvent être sur une ou plusieurs lignes. Par exemple :
Code : CSS
/*essai. css---------Par Mr xxxxxx Fichier créé le 1/11/2008*/
p
{
color: blue; /* Les paragraphes seront bleus */
font-size: 18px; /* La taille de 18 pixels me exact !!! */
}
Haut de page
|
Chapitre 3: Utiliser les class et id
Ce que je nous venons de voir a un défaut : par ce que TOUS les paragraphes vont être écrits par exemple en bleu / 18 pixels.
Mai nous voulons que certains paragraphes (ou certains titres, ou certaines citations) soient écrits d'une manière différente ?
Pour faire cela on utilise des attributs spéciaux qui fonctionnent sur toutes les balises :
• L'attribut class
• L'attribut id
utilisation des class et id
les attributs class et id sont presque identiques. Une petite différence que vous trouverez par la suite.
Pour le moment, intéressons nous seulement à l'attribut class.
L'attribut class
C’est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image etc...
<h1 class="nom-de-la-class"> </h1>
<p class="nom-de-la-class "></p>
<img class="nom-de-la-class" />
Les class permettent de définir un style personnalisé.
Si on veut définir un style qui écrive le texte en rouge / 24 pixels. Nous l’appellerons par exemple " rouge24" et l'attribut class=" rouge24" doit être ajouté à chacune des balises que vous voulez dans ce style.
Le code ci après et le code du fichier essai.html que nous avons créé et modifier tout au long de notre cours.
Je vais y ajouter les modifications de class suivante:
A un paragraphe je vais demander qu’il soit écrit en rouge 24 pixels, j’ajoute donc ma classe rouge24 dans la balise <p> que je désire comme suit:
<p class="rouge24">
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> Mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
</head>
<body>
<h1>Toto à l'église </h1>
<p> Toto est à l'église et il se balance sur sa chaise, sa maman lui dit alors :
- Arrête le petit Jésus va te voir !
Toto:
- Mais ou est-il ?
- Il est au ciel !
- T'inquiète pas maman, <em> il ne me verra pas grâce au plafond </em> !!. <br/>
</p>
<p class="rouge24">
François René, vicomte de Chateaubriand a dit : <q>L'amitié ? Elle disparaît <br/>
quand celui qui est aimé tombe dans le malheur, ou quand celui qui aime devient puissant. </q>
</p>
<p>Voici une citation de Graham Greene :</p>
<blockquote>
<p>
L'amour est fait du désir de comprendre et bientôt, <br/>
à force d'échecs répétés, <br/>
ce désir meurt, <br/>
et l'amour meurt aussi, <br/>
à moins qu'il ne devienne cette , <br/>
affection pénible, cette fidélité, cette pitié..
</p>
</blockquote>
<p>Le <acronym title="eXtensible HyperText Markup Language">XHTML</acronym>
est le langage qui permet de créer un site Web. </p>
<h1>source.html</h1>
<p>Nous somme ici sur essai.html <br />
Nous Souhaitons visiter essai2.html <a href="essai2.html">le fichier essai2.html</a> ?</p>
<p> Je connais un site super : le
<a href=" http://carabde.carrefourinternet.com">Site carrefourinternet</a><br />
N'hésitez pas à aller le visiter, il vaut <em>vraiment</em> le coup d'œil </p>
<p> visitez cette page
<a href=" http://www.opportunite-argent.com/index.php?ref=carabde">Page site carrefourinternet</a><br />
N'hésitez pas ça vaut <em>vraiment</em> le coup </p>
<h2>Me contacter</h2>
<p>Pour me contacter, <a href="mailto:carabde@hotmail.com">cliquez ici</a> !</p>
</body>
</html>
Ne vous préoccupez pas du texte écrit dans les paragraphes du code précédent c’est juste pour remplir mai regardez surtout les balises et attributs c’est ce qui nous intéresse.
À partir de là pour dire dans le CSS : "Je veux que toutes mes balises qui ont la class=" rouge24" soient écrits en rouge / 24 pixels" ?
C'est simple : au lieu de mettre le nom de la balise avant les accolades (comme p ou encore h1), je doit écrire un point suivi du nom de la class, comme par exemple :
. rouge24
Ce qui nous donnerait le CSS suivant :
Code : CSS
.rouge24
{
color: red;
font-size: 24px;
}
Ajoutez ce code au fichier essai.css enregistrez et Testez la page XHTML, et voyez comment la class "rouge24" que nous avons créée modifie le texte.
L’attribut id
Lui, il fonctionne exactement de la même manière que class, mai il ne peut être utilisé qu'une fois et c’est là la différence avec l’attribut class.
Cela vous sera utile si vous faites du Java script plus tard pour reconnaître certaines balises. D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens (pour les ancres).
En pratique, nous ne mettrons des "id" que sur des éléments qui sont uniques sur votre page.
" id="nom-de-l’id"
Dans le CSS, ce n'est pas un point que vous mettez avant le nom de l'id, mais un dièse (#) :
Code CSS
# nom-de-l’id
{
/* Mettez les propriétés CSS ici comme pour class*/
}
Les balises universelles
Parfois vous avez besoin d'appliquer une class (ou un id mais c'est rare) à certains mots qui ne sont pas entourés par des balises.
Le problème des class c'est qu'il s'agit d'un attribut, vous ne pouvez en mettre que dans une balise.
Par exemple, si je ne veux modifier que " François René " dans le paragraphe suivant :
Code : HTML
<p class="rouge24">
François René, vicomte de Chateaubriand a dit : <q>L'amitié ? Elle disparaît <br/>
quand celui qui est aimé tombe dans le malheur, ou quand celui qui aime devient puissant. </q>
</p>
C’est facile à faire s'il y avait une balise autour de " François René ", mai il n'y en a pas. Alors on a inventé 2 balises qui ne servent à rien, avec une petite différence entre les deux :
• <span> </span> : c'est une balise de type inline. Cette balise s'utilise donc au milieu d'un paragraphe, et c'est celle dont nous allons nous servir pour colorer François René
• <div> </div> : c'est une balise de type block. Comme <p>, <h1> etc...
Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne. C'est une balise très utilisée pour faire un design. Nous lui dédierons d'ailleurs une partie entière dans notre cours pour apprendre à construire le design de votre site Web.
Code : HTML
<p class="rouge24">
<span class="nom">
François René</span>, vicomte de Chateaubriand a dit : <q>L'amitié ? Elle disparaît <br/>
quand celui qui est aimé tombe dans le malheur, ou quand celui qui aime devient puissant. </q>
</p>
Code : CSS
.nom
{
color: green;
}
Imbrications de balises
Dans le fichier CSS. Nous souhaiterions définir un style uniquement pour les balises qui se trouvent à l’intérieur d’une autre.par exemple les balises <em> qui se trouvent à l'intérieur d'un titre <h3>.On écrit ceci :
Code : CSS
h3 em
{
font-size: 24px;
color: brown;
}
Comme vous le voyez, on a juste séparé les 2 noms de balises par un espace.
Cela signifie "Je veux modifier le style de toutes les balises <em> situées à l'intérieur de titres <h3>". On a indiqué dans le CSS dans quel ordre
devaient être imbriquées les balises.
Attention !
L'ordre est très important ! Si vous aviez mis "em h3" cela aurait voulu dire "Tous les <h3> situés à l'intérieur de balises <em>"
Vous pouvez aussi imbriquer des balises et des class :
p rouge24
Ce qui signifie : "Toutes les class "rouge24" contenues dans des balises <p>"
Haut de page
|
Chapitre 4:taille du texte
Vous connaissez la propriété CSS qui permet de changer la taille du texte est font-size. Elle ne change pas. Mais on peut indiquer la taille du texte de quatre manières :
• En pixels : C'est une façon précise d'indiquer la taille du texte.
Pour avoir un texte de 16 pixels de hauteur, vous devez écrire :
font-size:16px;
• En donnant une valeur relative : En écrivant "gros", "très gros", "petit", "minuscule". Mais bien sur en anglais .
Voici la liste des différentes valeurs :
• xx-small : minuscule
• x-small : très petit
• small : petit
• medium : moyen
• large : grand
• x-large : très grand
• xx-large : euh... gigantesque
Exemple:
Code : CSS
.minuscule
{
font-size: xx-small;
}
.trespetit
{
font-size: x-small;
}
.petit
{
font-size: small;
}
.moyen
{
font-size: medium;
}
.grand
{
font-size: large;
}
.tresgrand
{
font-size: x-large;
}
.supermegagigatresgrand
{
font-size: xx-large;
}
Avidement, vous devez déclarer les class (minuscule, trespetit,petit,moyen etc...) dans le code html dans les balises concernées
celons ce que vous souhaitez faire.
Exemple code XHTML:
<body>
<p class="minuscule">Texte en xx-small</p>
<p class="trespetit">Texte en x-small</p>
<p class="petit">Texte en small</p>
<p class="moyen">Texte en medium</p>
<p class="grand">Texte en large</p>
<p class="tresgrand">Texte en x-large</p>
<p class="supermegagigatresgrand">Texte en xx-large</p>
</body></html
Utilisez surtout cette méthode pour indiquer la taille du texte plutôt que d'utiliser des pixels. Votre site sera bien adaptable aux différentes configurations de vos visiteurs.
• En em : c'est une façon d'indiquer de manière relative la taille du texte. C'est une méthode pratique.
On doit indiquer la taille du texte par rapport à la taille normale de la police. C'est à dire:
"1em" signifie "Taille normale".
Si vous mettez un nombre supérieur (généralement un nombre décimal) comme "1.3em", le texte aura une taille 1,3 fois plus grande.
Pour réduire : "0.8em" et votre texte aura une taille 0,8 fois plus petite.
C'est la méthode la plus recommandé.
Exemple: Code CSS
.petit-em
{
font-size: 0.7em;
}
.grand-em
{
font-size: 1.3em;
}
Et bien sûre on doit déclarer les class petit-em et grand-em dans les balises concernées du code xhtml.
• En pourcentage : Si vous indiquez "100%", le texte aura une taille "normale".
Si vous mettez "130%", le texte aura une taille correspondant à 130% de la taille normale. C'est comme "em".
Les méthode des "em" et des % sont les plus pratiques : elles s'adaptent automatiquement aux préférences du visiteur et sont facile à utiliser.
Haut de page
|
Chapitre 5:Polices
Le problème c'est que, pour qu'une police s'affiche correctement, il faut que le visiteur l'a. S'il ne l'a pas , son navigateur prendra une police par défaut (une police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous désirez.
La propriété CSS qui indiquer la police est font-family.
font-family:police;
Pour éviter tout problème si l'internaute n'a pas la même police que vous, on met plusieurs noms de police, séparés par des virgules :
font-family:police1, police2, police3, police4;
Le navigateur essaiera d'abord de mettre la police1. S'il ne l'a pas, il mettra la police2. Puis la police3 et ainsi de suite.
En général, on met en tout dernier une police standard (qui ne se met que si aucune autre police n'a été trouvée) c'est "serif".
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs et que vous pouvez donc utiliser sans crainte :
• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana
Exemple:
Code : CSS
h1
{
font-family: "Arial Black", Arial, Verdana, serif;
}
p
{
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}
Haut de page
|
Chapitre 6 :Alignement
Alignements simples
Avec le langage CSS nous pouvons faire tous les alignements que l'on connaît : à gauche, centré, à droite et justifié.
On utilise la propriété text-align, et on indique l'alignement désiré :
• left : le texte sera aligné à gauche (par défaut).
• center : le texte sera centré.
• right : le texte sera aligné à droite.
• justify : le texte sera "justifié". Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont tout le temps justifiés.
Regardez les différents alignements sur cet exemple :
Code : CSS
h1
{
text-align: center;
font-family: Arial, Verdana, serif;
}
blockquote
{
text-align: justify;
.signature
{
text-align: right;
font-family: "Comic Sans MS", Georgia, "Times New Roman", serif;
font-size: 80%;
}
Code HTML
<h1>La citation [du jour]</h1>
<p>Un jour, un grand sage a dit :</p>
<blockquote><p>Colère et intolérance sont les ennemis d'une bonne compréhension
</p>
<p class="signature">Signé : Gandhi</p></blockquote>
L'alignement ne fonctionne que sur des balises de type block (p, div, blockquote, h1, h2, ...) et non sur des balises inline(comme span, a, em, strong...)
L'indentation
L'indentation est la mise en retrait du texte. Elle permet de faire commencer un paragraphe un peu plus à droite. C'est un procédé que l'on retrouve dans la plupart des livres d'ailleurs.
On utilise la propriété text-indent. On indique quelle est la taille du retrait : soit en pixels, en centimètres, ou en millimètres.
Exemple:
Il dit que mes paragraphes soient mis en retrait de 30px
Code CSS:
p
{
text-indent: 30px;
text-align: justify;
font-size: large;
}
Haut de page
|
Chapitre 7: Effet de style
Mettre en italique
Pour mettre en italique en CSS on utilise font-style, qui peut prendre 3 valeurs :
• italic : le texte sera mis en italique.
• oblique : le texte sera mis en italique, "italic" et "oblique" reviennent au même. Choisissez donc l'un des deux
• normal : le texte sera normal (par défaut). Si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire :
Code CSS :
em
{
font-style: normal;
}
Sur l'exemple suivant, je me sers par exemple de font-style pour mettre en italique tous mes titres <h2> :
Code : CSS
h1
{
text-align: center;
font-family: Arial, "Times New Roman", Verdana, serif;
}
h2
{
font-style: italic; /* Les titres h2 seront en italique ! */
text-indent: 30px; /* On décale un peu les sous-titres */
font-family: Arial, "Times New Roman", "Arial Black", Verdana, serif;
}
Mettre en gras
En CSS pour mettre en gras on utilise la propriété: font-weight,
elle prend les valeurs suivantes :
• bold : le texte sera en gras.
• normal : le texte sera écrit normalement (par défaut).
Exemple:Code CSS :
p
{
font-weight: bold;
}
Les majuscules en CSS
Le CSS permet d'appliquer des effets très intéressants sur du texte,
pour modifiant automatiquement les majuscules.
Il y a 2 propriétés qui travaillent sur les majuscules.
1. la propriété font-variant, elle prend 2 valeurs différentes :
• small-caps : le texte sera écrit en petites capitales.
• normal : le texte sera écrit normalement (par défaut).
Code CSS :
p
{
font-variant: small-caps;
}
2. La propriété text-transform. Elle peut prendre 4 valeurs :
• uppercase : tout le texte sera écrit en majuscules.
• lowercase : tout le texte sera en minuscules.
• capitalize : la première lettre de chaque mot sera en majuscule.
• none : pas de transformation (par défaut).
Je me sers des class .
Code : HTML
<h1>Racisme</h1>
<p>...Ton christ est juif, ta pizza est italienne, <br/>
ton café est brésilien, ta voiture est japonaise, <br />
<span class="crier">ton écriture est latine,<br/>
tes vacances sont turques, tes chiffres sont arabes et...<br />
</span></p>
<p class="ne_dites_rien">
TU REPROCHE A TON VOISIN D'ÊTRE ÉTRANGER<br/>
CE PARAGRAPHE EST ÉCRIT EN MAJUSCULES
</p>
Code CSS :
h1
{
text-align: center;
font-family: Arial, "Times New Roman", Verdana, serif;
text-transform: capitalize;
}
.crier
{
text-transform: uppercase;
}
.ne_dites_rien
{
text-transform: lowercase;
font-style: italic;
}
Cette propriété text-transform est pratique pour changer l'apparence de tout le texte!
Décoration
Cette propriété CSS : text-decoration porte bien son nom
Elle permet, entre autres, de souligner le texte. Voici les valeurs qu'elle peut prendre :
• underline : souligné.
• line-through : barré.
• overline : ligne au-dessus.
• blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les autres navigateurs.
• none : normal (par défaut).
Ce CSS va vous permettre de tester les effets de text-decoration :
Code : CSS
h1
{
text-align: center;
font-family: "Arial Black", Arial, "Times New Roman", serif;
text-decoration: blink; /* Le titre sera clignotant ! (ne fonctionne pas sous Internet Explorer) */
}
.souligne
{
text-decoration: underline;
}
.barre
{
text-decoration: line-through;
}
.ligne_dessus
{
text-decoration: overline;
}
Le XHTML qui va avec :
Code : HTML
<h1>A ne pas manquer !</h1>
<p>La propriété CSS <em>text-decoration</em> permet de décorer son texte
<br />
<span class="souligne">et le souligne</span>...<br />
<span class="barre">et le barre</span>...<br />
et même <span class="ligne_dessus"> mettre une ligne au-dessus</span>
</p>
On peut créer des class combinant des styles, comme par exemple qui souligne le texte, le met en gras, et l'écrit en plus gros
Haut de page
|
Chapitre 8: Les couleurs
On a plusieurs possibilités pour indiquer une couleur en css
Première chose à savoir : la propriété qui permet de changer la couleur du texte est color , nous l'avons vu.
Indiquer le nom de la couleur
Le nom des couleurs est en anglais.
Le défaut de cette méthode est qu'il n'existe que 16 couleurs dites "standard".
D'autres couleurs officieuses existent, mais elles ne fonctionneront pas pareil sur tous les navigateurs, nous les éviterons.
Voici les 16 couleurs que vous pouvez utiliser en tapant simplement leur nom :
Code : CSS
h1
{
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", serif;
text-decoration: underline;
color: green;
}
p
{
text-indent: 20px;
color: blue;
}
strong
{
color: red;
text-decoration: blink;
}
Code : HTML
<h1>[Françoise Dolto]</h1>
<p>Tout groupe humain prend sa richesse dans la communication, l'entraide et </p>
<p>
<strong>
la solidarité visant à un but commun :
l'épanouissement <em>de chacun </em> dans le
</strong>
<strong>respect </strong> des différences.</p>
La notation hexadécimale
16 couleurs, c'est peu quand on sait que les écrans peuvent en afficher 16 millions.
Mai, s'il fallait donner un nom à chacune des 16 millions de couleurs avec leur nom imaginez ça !!!...
Heureusement, il existe plusieurs manières en CSS pour choisir une couleur parmi celles existante.
La première est la notation hexadécimale.
Elle est souvent utilisée .
Un nom de couleur en hexadécimal, ça ressemble à ça : #FF5A28. C'est une combinaison de lettres et de chiffres qui indiquent une couleur.
Elle commence par un dièse (#), suivi de 6 lettres ou chiffres allant de 0 à 9 et de A à F.
Ces lettres ou chiffres fonctionnent deux par deux.Les 2 premiers indiquent une quantité de rouge, les 2 suivants une quantité de vert, et les 2 derniers une
quantité de bleu. En mélangeant ces quantités (qui sont les composantes Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur voulue.
Ainsi, #000000 correspond à la couleur noire et #FFFFFF à la couleur blanche. Mais maintenant.
Voici par exemple comment on fait pour appliquer la couleur blanche en hexadécimal :
color:#FFFFFF;
La méthode RGB
En anglais Red-Green-Blue, ce qui s'abrège en "RGB". Comme pour la notation hexadécimale, on doit définir une quantité de rouge, de vert et de bleu pour choisir une couleur.
Mais là c'est beaucoup plus pratique .Voici la marche à suivre :
1. Lancez le logiciel Paint depuis le menu Démarrer.
2. Rendez-vous dans le menu Couleurs / Modifier les couleurs :
3. Une fenêtre s'ouvre. Cliquez sur le bouton "Définir les couleurs personnalisées" en bas. Dans la zone qui apparaît à droite, faites bouger les curseurs pour sélectionner la couleur qui vous intéresse.
4. Je sélectionne la couleur dans la fenêtre, comme ceci :
5. On relève les quantités de Rouge-Vert-Bleu correspondantes indiquées en bas à droite de la fenêtre (ici 71-201-165). Je recopie ces valeurs dans cet ordre dans le fichier CSS, comme ceci :
Code : CSS
h1
{
text-align: center;
color: rgb(71,201,165);
}
Pour utiliser la méthode RGB il faut taper rgb(Rouge, Vert, Bleu) en remplaçant "Rouge, Vert, Bleu" par les nombres correspondants.
Pour votre information, ces nombres vont de 0 à 255.
Haut de page
|
Chapitre 9: Le fond
Le fond ne désigne pas forcément le fond de toute une page web. On peut aussi appliquer un fond uniquement aux titres, ou aux paragraphes, ou encore à certains mots d'un paragraphe.
Il existe 2 types de fonds :
• Les fonds comportant une couleur
• Les fonds comportant une image de fond
• La couleur de fond
• On utilise la propriété CSS background-color.
Elle s'utilise comme la propriété color, vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. <body> correspond à toute la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur de fond de la page web.
Code : CSS
body
{
background-color:yellow;
color: black;
}
En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur de cette balise prendront le même style c'est ce qu'on appelle l'héritage..
On dit que les balises qui se trouvent à l'intérieur d'une autre balise "héritent" de ses propriétés.
Mai si vous dites par la suite que vous voulez vos titres en noir, ce style aura la priorité et vos titres seront donc en noir.
Cela ne fonctionne pas uniquement pour la couleur, entendons-nous bien. Toutes les propriétés CSS seront héritées : vous pouvez par exemple demander une taille de texte de "1.3em" dans la balise <body>, et tous vos titres et paragraphes seront de cette taille-là.
Un exemple où je vous montre comment on "annule" l'héritage
Code : CSS
body
{
background-color: #000000;
color: #FFFFFF;
}
h1
{
color: #FF0000;
}
On n'a pas indiqué de couleur particulière pour les paragraphes (<p>), donc ils ont hérité de la couleur blanche. Mai le titre n'a pas hérité de la couleur blanche car on a écrit qu'on voulait qu'il soit en rouge.
L'image de fond
Tout comme pour la couleur de fond, l'image de fond ne s'applique pas forcément à la page entière, on peut tout aussi bien mettre une image de fond aux titres, paragraphes, citations etc...
La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit lui mettre url("nom_de_l_image.png").
Par exemple :
background-image:url("fond.png");
On peut aussi mettre JPEG ou GIF.
L'adresse indiquant où se trouve l'image de fond peut être en absolu (http://...) ou en relatif (fond.png).
Attention lorsque vous mettez une adresse en relatif dans le fichier CSS ! elle doit être indiquée par rapport au fichier .css et non pas par rapport au fichier .html.
Ainsi, si votre site comporte 2 dossiers : "css" et "images", il vous faudra taper : "../images/fond.png" pour récupérer l'image de fond. Si le chemin n'est pas correct, votre image de fond ne s'affichera pas.
Si on veut appliquer une image de fond à toute la page, on doit là encore utiliser la balise <body> :
Code : CSS
body
{
background-image: url("../images/fond.png");
}
h1
{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p
{
text-align: justify;
text-indent: 25px;
}
Il existe par ailleurs une propriété CSS qui permet de "fixer" le fond, pour ne pas bouger en même temps que le texte. L'effet obtenu est intéressant.
La propriété est background-attachment et peut prendre 2 valeurs :
• fixed : l'image de fond reste fixe.
• scroll : l'image de fond défile avec le texte (par défaut).
En réutilisant le même fichier XHTML que tout à l'heure, mais en changeant un peu le CSS pour y rajouter background-attachment, on obtient ceci :
Code : CSS
body
{
background-image: url("../images/neige.png");
background-attachment: fixed; /* Le fond restera fixe */
}
h1
{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p
{
text-align: justify;
text-indent: 25px;
}
Essayez de descendre plus bas dans la page avec les barres de défilement, vous verrez que le fond reste fixe
Il y a 2 propriétés en rapport avec les images de fond
1. Celle qui gère la répétition de l'image de fond. Cette propriété s'appelle
background-repeat ses valeurs sont:
• no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
• repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
• repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
• repeat : le fond sera répété (par défaut).
Gardons encore notre même fichier XHTML.
Code : CSS
body
{
background-image: url("../images/fond.png");
background-repeat: repeat-y;
}
2. Concernant la position de l'image de fond.
On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété n'est intéressante que si vous avez mis "background-repeat: no-repeat;" (un fond qui ne se répète pas).
C'est background-position elle a 2 valeurs en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe si vous appliquez le fond à un paragraphe). Ainsi, si vous tapez :
background-position:20px 70px;
... votre fond sera placé à 20 pixels de la gauche et à 70 pixels du haut. Il est aussi possible de mettre ces valeurs en anglais :
• top : en haut.
• bottom : en bas.
• left : à gauche.
• center : centré.
• right : à droite.
Il est possible de combiner ces mots. Par exemple, pour aligner une image à gauche en haut, vous taperez :background-position: left top;
Code : CSS
body
{
background-image: url("../images/fond.jpeg");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
Si vous utilisez beaucoup de propriétés en rapport avec le background , vous pouvez utiliser ce que moi j'appelle "grande-propriété" background qui peut prendre plusieurs valeurs combinées des propriétés background-image, background-repeat, background-attachment et background-position.
C'est la première "grande-propriété" que nous utilisons, Pour toutes les "grande-propriétés" comme background, il faut savoir que :
• L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les valeurs dans n'importe quel ordre :
background: url("../images/skieur.gif") no-repeat top right fixed;
background: no-repeat fixed top right url("../images/skieur.gif");
• Vous n'êtes pas obligés de mettre toutes les valeurs.
background:url("../images/skieur.gif") no-repeat top right;
L'exemple ci-dessous donne le même résultat que l'exemple précédent, mais il utilise background pour combiner les valeurs et rendre le fichier CSS plus petit :
Code : CSS
body
{
background: url("../images/skieur.gif") no-repeat top right fixed;
}
Vous pouvez appliquez un fond à vos titres ou paragraphes, mai pas seulement à la page.
Ce cours en cnss est terminé, nous avons maintenant la base qui nous permettra de créer des pages Web acceptables. Mai il nous reste encore plein de choses à voir comme les tableaux, les formulaires etc...
Il ne faut pas considérer le travail, mais la récompense.
Haut de page
|
 ...Précèdent... Vous êtes ici: le langage CSS Voir la suite…
|
|
|
et 
Annuaire généraliste
royaume Informatique
Rencontre Gratuite 
