+++ /dev/null
-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
- >
-<html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>CSS</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2013 Kim Nguyễn" />
-
- <!-- Load jQuery -->
- <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
- <!-- Load the library -->
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
-
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
- <!-- Load a custom Theme, the class-element marks this style-sheet
- a "theme" that can be swtiched dynamicaly -->
- <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
-
- <!-- Customize some templates and initialize -->
- <style>
- ul.menu li { padding: 10pt 0pt 10pt 0pt;
- display:block;
- background:orange;
- color:blue;}
- .sous-menu { display : none; }
- ul.menu > li:hover ul.sous-menu { display: block;
- }
- ul.menu > li:hover ul.sous-menu > li {
- background:blue;
- color:orange;
- }
- </style>
- <script type="text/javascript">
- SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
- SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
- SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
-
- //Ensures that we load SWS at the very end, after MathJax has
- //been initialized
-
- $(window).load(SWS.Presentation.init);
- </script>
- </head>
- <body>
- <a href="unix_prog_web_04.xhtml" class="sws-previous"/>
-
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Unix et Programmation Web</h1>
- <h1>Cours 5</h1>
- <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
- <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
- </div>
- <h1>Introduction</h1>
- <div class="sws-slide">
- <h1>Cascading Style Sheets (CSS)</h1>
- <table class="desc">
- <tr>
- <td >CSS</td> <td>
- Langage permettant de décrire le <em>style graphique</em>
- d'une page HTML
- </td>
- </tr>
- </table>
- <p>On peut appliquer un style CSS</p>
- <ul>
- <li> À un élément en
- utilisant <em>l'attribut <tt>style</tt></em></li>
- <li> À une page en utilisant
- l'élément <em><tt><![CDATA[ <style>...</style> ]]></tt></em>
- dans l'en-tête
- du document (dans la
- balise <tt><![CDATA[<head>...</head>]]></tt>).
- </li>
- <li>À un ensemble de pages en référençant un fichier de style
- dans chacune des pages
- </li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>L'attribut <tt>style</tt></h1>
- <code> <![CDATA[ <a href="http://www.u-psud.fr" style="]]><em>color:red</em><![CDATA[">Un lien</a>]]>
- </code>
- <p>Apperçu: </p>
- <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
- <a href="http://www.u-psud.fr" style="color:red;text-decoration:underline;">Un lien</a>
- </p>
- <p class="sws-pause">Inconvénients :</p>
- <ul> <li>il faut copier l'attribut
- style pour tous les liens de la page</li>
- <li>modification de tous les éléments difficiles</li>
- </ul>
- </div>
-
- <div class="sws-slide">
- <h1>L'élément <tt>style</tt></h1>
- <code><![CDATA[ <html>
- <head>
- <title>…</title>
- <style>
-]]> <em>a { color: red; }</em>
-<![CDATA[ </style>
- </head>
- <body>
- <a href="…">Lien 1</a> <a href="…">Lien 2</a>
- </body>
- </html>]]></code>
- <p>Apperçu :</p>
- <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
- <a href="…" style="color:red;text-decoration:underline;">Lien
- 1</a>
- <a href="…" style="color:red;text-decoration:underline;">Lien 2
- </a>
- </p>
- <p>Inconvénient : local à une page</p>
- </div>
- <div class="sws-slide">
- <h1>Fichier <tt>.css</tt> séparé</h1>
- <p>Fichier <tt>style.css</tt>:</p>
- <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
- <code >a { color: red; }</code>
- </p>
- <p>Fichier <tt>test.html</tt>:</p>
- <p style="margin-left:5%;width:80%;margin-right:5%;border-width:1pt;border-style:solid">
- <code > <![CDATA[<html>
- <head>
- …
- ]]><em><link href="style.css" type="text/css" rel="stylesheet" /></em>
-<![CDATA[ </head>
- …
- </html>]]></code>
- </p>
- <p class="sws-pause">Modifications & déploiement aisé</p>
- </div>
- <div class="sws-slide">
- <h1>Syntaxe</h1>
- <p>Une <em>propriété</em> CSS est définie en utilisant la
- syntaxe:
- </p>
- <p style="text-align:center"><tt> nom_prop : val_prop
- ; </tt></p>
- <ul>
- <li>Si on utilise l'attribut <tt>style</tt> d'un
- élément:<code>
- <![CDATA[<a href="…" style="]]><em>color:red;border-style:solid;border:1pt;</em><![CDATA[">Lien 1</a>]]>
- </code>
- </li>
- <li>Si on utilise un fichier <tt>.css</tt> ou une feuille de
- style:<code>
- a {
- <em>color : red;
- border-style: solid;
- border: 1pt;</em>
- }
- h1 { /* Le style des titres de niveau 1 */
- text-decoration: underline;
- color: green;
- }
-</code></li>
- </ul>
- </div>
-<h1>Boîtes</h1>
- <div class="sws-slide">
- <h1> Unités de longueur</h1>
- <p>CSS permet de spécifier des longueurs comme valeurs de
- certaines propriétés (position et taille des éléments, épaisseur
- des bordures, …). Les longueurs <em>doivent</em> comporter une
- unité. Les unités reconnues sont:</p>
- <table class="desc">
- <tr><td style="width:3em" >px</td> <td>pixel</td> </tr>
- <tr><td>in</td> <td>pouce (2,54cm)</td> </tr>
- <tr><td>cm</td> <td>centimètre</td> </tr>
- <tr><td>mm</td> <td>millimètre</td> </tr>
- <tr><td>pt</td> <td>point (1/72<up>ème</up> de pouce, 0,35mm) </td></tr>
- <tr><td>pc</td> <td>pica (12 points)</td></tr>
- <tr><td>em</td> <td>facteur de la largeur d'un caractère de la police
- courante</td></tr>
- <tr><td>ex</td> <td>facteur de la hauteur d'un caractère « x »
- de la police courante</td></tr>
- <tr><td>%</td> <td>pourcentage d'une valeur particulière
- (définie par propriété)</td></tr>
- <tr><td >vh</td> <td class="css3"><i>viewport height</i> (% de la
- hauteur de la partie visible de la page)</td></tr>
- <tr style="background:white"><td>vw</td> <td class="css3"><i>viewport
- width</i> (% de la largeur de la partie visible de la
- page)</td></tr>
- </table>
- </div>
-
-
- <div class="sws-slide">
- <h1>Boîte</h1>
-
- <p >Chaque élément de la page HTML possède une <em>boîte
- rectangulaire</em> qui délimite le contenu de l'élément:
- </p>
- <div style="text-align:center;vertical-align:text-bottom;">
- <span class="b0" style="color:black;">← <span style="padding:0 24vh 0
- 25vh;"> width </span><span style="padding-right:10vh">→</span><br/>
- <span id="b1" style="display:inline-block;
- color:black;
- padding:0 4vh 4vh 4vh;
- border:dotted 2pt black;"><i>margin</i> (marge)<br/>
- <span id="b2" style="display:inline-block;
- padding:0 4vh 4vh 4vh;
- color:white;background:black">
- <i>border</i> (bordure)<br/>
- <span id="b3" style="display:inline-block;padding:0 3vh 3vh 3vh;
- background:white;color:black;border:dotted
- 2pt black">
- <i>padding</i> (ajustement)<br/>
- <span style="border:dotted 2pt black;
- background:white;
- position:relative;
- display:inline-block;
- font-size:15vh;
- width:2.8em;
- height:12vh;">
- <span style="color:red;
- top:-5vh;
- left:0vh;
- position:absolute;
- text-decoration:underline;
- padding:0 0 0 0;
- margin: 0 0 0 0;
- ">Lien 1
- </span>
- </span>
- </span>
- </span>
- </span>
- </span><span class="b0" style="color:black;vertical-align:top;display:inline-block;font-size:xx-large;height:100%;">↑<br/><br/><br/><br/>
- height<br/><br/><br/><br/>↓
- </span>
- </div>
- <script type="text/javascript">
- function all(e) {
- return $(e).children("*").addBack()
- }
- function hide(e) {
- all(e).css('visibility', 'hidden');
- };
- function show(e) {
- all(e).css('visibility', 'visible');
- }
- SWS.Presentation.registerCallback("0", function(c) {
- hide(".b0");hide("#b1"); hide("#b2"); hide("#b3");
-
- });
- SWS.Presentation.registerCallback("1", function(c) {
- hide(".b0");hide("#b1"); hide("#b2"); show("#b3");
- });
- SWS.Presentation.registerCallback("2", function(c) {
- hide(".b0");hide("#b1"); show("#b2"); show("#b3");
- });
- SWS.Presentation.registerCallback("3", function(c) {
- hide(".b0");show("#b1"); show("#b2"); show("#b3");
- });
- SWS.Presentation.registerCallback("4", function(c) {
- show(".b0");show("#b1"); show("#b2"); show("#b3");
- });
- </script>
- <p class="sws-onframe-5">La <em>taille t du contenu</em> est calculée pour que:<br/>
- <tt>(height|width) = padding + margin + border + t</tt>
- </p>
- </div>
- <div class="sws-slide">
- <h1>Marge, bordure, ajustement</h1>
- <p>On peut spécifier jusqu'à 4 valeurs:</p>
- <ul><li>1 valeur: toutes les dimensions égales à cette
- valeur</li>
- <li>2 valeurs: haut et bas égal à la première valeur, gauche
- et droite égale à la deuxième</li>
- <li>3 valeurs: haut à la première valeur, gauche
- et droite égale à la deuxième, bas égal à la troisième</li>
- <li>4 valeurs: haut, droit, bas, gauche</li>
- </ul>
- <code style="font-size:smaller;"> span {
- padding:10pt 20pt 5pt 0pt;
- margin:10pt 5pt;
- border-width:3pt;
- border-color:red blue green;
- border-style:solid dotted;
- } </code>
- <div style="text-align:center;">Du <span style="padding:10pt
- 20pt 5pt 0pt;margin:10pt 5pt;border-style:solid dotted;border-width:3pt;border-color:red blue green;">texte</span> dans une boite
- </div>
- </div>
- <div class="sws-slide">
- <h1>Modes d'affichage</h1>
- <p>La propriété <em><i>display</i></em> contrôle le mode
- d'affichage d'un élément:
- </p>
- <table class="desc">
- <tr><td>none</td><td>l'élément n'est pas dessiné et n'occupe
- pas d'espace</td></tr>
- <tr><td style="width:4em;">inline</td><td>l'élément est placé sur la ligne
- courante, dans le flot de texte. La taille du contenu (avec
- les marges, ajustements et bordures) dicte la
- taille de la boîte, <tt>height</tt> et <tt>width</tt> sont
- ignorés (<tt><![CDATA[<i>, <b>, <span>, <em>, …]]></tt>
- sont <i>inline</i> par défaut). </td></tr>
- <tr><td>block</td><td>l'élément est placé seul sur sa
- ligne. La taille est calculée automatiquement mais peut être
- modifiée par <tt>width</tt> et <tt>height</tt>
- (<tt><![CDATA[<div>, <h1>, <p>, …]]></tt>
- sont <i>block</i> par défaut)</td></tr>
- <tr><td>inline-block</td><td>positionné comme <i>inline</i>
- mais la taille peut être modifiée comme pour <i>block</i></td></tr>
-
- </table>
- </div>
- <div class="sws-slide">
- <h1>Modes d'affichage (exemples)</h1>
- <div>
- <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
- <tt>a { display: inline; … } </tt>
- </div>
- <div style="width:50%;float:left;">
- Le <span style="border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 1</span>,
- le <span style="border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 2</span> et
- le <span style="border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 3</span>.
- </div>
- </div>
- <div >
- <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
- <tt>a { display: block; … } </tt>
- </div>
- <div style="width:50%;float:left;">
- Le <span style="display:block;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 1</span>,
- le <span style="display:block;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 2</span> et
- le <span style="display:block;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 3</span>.
- </div>
- </div>
- <div>
- <div style="width:39%;margin:0 5%;border-style:solid; border-width:0 1pt 0 0;border-color:black;float:left;">
- <code>a { display: inline-block;
- width: 4em;
- height: 2em;
- … } </code>
- </div>
- <div style="width:50%;float:left;">
- Le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 1</span>,
- le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 2</span> et
- le <span style="display:inline-block;width:4em;height:2em;border:solid 1pt
- blue;color:blue;text-decoration:underline;">lien 3</span>.
- </div>
- </div>
- </div>
- <div class="sws-slide">
- <h1>Positionnement</h1>
- <p>Le type de positionnement est donné par la
- propriété <em>position</em></p>
- <table class="desc">
- <tr><td>static</td><td>positionnement « automatique
- » </td></tr>
- <tr><td>fixed</td><td>positionnement par rapport à la fenêtre
- du navigateur (la boîte est supprimée du flot)</td></tr>
- <tr><td>relative</td><td>positionnement « relatif » par
- rapport à la position normale</td></tr>
- <tr><td style="width:5em;">absolute</td><td>positionnement « absolu » par rapport
- à l'ancêtre le plus proche qui n'est pas <i>static</i></td></tr>
- </table>
- <p>Pour <tt>fixed</tt>, <tt>relative</tt> et <tt>absolute</tt>,
- les propriétés <tt>top</tt>, <tt>bottom</tt>, <tt>left</tt>
- et <tt>right</tt> dénotent les décalages respectifs.
- </p>
- </div>
- <div class="sws-slide">
-<span style="position:absolute;right:10pt;top:10pt;color:#0a2">fixed
- (right:10pt,top:10pt)</span>
- <h1>Positionnement (exemple)</h1>
- <div>
- <div style="45%;margin:0 4%;float:left;"><code>
-<span style="color:#02a"> a { position: static;
- … }</span>
-<span style="color:#0a2"> a { position: fixed;
- right:10pt;
- top: 10pt;
-
- }
-</span>
-</code></div>
- <div style="width:50%;"><code>
-<span style="color:#a20"> a { position: relative;
- left: 10pt;
- bottom: -5pt;
- … }</span>
-<span style="color:#a2a"> a { position:absolute;
- right:0pt;
- bottom: 10pt;
- }
-</span></code>
- </div>
- </div>
-<p><code><![CDATA[ <ul style="position:relative;"><li>…</li> …</ul>]]></code></p>
-<ul style="position:relative;float:right;background:#ddd;">
- <li>Positionnement <span style="position:static;color:#02a">static</span></li>
- <li>Positionnement </li>
- <li>Positionnement <span style="position:relative;left:10pt;bottom:-5pt;color:#a20">relative
- (left:10pt,bottom:-5pt)</span></li>
- <li>Positionnement <span style="position:absolute;right:0pt;bottom:10pt;color:#a2a">absolute
- (right:10pt,bottom:10pt)</span></li>
-
-</ul>
- </div>
- <h1>Autres propriétés</h1>
- <div class="sws-slide">
- <h1>Couleurs</h1>
- <p>Les couleurs peuvent être données:</p>
- <ul>
- <li>par nom
- symbolique: <span style="color:red">red</span>,
- <span style="color:blue">blue</span>,
- <span style="color:purple">purple</span>,
- …</li>
- <li>en
- hexadécimal: <tt>#<span style="color:red">xx</span><span style="color:green">yy</span><span style="color:blue">zz</span></tt>, avec
- <tt>00 ≤ xx,yy,zz ≤ ff</tt></li>
- <li>en
- décimal: <tt>rgb(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>)</tt>,
- avec <tt>0 ≤ x,y,z ≤ 255</tt></li>
- <li class="css3">en
- décimal avec
- transparence: <tt >rgba(<span style="color:red">x</span>, <span style="color:green">y</span>, <span style="color:blue">z</span>,
- a)</tt>,
- avec <tt>0 ≤ x,y,z ≤ 255</tt> et <tt>0 ≤ a ≤ 1 </tt></li>
- </ul>
- </div>
- <div class="sws-slide">
- <h1>Propriétés du texte</h1>
- <p>Certaines propriétés permettent d'alterer le rendu du texte
- d'un élément</p>
- <table class="desc">
- <tr><td>direction</td><td><tt>ltr</tt> ou <tt>rtl</tt>
- (orientation du texte)</td></tr>
- <tr> <td>text-transform</td> <td><tt>capitalize</tt>, <tt>uppercase</tt>, <tt>lowercase</tt>
- </td></tr>
- <tr> <td>text-decoration</td> <td><tt>underline</tt>, <tt>overline</tt>, <tt>line-through</tt> </td></tr>
- <tr> <td>text-align</td> <td><tt>left</tt>, <tt>right</tt>, <tt>center</tt>, <tt>justify</tt></td></tr>
- <tr><td>text-indent</td> <td><tt>longueur du retrait de paragraphe</tt></td></tr>
- </table>
- </div>
- <div class="sws-slide">
- <h1>Propriétés de la police</h1>
- <table class="desc">
- <tr><td>font-family</td><td>liste de nom de polices séparées
- par des virgules (<tt>Helvetica, sans, "Times New Roman"</tt>)</td></tr>
- <tr> <td>font-style</td> <td><tt>normal</tt>, <tt>italic</tt> </td></tr>
- <tr> <td>font-weight</td> <td><tt>normal</tt>, <tt>lighter</tt>, <tt>bold</tt>, <tt>bolder</tt> </td></tr>
- <tr> <td style="width:6.5em;">font-size</td> <td> soit une longueur
- soit <tt>xx-small</tt>, <tt>x-small</tt>, <tt>small</tt>, <tt>medium</tt>,
- <tt>large</tt>, <tt>x-large</tt>, <tt>xx-large</tt>
-</td></tr>
- </table>
- <p class="css3" >On peut aussi spécifier un descripteur de
- police</p>
- <code>
- @font-face {
- font-family: Toto;
- src: url(toto.ttf);
- }
- a { font-family: Toto; }
- </code>
- </div>
- <h1>Selecteurs</h1>
- <div class="sws-slide">
- <h1>Selecteurs</h1>
- <p>On peut sélectionner finement les éléments auxquels un style
- s'applique</p>
- <table class="desc">
- <tr><td><tt>x</tt></td><td>tous les éléments dont la balise
- est <tt>x</tt></td></tr>
- <tr> <td><tt>.foo</tt></td> <td>tous les éléments dont
- l'attribut <tt>class</tt> vaut <tt>foo</tt></td></tr>
- <tr><td><tt>#foo</tt></td><td>l'élément dont l'attribut
- <tt>id</tt> vaut <tt>foo</tt> (les <tt>id</tt> doivent être uniques)</td></tr>
- <tr> <td><tt>X Y</tt></td> <td>tous les éléments
- selectionnés par <tt>Y</tt> qui sont des descendants d'éléments
- sélectionnés par <tt>X</tt></td></tr>
- <tr> <td><tt>X > Y</tt></td> <td>tous les éléments dont
- selectionné par <tt>Y</tt> qui sont des fils d'éléments
- sélectionnés par <tt>X</tt></td></tr>
- <tr><td style="width:7em;"><tt>a:visited</tt></td><td>les liens déjà
- visités</td></tr>
- <tr><td><tt>a:link</tt></td><td>les liens non
- visités</td></tr>
- <tr><td><tt>X:hover</tt></td><td>élément selectionné
- par <tt>X</tt> et survollé par la souris</td></tr>
- </table>
- <code> div.foo ul li a:visited { color: red; } </code>
- </div>
-
-<div class="sws-slide">
- <h1>exemple : menu dépliable</h1>
- <code><![CDATA[
- <ul class="menu">
- <li>Entrée 1
- <ul class="sous-menu"> <li>Sous-entrée 1.1 </li>
- <li>Sous-entrée 1.2 </li>
- <li>Sous-entrée 1.3 </li>
- </ul>
- </li>
- <li>Entrée 2
- <ul class="sous-menu"> <li>Sous-entrée 2.1 </li>
- <li>Sous-entrée 2.2 </li>
- <li>Sous-entrée 2.3 </li>
- </ul>
- </li>
- </ul>
-]]></code>
-</div>
-<div class="sws-slide">
- <h1>Analyse</h1>
- <p>Pour que le ménu soit « dépliable » lors du survol de la souris,
- on souhaite que : </p>
- <ul>
- <li>Par défaut, les éléments de sous-menu soient cachés
- (<tt>display : none</tt>)</li>
- <li>Les éléments se trouvant sous un élément survolé
- (<tt>hover</tt>) soient visibles (<tt>display : block</tt>)
- </li>
- </ul>
-</div>
-<div class="sws-slide">
- <h1>exemple : menu dépliable (démo)</h1>
-
- <ul class="menu">
- <li>Entrée 1
- <ul class="sous-menu"> <li>Sous-entrée 1.1 </li>
- <li>Sous-entrée 1.2 </li>
- <li>Sous-entrée 1.3 </li>
- </ul>
- </li>
- <li>Entrée 2
- <ul class="sous-menu"> <li>Sous-entrée 2.1 </li>
- <li>Sous-entrée 2.2 </li>
- <li>Sous-entrée 2.3 </li>
- </ul>
- </li>
-
- </ul>
-</div>
-<div class="sws-slide">
- <h1>Style CSS du menu </h1>
-<p><code>
- li { padding: 10pt 0pt 10pt 0pt;
- display:block;
- background:orange;
- color:blue;
- }
- .sous-menu { display : none; }
-
- ul.menu > li:hover ul.sous-menu { display: block; }
- ul.menu > li:hover ul.sous-menu > li {
- background:blue;
- color:orange;
- }
-</code>
-</p>
-</div>
-<div class="sws-slide">
- <h1>Priorité d'application des règles (cascade)</h1>
- <p>Les règles sont appliquées dans l'ordre suivant : </p>
- <ul>
- <li>On applique toutes les règles des fichiers CSS référencés,
- dans l'ordre. Si plusieurs règles sont valides, elles sont
- appliquées dans l'ordre (en écrasant les comportement précédents,
- s'ils portent sur les mêmes attributs)</li>
- <li>Puis on applique les règles se trouvant dans
- l'élément <tt>style</tt> du fichier HTML courant</li>
- <li>Puis on applique enfin les règles se trouvant dans
- l'attribut <tt>style</tt></li>
- </ul>
-</div>
-<div class="sws-slide">
-<h1><tt>z-index</tt></h1>
-<p>Il arrive que certaines boites se recouvrent : </p>
-<div style="position:relative;margin-left:30pt;height:200pt;">
- <div style="position:absolute;top:0pt;left:0pt;background:red;
- border: 5pt solid blackl;width:150pt; height:150pt;">
- Du texte recouvert
- </div>
- <div style="position:absolute;top:10pt;left:10pt;background:blue;
- border: 5pt solid blackl;width:150pt; height:150pt;">
- </div>
-</div>
-<p style="position:relative;">On peut utiliser la propriété <tt>z-index</tt> pour définir l'ordre
- d'empilement (plus elle est élevée, plus la boite est en avant plan)
-</p>
-<div style="position:relative;margin-left:30pt;height:200pt">
- <div style="position:absolute;top:0pt;left:0pt;background:red;z-index:2;
- border: 5pt solid blackl;width:150pt; height:150pt;">
- Du texte recouvert
- </div>
- <div style="position:absolute;top:10pt;left:10pt;background:blue;
- border: 5pt solid blackl;width:150pt; height:150pt;">
- </div>
-</div>
-</div>
-<h1>requête <tt>media-type</tt></h1>
-<div class="sws-slide">
- <h1>Différents styles pour différents affichages</h1>
- <p>On peut charger un style CSS de manière conditionnelle grace à
- l'attribut <tt>media</tt> de la balise <tt>link</tt>.
- La valeur de l'attribut est une <a>formule logique</a> où l'on
- peut tester le type de support d'affichage ainsi que ces
- caractéristiques physiques :
- </p>
- <code style="font-size:75%;"> <![CDATA[
- <link rel="stylesheet" type="text/css" href="style1.css" media="all" />
- <link rel="stylesheet" type="text/css" href="style2.css" media="print" />
- <link rel="stylesheet" type="text/css" href="style3.css" media="screen and landscape" />
- <link rel="stylesheet" type="text/css" href="style4.css" media="screen and min-width:480px" />
- <link rel="stylesheet" type="text/css" href="style5.css" media="screen and max-width:479px" />
-]]> </code>
-<p>Cela permet d'appliquer des styles spécifiques lors de l'impression
- d'une page ou pour des terminaux mobiles (ayant une petite taille
- d'écran) ou de changer de style si l'orientation de l'écran est modifiée.</p>
-</div>
-<div class="sws-slide">
- <h1>Gestion du débordement</h1>
- <p>L'attribut <tt>overflow</tt> permet de gérer le débordement. Il
- peut prendre les valeurs <tt>visible</tt>, <tt>hidden</tt> et <tt>auto</tt>
- : </p>
- <div style="width:30%;float:left;overflow:visible; height:100pt;background:#ffa;" >
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-aliquip ex ea commodo consequat. Duis aute irure dolor in
-reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-culpa qui officia deserunt mollit anim id est laborum.
- </div>
- <div style="width:30%;float:left;overflow:hidden; height:100pt;background:#faf;" >
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-aliquip ex ea commodo consequat. Duis aute irure dolor in
-reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-culpa qui officia deserunt mollit anim id est laborum.
- </div>
- <div style="width:30%;float:left;overflow:auto; height:100pt;background:#aff;" >
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-aliquip ex ea commodo consequat. Duis aute irure dolor in
-reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-culpa qui officia deserunt mollit anim id est laborum.
- </div>
-
-</div>
- </body>
-</html>
projects / hacks / simpleWebSlides.git / blobdiff