<< Retour au sommaire

 

 

Les styles CSS

 

 

 

Le sommaire :

  1. Introduction ;
  2. Emploi de styles Css dans l’entête d’une page ;
  3. Emploi de styles CSS DANS un fichier EXTERNE ;
  4. Utilisation des attributs class et id dans le CSS ;
  5. L’imbrication de balises dans le CSS ;
  6. L’emploi du pseudo format dans le CSS ;
  7. Utiliser des images de fond dans le CSS ;
  8. Le formatage, liste des principales propriétés disponibles ;
  9. Convertir le type des balises avec la propriété display ;
  10. Les balises flottantes ;
  11. Fixer une taille à une balise de block ;
  12. La position d’une balise de type block dans la fenêtre ;
  13. Mettre une bordure ;
  14. Les marges de balises de block ;
  15. Définir une couleur de texte directement dans les balises de bloc.

 

 

Introduction

 

Les styles concernent généralement les propriétés de la police de caractères ainsi que l’alignement du contenu de nos pages, la présentation, le fond de l’écran etc.

 

Il est possible bien sûr de définir un style dans une partie précise d’une page via l’utilisation d’un attribut de balise, par exemple, pour aligner à droite le contenu d’un paragraphe :

<p align="right">

L’autre solution, c’est de définir les styles de la page en dehors des balises, c’est la solution « CSS », style en cascade.

 

Il existe d’ailleurs 3 manières d’appliquer des styles :

  1. Directement dans le texte par emploi d’attributs ;
  2. Par l’intermédiaire d’une définition de styles CSS réalisée dans l’entête d’une page ;
  3. Par l’intermédiaire d’une définition de styles dans une feuille CSS externe, c’est-à-dire dans un fichier dont l’extension est CSS.

 

Quoi qu’il en soit, vous pouvez employer ces 3 manières parallèlement pour une même page…

Seulement, la priorité est donnée aux styles définis directement dans le corps du texte, si celui-ci est absent, ce sont les styles CSS définis dans l’entête de la page qui deviennent prioritaires, et pour finir, en dernier lieu, la feuille de styles externe CSS.

En clair, plus une définition est locale, plus elle est prioritaire…

 

Remarque :

La syntaxe de définition d’un style directement dans les balises est différente de la syntaxe utilisée dans le style CSS.

Par exemple, dans le cadre de la définition d’un style dans une balise, le séparateur « égal » relie l’attribut à sa propriété, et la propriété est toujours entre guillemet, par exemple :

align="center"

Quant à la syntaxe en CSS, on emploie les "deux points" à la place du "égal", et la propriété n'est pas placée entre guillemets, par exemple :

text-align: center;

 

Cependant, il est possible d’utiliser la syntaxe CSS à l’intérieure des balises, et ce, grâce à l’attribut « style », par exemple :

<p style="text-align: center;">

Du coup, il est possible d’apprendre que la syntaxe de type CSS…

 


Emploi de styles CSS dans l’entête d’une page

 

Vous pouvez prédéfinir des styles pour des balises de block dans l’entête de votre page XHTML.

Il suffit d’utiliser la balise <style> à l’intérieur du bloc <head> </head>.

Voici la position de la balise <style> dans une page

<head>

<title>Votre titre</title>

<style type="text/css"> 

/* Vous taperez votre code CSS ici */ 

</style> 

  </head>

 

Dans la balise <style>, voici comment définir des styles CSS :

 

Pour chaque balise à définir, vous devrez écrire une phrase composée de la façon suivante :

La première information, c’est le nom de la balise, par exemple, pour définir un style au titre de niveau 1, vous devrez écrire h1.

Ensuite, viennent les différentes  propriétés et leurs valeurs, et le tout encadré entre accolades.

Il est même conseillé d’écrire chaque propriété dans une ligne.

 

Remarque :

Je rappelle que l’accolade gauche s’obtient en réalisant le raccourci clavier ALT GR +Apostrophe du pavé alphanumérique, et que l’accolade droite s’obtient par l’intermédiaire du raccourci clavier ALT GR +égal du pavé alphanumérique…

 

En quelque sorte, l’écriture CSS ressemble à cela :

 

balise1 {

propriété:valeur;

propriété:valeur;

propriété:valeur; }

balise2 {

propriété:valeur;

propriété:valeur;

propriété:valeur; }

balise3 {

propriété:valeur;

propriété:valeur;

propriété:valeur; }

 

Vous constaterez que j’ai placé un point virgule après chaque valeur, alors faites-en autant !

 

Tenez, pour définir en CSS la taille du texte en bleu 12 points pour la balise <p> :

p {

font-size:12px;

color:blue; }

 

Maintenant le code XHTML complet :

 

<!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>Bienvenue sur mon site !</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

p {

font-size:12px;

color:blue; }

</style>

</head>

<body>

<p>

Salut la compagnie.<br />

Comment allez-vous ?

</p>

</body>

</html>

 

Afin de définir des propriétés communes pour plusieurs balises, vous pouvez définir les propriétés en même temps… Par contre, vous devrez séparer les noms de balises par une « virgule ».

Par exemple, pour définir la couleur « blue » aux titres de niveau 1 et de niveau 2 :

h1, h2 {

color:blue; } 

 

Pour découvrir les class dans le CSS, veuillez vous en reporter au chapitre :

« Utilisation des attributs class et id dans le CSS ».

Pour découvrir les différentes propriétés de style, veuillez vous en reporter au chapitre :

« Le formatage, liste des principales propriétés disponibles ».

 


Emploi de styles CSS DANS UN FICHIER EXTERNE

 

Savez-vous au fait ce que veut dire CSS ?

"Cascading Style Sheets", en français, « Feuille de styles en cascade ».

 

Le but du jeu est de créer un fichier texte a qui on donnera l’extension « .css ».

Ensuite, une fois créé, vous pourrez le placer dans le dossier de votre choix…

Bien sûr, ce fichier peut être élaboré depuis le bloc-notes de WINDOWS !

En tout cas, avant d’apprendre à l’élaborer, sachez que pour qu’une feuille de styles CSS soient active depuis une page XHTML, vous devez la déclarer par l’intermédiaire de la balise « Link » que vous écrirez dans le bloc <head>

Voici cette ligne :

       <link rel="stylesheet" media="screen" type="text/css" title="MonTitre" href="MaFeuille.css" /> 

 

La description :

Deux attributs nous intéressent ici, “title” et “href”.

 

L’attribut title permet de saisir le nom du titre de notre feuille de style, dans la ligne d’exemple, j’ai écrit « MonTitre ».

L’attribut href permet de spécifier le nom du fichier CSS ainsi que son chemin noté en relatif ou en absolu, dans la ligne d’exemple j’ai écrit « MaFeuille.css ».

 

Dans le fichier CSS, voici comment définir des styles :

 

Pour chaque balise à définir, vous devrez écrire une phrase composée de la façon suivante :

La première information, c’est le nom de la balise, par exemple, pour définir un style au titre de niveau 1, vous devrez écrire h1.

Ensuite, viennent les différentes  propriétés et leurs valeurs, et le tout encadré entre accolades.

Chaque ligne ne doit contenir qu’une seule propriété.

 

Remarque :

Je rappelle que l’accolade gauche s’obtient en réalisant le raccourci clavier ALT GR +Apostrophe du pavé alphanumérique, et que l’accolade droite s’obtient par l’intermédiaire du raccourci clavier ALT GR +égal du pavé alphanumérique…

 

En quelque sorte, l’écriture CSS ressemble à cela :

 

balise1 {

propriété:valeur;

propriété:valeur;

propriété:valeur; }

balise2 {

propriété:valeur;

propriété:valeur;

propriété:valeur; }

balise3 {

propriété:valeur;

propriété:valeur;

propriété:valeur; }

 

Vous constaterez que j’ai placé un point virgule après chaque valeur.

 

Tenez, pour définir en CSS la taille du texte en bleu et 12 points pour la balise <p> :

p {

font-size:12px;

color:blue; }

 

Maintenant voici l’exemple dans sa globalité....

 

D’abord le code du fichier styles.css :

p {

font-size:14px;

color:blue; }

 

Puis le code du fichier index.html, qui utilise le style <p> définit dans style.css :

 

<!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>Bienvenue sur mon site !</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <link rel="stylesheet" media="screen" type="text/css" title="MesStyles" href="styles.css" /> 

</head>

<body>

<p>

Bonjour,<br />

Comment allez-vous ?<br />

Digérez-vous cette histoire de styles CSS ?</p>

</body>

</html>

 

Afin de définir des propriétés communes pour plusieurs balises, vous pouvez écrire toutes les balises concernées sur une seule ligne, mais chacune des balises devant être séparées de la suivante par une virgule.

Par exemple, pour définir la couleur « blue » aux titres de niveau 1 et de niveau 2 :

h1, h2 {

color:blue; }

 

Pour découvrir les class dans le CSS, veuillez vous en reporter au chapitre :

« Utilisation des attributs class et id dans le CSS ».

Pour découvrir les différentes propriétés de style, veuillez vous en reporter au chapitre :

« Le formatage, liste des principales propriétés disponibles ».

 


Utilisation des attributs class et id dans le CSS

 

L’avantage de la définition de styles dans le CSS est de pouvoir définir une fois pour toutes les différentes propriétés de styles pour les balises.

Toutefois, un peu de souplesse permettant de ne pas appliquer systématiquement des styles pour une balise ou pour une autre serait la bienvenue…

 

 En effet, pour une balise précise, il est possible de définir des class de styles qui permettent directement dans une page, d’appliquer un autre style que celui défini dans le CSS .

 

Dans la déclaration CSS, vous devez définir une class de la même manière qu’une balise, excepté que c’est vous qui choisissez le nom de la class et que cette dernière doit être précédée d’un point.

 

Par exemple, pour définir la class intitulée « important » pour une police de caractères rouge 16 points :

.important {

font-size:16px;

color:red; }

 

Ultérieurement, vous pourrez appliquer la class de la façon suivante :

<p class="important">Soyez prudent !</p>

 

Si aucune class n’est spécifiée dans la balise, c’est la définition CSS de la balise même qui sera appliquée.

Au contraire, si l’attribut « class » est spécifié, c’est la définition de la class qui est appliquée…

N’oublions pas que la définition la plus locale est prioritaire !

 

Il existe également un autre type de class, il s’agit cette fois de l’attribut « id ».

Quelle différence entre ces deux-là ?

Eh bien tout simplement que, dans une même page, l‘attribut « id » ne peut utiliser qu’une seule fois une class donnée.

C’est-à-dire par exemple que si vous définissez une class appelée « exceptionnel », vous ne pourrez l’employer qu’une seule fois dans une même page, et bien sûr, depuis l’attribut « id ».

Mais dans la définition CSS, cette fois vous n’utiliserez pas le point mais le signe dièse « # ».

 

Remarque :

Le signe dièse s’obtient par l’intermédiaire du raccourci clavier ALT GR +Guillemets du pavé alphanumérique.

 

Alors, pour définir par exemple le « id » intitulé « exceptionnel » dans le code CSS :

#Exceptionnel {

font-size:22px;

color:red; }

 

Quant à son emploi dans la page XHTML ?

<p id="exceptionnel">C'est compris ?</p>

 


L’imbrication de balises dans le CSS

 

Dans le CSS, vous pouvez définir le style que devra prendre une balise inline en prévision de son emploi dans un contexte précis.

A titre d’exemple, si je désire que la balise <em> joue son rôle naturel partout excepté dans la balise <h3>, dans le code CSS, je devrai écrire la balise « h3> suivie de la balise « Em » et sans placer de virgule entre les deux :

 

h3 em {

color:blue; }

 

Du coup, dans ce code :

<h3>Alors, le <em>XHTML</em>, ça se passe bien ?</h3>

-         la balise <em> aura le même effet dans toutes les balises de bloc, c’est-à-dire la mise en « italique », sauf pour la balise "h3" dans quel cas elle affichera le texte en bleu.

 


L’emploi du pseudo format dans le CSS

 

Le pseudo format est un style que l’on peut appliquer sur les liens selon si un événement à lieu, ou a eu lieu…

Par exemple, il est possible de choisir 2 styles différents selon si un lien a été visité ou non !

Voici la liste des différents événements :

- lorsque le visiteur pointe sur le lien avec la souris.

C’est le pseudo format « hover »…

- lorsque le visiteur clique sur le lien.

C’est le pseudo format « active ».

- lorsque le visiteur a sélectionné le lien.

C’est le pseudo format « focus ».

-         lorsque le visiteur a déjà vu la page.

-         C’est le pseudo format « visited ».

 

Donc, dans le code de votre CSS, pour définir des propriétés au pseudo formats, il vous suffit de spécifier le nom du pseudo format à droite de « a » et séparés par le signe « deux points ».

 

Par exemple, ici nous allons définir un style pour les liens qui ont déjà été visités par le visiteur :

 a:visited {

font-family:times new roman;

font-size:120%;

color:green;

font-weight:bold;

text-decoration:underline; }

 

Le pseudo format “first-letter” vous permet de définir uniquement le premier caractère d’une balise de block, c’est la « lettrine ».

 

Par exemple, voici une définition CSS pour le premier caractère du paragraphe

P:first-letter {

font-weight:bold;

font-size:120%;

text-indent: 10px; }

p {

font-family:verdana;

font-size:100%;

text-align:justify; }

 

Le pseudo format pour modifier le style de la première ligne est « first-line ».

 


L’utilisation d’images de fond dans le CSS

 

Dans le CSS, vous pouvez déterminer une image de fond d'écran pour une balise de type block de votre choix, <p>, <h1>, <h2>, ou pour toute une page, donc <body>.

 

La syntaxe :

NomBalise {

background-image:url("NomDeL'image"); }

 

La description :

NomBalise est la balise block de votre choix qui doit recevoir l’image en arrière-plan.

NomDeL'image est une image au format JPG, PNG 8 bits ou GIF.

Vous devez d'ailleurs utiliser l'adresse URL de l'image soit en relatif, soit en absolut.

 

Vous disposez également de trois propriétés que je vais vous présenter immédiatement :

 

La première propriété s'intitule "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).

 

La deuxième propriété est "background-repeat, elle permet de répéter l'image de fond, elle peut recevoir deux valeurs :

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

 

Enfin, la troisième des propriétés concerne 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.)

Vous devez donner à background-position 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:30px 50px;

... votre fond sera placé à 30 pixels de la gauche et à 50 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.

 


Le formatage, liste des propriétés

 

La taille du texte

La propriété est font-size :

Plusieurs unités de taille peuvent être spécifiées…

En pixels, par exemple pour une taille de 12 pixels :

font-size:12px

En centimètres, par exemple pour une taille de 2 centimètres :

font-size:2cm

En millimètres, par exemple pour une taille de 20 millimètres :

font-size:20mm

Par l’emploi de noms définis, on appelle ces valeurs des valeurs relatives :

xx-small : minuscule

x-small : très petit

small : petit

medium : moyen

large : grand

x-large : très grand

xx-large : gigantesque

Par exemple, pour une taille de police grande :

font-size:large

 

Mais très intéressant, la définition relative à une taille de base :

 

En considérant que la taille 1 EM correspond à une taille normale, vous pouvez utiliser cette donnée de base pour affecter une taille.

Pour une taille 30% plus grande que la taille normale :

font-size:1.3em

Pour une taille 30% plus petite que la taille normale :

font-size:0.7em

 

Mais on peut utiliser aussi le signe "pourcentage"...

En considérant que 100% est la taille normale, pour obtenir une taille 2 fois plus grande :

font-size:200%

 

La police

 

La propriété pour choisir une police est « font-family ».

Par exemple, pour choisir la police verdana :

font-family :verdana

 

Mais attention, tous les navigateurs ne sont pas branchés sur les mêmes polices, pour être sûr que votre police soit reconnue, il est conseillé d'employer les polices suivantes :

Arial

Arial Black

Comic Sans MS

Courier New

Georgia

 Impact

Times New Roman

Trebuchet MS

Verdana

 

Vous pouvez néanmoins attribuer une liste de polices à la propriété « font-family », ainsi, si un navigateur ne reconnaît pas la première police de la liste, il regardera la deuxième etc.

Il faut simplement séparer les différentes polices par une virgule…

Par exemple :

font-family:arial,"Trebuchet MS",Verdana

Attention, lorsqu’une police comporte des espaces, veuillez encadrer le nom complet de la police par des guillemets.

 

L’alignement du texte

 

La propriété qui permet d’aligner est « text-align ».

Les principales valeurs de l'attribut "text-align" sont :

left : le texte sera aligné à gauche (c'est le réglage 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.

Par exemple pour centrer :

text-align:center

 

L’indentation du texte

 

L’indentation permet de réaliser un retrait de texte vers la droite.

Ce procéder est par exemple utilisé pour réaliser un alinéa de quelques caractères au début de chaque paragraphe.

La propriété est « text-indent ».

 

Les valeurs utilisées dans cette propriété peuvent être exprimées en pixels, en centimètres, en millimètres etc.

 

Voici comment réaliser un retrait de 30 pixels vers la droite :

text-indent:30px 

 

Les effets

 

Vous pouvez aussi réaliser des effets sur votre texte, en voici quelques uns…

La propriété  « font-style » permet de mettre un texte en italique :

font-style:italic

Mais aussi :

font-style:oblique

(C'est la même chose...)

 

La propriété  « font-weight » permet d’appliquer le gras, la valeur est « bold ».

font-weight:bold

 

Les lettres en majuscules capitales :

La propriété est « font-variant et la valeur, quant à elle, est « small-caps ».

font-variant:small-caps

 

La propriété text-« transform » permet d'imposer des majuscules selon la valeur employée :

Voici les 4 valeurs disponibles :

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

none : pas de transformation (par défaut).

Donc, pour mettre un texte tout en majuscule :

text-transform:uppercase

 

La propriété "text-decoration" permet de réaliser différents effets sur le texte, en voici la liste :

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,

dont Mozilla Firefox.

none : normal (par défaut).

 

Par exemple, pour souligner :

text-decoration:underline

 

La couleur de police :

 

La propriété « color » permet de définir une couleur.

Différents types de valeurs peuvent être employées…

La première possibilité, et la seule que je vous présenterai, est d'écrire le nom de la couleur en anglais, il en existe 16, les voici :

white 

silver 

gray 

black 

red 

maroon 

lime 

green 

yellow 

olive 

blue 

navy 

fuchsia 

purple 

aqua 

teal 

 

Par exemple, pour obtenir la couleur verte :

color:green

 

 

Le fond d’écran :

 

Le fond d’écran n’est pas forcément une propriété applicable pour toute une page, nous pouvons l’utiliser pour modifier le fond d’un caractère seulement ou d’un paragraphe etc.

La propriété est « background-color ».

En tant que valeur de la propriété de « background-color », vous pouvez utiliser les 16 couleurs suivantes :

white 

silver 

gray 

black 

red 

maroon 

lime 

green 

yellow 

olive 

blue 

navy 

fuchsia 

purple 

aqua 

teal 

 

Par exemple, pour un fond d'écran vert, vous écrirez :

background-color:green

 


Convertir le type des balises avec la propriété display

 

La propriété « display » vous permet de convertir une balise de type « inline » en une balise de type « block », et inversement, une balise de type « block » en une balise de type « inline ».

 

Cette propriété peut recevoir « pas mal de valeurs », mais ici, je vous présente les 2 valeurs essentielles :

Block, pour convertir en une balise de type « block ».

Inline, pour convertir en une balise de type « inline ».

Voici un exemple qui convertit la balise « h1 » en une balise de type « inline » et la balise « img » en une balise de type « block » :

 

<!-- Convertir la balise de block H1 en une balise inline -->

h1 {

display: inline; }

<!-- Convertir la balise inline Img en une balise de block -->

img {

display: block;}

 


Les balises flottantes

 

Il vous est possible de définir une balise pour qu’elle soit flottante, ainsi, dans le cadre de la présentation d’une page, vous pourrez réunir plusieurs blocs. Par exemple, dans le cadre de l’affichage d’une image, vous pouvez afficher l’image en flottant de façon à ce que le texte du paragraphe s’affiche au-dessus, à côté, et au-dessous de l’image…

 

La première propriété CSS est « float ».

Elle peut recevoir 2 valeurs, « left » pour gauche et « right » pour droit ».

Cette première propriété permet donc d’afficher du texte à gauche ou à droite de l’image…

 

Voici un exemple qui va permettre d’afficher du texte à droite d’une image.

Le code CSS va définir une class intitulée « imageflottantegauche ».

Dans le XHTML, nous allons écrire un premier paragraphe qui affichera l’image « drapeau.jpg » par l’intermédiaire de la balise <img>.

Nous écrirons ensuite un second paragraphe contenant cette fois le texte.

Au bout du compte, à l’affichage de la page dans le navigateur, les 2 paragraphes seront réunis à l’horizontal…

 

Le code du CSS :

<!-- Construction d'une classe pour les images flottantes à gauche -->

.imageflottantegauche {

float:left; }

 

Le code de la page 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>Bienvenue sur mon site !</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <link rel="stylesheet" media="screen" type="text/css" title="MonTitre" href="styles.css" /> 

</head>

<body>

<p><img src="drapeau.jpg" class="imageflottantegauche" alt="Drapeau français" /></p>

<p>LA france est un pays européen situé dans l'ouest du continent. Il compte environ 60 000 000 d'habitants plus moi. Personnellement, j'habite à ROCHEFORT SUR MER, ville de 27 000 habitants relativement calme. Durant les siècles derniers, de magnifiques navires ont été construits dans l'arsenal du port. Vous pouvez vivre un moment de l'histoire en visitant la corderie royales ou le musé de la marine. Un vestige est encore dressé au-dessus de LA CHARENTE, c'est le pont transbordeur construit par Monsieur Gustave EIFEL. Il permettait, à l'époque, de faire traverser plusieurs véhicules simultanément par dessus LA CHARENTE à bord d'une nacelle. Que les temps ont changés ! Maintenant, juste à côté du vieux transbordeur, s'élève un immense viaduc... C'est merveilleux... Et surtout, c'est plus rapide ! Bon, mais ROCHEFORT n'est pas non plus que cela, c'est aussi ceci ! Bon, je n'ai plus rien à dire, tchao ! </p>   

</body>

</html>

 

Voilà, grâce à la propriété « float », nous avons pu réunir à l’horizontal le texte et l’image.

Maintenant, nous pouvons intégrer une autre propriété dans le CSS qui permettra d’afficher le paragraphe suivant, donc le troisième de la page XHTML, juste au-dessous de l’image.

Il suffit juste de rajouter à la class « imageflottantegauche » la propriété « clear ».

Cette propriété peut recevoir 3 valeurs que voici :

left : le texte se poursuit en dessous après un float:left;

right : le texte se poursuit en dessous après un float:right;

both : le texte se poursuit en dessous, que ce soit après un float:left; ou après un float:right;  

 

Du coup, on peut utiliser systématiquement la valeur « both », puisqu’elle fonctionne à touts les coups !

 

Voici donc à nouveau l’exemple précédent…

Cette fois, le troisième paragraphe sera affiché au-dessous de l’image !

 

Voici le code CSS :

<!-- Construction d'une classe pour les images flottantes à gauche -->

.imageflottantegauche {

float:left;

clear:both; }

 

Voici le 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>Bienvenue sur mon site !</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <link rel="stylesheet" media="screen" type="text/css" title="MonTitre" href="styles.css" /> 

</head>

<body>

<p><img src="drapeau.jpg" class="imageflottantegauche" alt="Drapeau français" /></p>

<p>LA france est un pays européen situé dans l'ouest du continent. Il compte environ 60 000 000 d'habitants plus moi. Personnellement, j'habite à ROCHEFORT SUR MER, ville de 27 000 habitants relativement calme.</p>

<p>Durant les siècles derniers, de magnifiques navires ont été construits dans l'arsenal du port. Vous pouvez vivre un moment de l'histoire en visitant la corderie royales ou le musé de la marine. Un vestige est encore dressé au-dessus de LA CHARENTE, c'est le pont transbordeur construit par Monsieur Gustave EIFEL. Il permettait, à l'époque, de faire traverser plusieurs véhicules simultanément par dessus LA CHARENTE à bord d'une nacelle. Que les temps ont changés ! Maintenant, juste à côté du vieux transbordeur, s'élève un immense viaduc... C'est merveilleux... Et surtout, c'est plus rapide ! Bon, mais ROCHEFORT n'est pas non plus que cela, c'est aussi ceci ! Bon, je n'ai plus rien à dire, tchao ! </p>   

</body>

</html>

 


Fixer la taille d’une balise de block

 

Le CSS met à notre disposition 2 propriétés permettant de déterminer la largeur et la hauteur des balises de type block.

Si ces balises sont omises, la largeur des balises de type block est de 100 pourcent.

 

Ces propriétés sont « width » et « height ».

 

La propriété « width » permet de fixer la largeur du bloc en pixels ou en pourcentage, par exemple pour fixer une largeur de 50 pourcent à la balise <p> :

p {width:50%;}

 

La propriété « height » permet de fixer la hauteur du bloc en pixels ou en pourcentage, par exemple pour fixer une hauteur de 50 pourcent à la balise <p> :

p {height:50%;}

 

Remarque importante !

En fixant ainsi la largeur et la hauteur d’un bloc, la surface de ce bloc occupera l’espace prévu dans la page, et ce, même si le contenu du block ne remplit pas cette surface…

Par contre, si le contenu de la balise excède la surface du block fixé par les propriétés « width » et « height », eh bien la surface s’agrandira naturellement afin de pouvoir rendre visible entièrement son contenu…  

Il existe donc une propriété qui permet de verrouiller la taille maximale prévue dans la valeur des propriétés « widtht » et « height ».

Cette propriété est « overflow », et elle peut recevoir les valeurs suivantes : 

visible (par défaut) : si le texte dépasse les limites de taille, le block est agrandi de manière à ce que tout soit visible. C'est ce que nous venons de constater.

hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte.

scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on

puisse voir tout le texte. C'est un peu comme un cadre à l'intérieur de la page.

auto : mode "pilote automatique" :p. En gros, c'est le navigateur qui décide ou pas de mettre des barres de défilement (il en mettra si c'est nécessaire).

 

Il existe également 2 propriétés qui permettent de fixer la largeur ou la hauteur minimale d’une balise de type block !

Ce sont les propriétés « min-width » pour la largeur minimale et « min-height » pour la hauteur minimale. On peut leurs attribuer des valeurs exprimées en pixels mais aussi en pourcentage.

 

Pour compléter les 2 propriétés que l’on vient de voir, il existe encore 2 autres propriétés qui cette fois permettent de fixer la largeur ou la hauteur maximale d’une balise de type block !

Ce sont les propriétés « max-width » pour la largeur maximale et « max-height » pour la hauteur maximale. On peut leur attribuer des valeurs exprimées en pixels mais aussi en pourcentage.

 


Mettre une bordure

 

La propriété "boreder" permet de définir une bordure pour une balise de type block.

Elle est dite "méga-propriété" car elle peut recevoir jusqu'à 3 valeurs en une seule affectation, et l'ordre de la spécification des valeurs n'a pas d'importance.

 Les 3 valeurs sont "l'épaisseur", "la couleur" et "le type de bordure".

Pour l'épaisseur, vous pouvez exprimer la valeur en pixels, par exemple 2px.

Mais le CSS met également à votre disposition 3 mots clef que voici :

thin : bordure fine

medium : bordure moyenne

thick : bordure épaisse

 

La seconde valeur de la "méga-propriété" "border" est donc la couleur.

Vous pouvez évidemment utiliser les valeurs clef que nous avons vues dans les chapitres précédents, "blue", "red", "green" etc.

 

Ensuite, vient la troisième propriété, c'est le type de la bordure, ici le CSS met une gamme importante de types de bordure à votre disposition, votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets etc.

 

En voici la liste :

none : pas de bordure (par défaut)

solid : un trait simple.

dotted : pointillés.

dashed : tirets.

double : bordure double.

groove : en relief.

ridge : effet 3D.

inset : autre effet 3D (on a l'impression que le block forme un creux).

outset : encore un autre effet 3D (on a l'impression que le block est surélevé).

 

Je vous rappelle que les valeurs de la propriété "border" n'ont pas d'ordre précis dans le code CSS.

 

 Voici par exemple, pour la balise <p>, la définition CSS d'une bordure avec des traits verts continus simples et d'une épaisseur de 2 pixels.

p {

border:green 2px solid; }

 

Remarque :

La propriété “border” s’applique également sur les balises de type inline.

On l’utilise notamment pour encadrer les images depuis la balise <img>.

 

Cependant, la propriété "boreder" oblige à ce que nous définissions la même bordure pour les 4 traits de l'encadrement.

Alors, vous avez la possibilité de définir individuellement les 4 traits de la bordure en employant cette fois des "méga-propriétés" spécifiques aux différents côtés de la bordure. 

Voici donc les 4 propriétés :

border-top : bordure en haut.

border-bottom : bordure en bas.

border-left : bordure à gauche.

border-right : bordure à droite.

Ensuite, l'utilisation de ces 4 propriétés dans le CSS ne diffère pas à l'utilisation de la "méga-propriété" "boreder".

Par exemple :

p {

border-top: 2px green solid; border-bottom: 4px red double; border-left:3px red groove; border-right:6px red solid; }

 


La position d’une balise de type block dans la fenêtre

 

La propriété « position » permet de fixer la position d’un block dans la fenêtre du navigateur.

Mais l’on doit en revanche spécifier le mode de positionnement avec lequel on travaille, du coup, la propriété « position » ne fonctionne pas seule, nous devons la compléter avec l’une des propriétés suivantes :

absolute : positionnement absolu, donc :

position:absolute.

fixed : positionnement fixe, donc :

position :fixed.

relative : positionnement relatif, donc :

position :relative.

 

Dans le cas de l’emploi de « position :absolute », vous devez préciser depuis quel côté vous allez spécifier une distance, distance notée en pixels ou en pourcentage. Ces 4 précisions sont des propriétés que je vais vous présenter immédiatement : 

left : position par rapport à la gauche de la fenêtre.

right : position par rapport à la droite de la fenêtre.

top : position par rapport au haut de la fenêtre.

bottom : position par rapport au bas de la fenêtre.

 

Par exemple, pour placer un paragraphe en bas à droite de la fenêtre du navigateur:

P {

position:absolute;

right:0px;

bottom:0px; }

 

Pour l’emploi de la propriété “position :fixed », la syntaxe dans le CSS est exactement la même que pour la propriété « position :absolute ».

La différence est à l’affichage dans la page XHTML…

En effet, les block positionnés par la propriétés « position :absolute » défileront en même temps que le défilement de la page, tandis que ceux positionnés par la propriété « position :fixed » seront complètement fixes.

L’utilisateur aura beau défiler la page, les blocs positionnés par l’intermédiaire de la propriété « position :fixed » seront immobiles.

Ce principe est très astucieux pour fixer une table des matières dans une page !

Seulement, le problème, c’est qu’INTERNET EXPLORER 6 et les versions antérieures ne savent pas gérer cette propriété…

 

Quant à la propriété « relative », donc « position :relative », sa syntaxe est également identique aux propriétés « absolute » et « fixed », mais cette fois, les valeurs passées en paramètre à « top », « bottom », « left » et « right » ne seront plus des distances relatives aux extrémités de la page, mais plutôt à des distances relatives à la position naturelle des balises concernées. Plutôt dur dur à utiliser…

On peut ainsi réaliser des décalages par rapport à la position initiale …

 


Les marges de balises de block

 

Maintenant passons aux marges !

Dans les balises de block, il existe de types de marges, la « marge extérieure » et la « marge intérieure ».

Le CSS vous propose 2 propriétés afin de définir les marges :

padding : indique la taille de la marge intérieure. A exprimer en général en pixels (px).

margin : indique la taille de la marge extérieure. Là encore, on utilise le plus souvent des pixels.

 

Remarque :

Dans le CSS, et pour une balise de block, si vous avez défini une largeur fixe par l’intermédiaire de la propriété « width », le fait d’affecter la valeur « auto » à la propriété « margin » a pour effet de centrer le block…

Mais attention, il faut être certain d’avoir fixé la largeur du block en pixels !

Un exemple :

p {

width: 280px;

margin: auto; }

 

Mais bien sûr, « Margin » et « padding » définissent automatiquement les 4 marges en une seule fois.

 

Pour définir distinctement toutes les marges, voici la liste des propriétés :

margin-top : marge extérieure en haut.

margin-bottom : marge extérieure en bas.

margin-left : marge extérieure à gauche.

margin-right : marge extérieure à droite

padding-top : marge intérieure en haut.

padding-bottom : marge intérieure en bas.

padding-left : marge intérieure à gauche.

padding-right : marge intérieure à droite.

 


Définir une couleur de texte directement dans les balises

 

Ah laissons un peu de côté le CSS !

 

Pour appliquer une couleur à un texte directement depuis un bloc, vous pouvez utiliser la balise<font> de type « In line ».

 

La syntaxe :

 

<font color="couleur">

Le texte...

</font>

 

La description :

Font est le nom de la balise.

Color est l'attribut auquel vous devez spécifier une couleur encadrée par des guillemets.

Liste des couleurs disponibles

Les propriétés de l’attribut « color »

Traduction

Black

Noir

Red

Rouge

yellow

Jaune

green

vert

white

Blanc

navy

Bleu marine

fuchsia

Rose fuchsia

blue

Bleu

gray

Gris

maroon

Maron

olive

Vert olive

purple

Vilet

silver

Argenté

 

Voici un petit exemple qui affiche un texte en vert :

 

<p>

<font color="green">

Attention à bien respecter la nature !

</font></p>

 

Philippe BOULANGER