CSS (Cascading Style Sheets)

Auteur: Mohamed CHINY Durée necessaire pour le cours de CSS (Cascading Style Sheets) Niveau recommandé pour le cours de CSS (Cascading Style Sheets) Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 8: Masquage, opacité et débordement

Toutes les pages

Masquage des éléments

Le fait de masquer un élément rend celui-ci invisible. Pourtant l’espace qui lui est destiné reste toujours visible.

Dans la page précédente, nous avons vu la propriété display. En lui attribuant la valeur none, elle fait disparaître l'élément sur lequel elle est appliquée. Même l'espace qui lui ai destinée disparaît aussi. On aura l'impression qu'il n'a pas été déclaré dans le code HTML.

Propriété visibility

La propriété visibility permet de masquer ou d'afficher un élément. Elle a comme valeurs:
  • visible: C'est le comportement normal, l'élément est donc visible normalement.
  • hidden: Dans ce cas, l'élément est masquée mais son espace reste toujours visible.

Exemple:

Code HTML:
<div>Avant l'image</div>
<img src="images/footerlogo.png" />
<div>Après l'image</div>
Code CSS:
img{
   visibility:hidden;
}
Le résultat escompté est:
Avant l'image
Après l'image

Gestion de l'opacité

Propriétés opacity, -moz-opacity, filter:alpha(opacity)

Pour rendre un élément transparent, opaque ou translucide, on fait appel à la propriété opacity. Sa valeur est comprise entre 0 et 1 avec un pas de 0.01. 0 signifie complètement transparente, 1 veut dire complètement opaque et entre 0 et 1 ce sont les 99 niveaux de transparence possibles.

La propriété opacity est reconnue sur pratiquement tous les navigateurs connus sauf pour Internet Explorer dont la version est inférieure à 9 qui, lui, reconnait une autre syntaxe, c'est filter:alpha(opacity=x) où x est la valeur de l'opacité comprise entre 0 et 100 (0 pour transparent et 100 pour opaque).

Il existe une autre syntaxe mais qui est devenue obsolète, il s'agit de -moz-opacity. Elle était destinée aux moteurs de rendu Gecko comme celui embarqué sur Firefox. Elle acceptait les mêmes valeurs que la propriété opacity.

Mais, la question qui se pose est: "Comment saurons nous quel navigateur utilise le client pour décider quelle propriété envoyer?". La réponse est aussi simple que la solution; il suffit de déclarer toutes les propriétés ensemble (ou au moins les deux qui sont encore en service) et laisser le navigateur exécuter celle qu'il comprend.

Exemple:

Code HTML:
<img src="images/footerlogo.png" />
Code CSS:
img{
   opacity:0.3;
   filter:alpha(opacity=30);
}
Ce qui donne:

Gestion du débordement

Supposons que vous avez déclaré une balise <div> à laquelle vous avez fixé la largeur et la hauteur. Pourtant, vous y avez mis un texte qui dépasse. Comment la <div> se comporterait-elle? En fait, elle a tendance à afficher quand même tout le texte qui (selon le navigateur utilisé) aura l'air qui déborde de la <div>.

Exemple:
Code HTML:
<div>
CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.<br />
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.
</div>
Code CSS:
div{
   height:60px;
   border:solid 1px #AAAAAA;
   padding:10px;
}
Selon le navigateur utilisé, le résultat obtenu est:
CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.

Propriété overflow

La propriété overflow permet de gérer le débordement sur un élément (de type conteneur). Elle a comme valeur:
  • visible: C'est la valeur par défaut. Le contenu qui dépasse de l'élément est visible normalement.
  • hidden: Le contenu qui dépasse sera masqué.
  • scroll: Une barre de défilement apparaît qu'il y ait débordement ou non, mais elle ne sera opérationnelle que si le contenu dépasse de l’élément. Notez que l'imprimante peut imprimer tout le contenu, même celui qui dépasse.
  • auto: Une barre de défilement apparaît s'il y a un débordement.

En gérant le débordement sur l'exemple précédent, le code devient:
Code HTML:
<div>
CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.<br />
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.
</div>
Code CSS:
div{
   height:60px;
   border:solid 1px #AAAAAA;
   padding:10px;
   overflow:scroll;
}
Le résultat obtenu est:
CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.
Il existe des variantes pour overflow qui permettent de gérer le débordement seulement horizontalement ou verticalement, il s'agit de overflow-x et overflow-y.