Exercices sur la mise en forme du texte en CSS

mise en forme des acronymmes et insertion de texte en CSS

Écrire une page dans laquelle une liste d'acronymes est présente :

utiliser l'attribut title de la balise correspondante pour indiquer le sens de divers acronymes.
Utiliser une propriété CSS permettant de visualiser le contenu title de l'acronyme en mode impression, ceci peut se faire avec before et after
Utiliser l'attribut counter-increment pou réaliser une numérotation des éléments de la liste,

Fichier à produire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de mise en forme du texte</title>
  <style type="text/css">
   body {background-color:#CFC;color:#056}
   @media screen {
     h1 {color:#582}
   }
   @media print {
     abbr:before {content: attr(title)" ("; font-weight:bold}
     abbr:after  {content: ")"; font-weight:bold}
     a:after     {content: " (lien "attr(href)") ";font-size:80%}
   }
  </style>
</head>
<body>
  <h1>Exemples de mise en forme du texte avec <em>before</em> et <em>after</em></h1>
 
  <h2>Quelques organismes</h2>
  <p>La <abbr title="Société Nationale des Chemins de Fer">SNCF</abbr>.</p>
  <p>L'<abbr title="Organisation des Nations Unies">ONU</abbr>.</p>
  <p>La <abbr title="Banque Centrale Européenne">BCE</abbr>.</p>
  <p>L'<abbr xml:lang="en" title="United Nations Educational, Scientific and Cultural Organization">UNESCO</abbr>.</p>
 
  <h2>Quelques termes usuels</h2>
  <p>Le <abbr title="Chiffre d'Affaire">CA</abbr>.</p>
  <p>L'<abbr title="Acide DésoxyriboNucléique">ADN</abbr>.</p>
  <p>L'<abbr title="Acide RiboNucléique">ARN</abbr>.</p>
  <p>Le <abbr title="Prix de Revient">PR</abbr>.</p>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

utilisation d'une police distante en CSS

Écrire une page contenant du texte et :

Faire en sorte que la police utilisée dans le titre soit celle contenue dans ce fichier (police au format svg),
faire en sorte que la police utilisée dans le paragraphe soit celle contenue dans ce fichier (police au format truetype).

Ceci ne pourra fonctionner que dans le cas ou le navigateur supporte les CSS3.

Fichier à produire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de mise en forme du texte : début de paragraphes</title>
  <style type="text/css">
    @font-face {
      font-family:'ma-police-ttf';
      src:local('ma-police'), url('ma_police.ttf') format('truetype');
    }
    @font-face {
      font-family:'ma-police-svg';
      src:local('ma-police-svg'), url('graffiti.svg') format('svg');
    }
    body {background-color:#CFC;color:#056}
 
    h1 {font-family:ma-police-svg}
    p {font-family:ma-police-ttf}
</style>
</head>
<body>
<h1>Exemples de mise en forme du texte avec une police distante</h1>
 
<h2>Les Néandertaliens avant Neandertal</h2>
<p>Deux fossiles de Néandertaliens ont été découverts avant celui de l'individu éponyme. En 1830, un crâne d'enfant
  est mis au jour par P.C. Schmerling à Engis (Belgique). En 1848, un crâne d'adulte est trouvé à Gibraltar dans le
  site de Forbe's Quarry. Si le premier appartient à un jeune individu sur lequel les traits caractéristiques des
  Néandertaliens sont moins évidents, le deuxième aurait dû conduire à reconnaître l'existence d'une espèce humaine
  fossile.<br/>
  Sans doute était-il trop tôt, comme le prouvent d'ailleurs les difficultés pour faire admettre que les os
  recueillis à Neandertal correspondent bien à un homme fossile.</p>
 
<p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
  <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

mise en place de compteurs en CSS

Écrire une page contenant plusieurs paragraphes et :

faire en sorte que chaque paragraphe soit préfixé de son numéro.
le premier paragraphe aura le numéro 4.

Fichier à produire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de mise en place de compteurs en CSS</title>
  <style type="text/css">
    body {background-color:#CFC;color:#056; counter-reset: title_num 3}
    h2 {counter-increment: title_num}
    h2:before {content: counter(title_num, upper-roman) " : ";}
    p.incr {counter-increment: par_num}
    p {color:#00F}
    h2 {counter-reset: par_num}
    @media screen {h1 {color:#582}}
    @media print {
      acronym:before {content: attr(title)" ("; font-weight:bold}
      acronym:after  {content: ")"; font-weight:bold}
    }
    abbr:first-letter {color:#F00;}
    p.incr:before {content: "->" counter(par_num, decimal) " : ";}
  </style>
</head>
<body>
  <h1>Exemples de mise en place de compteurs en <acronym xml:lang="en" title="Cascading Style Scheet">CSS</acronym>.</h1>
 
  <h2>Liste des intervenants</h2>
  <p class="incr"><abbr title="Identité">Id.</abbr> Charles Magne, <abbr title="Nationalité">Nat.</abbr> française
    travaillant à la <acronym title="Société Nationale des Chemins de Fer">SNCF</acronym>.</p>
 
  <p class="incr"><abbr title="Identité">Id.</abbr> Léon Napo, <abbr title="Nationalité">Nat.</abbr> Luxembourgeoise
    travaillant à la <acronym title="Banque Centrale Européenne">BCE</acronym>.</p>
 
  <p class="incr"><abbr title="Identité">Id.</abbr> Jules César, <abbr title="Nationalité">Nat.</abbr> Italienne
    travaillant pour <acronym xml:lang="en" title="United Nations Educational, Scientific and Cultural Organization">UNESCO</acronym>.</p>
 
  <h2>Liste des participants</h2>
  <p class="incr"><abbr title="Identité">Id.</abbr> Victor Hugo,</p>
  <p class="incr"><abbr title="Identité">Id.</abbr> Jules Vernes,</p>
  <p class="incr"><abbr title="Identité">Id.</abbr> Anatole France,</p>
  <p class="incr"><abbr title="Identité">Id.</abbr> Arthur Rimbaud,</p>
  <p class="incr"><abbr title="Identité">Id.</abbr> Guillaume Apollinaire,</p>
  <p>... et tous les autres,</p>
 
  <p>Quel beau programme !</p>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

mise en forme des paragraphes en CSS

Dans cet exercice nous allons prendre un texte tel que celui de la vie de Blaise Pascal emprunté à wikipedia, puis à partir de celui-ci :

Nous ferons un effet d'ombre sur le titre en utilisant l'attribut CSS3 text-shadow,
Nous ferons un effet de détourage de couleur sur le titre h1 en utilisant les attributs d'ombres multiples CSS3 text-shadow.
Le texte sera disposé sous forme de plusieurs colonnes par les attribut CSS3 column-width ou column-count.
Afin de nous prémunir des incompatibilités nous utiliserons simultanément les attribut CSS3 -webkit-column-width et -webkit-column-count.
Pour améliorer la mise en forme nous utiliserons les attribut CSS3 column-gap et column-rule-width, column-rule-style et column-rule-color.
Un titre sera présent dans la section du texte et celui-ci occupera toute la largeur.

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <title>Exemple de mise en forme du texte : ombres et mode multi-colonnes</title>
  <style type="text/css">
    body {font-family:serif;}
 
    h1 {
      color:#0F0;
      text-shadow:0.3ex 0.3ex 0.5ex #444;
      font-size:300%;
   }
    h2 {
      font-size:220%;
      color:hsla(0,0%,100%,1);
      text-shadow:0.2ex 0.1ex 0.5ex #44F,0 0 0.1ex #F40;
      text-align:center;
      text-decoration:underline;
      -webkit-column-span:all;
    }
    h3 {
      color:#464;
      -webkit-break-before:always;
    }
    section {
      -webkit-column-count:3;
      -webkit-column-gap: 3em;
      -webkit-column-rule-width:1ex;
      -webkit-column-rule-style:dotted;
      -webkit-column-rule-color:#0F0;
      -moz-column-count:3;
      -moz-column-gap: 3em;
      -moz-column-rule-width:1ex;
      -moz-column-rule-style:dotted;
      -moz-column-rule-color:#0F0;
      -o-column-count:3;
      -o-column-gap: 3em;
      -o-column-rule-width:1ex;
      -o-column-rule-style:dotted;
      -o-column-rule-color:#0F0;
      column-count:3;
      column-gap: 3em;
      column-rule-width:1ex;
      column-rule-style:dotted;
      column-rule-color:#0F0;
    }
    p {
      text-align:justify;
    }
  </style>
</head>
<body>
  <h1>Exemples de mise en forme du texte : ombres et multi-colonnes.</h1>
 
  <section>
    <p>Blaise Pascal, né le 19 juin 1623 à Clairmont (aujourd'hui Clermont-Ferrand), en Auvergne et mort
      le 19 août 1662 à Paris, est un mathématicien, physicien, inventeur, philosophe, moraliste et théologien
      français.</p>
    <h3>Son enfance</h3>
    <p>Enfant précoce, il est éduqué par son père. Les tout premiers
      travaux de Pascal concernent les sciences naturelles et appliquées. Il contribue
      de manière importante à l’étude des fluides. Il a clarifié les concepts de
      pression et de vide, en étendant le travail de <em>Torricelli</em>. Pascal
      a écrit des textes importants sur la méthode scientifique.</p>
    <p>Á dix neuf ans, en 1642, il invente la machine à calculer et après trois ans de
      développement et 50 prototypes il la présente à ses contemporains en la dédiant
      au <em>chancelier Séguier</em>. Dénommée machine d’arithmétique, puis roue
      pascaline et enfin pascaline, il en construisit une vingtaine d'exemplaires dans
      la décennie suivante.</p>
 
    <h2>Voici un résumé de la vie de <em>Blaise Pascal</em>.</h2>
    <p>Mathématicien de premier ordre, il crée deux nouveaux champs de recherche
      majeurs : tout d’abord il publie un traité de géométrie projective à seize ans ;
      ensuite il développe en 1654 une méthode de résolution du <q>problème des partis</q>
      qui, donnant naissance au cours du XVIII<sup>ème</sup> siècle au calcul des probabilités,
      influencera fortement les théories économiques modernes et les sciences sociales.</p>
    <p>Après une expérience mystique qu'il éprouva à la suite d'un accident de carrosse
      en octobre 1654 il se consacre à la réflexion philosophique et religieuse. Il écrit pendant
      cette période les Provinciales et les Pensées, ces dernières n’étant publiées qu’après sa
      mort qui survient deux mois après son 39<sup>éme</sup> anniversaire, alors qu’il a été
      longtemps malade (sujet à des migraines violentes en particulier).</p>
  </section>
  <footer>
    <p><cite>Ce texte provient de <a href="http://fr.wikipedia.org/wiki/">Wikipedia</a>.</cite></p>
    <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
  </footer>
</body>
</html>