prog_internet/prog_internet_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
  26     <script type="text/javascript">
  27       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
  28       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
  29       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
  30
  31       //Ensures that we load SWS at the very end, after MathJax has
  32       //been initialized
  33
  34       $(window).load(SWS.Presentation.init);
  35     </script>
  36   </head>
  37   <body>
  38     <a href="prog_internet_04.xhtml" class="sws-previous"/>
  39
  40     <div class="sws-slide sws-cover sws-option-nofooter">
  41       <h1>Programmation Internet</h1>
  42       <h1>Cours 5</h1>
  43       <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
  44       <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
  45     </div>
  46     <h1>Introduction</h1>
  47     <div class="sws-slide">
  48       <h1>Cascading Style Sheets (CSS)</h1>
  49       <table class="desc">
  50         <tr>
  51           <td >CSS</td> <td>
  52             Langage permettant de décrire le <em>style graphique</em>
  53             d'une page HTML
  54           </td>
  55         </tr>
  56       </table>
  57       <p>On peut appliquer un style CSS</p>
  58       <ul>
  59         <li> À un élément en
  60         utilisant <em>l'attribut <code>style</code></em></li>
  61         <li> À une page en utilisant
  62         l'élément <em><code><![CDATA[ <style>...</style> ]]></code></em>
  63                                                           dans l'en-tête
  64         du document (dans la
  65         balise <code><![CDATA[<head>...</head>]]></code>).
  66                                                  </li>
  67         <li>À un ensemble de pages en référençant un fichier de style
  68         dans chacune des pages
  69         </li>
  70       </ul>
  71     </div>
  72     <div class="sws-slide">
  73       <h1>L'attribut <tt>style</tt></h1>
  74       <code> <![CDATA[ <a href="http://www.u-psud.fr" style="]]><em>color:red</em><![CDATA[">Un lien</a>]]>
  75       </code>
  76       <p>Apperçu:      </p>
  77       <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
  78        <a href="http://www.u-psud.fr" style="color:red;text-decoration:underline;">Un lien</a>
  79       </p>
  80       <p class="sws-pause">Inconvénients :</p>
  81       <ul> <li>il faut copier l'attribut
  82       style pour tous les liens de la page</li>
  83         <li>modification de tous les éléments difficiles</li>
  84       </ul>
  85     </div>
  86
  87     <div class="sws-slide">
  88       <h1>L'élément <tt>style</tt></h1>
  89       <code><![CDATA[  <html>
  90     <head>
  91        <title>…</title>
  92        <style>
  93 ]]>       <em>a { color: red; }</em>
  94 <![CDATA[      </style>
  95     </head>
  96     <body>
  97       <a href="…">Lien 1</a> <a href="…">Lien 2</a>
  98     </body>
  99   </html>]]></code>
 100       <p>Apperçu :</p>
 101       <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
 102        <a href="…" style="color:red;text-decoration:underline;">Lien
 103        1</a>
 104        <a href="…" style="color:red;text-decoration:underline;">Lien 2
 105        </a>
 106       </p>
 107       <p>Inconvénient : local à une page</p>
 108     </div>
 109     <div class="sws-slide">
 110       <h1>Fichier <tt>.css</tt> séparé</h1>
 111       <p>Fichier <tt>style.css</tt>:</p>
 112       <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
 113         <code >a { color: red; }</code>
 114       </p>
 115       <p>Fichier <tt>test.html</tt>:</p>
 116       <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
 117         <code >  <![CDATA[<html>
 118     <head>
 119     …
 120     ]]><em>&lt;link href="style.css" type="text/css" rel="stylesheet" /&gt;</em>
 121 <![CDATA[    </head>
 122     …
 123   </html>]]></code>
 124       </p>
 125       <p class="sws-pause">Modifications &amp; déploiement aisé</p>
 126     </div>
 127     <div class="sws-slide">
 128       <h1>Syntaxe</h1>
 129       <p>Une <em>propriété</em> CSS est définie en utilisant la
 130       syntaxe:
 131       </p>
 132       <p style="text-align:center"><tt> nom_prop : val_prop
 133       ; </tt></p>
 134       <ul>
 135         <li>Si on utilise l'attribut <tt>style</tt> d'un
 136         élément:<code>
 137  <![CDATA[<a href="…" style="]]><em>color:red;border-style:solid;border:1pt;</em><![CDATA[">Lien 1</a>]]>
 138           </code>
 139         </li>
 140         <li>Si on utilise un fichier <tt>.css</tt> ou une feuille de
 141         style:<code>
 142   a {
 143          <em>color : red;
 144          border-style: solid;
 145          border: 1pt;</em>
 146     }
 147   h1 {   /* Le style des titres de niveau 1 */
 148          text-decoration: underline;
 149          color: green;
 150      }
 151 </code></li>
 152       </ul>
 153     </div>
 154 <h1>Boîtes</h1>
 155     <div class="sws-slide">
 156       <h1> Unités de longueur</h1>
 157       <p>CSS permet de spécifier des longueurs comme valeurs de
 158       certaines propriétés (position et taille des éléments, épaisseur
 159       des bordures, …). Les longueurs <em>doivent</em> comporter une
 160       unité. Les unités reconnues sont:</p>
 161       <table class="desc">
 162         <tr><td style="width:3em" >px</td> <td>pixel</td> </tr>
 163         <tr><td>in</td> <td>pouce (2,54cm)</td> </tr>
 164         <tr><td>cm</td> <td>centimètre</td> </tr>
 165         <tr><td>mm</td> <td>millimètre</td> </tr>
 166         <tr><td>pt</td> <td>point (1/72<up>ème</up> de pouce, 0,35mm) </td></tr>
 167         <tr><td>pc</td> <td>pica (12 points)</td></tr>
 168         <tr><td>em</td> <td>facteur de la largeur d'un caractère de la police
 169         courante</td></tr>
 170         <tr><td>ex</td> <td>facteur de la hauteur d'un caractère « x »
 171         de la police courante</td></tr>
 172         <tr><td>%</td> <td>pourcentage d'une valeur particulière
 173         (définie par propriété)</td></tr>
 174         <tr><td >vh</td> <td  class="css3"><i>viewport height</i> (% de la
 175         hauteur de la partie visible de la page)</td></tr>
 176         <tr  style="background:white"><td>vw</td> <td  class="css3"><i>viewport
 177          width</i> (% de la largeur de la partie visible de la
 178          page)</td></tr>
 179       </table>
 180     </div>
 181
 182
 183     <div class="sws-slide">
 184       <h1>Boîte</h1>
 185
 186       <p >Chaque élément de la page HTML possède une <em>boîte
 187       rectangulaire</em> qui délimite le contenu de l'élément:
 188       </p>
 189       <div style="text-align:center;vertical-align:text-bottom;">
 190         <span class="b0" style="color:black;">← <span style="padding:0 24vh 0
 191         25vh;"> width </span><span style="padding-right:10vh">→</span><br/>
 192         <span id="b1" style="display:inline-block;
 193                      color:black;
 194                      padding:0 4vh 4vh 4vh;
 195                      border:dotted 2pt black;"><i>margin</i> (marge)<br/>
 196           <span  id="b2" style="display:inline-block;
 197                                 padding:0 4vh 4vh 4vh;
 198                                 color:white;background:black">
 199             <i>border</i> (bordure)<br/>
 200             <span  id="b3" style="display:inline-block;padding:0 3vh 3vh 3vh;
 201                                   background:white;color:black;border:dotted
 202                                   2pt black">
 203               <i>padding</i> (ajustement)<br/>
 204               <span style="border:dotted 2pt black;
 205                            background:white;
 206                            position:relative;
 207                            display:inline-block;
 208                            font-size:15vh;
 209                            width:2.8em;
 210                            height:12vh;">
 211                 <span style="color:red;
 212                              top:-5vh;
 213                              left:0vh;
 214                              position:absolute;
 215                              text-decoration:underline;
 216                              padding:0 0 0 0;
 217                              margin: 0 0 0 0;
 218                              ">Lien 1
 219                 </span>
 220               </span>
 221             </span>
 222           </span>
 223         </span>
 224         </span><span  class="b0" style="color:black;vertical-align:top;display:inline-block;font-size:large;height:100%;">↑<br/><br/><br/><br/>
 225           height<br/><br/><br/><br/>↓
 226         </span>
 227       </div>
 228       <script type="text/javascript">
 229         function all(e) {
 230         return $(e).children("*").addBack()
 231         }
 232         function hide(e) {
 233         all(e).css('visibility', 'hidden');
 234         };
 235         function show(e) {
 236         all(e).css('visibility', 'visible');
 237         }
 238         SWS.Presentation.registerCallback("0", function(c) {
 239         hide(".b0");hide("#b1"); hide("#b2"); hide("#b3");
 240
 241         });
 242         SWS.Presentation.registerCallback("1", function(c) {
 243         hide(".b0");hide("#b1"); hide("#b2"); show("#b3");
 244         });
 245         SWS.Presentation.registerCallback("2", function(c) {
 246         hide(".b0");hide("#b1"); show("#b2"); show("#b3");
 247         });
 248         SWS.Presentation.registerCallback("3", function(c) {
 249         hide(".b0");show("#b1"); show("#b2"); show("#b3");
 250         });
 251         SWS.Presentation.registerCallback("4", function(c) {
 252         show(".b0");show("#b1"); show("#b2"); show("#b3");
 253         });
 254       </script>
 255       <p class="sws-onframe-5">La <em>taille t du contenu</em> est calculée pour que:<br/>
 256         <tt>(height|width) = padding + margin + border + t</tt>
 257       </p>
 258     </div>
 259     <div class="sws-slide">
 260       <h1>Marge, bordure, ajustement</h1>
 261       <p>On peut spécifier jusqu'à 4 valeurs:</p>
 262       <ul><li>1 valeur: toutes les dimensions égales à cette
 263       valeur</li>
 264         <li>2 valeurs: haut et bas égal à la première valeur, gauche
 265           et droite égale à la deuxième</li>
 266         <li>3 valeurs: haut à la première valeur, gauche
 267           et droite égale à la deuxième, bas égal à la troisième</li>
 268         <li>4 valeurs: haut, droit, bas, gauche</li>
 269       </ul>
 270       <code style="font-size:smaller;">  span {
 271       padding:10pt 20pt 5pt 0pt;
 272       margin:10pt 5pt;
 273       border-width:3pt;
 274       border-color:red blue green;
 275       border-style:solid dotted;
 276     } </code>
 277       <div style="text-align:center;">Du <span style="padding:10pt
 278       20pt 5pt 0pt;margin:10pt 5pt;border-style:solid dotted;border-width:3pt;border-color:red blue green;">texte</span> dans une boite
 279       </div>
 280     </div>
 281     <div class="sws-slide">
 282       <h1>Modes d'affichage</h1>
 283       <p>La propriété <em><i>display</i></em> contrôle le mode
 284       d'affichage d'un élément:
 285       </p>
 286       <table class="desc">
 287         <tr><td>none</td><td>l'élément n'est pas dessiné et n'occupe
 288         pas d'espace</td></tr>
 289         <tr><td style="width:4em;">inline</td><td>l'élément est placé sur la ligne
 290         courante, dans le flot de texte. La taille du contenu (avec
 291         les marges, ajustements et bordures) dicte la
 292         taille de la boîte, <tt>height</tt> et <tt>width</tt> sont
 293         ignorés (<tt><![CDATA[<i>, <b>, <span>, <em>, …]]></tt>
 294         sont <i>inline</i> par défaut). </td></tr>
 295         <tr><td>block</td><td>l'élément est placé seul sur sa
 296         ligne. La taille est calculée automatiquement mais peut être
 297         modifiée par <tt>width</tt> et <tt>height</tt>
 298         (<tt><![CDATA[<div>, <h1>, <p>, …]]></tt>
 299         sont <i>block</i> par défaut)</td></tr>
 300         <tr><td>inline-block</td><td>positionné comme <i>inline</i>
 301         mais la taille peut être modifiée comme pour <i>block</i></td></tr>
 302
 303       </table>
 304     </div>
 305     <div class="sws-slide">
 306       <h1>Modes d'affichage (exemples)</h1>
 307       <div>
 308         <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
 309           <tt>a { display: inline; … } </tt>
 310         </div>
 311         <div style="width:50%;float:left;">
 312           Le <span style="border:solid 1pt
 313           blue;color:blue;text-decoration:underline;">lien 1</span>,
 314           le <span style="border:solid 1pt
 315           blue;color:blue;text-decoration:underline;">lien 2</span> et
 316           le <span style="border:solid 1pt
 317           blue;color:blue;text-decoration:underline;">lien 3</span>.
 318         </div>
 319       </div>
 320       <div >
 321         <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
 322           <tt>a { display: block; … } </tt>
 323         </div>
 324         <div style="width:50%;float:left;">
 325           Le <span style="display:block;border:solid 1pt
 326           blue;color:blue;text-decoration:underline;">lien 1</span>,
 327           le <span style="display:block;border:solid 1pt
 328           blue;color:blue;text-decoration:underline;">lien 2</span> et
 329           le <span style="display:block;border:solid 1pt
 330           blue;color:blue;text-decoration:underline;">lien 3</span>.
 331         </div>
 332       </div>
 333       <div>
 334         <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
 335           <code>a { display: inline-block;
 336     width: 4em;
 337     height: 2em;
 338   … } </code>
 339         </div>
 340         <div style="width:50%;float:left;">
 341           Le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
 342           blue;color:blue;text-decoration:underline;">lien 1</span>,
 343           le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
 344           blue;color:blue;text-decoration:underline;">lien 2</span> et
 345           le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
 346           blue;color:blue;text-decoration:underline;">lien 3</span>.
 347         </div>
 348       </div>
 349     </div>
 350     <div class="sws-slide">
 351       <h1>Positionnement</h1>
 352       <p>Le type de positionnement est donné par la
 353       propriété <em>position</em></p>
 354       <table class="desc">
 355         <tr><td>static</td><td>positionnement « automatique
 356         » </td></tr>
 357         <tr><td>fixed</td><td>positionnement par rapport à la fenêtre
 358         du navigateur (la boîte est supprimée du flot)</td></tr>
 359         <tr><td>relative</td><td>positionnement « relatif » par
 360         rapport à la position normale</td></tr>
 361         <tr><td style="width:5em;">absolute</td><td>positionnement « absolu » par rapport
 362         à l'ancêtre le plus proche qui n'est pas <i>static</i></td></tr>
 363       </table>
 364       <p>Pour <tt>fixed</tt>, <tt>relative</tt> et <tt>absolute</tt>,
 365       les propriétés <tt>top</tt>, <tt>bottom</tt>, <tt>left</tt>
 366       et <tt>right</tt> dénotent les décalages respectifs.
 367       </p>
 368     </div>
 369     <div class="sws-slide">
 370       <h1>Positionnement (exemple)</h1>
 371       <div>
 372         <div style="45%;margin:0 4%;float:left;"><code>
 373 <span style="color:#02a">  a { position: static;
 374     … }</span>
 375 <span style="color:#0a2">  a { position: fixed;
 376     right:10pt;
 377     top: 10pt;
 378   }</span></code></div>
 379         <div style="width:50%;float:left;"><code>
 380 <span style="color:#a20">  a { position: relative;
 381     left: 10pt;
 382     bottom: -5pt;
 383     … }</span>
 384 <span style="color:#a2a">  a { position:absolute;
 385     right:0pt;
 386     bottom: 10pt;
 387   }</span></code>
 388         </div><code><![CDATA[    <ul style="position:relative;"><li>…</li> …</ul>]]></code>
 389       </div><br/>
 390       <ul style="position:relative;float:right;background:#ddd;">
 391         <li>Positionnement <span style="position:static;color:#02a">static</span></li>
 392         <li>Positionnement <span style="position:fixed;right:10pt;top:10pt;color:#0a2">fixed
 393         (right:10pt,top:10pt)</span></li>
 394         <li>Positionnement <span style="position:relative;left:10pt;bottom:-5pt;color:#a20">relative
 395         (left:10pt,bottom:-5pt)</span></li>
 396         <li>Positionnement <span style="position:absolute;right:0pt;bottom:10pt;color:#a2a">absolute
 397         (right:10pt,bottom:10pt)</span></li>
 398
 399       </ul>
 400     </div>
 401     <h1>Autres propriétés</h1>
 402     <div class="sws-slide">
 403       <h1>Couleurs</h1>
 404       <p>Les couleurs peuvent être données:</p>
 405       <ul>
 406         <li>par nom
 407         symbolique: <span style="color:red">red</span>,
 408           <span style="color:blue">blue</span>,
 409           <span style="color:purple">purple</span>,
 410         …</li>
 411         <li>en
 412         hexadécimal: <tt>#<span style="color:red">xx</span><span style="color:green">yy</span><span style="color:blue">zz</span></tt>, avec
 413         <tt>00 ≤ xx,yy,zz ≤ ff</tt></li>
 414         <li>en
 415         décimal: <tt>rgb(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>)</tt>,
 416         avec         <tt>0 ≤ x,y,z ≤ 255</tt></li>
 417         <li class="css3">en
 418         décimal avec
 419         transparence: <tt >rgba(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>,
 420         a)</tt>,
 421         avec         <tt>0 ≤ x,y,z ≤ 255</tt> et <tt>0 ≤ a ≤ 1 </tt></li>
 422
 423       </ul>
 424     </div>
 425     <div class="sws-slide">
 426       <h1>Propriétés du texte</h1>
 427       <p>Certaines propriétés permettent d'alterer le rendu du texte
 428       d'un élément</p>
 429       <table class="desc">
 430         <tr><td>direction</td><td><tt>ltr</tt> ou <tt>rtl</tt>
 431         (orientation du texte)</td></tr>
 432         <tr> <td>text-transform</td> <td><tt>capitalize</tt>, <tt>uppercase</tt>, <tt>lowercase</tt>
 433         </td></tr>
 434         <tr> <td>text-decoration</td> <td><tt>underline</tt>, <tt>overline</tt>, <tt>line-through</tt> </td></tr>
 435         <tr> <td>text-align</td> <td><tt>left</tt>, <tt>right</tt>, <tt>center</tt>, <tt>justify</tt></td></tr>
 436       <tr><td>text-indent</td> <td><tt>longueur du retrait de paragraphe</tt></td></tr>
 437       </table>
 438     </div>
 439     <div class="sws-slide">
 440       <h1>Propriétés de la police</h1>
 441       <table class="desc">
 442         <tr><td>font-family</td><td>liste de nom de polices séparées
 443         par des virgules (<tt>Helvetica, sans, "Times New Roman"</tt>)</td></tr>
 444         <tr> <td>font-style</td> <td><tt>normal</tt>, <tt>italic</tt>    </td></tr>
 445         <tr> <td>font-weight</td> <td><tt>normal</tt>, <tt>lighter</tt>, <tt>bold</tt>, <tt>bolder</tt> </td></tr>
 446         <tr> <td style="width:6.5em;">font-size</td> <td> soit une longueur
 447         soit <tt>xx-small</tt>, <tt>x-small</tt>, <tt>small</tt>, <tt>medium</tt>,
 448             <tt>large</tt>, <tt>x-large</tt>, <tt>xx-large</tt>
 449 </td></tr>
 450       </table>
 451       <p class="css3" >On peut aussi spécifier un descripteur de
 452       police</p>
 453       <code>
 454         @font-face {
 455           font-family: Toto;
 456           src: url(toto.ttf);
 457         }
 458         a { font-family: Toto; }
 459       </code>
 460     </div>
 461     <h1>Selecteurs</h1>
 462     <div class="sws-slide">
 463       <h1>Selecteurs</h1>
 464       <p>On peut sélectionner finement les éléments auxquels un style
 465       s'applique</p>
 466             <table class="desc">
 467         <tr><td><tt>x</tt></td><td>tous les éléments dont la balise
 468         est <tt>x</tt></td></tr>
 469         <tr> <td><tt>.foo</tt></td> <td>tous les éléments dont
 470         l'attribut <tt>class</tt> vaut <tt>foo</tt></td></tr>
 471         <tr><td><tt>#foo</tt></td><td>l'élément dont l'attribut
 472         <tt>id</tt> vaut <tt>foo</tt> (les <tt>id</tt> doivent être uniques)</td></tr>
 473         <tr> <td><tt>X Y</tt></td> <td>tous les éléments
 474         selectionnés par <tt>Y</tt> qui sont des descendants d'éléments
 475         sélectionnés par <tt>X</tt></td></tr>
 476         <tr> <td><tt>X &gt; Y</tt></td> <td>tous les éléments dont
 477         selectionné par <tt>Y</tt> qui sont des fils d'éléments
 478         sélectionnés par <tt>X</tt></td></tr>
 479         <tr><td style="width:7em;"><tt>a:visited</tt></td><td>les liens déjà
 480         visités</td></tr>
 481         <tr><td><tt>a:link</tt></td><td>les liens non
 482         visités</td></tr>
 483         <tr><td><tt>X:hover</tt></td><td>élément selectionné
 484         par <tt>X</tt> et survollé par la souris</td></tr>
 485       </table>
 486             <code>           div.foo ul li a:visited { color: red; } </code>
 487     </div>
 488     </body>
 489 </html>