From f9fbf294b28a10938473ed9554d5c7e2ebaabe01 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Kim=20Nguy=E1=BB=85n?= Date: Tue, 7 Oct 2014 12:38:53 +0200 Subject: [PATCH] . --- unix_prog_web/unix_prog_web_05.xhtml | 192 +++++++++++++++++++++++---- 1 file changed, 168 insertions(+), 24 deletions(-) diff --git a/unix_prog_web/unix_prog_web_05.xhtml b/unix_prog_web/unix_prog_web_05.xhtml index 3c32ca0..bac703d 100644 --- a/unix_prog_web/unix_prog_web_05.xhtml +++ b/unix_prog_web/unix_prog_web_05.xhtml @@ -22,7 +22,19 @@ - + - +
-

Programmation Internet

+

Unix et Programmation Web

Cours 5

kn@lri.fr
http://www.lri.fr/~kn @@ -57,12 +69,12 @@

On peut appliquer un style CSS

@@ -375,8 +387,11 @@ a { position: fixed; right:10pt; top: 10pt; - } -
+ + } + +
+
a { position: relative; left: 10pt; bottom: -5pt; @@ -384,19 +399,21 @@ a { position:absolute; right:0pt; bottom: 10pt; - } -
  • …
    • …]]>     -
    - + } + + + +

  • …
    • …]]>

    +

    Autres propriétés

    @@ -419,7 +436,6 @@ transparence: rgba(x, y, z, a), avec 0 ≤ x,y,z ≤ 255 et 0 ≤ a ≤ 1 -
    @@ -485,5 +501,133 @@ div.foo ul li a:visited { color: red; }
    - + +
    +

    exemple : menu dépliable

    + +
  • Entrée 1 +
    • Sous-entrée 1.1
      • +
    • Sous-entrée 1.2
      • +
    • Sous-entrée 1.3
      • +
    +
    • +
  • Entrée 2 +
    • Sous-entrée 2.1
      • +
    • Sous-entrée 2.2
      • +
    • Sous-entrée 2.3
      • +
    +
    • + +]]>     +
    +
    +

    Analyse

    +

    Pour que le ménu soit « dépliable » lors du survol de la souris, + on souhaite que :

    + +
    +
    +

    exemple : menu dépliable (démo)

    + + +
    +
    +

    Style CSS du 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; + } + +

    +
    +
    +

    Priorité d'application des règles (cascade)

    +

    Les règles sont appliquées dans l'ordre suivant :

    + +
    +
    +

    z-index

    +

    Il arrive que certaines boites se recouvrent :

    +
    +
    + Du texte recouvert +
    +
    +
    +
    +

    On peut utiliser la propriété z-index pour définir l'ordre + d'empilement (plus elle est élevée, plus la boite est en avant plan) +

    +
    +
    + Du texte recouvert +
    +
    +
    +
    +
    +

    requête media-type

    +
    +

    Différents styles pour différents affichages

    +

    On peut charger un style CSS de manière conditionnelle grace à + l'attribut media de la balise link. + La valeur de l'attribut est une formule logique où l'on + peut tester le type de support d'affichage ainsi que ces + caractéristiques physiques : +

    + + + + + +]]> +

    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.

    +
    + -- 2.17.1