Exercices sur le mode d'affichage en CSS

mode d'affichage compact en CSS

Écrire une page xHTML contenant :

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 d'affichage compact</title>
  <style type="text/css">
    body {font-family:sans-serif;
      background-color:#FED;
    }
 
    dt {display:compact;font-weight:bold}
    dd {margin-left:8em;padding-bottom:1em}
  </style>
</head>
<body>
  <h1>Exemples d'affichage <samp>compact</samp>.</h1>
 
  <h2>voici une liste en mode compact.</h2>
  <dl>
    <dt>desc court</dt>
    <dd>description courte.</dd>
    <dt>description longue</dt>
    <dd>C'est vraiment trop long pour tenir dans la marge.</dd>
    <dt>autre</dt>
    <dd>Celui ci est suffisamment court pour entrer dans la marge, l'élément sera donc sur la même ligne que sa définition. c'est plutôt pratique comme comportement.</dd>
  </dl>
 
  <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

mode d'affichage en enfilade (run-in) en CSS

Écrire une page xHTML contenant :

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 d'affichage en enfilade</title>
  <style type="text/css">
    body {font-family:sans-serif;
      background-color:#FED;
    }
 
    .enligne {display:inline}
    h2 {display:run-in;color:#581}
  </style>
</head>
<body>
  <h1>Exemples d'affichage en enfilade (<samp>run-in</samp>).</h1>
  <p class="enligne">Pour commencer une petite phrase affichée en ligne. !</p>
 
  <h2>voici le titre en enfilade.</h2>
  <p>Et voici le texte qui doit se mettre à la suite du titre en enfilade, et ce malgré le fait que ce
    paragraphe soit de type bloc. Mieux vaut un bon exemple qu'un long discours !</p>
 
  <h2>Ceci est un autre titre en enfilade.</h2>
  <p class="enligne">Et pour finir de texte écrit dans un paragraphe en mode <samp>inline</samp></p>
  <p class="enligne">Un petit dernier paragraphe en mode <samp>inline</samp></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
pages validées par Valid XHTML 1.1 CSS validé !