+
+<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>
+ </body>