1
145

Feuilles de style

Disposition et en-tête d'un document  |  Contrôle des actions

Créez site5 en copiant site4.

  1. /cms
    1. ...
    2. site4
    3. site5

Dans ce chapitre, nous allons organiser les fichiers CSS et voir comment des feuilles de style peuvent être ajoutées dynamiquement à un document.

Pour tester le résultat en ligne, entrez http://www.frasq.org/cms/site5 dans la barre d'adresse de votre navigateur.

Créez le dossier css dans site5.

  1. /cms/site5
    1. css

Les feuilles de style sont ajoutées par la vue head.phtml qui génère la section <head> d'un document.

  1. <?php if (true): ?>
  2. <link href="<?php echo $base_path; ?>/css/zero.css" rel="stylesheet" type="text/css" media="screen" />
  3. <?php endif; ?>
  4. <link href="<?php echo $base_path; ?>/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
  5. <link href="<?php echo $base_path; ?>/css/theme.css" rel="stylesheet" type="text/css" media="screen" />
  6. <link href="<?php echo $base_path; ?>/css/print.css" rel="stylesheet" type="text/css" media="print" />
  7. <?php if (isset($stylesheets)): ?>
  8. <?php foreach ($stylesheets as $css) : ?>
  9. <link href="<?php echo $base_path; ?>/css/<?php echo $css['name']; ?>.css" rel="stylesheet" type="text/css" media="<?php echo $css['media']; ?>" />
  10. <?php endforeach; ?>
  11. <?php endif; ?>

Le code commence par inclure les 4 fichiers zero.css, screen.css, theme.css et print.css, puis tous les fichiers du tableau $stylesheets qui est construit dynamiquement par la fonction head définie dans head.php :

  1.         case 'stylesheet':
  2.             $name=$args[0];
  3.             $media=isset($args[1]) ? $args[1] : 'all';
  4.             if (!isset($head['stylesheets'])) {
  5.                 $head['stylesheets'] = array(compact('name', 'media'));
  6.             }
  7.             else {
  8.                 foreach ($head['stylesheets'] as $css) {
  9.                     if ($css['name'] == $name) {
  10.                         break 2;
  11.                     }
  12.                 }
  13.                 $head['stylesheets'][]=compact('name', 'media');
  14.             }
  15.             break;

EXEMPLE : Appeler head('stylesheet', 'php', 'screen') ajoute le fichier php.css associé au média screen à la liste des feuilles de style dans $head. Remarquez que le code prend soin de ne pas ajouter le même fichier deux fois.

Copiez tous les fichiers des feuilles de style dans le dossier css.

  1. /cms/site5
    1. css
      1. zero.css
      2. screen.css
      3. theme.css
      4. print.css
zero.css
  1. html, body, div, span, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, code,
  4. del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
  5. fieldset, form, label, legend,
  6. table, caption, tbody, tfoot, thead, tr, th, td
  7. {font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
  8.  
  9. caption, th, td {text-align:left;font-weight:400;}
  10.  
  11. blockquote:before, blockquote:after, q:before, q:after {content:"";}
  12. blockquote, q {quotes:"" "";}
  13.  
  14. h1 {font-size:170%;}
  15. h2 {font-size:160%;line-height:130%;}
  16. h3 {font-size:140%;}
  17. h4 {font-size:110%;}
  18. h5 {font-size:110%;}
  19. h6 {font-size:100%;}
  20.  
  21. ul, pre {margin-top:1em;}
  22.  
  23. form {margin:0;}
  24.  
  25. input, select {vertical-align:middle;}
  26.  
  27. p, dl, multicol {margin:1em 0;}
  28.  
  29. a img {border:0;vertical-align:middle;margin:0;}
  30.  
  31. a:link, a:visited {text-decoration:none;}
  32. a:hover {text-decoration:underline;}

zero.css tente de normaliser certains propriétés dont les valeurs par défaut varient selon le navigateur.

screen.css
  1. body {width:960px;margin:5px 0 0 50px;}
  2.  
  3. body {font-family:sans-serif;font-size:medium;}
  4.  
  5. h1, h2, h3, h4, h5, h6, label, caption, #rate-it legend {font-family:Helvetica, "Helvetica Neue", Arial, sans-serif;}
  6.  
  7. code {font-family:"Courier New", Courier, monospace;}
  8. pre code {font-size:10pt;}
  9.  
  10. h1,h2,h3,h4,h5,h6 {font-weight:bold;}
  11.  
  12. h1,h2,h3,h4,h5,h6 {margin:1em 0 0.5em 0;}
  13.  
  14. label, legend {font-size:80%;}
  15.  
  16. table th, table td {padding:5px;margin:0;}
  17.  
  18. form p {vertical-align:top;}
  19.  
  20. input {margin-top:0;margin-bottom:0;vertical-align:middle;}
  21.  
  22. img {vertical-align:middle;}
  23.  
  24. .hidden {display:none;}
  25. .invisible {visibility:hidden;}
  26.  
  27. .left {float:left;margin:0 1em 0 0;}
  28. .right {float:right;margin:0 0 0 1em;}
  29.  
  30. .x-large {font-size:x-large;}
  31. .large {font-size:large;}
  32. .medium {font-size:medium;}
  33. .small {font-size:small;}
  34. .x-small {font-size:x-small;}
  35.  
  36. .smaller {font-size:smaller;}
  37. .larger {font-size:larger;}
  38.  
  39. .emphasis {font-style:italic;}
  40. .superscript {vertical-align:super;}
  41.  
  42. .aleft {text-align:left;}
  43. .aright {text-align:right;}
  44. .acenter {text-align:center;}
  45.  
  46. #content {margin:1em 0 1em 0;clear:both;}
  47.  
  48. #footer {font-size:small;margin:2em 0 1em 0;clear:both;}
  49. #footer p {margin: 0.5em 0 0.5em 0;}
  50. #footer p img {vertical-align:middle;}

screen.css définit des propriétés communes à tous les thèmes du site.

theme.css
  1. a:link, a:visited {color:#ec902d;}
  2. a:hover {color:#2c430d;}
  3.  
  4. body {color:#333333;font-family:Verdana, sans-serif;font-size:100%;}
  5.  
  6. h1,h2,h3 {color:#aec14e;}
  7. h4 {color:#aec14e;}
  8. h5 {color:#df6f6f;}
  9. h6 {color:#666666;}
  10.  
  11. h4 a:link {color:#aec14e;text-decoration:none;}
  12. h4 a:hover {color:#ec902d;text-decoration:none;}
  13.  
  14. h3 {line-height:24px;background:transparent url(../images/heading.png) no-repeat;text-indent:30px;margin:0 0 0.5em 0;}
  15.  
  16. pre {border:1px dashed #808080;padding:3px;background-color:#ffffe0;color:#333333;overflow:auto;}

theme.css ajoute les propriétés spécifiques à un thème.

Ajoutez la décoration des titres <h3> dans le dossier images :

  1. /cms/site5
    1. images
      1. heading.png
heading.png

print.css
  1. * {background-color:white !important;}
  2.  
  3. body {line-height:1.5;font-family:inherit;color:#000;background:none;font-size:10pt;}
  4. .container {background:none;}
  5. hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}
  6. hr.space {background:#fff;color:#fff;}
  7. h1, h2, h3, h4, h5, h6 {font-family:inherit}
  8. code {font:.9em "Courier New", Courier, monospace;}
  9. a img {border:none;}
  10. p img.top {margin-top:0;}
  11. blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}
  12. a {color:#fff;text-decoration:none;}
  13.  
  14. h1, h2, h3, h4, h5, h6 {page-break-after:avoid;page-break-inside:avoid}
  15. blockquote, table, pre {page-break-inside:avoid}
  16. ul, ol, dl {page-break-before:avoid}
  17. img {page-break-inside:avoid; page-break-after:avoid; float:none}
  18.  
  19. .pagebreak {page-break-before:avoid}
  20.  
  21. .hidden {display:none;}
  22. .noprint {display:none;}

print.css tente de rendre l'impression des pages lisibles sur papier.

site5.zip

Commentaires

Votre commentaire :
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip aide 2000

Entrez un maximum de 2000 caractères.
Améliorez la présentation de votre texte avec les balises de formatage suivantes :
[p]paragraphe[/p], [b]gras[/b], [i]italique[/i], [u]souligné[/u], [s]barré[/s], [quote]citation[/quote], [pre]tel quel[/pre], [br]à la ligne,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]commande[/code], [code=langage]code source en c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].