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"
5 <html xmlns="http://www.w3.org/1999/xhtml" >
9 <meta http-equiv="Content-Type"
10 content="text/html; charset=utf-8" />
11 <meta name="copyright"
12 content="Copyright © 2013 Kim Nguyễn" />
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>
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" />
24 <!-- Customize some templates and initialize -->
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;
31 //Ensures that we load SWS at the very end, after MathJax has
34 $(window).load(SWS.Presentation.init);
38 <a href="prog_internet_04.xhtml" class="sws-previous"/>
40 <div class="sws-slide sws-cover sws-option-nofooter">
41 <h1>Programmation Internet</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>
47 <div class="sws-slide">
48 <h1>Cascading Style Sheets (CSS)</h1>
52 Langage permettant de décrire le <em>style graphique</em>
57 <p>On peut appliquer un style CSS</p>
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>
65 balise <code><![CDATA[<head>...</head>]]></code>).
67 <li>À un ensemble de pages en référençant un fichier de style
68 dans chacune des pages
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>]]>
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>
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>
87 <div class="sws-slide">
88 <h1>L'élément <tt>style</tt></h1>
89 <code><![CDATA[ <html>
93 ]]> <em>a { color: red; }</em>
97 <a href="…">Lien 1</a> <a href="…">Lien 2</a>
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
104 <a href="…" style="color:red;text-decoration:underline;">Lien 2
107 <p>Inconvénient : local à une page</p>
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>
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>
120 ]]><em><link href="style.css" type="text/css" rel="stylesheet" /></em>
125 <p class="sws-pause">Modifications & déploiement aisé</p>
127 <div class="sws-slide">
129 <p>Une <em>propriété</em> CSS est définie en utilisant la
132 <p style="text-align:center"><tt> nom_prop : val_prop
135 <li>Si on utilise l'attribut <tt>style</tt> d'un
137 <![CDATA[<a href="…" style="]]><em>color:red;border-style:solid;border:1pt;</em><![CDATA[">Lien 1</a>]]>
140 <li>Si on utilise un fichier <tt>.css</tt> ou une feuille de
147 h1 { /* Le style des titres de niveau 1 */
148 text-decoration: underline;
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>
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
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
183 <div class="sws-slide">
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:
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;
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
203 <i>padding</i> (ajustement)<br/>
204 <span style="border:dotted 2pt black;
207 display:inline-block;
211 <span style="color:red;
215 text-decoration:underline;
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/>↓
228 <script type="text/javascript">
230 return $(e).children("*").addBack()
233 all(e).css('visibility', 'hidden');
236 all(e).css('visibility', 'visible');
238 SWS.Presentation.registerCallback("0", function(c) {
239 hide(".b0");hide("#b1"); hide("#b2"); hide("#b3");
242 SWS.Presentation.registerCallback("1", function(c) {
243 hide(".b0");hide("#b1"); hide("#b2"); show("#b3");
245 SWS.Presentation.registerCallback("2", function(c) {
246 hide(".b0");hide("#b1"); show("#b2"); show("#b3");
248 SWS.Presentation.registerCallback("3", function(c) {
249 hide(".b0");show("#b1"); show("#b2"); show("#b3");
251 SWS.Presentation.registerCallback("4", function(c) {
252 show(".b0");show("#b1"); show("#b2"); show("#b3");
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>
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
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>
270 <code style="font-size:smaller;"> span {
271 padding:10pt 20pt 5pt 0pt;
274 border-color:red blue green;
275 border-style:solid dotted;
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
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:
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>
305 <div class="sws-slide">
306 <h1>Modes d'affichage (exemples)</h1>
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>
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>.
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>
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>.
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;
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>.
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>
355 <tr><td>static</td><td>positionnement « automatique
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>
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.
369 <div class="sws-slide">
370 <h1>Positionnement (exemple)</h1>
372 <div style="45%;margin:0 4%;float:left;"><code>
373 <span style="color:#02a"> a { position: static;
375 <span style="color:#0a2"> a { position: fixed;
378 }</span></code></div>
379 <div style="width:50%;float:left;"><code>
380 <span style="color:#a20"> a { position: relative;
384 <span style="color:#a2a"> a { position:absolute;
388 </div><code><![CDATA[ <ul style="position:relative;"><li>…</li> …</ul>]]></code>
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>
401 <h1>Autres propriétés</h1>
402 <div class="sws-slide">
404 <p>Les couleurs peuvent être données:</p>
407 symbolique: <span style="color:red">red</span>,
408 <span style="color:blue">blue</span>,
409 <span style="color:purple">purple</span>,
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>
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>
419 transparence: <tt >rgba(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>,
421 avec <tt>0 ≤ x,y,z ≤ 255</tt> et <tt>0 ≤ a ≤ 1 </tt></li>
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
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>
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>
439 <div class="sws-slide">
440 <h1>Propriétés de la police</h1>
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>
451 <p class="css3" >On peut aussi spécifier un descripteur de
458 a { font-family: Toto; }
462 <div class="sws-slide">
464 <p>On peut sélectionner finement les éléments auxquels un style
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 > 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à
481 <tr><td><tt>a:link</tt></td><td>les liens non
483 <tr><td><tt>X:hover</tt></td><td>élément selectionné
484 par <tt>X</tt> et survollé par la souris</td></tr>
486 <code> div.foo ul li a:visited { color: red; } </code>