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 ul.menu li { padding: 10pt 0pt 10pt 0pt;
30 .sous-menu { display : none; }
31 ul.menu > li:hover ul.sous-menu { display: block;
33 ul.menu > li:hover ul.sous-menu > li {
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;
43 //Ensures that we load SWS at the very end, after MathJax has
46 $(window).load(SWS.Presentation.init);
50 <a href="unix_prog_web_04.xhtml" class="sws-previous"/>
52 <div class="sws-slide sws-cover sws-option-nofooter">
53 <h1>Unix et Programmation Web</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>
59 <div class="sws-slide">
60 <h1>Cascading Style Sheets (CSS)</h1>
64 Langage permettant de décrire le <em>style graphique</em>
69 <p>On peut appliquer un style CSS</p>
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>
77 balise <tt><![CDATA[<head>...</head>]]></tt>).
79 <li>À un ensemble de pages en référençant un fichier de style
80 dans chacune des pages
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>]]>
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>
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>
99 <div class="sws-slide">
100 <h1>L'élément <tt>style</tt></h1>
101 <code><![CDATA[ <html>
105 ]]> <em>a { color: red; }</em>
109 <a href="…">Lien 1</a> <a href="…">Lien 2</a>
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
116 <a href="…" style="color:red;text-decoration:underline;">Lien 2
119 <p>Inconvénient : local à une page</p>
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>
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>
132 ]]><em><link href="style.css" type="text/css" rel="stylesheet" /></em>
137 <p class="sws-pause">Modifications & déploiement aisé</p>
139 <div class="sws-slide">
141 <p>Une <em>propriété</em> CSS est définie en utilisant la
144 <p style="text-align:center"><tt> nom_prop : val_prop
147 <li>Si on utilise l'attribut <tt>style</tt> d'un
149 <![CDATA[<a href="…" style="]]><em>color:red;border-style:solid;border:1pt;</em><![CDATA[">Lien 1</a>]]>
152 <li>Si on utilise un fichier <tt>.css</tt> ou une feuille de
159 h1 { /* Le style des titres de niveau 1 */
160 text-decoration: underline;
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>
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
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
195 <div class="sws-slide">
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:
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;
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
215 <i>padding</i> (ajustement)<br/>
216 <span style="border:dotted 2pt black;
219 display:inline-block;
223 <span style="color:red;
227 text-decoration:underline;
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/>↓
240 <script type="text/javascript">
242 return $(e).children("*").addBack()
245 all(e).css('visibility', 'hidden');
248 all(e).css('visibility', 'visible');
250 SWS.Presentation.registerCallback("0", function(c) {
251 hide(".b0");hide("#b1"); hide("#b2"); hide("#b3");
254 SWS.Presentation.registerCallback("1", function(c) {
255 hide(".b0");hide("#b1"); hide("#b2"); show("#b3");
257 SWS.Presentation.registerCallback("2", function(c) {
258 hide(".b0");hide("#b1"); show("#b2"); show("#b3");
260 SWS.Presentation.registerCallback("3", function(c) {
261 hide(".b0");show("#b1"); show("#b2"); show("#b3");
263 SWS.Presentation.registerCallback("4", function(c) {
264 show(".b0");show("#b1"); show("#b2"); show("#b3");
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>
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
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>
282 <code style="font-size:smaller;"> span {
283 padding:10pt 20pt 5pt 0pt;
286 border-color:red blue green;
287 border-style:solid dotted;
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
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:
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>
317 <div class="sws-slide">
318 <h1>Modes d'affichage (exemples)</h1>
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>
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>.
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>
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>.
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;
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>.
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>
367 <tr><td>static</td><td>positionnement « automatique
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>
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.
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>
386 <div style="45%;margin:0 4%;float:left;"><code>
387 <span style="color:#02a"> a { position: static;
389 <span style="color:#0a2"> a { position: fixed;
396 <div style="width:50%;"><code>
397 <span style="color:#a20"> a { position: relative;
401 <span style="color:#a2a"> a { position:absolute;
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>
419 <h1>Autres propriétés</h1>
420 <div class="sws-slide">
422 <p>Les couleurs peuvent être données:</p>
425 symbolique: <span style="color:red">red</span>,
426 <span style="color:blue">blue</span>,
427 <span style="color:purple">purple</span>,
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>
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>
437 transparence: <tt >rgba(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>,
439 avec <tt>0 ≤ x,y,z ≤ 255</tt> et <tt>0 ≤ a ≤ 1 </tt></li>
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
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>
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>
456 <div class="sws-slide">
457 <h1>Propriétés de la police</h1>
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>
468 <p class="css3" >On peut aussi spécifier un descripteur de
475 a { font-family: Toto; }
479 <div class="sws-slide">
481 <p>On peut sélectionner finement les éléments auxquels un style
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 > 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à
498 <tr><td><tt>a:link</tt></td><td>les liens non
500 <tr><td><tt>X:hover</tt></td><td>élément selectionné
501 par <tt>X</tt> et survollé par la souris</td></tr>
503 <code> div.foo ul li a:visited { color: red; } </code>
506 <div class="sws-slide">
507 <h1>exemple : menu dépliable</h1>
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>
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>
525 <div class="sws-slide">
527 <p>Pour que le ménu soit « dépliable » lors du survol de la souris,
528 on souhaite que : </p>
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>)
537 <div class="sws-slide">
538 <h1>exemple : menu dépliable (démo)</h1>
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>
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>
556 <div class="sws-slide">
557 <h1>Style CSS du menu </h1>
559 li { padding: 10pt 0pt 10pt 0pt;
564 .sous-menu { display : none; }
566 ul.menu > li:hover ul.sous-menu { display: block; }
567 ul.menu > li:hover ul.sous-menu > li {
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>
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>
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;">
596 <div style="position:absolute;top:10pt;left:10pt;background:blue;
597 border: 5pt solid blackl;width:150pt; height:150pt;">
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)
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;">
608 <div style="position:absolute;top:10pt;left:10pt;background:blue;
609 border: 5pt solid blackl;width:150pt; height:150pt;">
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 :
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" />
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>
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>
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.
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.
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.