<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;
</script>
</head>
<body>
- <a href="prog_internet_04.xhtml" class="sws-previous"/>
+ <a href="unix_prog_web_04.xhtml" class="sws-previous"/>
<div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
+ <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>
<p>On peut appliquer un style CSS</p>
<ul>
<li> À un élément en
- utilisant <em>l'attribut <code>style</code></em></li>
+ utilisant <em>l'attribut <tt>style</tt></em></li>
<li> À une page en utilisant
- l'élément <em><code><![CDATA[ <style>...</style> ]]></code></em>
+ l'élément <em><tt><![CDATA[ <style>...</style> ]]></tt></em>
dans l'en-tête
du document (dans la
- balise <code><![CDATA[<head>...</head>]]></code>).
+ 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
</span>
</span>
</span>
- </span><span class="b0" style="color:black;vertical-align:top;display:inline-block;font-size:large;height:100%;">↑<br/><br/><br/><br/>
+ </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>
<span style="color:#0a2"> a { position: fixed;
right:10pt;
top: 10pt;
- }</span></code></div>
- <div style="width:50%;float:left;"><code>
+
+ }
+</span>
+</code></div>
+ <div style="width:50%;"><code>
<span style="color:#a20"> a { position: relative;
left: 10pt;
bottom: -5pt;
<span style="color:#a2a"> a { position:absolute;
right:0pt;
bottom: 10pt;
- }</span></code>
- </div><code><![CDATA[ <ul style="position:relative;"><li>…</li> …</ul>]]></code>
- </div><br/>
- <ul style="position:relative;float:right;background:#ddd;">
- <li>Positionnement <span style="position:static;color:#02a">static</span></li>
- <li>Positionnement <span style="position:fixed;right:10pt;top:10pt;color:#0a2">fixed
- (right:10pt,top:10pt)</span></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>
+ }
+</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 <span style="position:fixed;right:10pt;top:10pt;color:#0a2">fixed
+ (right:10pt,top:10pt)</span></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">
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">
</table>
<code> div.foo ul li a:visited { color: red; } </code>
</div>
- </body>
+
+<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>
</html>
projects / hacks / simpleWebSlides.git / commitdiff