unix_prog_web/unix_prog_web_05.xhtml

   1 <?xml version="1.0" encoding="utf-8" ?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   3           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
   4           >
   5 <html xmlns="http://www.w3.org/1999/xhtml" >
   6   <head>
   7     <title>CSS</title>
   8
   9     <meta http-equiv="Content-Type"
  10           content="text/html; charset=utf-8" />
  11     <meta name="copyright"
  12           content="Copyright &#169; 2013 Kim Nguyễn" />
  13
  14     <!-- Load jQuery -->
  15     <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
  16     <!-- Load the library -->
  17     <script src="../simpleWebSlides.js" type="text/javascript" ></script>
  18
  19     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"  media="all" />
  20     <!-- Load a custom Theme, the class-element marks this style-sheet
  21          a "theme" that can be swtiched dynamicaly -->
  22     <link class="sws-theme" rel="stylesheet"  title="U-Psud style"  href="../themes/uPsud.css" type="text/css" />
  23
  24     <!-- Customize some templates and initialize -->
  25     <style>
  26       ul.menu li { padding: 10pt 0pt 10pt 0pt;
  27       display:block;
  28       background:orange;
  29       color:blue;}
  30       .sous-menu { display : none; }
  31       ul.menu > li:hover ul.sous-menu { display: block;
  32       }
  33       ul.menu > li:hover ul.sous-menu > li {
  34       background:blue;
  35       color:orange;
  36       }
  37     </style>
  38     <script type="text/javascript">
  39       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
  40       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
  41       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
  42
  43       //Ensures that we load SWS at the very end, after MathJax has
  44       //been initialized
  45
  46       $(window).load(SWS.Presentation.init);
  47     </script>
  48   </head>
  49   <body>
  50     <a href="unix_prog_web_04.xhtml" class="sws-previous"/>
  51
  52     <div class="sws-slide sws-cover sws-option-nofooter">
  53       <h1>Unix et Programmation Web</h1>
  54       <h1>Cours 5</h1>
  55       <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
  56       <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
  57     </div>
  58     <h1>Introduction</h1>
  59     <div class="sws-slide">
  60       <h1>Cascading Style Sheets (CSS)</h1>
  61       <table class="desc">
  62         <tr>
  63           <td >CSS</td> <td>
  64             Langage permettant de décrire le <em>style graphique</em>
  65             d'une page HTML
  66           </td>
  67         </tr>
  68       </table>
  69       <p>On peut appliquer un style CSS</p>
  70       <ul>
  71         <li> À un élément en
  72         utilisant <em>l'attribut <tt>style</tt></em></li>
  73         <li> À une page en utilisant
  74         l'élément <em><tt><![CDATA[ <style>...</style> ]]></tt></em>
  75                                                           dans l'en-tête
  76         du document (dans la
  77         balise <tt><![CDATA[<head>...</head>]]></tt>).
  78                                                  </li>
  79         <li>À un ensemble de pages en référençant un fichier de style
  80         dans chacune des pages
  81         </li>
  82       </ul>
  83     </div>
  84     <div class="sws-slide">
  85       <h1>L'attribut <tt>style</tt></h1>
  86       <code> <![CDATA[ <a href="http://www.u-psud.fr" style="]]><em>color:red</em><![CDATA[">Un lien</a>]]>
  87       </code>
  88       <p>Apperçu:      </p>
  89       <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
  90        <a href="http://www.u-psud.fr" style="color:red;text-decoration:underline;">Un lien</a>
  91       </p>
  92       <p class="sws-pause">Inconvénients :</p>
  93       <ul> <li>il faut copier l'attribut
  94       style pour tous les liens de la page</li>
  95         <li>modification de tous les éléments difficiles</li>
  96       </ul>
  97     </div>
  98
  99     <div class="sws-slide">
 100       <h1>L'élément <tt>style</tt></h1>
 101       <code><![CDATA[  <html>
 102     <head>
 103        <title>…</title>
 104        <style>
 105 ]]>       <em>a { color: red; }</em>
 106 <![CDATA[      </style>
 107     </head>
 108     <body>
 109       <a href="…">Lien 1</a> <a href="…">Lien 2</a>
 110     </body>
 111   </html>]]></code>
 112       <p>Apperçu :</p>
 113       <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
 114        <a href="…" style="color:red;text-decoration:underline;">Lien
 115        1</a>
 116        <a href="…" style="color:red;text-decoration:underline;">Lien 2
 117        </a>
 118       </p>
 119       <p>Inconvénient : local à une page</p>
 120     </div>
 121     <div class="sws-slide">
 122       <h1>Fichier <tt>.css</tt> séparé</h1>
 123       <p>Fichier <tt>style.css</tt>:</p>
 124       <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
 125         <code >a { color: red; }</code>
 126       </p>
 127       <p>Fichier <tt>test.html</tt>:</p>
 128       <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
 129         <code >  <![CDATA[<html>
 130     <head>
 131     …
 132     ]]><em>&lt;link href="style.css" type="text/css" rel="stylesheet" /&gt;</em>
 133 <![CDATA[    </head>
 134     …
 135   </html>]]></code>
 136       </p>
 137       <p class="sws-pause">Modifications &amp; déploiement aisé</p>
 138     </div>
 139     <div class="sws-slide">
 140       <h1>Syntaxe</h1>
 141       <p>Une <em>propriété</em> CSS est définie en utilisant la
 142       syntaxe:
 143       </p>
 144       <p style="text-align:center"><tt> nom_prop : val_prop
 145       ; </tt></p>
 146       <ul>
 147         <li>Si on utilise l'attribut <tt>style</tt> d'un
 148         élément:<code>
 149  <![CDATA[<a href="…" style="]]><em>color:red;border-style:solid;border:1pt;</em><![CDATA[">Lien 1</a>]]>
 150           </code>
 151         </li>
 152         <li>Si on utilise un fichier <tt>.css</tt> ou une feuille de
 153         style:<code>
 154   a {
 155          <em>color : red;
 156          border-style: solid;
 157          border: 1pt;</em>
 158     }
 159   h1 {   /* Le style des titres de niveau 1 */
 160          text-decoration: underline;
 161          color: green;
 162      }
 163 </code></li>
 164       </ul>
 165     </div>
 166 <h1>Boîtes</h1>
 167     <div class="sws-slide">
 168       <h1> Unités de longueur</h1>
 169       <p>CSS permet de spécifier des longueurs comme valeurs de
 170       certaines propriétés (position et taille des éléments, épaisseur
 171       des bordures, …). Les longueurs <em>doivent</em> comporter une
 172       unité. Les unités reconnues sont:</p>
 173       <table class="desc">
 174         <tr><td style="width:3em" >px</td> <td>pixel</td> </tr>
 175         <tr><td>in</td> <td>pouce (2,54cm)</td> </tr>
 176         <tr><td>cm</td> <td>centimètre</td> </tr>
 177         <tr><td>mm</td> <td>millimètre</td> </tr>
 178         <tr><td>pt</td> <td>point (1/72<up>ème</up> de pouce, 0,35mm) </td></tr>
 179         <tr><td>pc</td> <td>pica (12 points)</td></tr>
 180         <tr><td>em</td> <td>facteur de la largeur d'un caractère de la police
 181         courante</td></tr>
 182         <tr><td>ex</td> <td>facteur de la hauteur d'un caractère « x »
 183         de la police courante</td></tr>
 184         <tr><td>%</td> <td>pourcentage d'une valeur particulière
 185         (définie par propriété)</td></tr>
 186         <tr><td >vh</td> <td  class="css3"><i>viewport height</i> (% de la
 187         hauteur de la partie visible de la page)</td></tr>
 188         <tr  style="background:white"><td>vw</td> <td  class="css3"><i>viewport
 189          width</i> (% de la largeur de la partie visible de la
 190          page)</td></tr>
 191       </table>
 192     </div>
 193
 194
 195     <div class="sws-slide">
 196       <h1>Boîte</h1>
 197
 198       <p >Chaque élément de la page HTML possède une <em>boîte
 199       rectangulaire</em> qui délimite le contenu de l'élément:
 200       </p>
 201       <div style="text-align:center;vertical-align:text-bottom;">
 202         <span class="b0" style="color:black;">← <span style="padding:0 24vh 0
 203         25vh;"> width </span><span style="padding-right:10vh">→</span><br/>
 204         <span id="b1" style="display:inline-block;
 205                      color:black;
 206                      padding:0 4vh 4vh 4vh;
 207                      border:dotted 2pt black;"><i>margin</i> (marge)<br/>
 208           <span  id="b2" style="display:inline-block;
 209                                 padding:0 4vh 4vh 4vh;
 210                                 color:white;background:black">
 211             <i>border</i> (bordure)<br/>
 212             <span  id="b3" style="display:inline-block;padding:0 3vh 3vh 3vh;
 213                                   background:white;color:black;border:dotted
 214                                   2pt black">
 215               <i>padding</i> (ajustement)<br/>
 216               <span style="border:dotted 2pt black;
 217                            background:white;
 218                            position:relative;
 219                            display:inline-block;
 220                            font-size:15vh;
 221                            width:2.8em;
 222                            height:12vh;">
 223                 <span style="color:red;
 224                              top:-5vh;
 225                              left:0vh;
 226                              position:absolute;
 227                              text-decoration:underline;
 228                              padding:0 0 0 0;
 229                              margin: 0 0 0 0;
 230                              ">Lien 1
 231                 </span>
 232               </span>
 233             </span>
 234           </span>
 235         </span>
 236         </span><span  class="b0" style="color:black;vertical-align:top;display:inline-block;font-size:xx-large;height:100%;">↑<br/><br/><br/><br/>
 237           height<br/><br/><br/><br/>↓
 238         </span>
 239       </div>
 240       <script type="text/javascript">
 241         function all(e) {
 242         return $(e).children("*").addBack()
 243         }
 244         function hide(e) {
 245         all(e).css('visibility', 'hidden');
 246         };
 247         function show(e) {
 248         all(e).css('visibility', 'visible');
 249         }
 250         SWS.Presentation.registerCallback("0", function(c) {
 251         hide(".b0");hide("#b1"); hide("#b2"); hide("#b3");
 252
 253         });
 254         SWS.Presentation.registerCallback("1", function(c) {
 255         hide(".b0");hide("#b1"); hide("#b2"); show("#b3");
 256         });
 257         SWS.Presentation.registerCallback("2", function(c) {
 258         hide(".b0");hide("#b1"); show("#b2"); show("#b3");
 259         });
 260         SWS.Presentation.registerCallback("3", function(c) {
 261         hide(".b0");show("#b1"); show("#b2"); show("#b3");
 262         });
 263         SWS.Presentation.registerCallback("4", function(c) {
 264         show(".b0");show("#b1"); show("#b2"); show("#b3");
 265         });
 266       </script>
 267       <p class="sws-onframe-5">La <em>taille t du contenu</em> est calculée pour que:<br/>
 268         <tt>(height|width) = padding + margin + border + t</tt>
 269       </p>
 270     </div>
 271     <div class="sws-slide">
 272       <h1>Marge, bordure, ajustement</h1>
 273       <p>On peut spécifier jusqu'à 4 valeurs:</p>
 274       <ul><li>1 valeur: toutes les dimensions égales à cette
 275       valeur</li>
 276         <li>2 valeurs: haut et bas égal à la première valeur, gauche
 277           et droite égale à la deuxième</li>
 278         <li>3 valeurs: haut à la première valeur, gauche
 279           et droite égale à la deuxième, bas égal à la troisième</li>
 280         <li>4 valeurs: haut, droit, bas, gauche</li>
 281       </ul>
 282       <code style="font-size:smaller;">  span {
 283       padding:10pt 20pt 5pt 0pt;
 284       margin:10pt 5pt;
 285       border-width:3pt;
 286       border-color:red blue green;
 287       border-style:solid dotted;
 288     } </code>
 289       <div style="text-align:center;">Du <span style="padding:10pt
 290       20pt 5pt 0pt;margin:10pt 5pt;border-style:solid dotted;border-width:3pt;border-color:red blue green;">texte</span> dans une boite
 291       </div>
 292     </div>
 293     <div class="sws-slide">
 294       <h1>Modes d'affichage</h1>
 295       <p>La propriété <em><i>display</i></em> contrôle le mode
 296       d'affichage d'un élément:
 297       </p>
 298       <table class="desc">
 299         <tr><td>none</td><td>l'élément n'est pas dessiné et n'occupe
 300         pas d'espace</td></tr>
 301         <tr><td style="width:4em;">inline</td><td>l'élément est placé sur la ligne
 302         courante, dans le flot de texte. La taille du contenu (avec
 303         les marges, ajustements et bordures) dicte la
 304         taille de la boîte, <tt>height</tt> et <tt>width</tt> sont
 305         ignorés (<tt><![CDATA[<i>, <b>, <span>, <em>, …]]></tt>
 306         sont <i>inline</i> par défaut). </td></tr>
 307         <tr><td>block</td><td>l'élément est placé seul sur sa
 308         ligne. La taille est calculée automatiquement mais peut être
 309         modifiée par <tt>width</tt> et <tt>height</tt>
 310         (<tt><![CDATA[<div>, <h1>, <p>, …]]></tt>
 311         sont <i>block</i> par défaut)</td></tr>
 312         <tr><td>inline-block</td><td>positionné comme <i>inline</i>
 313         mais la taille peut être modifiée comme pour <i>block</i></td></tr>
 314
 315       </table>
 316     </div>
 317     <div class="sws-slide">
 318       <h1>Modes d'affichage (exemples)</h1>
 319       <div>
 320         <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
 321           <tt>a { display: inline; … } </tt>
 322         </div>
 323         <div style="width:50%;float:left;">
 324           Le <span style="border:solid 1pt
 325           blue;color:blue;text-decoration:underline;">lien 1</span>,
 326           le <span style="border:solid 1pt
 327           blue;color:blue;text-decoration:underline;">lien 2</span> et
 328           le <span style="border:solid 1pt
 329           blue;color:blue;text-decoration:underline;">lien 3</span>.
 330         </div>
 331       </div>
 332       <div >
 333         <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
 334           <tt>a { display: block; … } </tt>
 335         </div>
 336         <div style="width:50%;float:left;">
 337           Le <span style="display:block;border:solid 1pt
 338           blue;color:blue;text-decoration:underline;">lien 1</span>,
 339           le <span style="display:block;border:solid 1pt
 340           blue;color:blue;text-decoration:underline;">lien 2</span> et
 341           le <span style="display:block;border:solid 1pt
 342           blue;color:blue;text-decoration:underline;">lien 3</span>.
 343         </div>
 344       </div>
 345       <div>
 346         <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
 347           <code>a { display: inline-block;
 348     width: 4em;
 349     height: 2em;
 350   … } </code>
 351         </div>
 352         <div style="width:50%;float:left;">
 353           Le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
 354           blue;color:blue;text-decoration:underline;">lien 1</span>,
 355           le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
 356           blue;color:blue;text-decoration:underline;">lien 2</span> et
 357           le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
 358           blue;color:blue;text-decoration:underline;">lien 3</span>.
 359         </div>
 360       </div>
 361     </div>
 362     <div class="sws-slide">
 363       <h1>Positionnement</h1>
 364       <p>Le type de positionnement est donné par la
 365       propriété <em>position</em></p>
 366       <table class="desc">
 367         <tr><td>static</td><td>positionnement « automatique
 368         » </td></tr>
 369         <tr><td>fixed</td><td>positionnement par rapport à la fenêtre
 370         du navigateur (la boîte est supprimée du flot)</td></tr>
 371         <tr><td>relative</td><td>positionnement « relatif » par
 372         rapport à la position normale</td></tr>
 373         <tr><td style="width:5em;">absolute</td><td>positionnement « absolu » par rapport
 374         à l'ancêtre le plus proche qui n'est pas <i>static</i></td></tr>
 375       </table>
 376       <p>Pour <tt>fixed</tt>, <tt>relative</tt> et <tt>absolute</tt>,
 377       les propriétés <tt>top</tt>, <tt>bottom</tt>, <tt>left</tt>
 378       et <tt>right</tt> dénotent les décalages respectifs.
 379       </p>
 380     </div>
 381     <div class="sws-slide">
 382 <span style="position:absolute;right:10pt;top:10pt;color:#0a2">fixed
 383       (right:10pt,top:10pt)</span>
 384       <h1>Positionnement (exemple)</h1>
 385       <div>
 386         <div style="45%;margin:0 4%;float:left;"><code>
 387 <span style="color:#02a">  a { position: static;
 388     … }</span>
 389 <span style="color:#0a2">  a { position: fixed;
 390     right:10pt;
 391     top: 10pt;
 392
 393  }
 394 </span>
 395 </code></div>
 396         <div style="width:50%;"><code>
 397 <span style="color:#a20">  a { position: relative;
 398     left: 10pt;
 399     bottom: -5pt;
 400     … }</span>
 401 <span style="color:#a2a">  a { position:absolute;
 402     right:0pt;
 403     bottom: 10pt;
 404   }
 405 </span></code>
 406         </div>
 407       </div>
 408 <p><code><![CDATA[  <ul style="position:relative;"><li>…</li> …</ul>]]></code></p>
 409 <ul style="position:relative;float:right;background:#ddd;">
 410   <li>Positionnement <span style="position:static;color:#02a">static</span></li>
 411   <li>Positionnement </li>
 412   <li>Positionnement <span style="position:relative;left:10pt;bottom:-5pt;color:#a20">relative
 413       (left:10pt,bottom:-5pt)</span></li>
 414   <li>Positionnement <span style="position:absolute;right:0pt;bottom:10pt;color:#a2a">absolute
 415       (right:10pt,bottom:10pt)</span></li>
 416
 417 </ul>
 418     </div>
 419     <h1>Autres propriétés</h1>
 420     <div class="sws-slide">
 421       <h1>Couleurs</h1>
 422       <p>Les couleurs peuvent être données:</p>
 423       <ul>
 424         <li>par nom
 425         symbolique: <span style="color:red">red</span>,
 426           <span style="color:blue">blue</span>,
 427           <span style="color:purple">purple</span>,
 428         …</li>
 429         <li>en
 430         hexadécimal: <tt>#<span style="color:red">xx</span><span style="color:green">yy</span><span style="color:blue">zz</span></tt>, avec
 431         <tt>00 ≤ xx,yy,zz ≤ ff</tt></li>
 432         <li>en
 433         décimal: <tt>rgb(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>)</tt>,
 434         avec         <tt>0 ≤ x,y,z ≤ 255</tt></li>
 435         <li class="css3">en
 436         décimal avec
 437         transparence: <tt >rgba(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>,
 438         a)</tt>,
 439         avec         <tt>0 ≤ x,y,z ≤ 255</tt> et <tt>0 ≤ a ≤ 1 </tt></li>
 440       </ul>
 441     </div>
 442     <div class="sws-slide">
 443       <h1>Propriétés du texte</h1>
 444       <p>Certaines propriétés permettent d'alterer le rendu du texte
 445       d'un élément</p>
 446       <table class="desc">
 447         <tr><td>direction</td><td><tt>ltr</tt> ou <tt>rtl</tt>
 448         (orientation du texte)</td></tr>
 449         <tr> <td>text-transform</td> <td><tt>capitalize</tt>, <tt>uppercase</tt>, <tt>lowercase</tt>
 450         </td></tr>
 451         <tr> <td>text-decoration</td> <td><tt>underline</tt>, <tt>overline</tt>, <tt>line-through</tt> </td></tr>
 452         <tr> <td>text-align</td> <td><tt>left</tt>, <tt>right</tt>, <tt>center</tt>, <tt>justify</tt></td></tr>
 453       <tr><td>text-indent</td> <td><tt>longueur du retrait de paragraphe</tt></td></tr>
 454       </table>
 455     </div>
 456     <div class="sws-slide">
 457       <h1>Propriétés de la police</h1>
 458       <table class="desc">
 459         <tr><td>font-family</td><td>liste de nom de polices séparées
 460         par des virgules (<tt>Helvetica, sans, "Times New Roman"</tt>)</td></tr>
 461         <tr> <td>font-style</td> <td><tt>normal</tt>, <tt>italic</tt>    </td></tr>
 462         <tr> <td>font-weight</td> <td><tt>normal</tt>, <tt>lighter</tt>, <tt>bold</tt>, <tt>bolder</tt> </td></tr>
 463         <tr> <td style="width:6.5em;">font-size</td> <td> soit une longueur
 464         soit <tt>xx-small</tt>, <tt>x-small</tt>, <tt>small</tt>, <tt>medium</tt>,
 465             <tt>large</tt>, <tt>x-large</tt>, <tt>xx-large</tt>
 466 </td></tr>
 467       </table>
 468       <p class="css3" >On peut aussi spécifier un descripteur de
 469       police</p>
 470       <code>
 471         @font-face {
 472           font-family: Toto;
 473           src: url(toto.ttf);
 474         }
 475         a { font-family: Toto; }
 476       </code>
 477     </div>
 478     <h1>Selecteurs</h1>
 479     <div class="sws-slide">
 480       <h1>Selecteurs</h1>
 481       <p>On peut sélectionner finement les éléments auxquels un style
 482       s'applique</p>
 483             <table class="desc">
 484         <tr><td><tt>x</tt></td><td>tous les éléments dont la balise
 485         est <tt>x</tt></td></tr>
 486         <tr> <td><tt>.foo</tt></td> <td>tous les éléments dont
 487         l'attribut <tt>class</tt> vaut <tt>foo</tt></td></tr>
 488         <tr><td><tt>#foo</tt></td><td>l'élément dont l'attribut
 489         <tt>id</tt> vaut <tt>foo</tt> (les <tt>id</tt> doivent être uniques)</td></tr>
 490         <tr> <td><tt>X Y</tt></td> <td>tous les éléments
 491         selectionnés par <tt>Y</tt> qui sont des descendants d'éléments
 492         sélectionnés par <tt>X</tt></td></tr>
 493         <tr> <td><tt>X &gt; Y</tt></td> <td>tous les éléments dont
 494         selectionné par <tt>Y</tt> qui sont des fils d'éléments
 495         sélectionnés par <tt>X</tt></td></tr>
 496         <tr><td style="width:7em;"><tt>a:visited</tt></td><td>les liens déjà
 497         visités</td></tr>
 498         <tr><td><tt>a:link</tt></td><td>les liens non
 499         visités</td></tr>
 500         <tr><td><tt>X:hover</tt></td><td>élément selectionné
 501         par <tt>X</tt> et survollé par la souris</td></tr>
 502       </table>
 503             <code>           div.foo ul li a:visited { color: red; } </code>
 504     </div>
 505
 506 <div class="sws-slide">
 507   <h1>exemple : menu dépliable</h1>
 508   <code><![CDATA[
 509   <ul class="menu">
 510     <li>Entrée 1
 511        <ul class="sous-menu"> <li>Sous-entrée 1.1 </li>
 512          <li>Sous-entrée 1.2 </li>
 513          <li>Sous-entrée 1.3 </li>
 514        </ul>
 515     </li>
 516     <li>Entrée 2
 517        <ul class="sous-menu"> <li>Sous-entrée 2.1 </li>
 518          <li>Sous-entrée 2.2 </li>
 519          <li>Sous-entrée 2.3 </li>
 520        </ul>
 521     </li>
 522   </ul>
 523 ]]></code>
 524 </div>
 525 <div class="sws-slide">
 526   <h1>Analyse</h1>
 527   <p>Pour que le ménu soit « dépliable » lors du survol de la souris,
 528   on souhaite que : </p>
 529   <ul>
 530     <li>Par défaut, les éléments de sous-menu soient cachés
 531     (<tt>display : none</tt>)</li>
 532     <li>Les éléments se trouvant sous un élément survolé
 533     (<tt>hover</tt>) soient visibles (<tt>display : block</tt>)
 534     </li>
 535   </ul>
 536 </div>
 537 <div class="sws-slide">
 538   <h1>exemple : menu dépliable (démo)</h1>
 539
 540   <ul class="menu">
 541     <li>Entrée 1
 542        <ul class="sous-menu"> <li>Sous-entrée 1.1 </li>
 543          <li>Sous-entrée 1.2 </li>
 544          <li>Sous-entrée 1.3 </li>
 545        </ul>
 546     </li>
 547     <li>Entrée 2
 548        <ul class="sous-menu"> <li>Sous-entrée 2.1 </li>
 549          <li>Sous-entrée 2.2 </li>
 550          <li>Sous-entrée 2.3 </li>
 551        </ul>
 552     </li>
 553
 554   </ul>
 555 </div>
 556 <div class="sws-slide">
 557   <h1>Style CSS du menu </h1>
 558 <p><code>
 559     li { padding: 10pt 0pt 10pt 0pt;
 560          display:block;
 561          background:orange;
 562          color:blue;
 563     }
 564     .sous-menu { display : none; }
 565
 566     ul.menu > li:hover ul.sous-menu { display: block; }
 567     ul.menu > li:hover ul.sous-menu > li {
 568                                     background:blue;
 569                                     color:orange;
 570     }
 571 </code>
 572 </p>
 573 </div>
 574 <div class="sws-slide">
 575   <h1>Priorité d'application des règles (cascade)</h1>
 576   <p>Les règles sont appliquées dans l'ordre suivant : </p>
 577   <ul>
 578     <li>On applique toutes les règles des fichiers CSS référencés,
 579     dans l'ordre. Si plusieurs règles sont valides, elles sont
 580     appliquées dans l'ordre (en écrasant les comportement précédents,
 581     s'ils portent sur les mêmes attributs)</li>
 582     <li>Puis on applique les règles se trouvant dans
 583     l'élément <tt>style</tt> du fichier HTML courant</li>
 584     <li>Puis on applique enfin les règles se trouvant dans
 585     l'attribut <tt>style</tt></li>
 586   </ul>
 587 </div>
 588 <div class="sws-slide">
 589 <h1><tt>z-index</tt></h1>
 590 <p>Il arrive que certaines boites se recouvrent : </p>
 591 <div style="position:relative;margin-left:30pt;height:200pt;">
 592   <div style="position:absolute;top:0pt;left:0pt;background:red;
 593   border: 5pt solid blackl;width:150pt; height:150pt;">
 594     Du texte recouvert
 595   </div>
 596   <div style="position:absolute;top:10pt;left:10pt;background:blue;
 597   border: 5pt solid blackl;width:150pt; height:150pt;">
 598   </div>
 599 </div>
 600 <p style="position:relative;">On peut utiliser la propriété <tt>z-index</tt> pour définir l'ordre
 601   d'empilement (plus elle est élevée, plus la boite est en avant plan)
 602 </p>
 603 <div style="position:relative;margin-left:30pt;height:200pt">
 604   <div style="position:absolute;top:0pt;left:0pt;background:red;z-index:2;
 605   border: 5pt solid blackl;width:150pt; height:150pt;">
 606     Du texte recouvert
 607   </div>
 608   <div style="position:absolute;top:10pt;left:10pt;background:blue;
 609   border: 5pt solid blackl;width:150pt; height:150pt;">
 610   </div>
 611 </div>
 612 </div>
 613 <h1>requête <tt>media-type</tt></h1>
 614 <div class="sws-slide">
 615   <h1>Différents styles pour différents affichages</h1>
 616   <p>On peut charger un style CSS de manière conditionnelle grace à
 617     l'attribut <tt>media</tt> de la balise <tt>link</tt>.
 618     La valeur de l'attribut est une <a>formule logique</a> où l'on
 619     peut tester le type de support d'affichage ainsi que ces
 620     caractéristiques physiques :
 621   </p>
 622   <code style="font-size:75%;">  <![CDATA[
 623     <link rel="stylesheet" type="text/css" href="style1.css" media="all" />
 624     <link rel="stylesheet" type="text/css" href="style2.css" media="print" />
 625     <link rel="stylesheet" type="text/css" href="style3.css" media="screen and landscape" />
 626     <link rel="stylesheet" type="text/css" href="style4.css" media="screen and min-width:480px" />
 627     <link rel="stylesheet" type="text/css" href="style5.css" media="screen and max-width:479px" />
 628 ]]>  </code>
 629 <p>Cela permet d'appliquer des styles spécifiques lors de l'impression
 630   d'une page ou pour des terminaux mobiles (ayant une petite taille
 631   d'écran) ou de changer de style si l'orientation de l'écran est modifiée.</p>
 632 </div>
 633 <div class="sws-slide">
 634   <h1>Gestion du débordement</h1>
 635   <p>L'attribut <tt>overflow</tt> permet de gérer le débordement. Il
 636   peut prendre les valeurs <tt>visible</tt>, <tt>hidden</tt> et <tt>auto</tt>
 637   : </p>
 638   <div style="width:30%;float:left;overflow:visible; height:100pt;background:#ffa;" >
 639 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 640 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 641 minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 642 aliquip ex ea commodo consequat. Duis aute irure dolor in
 643 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 644 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 645 culpa qui officia deserunt mollit anim id est laborum.
 646   </div>
 647   <div style="width:30%;float:left;overflow:hidden; height:100pt;background:#faf;" >
 648 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 649 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 650 minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 651 aliquip ex ea commodo consequat. Duis aute irure dolor in
 652 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 653 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 654 culpa qui officia deserunt mollit anim id est laborum.
 655   </div>
 656   <div style="width:30%;float:left;overflow:auto; height:100pt;background:#aff;" >
 657 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 658 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 659 minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 660 aliquip ex ea commodo consequat. Duis aute irure dolor in
 661 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 662 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 663 culpa qui officia deserunt mollit anim id est laborum.
 664   </div>
 665
 666 </div>
 667   </body>
 668 </html>