Cégep de Sainte-Foy | Techniques d'intégration multimédia

582-104-SF Intégration 1

Leçon 6

Les sélecteurs CSS et les propriétés de l'arrière-plan

Hiérarchie du balisage HTML: terminologie

Nous devons revenir sur la hiérarchie de la structure du document HTML pour poursuivre la discussion sur les CSS.

Considérons cette structure HTML simplifiée:

<body> <div class="bloc-titre"> <img src="..." alt="..."> <h3>Mon titre</h3> </div> </body>

En vue hiérarchique, nous obtenons ceci:

Hiérarchie HTML simple

En examinant ce diagramme, on peut dire que:

  • img et h3 sont des éléments frères;
  • img et h3 sont tous deux les enfants de div;
  • div est l'enfant de body;
  • div est le parent de img et h3;
  • body est le parent de div;
  • body est l'ancêtre de img et h3;
  • img et h3 sont les descendants de body.

En terme de CSS, nous avons vu que la structure des sélecteurs est souvent basée sur ces relations de parenté.

Par exemple :

div.bloc-titre img { /* On écrit des déclarations ici */ }

Une telle règle cible exclusivement l'élément img qui est un enfant ou un descendant de l'élément div dont la classe est bloc-titre.

Écrire des règles de style (suite)

Les déclarations regroupées

Les déclarations peuvent être regroupées.

Ces trois règles comportent une déclaration chacune et s'adressent toutes les trois au même sélecteur p :

p { color: red; } p { font-size: 0.9em; } p { line-heignt: 1.4; }

Pour plus d'efficacité, on peut regrouper les déclarations en une seule règle, sous le sélecteur p :

p { color: red; font-size: 0.9em; line-heignt: 1.4; }

On dit que ces déclarations sont regroupées.

Les sélecteurs regroupés

Les sélecteurs peuvent être regroupés.

Considérez les trois sélecteurs suivants et leurs règles :

h1 { color: blue; font-weight: bold; } h2 { color: blue; font-weight: bold; } h3 { color: blue; font-weight: bold; }

Ces trois sélecteurs peuvent être rassemblés en une seule règles puisqu'ils partagent les mêmes déclarations (notez la virgule entre les sélecteurs):

h1, h2, h3 { color: blue; font-weight: bold; }

On dit que ces sélecteurs sont regroupés.

Plusieurs règles peuvent s'appliquer au même sélecteur

Après avoir écrit la règle précédente, si vous désirez en plus que le titre de niveau h3 soit en italique, vous pouvez ajouter une autre règle avec le sélecteur h3:

h1, h2, h3 { color: blue; font-weight: bold; } h3 { font-style: italic; }

Le sélecteur h3 peut faire partie de plusieurs règles, dans une même feuille de style.

Les sélecteurs contextuels

Les sélecteurs contextuels puisent leur efficacité dans la structure hiérarchique du document HTML.

Prenons ce texte balisé en exemple et son rendu dans le navigateur:

See the Pen c07-scontextuel01 by Sylvain Lamoureux (@slamoureux) on CodePen.

La hiérarchie des éléments de ce document se présente ainsi:

Sélecteur contextuel: hiérarchie du document

Si vous créez la règle suivante :

em { color: red; }

Le contenu de tous les éléments em prend la couleur rouge :

Affichage de l'effet produit par la règle de style précédente
Sélecteur contextuel

Soyons plus sélectif en précisant que seulement les éléments em inclus dans les éléments p sont ciblés.

On doit donc créer le sélecteur contextuel « p em » pour ce faire:

p em { color: red; }

Notez maintenant que l'élément em de l'élément h1 n'est plus ciblé.

Ainsi on obtient ce résultat:

Affichage de l'effet produit par la règle de style précédente
Sélecteur contextuel

Attention: contrairement aux sélecteurs groupés, le sélecteur contextuel utilise un espace entre les éléments, et non une virgule.

Notez que lorsque vous utilisez un sélecteur contextuel, c'est seulement l'élément situé à l'extrême droite qui est ciblé; les éléments qui le précèdent dans le sélecteur servent à contextualiser l'application de la règle.

Remarquez qu'il peut exister d'autres éléments intercalés dans la hiérarchie HTML mais qui n'apparaissent pas dans le sélecteur contextuel. C'est pourquoi la règle précédente fonctionne aussi pour l'élément em imbriqué dans l'élément span.

Soyons encore plus spécifique avec le sélecteur en le rédigeant ainsi :

p span em { color: red; }

Seul l'élément em imbriqué dans l'élément span est cette fois ciblé:

Affichage de l'effet produit par la règle de style précédente
Sélecteur contextuel

Maintenant, est-il possible de cibler seulement l'élément em imbriqué dans l'élément p, mais non dans l'élément span (c'est-à-dire les mots «élément spécifique»)?

Il existe un sélecteur d'enfant: le chevron fermant ">" signifie «enfant de» lorsque placé entre deux sélecteurs.

L'exemple suivant présente un sélecteur dont la signification est «em enfant de p» :

p > em { color: red; }

Cette règle permet de cibler dans le texte les mots « élément spécifique », car le sélecteur d'enfant exclut les descendants au-delà de l'enfant:

Affichage de l'effet produit par la règle de style précédente
Sélecteur contextuel et sélecteur d'enfant

L'élément em contenant « doivent être descendants» est enfant de span, et non pas de p, c'est pourquoi la règle de style précédente ne l'atteint pas.

Sélecteurs de class et d'identifiant

Vous savez maintenant qu'il est possible de cibler une zone du document avec class ou id.

L'avantage de cette procédure, c'est qu'elle permet de passer outre la hiérarchie du document.

C'est ce que nous démontrerons en utilisant le code suivant:

See the Pen c07-sclasseid02 by Sylvain Lamoureux (@slamoureux) on CodePen.

Sélecteur d'identifiant simple

Un identifiant (ou id) peut être associé à n'importe quel élément HTML afin de le cibler.

À noter qu'un même identifiant ne peut être utilisé qu'une seule fois dans un même document HTML. Les identifiants sont ainsi le plus souvent réservés à l'identification des sections principales d'une page HTML.

Dans l'extrait CodePen ci-haut, un élément div, portant l'identifiant "cours06", englobe l'ensemble du contenu HTML.

Cet identifiant peut donc être mis à profit pour définir la largeur du contenu, comme le montre l'exemple suivant:

#cours06 { max-width: 40em; /* largeur du contenu */ margin: 0 auto; /* Contenu centré */ }

Sélecteur de classe simple

Une classe (ou class) peut être associée à n'importe quel élément HTML afin de le cibler.

À noter qu'une même classe peut utilisée autant de fois que nécessaire dans un même document HTML. Les classes sont ainsi associés à de nombreux éléments d'une page HTML et peuvent se répétées de nombreuses fois.

Dans l'exemple ci-haut, la classe note a été ajoutée à un élément p et un élément div.

Cela permet de donner une mise en forme particulière à ces deux éléments (bordure, coins arrondis, arrière-plan gris, police de caractère différente) :

.note { border: 2px #777 solid; padding: .5em; background-color: #eee; border-radius: 6px; font-family: arial, sans-serif }

Le résultat apparaît ici :

Sélecteur de classe

Sélecteur contextuel de classe

Pour cibler seulement l'élément div avec la classe, vous devez créer un sélecteur combinant le nom de l'élément et la classe, comme ceci:

div.note { background-color: lightsalmon; }

Pour obtenir le résultat suivant:

Sélecteur contextuel de classe

Il s'agit d'une autre sorte de sélecteur contextuel parce que la classe doit être dans le contexte de l'élément div pour que la règle s'applique.

Dans l'exemple de CodePen illustré en haut de la page une deuxième classe, « references », est utilisée et associée à l'élément section. Les sélecteurs contextuels suivants permettent d'obtenir une mise en forme particulière:

.references { border-top: dotted 1px #bbb; border-left: solid 6px #bbb; padding: 0 .8em;
font-family: verdana, sans-serif; } .references h2 { font-size: .9em; } .references ol { padding: 0 0 .5em 1.2em; } .references li { padding: 0 0 .5em 0; font-size: .7em; } .references a { color: lightcoral; }

L'intérêt de cette approche est que vous pouvez utiliser une classe sans égard à l'élément auquelle elle appartient, échappant ainsi à la contrainte de l'héritage.

Classes et identifiants: éviter la surdose

Les class et les id offrent de très utiles « poignées » pour tirer sur tout ce qui peut être mis en forme dans un document. Toutefois, avant de créer une classe ou un identifiant :

  • songez d'abord à la possibilité d'écrire une règle de style à partir d'un élément html;
  • explorez ensuite la possibilité de créer un sélecteur contextuel en mettant à profit la hiérarchie HTML;
  • puis, s'il vous apparaît impossible de cibler la zone désirée, c'est-à-dire d'être assez spécifique, c'est que vous avez besoin d'insérer class ou id.

Les étapes de travail du balisage pour la mise en forme sont donc les suivantes:

  1. Insérez les éléments de structure du HTML (header, nav, main, section, article, aside, footer, etc.) afin former la base de votre document.
  2. Si nécessaire, ajoutez des conteneurs neutres div (avec id ou class) pour rassembler des éléments à mettre en forme dans votre document HTML.
  3. Rédigez votre feuille de style en utilisant des sélecteurs de type (éléments HTML);
  4. Ajoutez des sélecteurs contextuels dans votre feuille de style lorsque nécessaire;
  5. Enfin, songez à utiliser des sélecteurs avec id et class lorsque les sélecteurs de type et les sélecteurs contextuels ne suffisent plus pour vos besoins.

Cette façon de faire allègera à la fois votre document HTML et votre feuille de style. Efficacité et clarté sont ici les maîtres mots.

Classe ou identifiant ?

id class
Le même identifiant ne peut être utilisé qu'une seule fois dans une même page HTML. La même classe peut être utilisée une ou plusieurs fois dans une même page HTML
Surtout utilisé pour identifier les blocs structuraux des pages (entête, contenu principal, contenu secondaire, pied de page,...) ou encore pour identifier des ancres pour la navigation intrapage. Utilisé pour identifier des éléments très diversifiés: paragraphes, listes, div, article, etc.

Les sélecteurs en bref

Sélecteurs CSS
Sélecteur Description Exemples*
Sélecteur universel S'applique à tous les élément du document * {}
Cible tous les élément de la page
Sélecteur de type Correspond aux noms des éléments HTML h1, h2, h3 {}
Cible les éléments <h1>, <h2> et <h3>
Sélecteur de classe Correspond aux éléments dont la valeur de l'attribut class est celle indiquée après le point .note {}
Cible tous les éléments dont l'attribut class a la valeur note
p.note {}
Cible tous les éléments <p> dont l'attribut class a la valeur note
Sélecteur d'identifiant Correspond à l'élément dont la valeur de l'attribut id est celle indiquée après le symbole dièse (#) #introduction {}
Cible l'élément dont l'attribut id a la valeur introduction
Sélecteur d'enfant Correspond aux éléments qui sont les enfants directs d'un autre élément li > a {}
Cible tous les élément <a> qui sont des enfants d'un éléments <li>, et seulement eux
Sélecteur de descendant Correspond aux éléments qui sont des descendants de celui indiqué (pas uniquement ses enfants directs) p a {}
Cible tous les éléments <a> de la page qui sont les descendants de <p>
Sélecteur de frère adjacent Correspond à l'élément frère qui suit immédiatement un autre élément h1+p {}
Cible uniquement le premier élément <p> qui vient après un élément <h1>
Sélecteur de frère général Correspond aux éléments qui sont les frères d'un autre, même s'ils ne le suivent pas directement h1~p {}
Si deux éléments <p> sont les frères d'un élément <h1>, la règle s'applique aux deux

* Balisage utilisé pour les exemples de sélecteurs du tableau précédent :

Balisage des exemples citées plus haut.

Pseudo-classes

Les pseudo-classes permettent aux règles de style d'être appliquées lors de certains événements.

L'événement le plus commun est lorsque l'utilisateur pointe avec sa souris le contenu ou encore clique sur le contenu d'un document.

Nous présentons ici quelques exemples de pseudo-classes. Pour une liste exhaustive, consultez ce lien: Index of standard pseudo-classes.

Pseudo-classes d'hyperliens

L'usage le plus courant des pseudo-classes met communément en cause les hyperliens.

:link
État neutre du lien en attente d'être survolé ou cliqué.
:visited
État du lien qui a été visité par l'utilisateur.
:hover
État du lien survolé par le pointeur de la souris.
:active
État du lien pendant le clic de la souris.

Voici un exemple d'utilisation des pseudo-classes d'hyperliens :

See the Pen c07-liens01 by Sylvain Lamoureux (@slamoureux) on CodePen.

À noter

  • Il n'y a pas d'obligation à donner une mise en forme distincte à chaque état. Mais il est recommandé de définir TOUS les états des liens afin que la feuille de style du navigateur ne prenne pas le contrôle de certains états.
  • Les états doivent être définis dans l'ordre suivant dans la feuille de style: link, visited, hover, active, sinon le le fonctionnement des liens est compromis.

Autres pseudo-classes d'intérêts

Ces pseudo-classes sont très puissantes, car elles permettent de sélectionner des éléments enfants précis sans le recourt à des classes placées dans le HTML.

:first-child, :last-child

La pseudo-classe :first-child sélectionne n'importe quel élément étant le premier enfant de son parent.

Exemple :

See the Pen c07-pseudoclasse01 by Sylvain Lamoureux (@slamoureux) on CodePen.

Les pseudo-classes :first-child ou :last-child permettent d'effectuer la mise en forme particulière d'un premier ou dernier élément sans ajouter de classes dans le HTML.

:nth-child()

La pseudo-classe :nth-child() permet de viser un ou plusieurs enfants grâce à un chiffre, un mot-clé (even, odd) ou une opération mathématique du type an+b, où « n » est un entier ( 0, 1, 2, 3...).

Exemples de sélecteur :

tr:nth-child(2n+1)
Cible les lignes impaires d'un tableau
tr:nth-child(odd)
Cible les lignes impaires d'un tableau (identique au précédent)
tr:nth-child(2n)
Cible les lignes paires d'un tableau
tr:nth-child(even)
Cible les lignes paires d'un tableau (identique au précédent)
li:nth-child(1)
Représente un élément <li> qui est le premier enfant de son parent; identique à :first-child

Dans l'exemple suivant, le sélecteur cible un élément tr qui est le troisième enfant de son parent tbody:

See the Pen c07-pseudoclasse03 by Sylvain Lamoureux (@slamoureux) on CodePen.

Allons plus loin.

L'expression odd permet de sélectionner seulement le rang impair des lignes du corps de tableau:

See the Pen c07-pseudoclasse02 by Sylvain Lamoureux (@slamoureux) on CodePen.

:focus

Un élément tel qu'un champ texte devient « actif » lorsqu'un utilisateur clique dessus et tape des caractères.

Par exemple, cette règle remplace le contour bleu (couleur par défaut) du champ texte par un coutour or de 4 pixels d'épaisseur lorsque l'utilisateur clique dans celui-ci avec le pointeur de la souris:

See the Pen c07-pseudoclasse04 by Sylvain Lamoureux (@slamoureux) on CodePen.

Pseudo-éléments

Les pseudo-éléments permettent de mettre en forme des portions de document sans que cela nécessite l'ajout de balisage supplémentaire.

Afin de les distinguer des pseudo-classes, les pseudo-éléments sont précédés de quatre points plutôt que deux. Cependant, puisque cette particularité syntaxique est une recommandation récente, vous croiserez régulièrement des pseudo-éléments comportant seulement deux points. Les deux syntaxes sont donc opérationnelles.

::first-letter

Permet d'agir sur la première lettre d'un élément ciblé.

Un usage courant de ce pseudo-élément est la création d'une lettrine au début d'un paragraphe.

Par exemple :

See the Pen c07-pseudoelement01 by Sylvain Lamoureux (@slamoureux) on CodePen.

::first-line

Permet de mettre en forme la première ligne d'un paragraphe de texte.

Par exemple :

See the Pen c07-pseudoelement02 by Sylvain Lamoureux (@slamoureux) on CodePen.

::before / ::after

Ces deux sélecteurs permettent d'ajouter un texte spécifique avant et après un élément.

Dans cet exemple, ils servent à insérer des guillements avant et après les éléments cite et blockquote :

See the Pen c07-pseudo-element_before-after by Sylvain Lamoureux (@slamoureux) on CodePen.

Notez que les espaces ajoutés dans le texte des règles entre guillemets assurent l'espacement correct des guillemets affichés.

Héritage et cascade

Héritage

L'héritage dans les CSS signifie la transmission des valeurs des propriétés CSS des ancêtres vers les descendants.

Nous avons vu que l'élément html est l'ancêtre de tous les ancêtres. Considérez la règle suivante pour l'élément html :

html { font-family: Segoe, "Trebuchet MS", Verdana, sans-serif; color: blue; }

Le texte de tous les éléments descendants de html dans le document hérite de ces valeurs, peu importe la profondeur de la descendance.

L'héritage ne s'applique pas à toutes les propriétés.

Par exemple, cela n'aurait pas de pertinence que l'ajout d'une bordure à un élément div se répercute à tous ses enfants et descendants (tels des p, h1, h2, etc.). La propriété bordure ne peut donc être transmise aux descendants d'un conteneur.

Cascade

Le mot cascade de l'expression « feuille de style en cascade » ou cascading style sheet (CSS) signifie le passage d'un niveau de mise en forme à un autre, dans un ordre contrôlé, dans le meilleur des cas.

Sa fonction est de permettre au navigateur de décider parmi les différentes options quelle source doit être utilisée pour décrire une propriété particulière.

Sources des règles de style

Les styles proviennent de plusieurs sources.

1) D'abord, le navigateur possède sa propre feuille de style. C'est pourquoi h1 possède une taille propre par défaut et que les paragraphes ont d'emblée une certaine marge entre eux.

2) En deuxième lieu, il y a la feuille de style de l'utilisateur. L'utilisateur peut créer une feuille de style, mais ce n'est pas une pratique courante.

Vous pouvez par exemple insérer une feuille de style utilisateur dans certains navigateurs. Les handicapés visuels peuvent insérer une feuille style avec une règle comme celle-ci:

html { font-size: 200% !important; }

Cette règle permet de doubler la taille du texte des documents affichés. L'expression !important permet de faire en sorte que cette règle ne soit pas modifiée plus loin dans la cascade.

3) Enfin, il y a les règles de style de l'auteur, soit celles écrites par vous-même en tant qu'auteur d'une page Web.

Comme on l'a vu, celles-ci peuvent-être de trois types:

  • feuille de style liée;
  • feuille de style insérée;
  • règles de style en ligne (à même les éléments de balisage).

Voici l'ordre dans lequel le navigateur passe en revue (« en cascade ») les localisations des règles de style:

Cascade: l'ordre des règles de style

La cascade détermine l'ordre de lecture des styles et, en même temps, l'ordre dans lequel les règles de style sont mises à jour au fur et à mesure que la cascade progresse.

La mise à jour des règles à appliquer suit l'ordre de la cascade, mais cela, en fonction d'un certains nombre de règles.

Les règles de la cascade

Règle 1: Trouver toutes les déclarations s'appliquant à chaque élément

Avec le chargement de chaque page, le navigateur scrute tous les éléments de la page et voit si une règle de style s'applique à l'un de ces éléments.

Règle 2: Trier par ordre

Le navigateur passe à travers chacune des cinq sources de règles de style potentielles, en mettant à jour les propriétés qui sont redéfinies plus bas dans la cascade. La dernière mise à jour sera celle qui prévaudra à l'affichage.

Par exemple, supposons que, dans l'exemple illustré par le tableau, deux des paragraphes du document passé en revue ont des règles de styles en ligne définissant la couleur du texte comme étant rouge. Dans ce cas, tous les éléments p auront un texte bleu sauf ceux ayant une règle de style en ligne redéfinissant le texte comme étant rouge.

Exemple d'application de la cascade
Localisation Élément Propriété Valeur
Feuille de style par défaut tous les p color black
Feuille de style de l'utilisateur      
Feuille de style de l'auteur: externe tous les p color blue
Feuille de style de l'auteur: interne      
Règles de l'auteur en ligne certains p color red

Règle 3: Trier par spécificité

Un sélecteur d'identifiant est plus spécifique qu'un sélecteur de classe.

Un sélecteur de classe est plus spécifique qu'un sélecteur de type (élément HTML).

La spécificité est plus puissante que l'ordre: c'est-à-dire qu'une règle plus spécifique rencontrée plus haut dans la cascade l'emporte sur une règle moins spécifique rencontrée plus bas dans la cascade.

La spécificité se calcule ainsi par A-B-C, c'est-à-dire:

  • Ajoutez 1 à A pour chaque identifiant dans le sélecteur.
  • Ajoutez 1 à B pour chaque classe (ou pseudo-classe) dans le sélecteur.
  • Ajoutez 1 à C pour chaque élément (ou pseudo-élément) dans le sélecteur.

Lisez le résultat un peu comme un nombre normal à trois chiffres: par exemple, 0-2-0 est plus spécifique que 0-0-9.

Calcul de la spécificité de quelques sélecteurs
Sélecteur A-B-C Spécificité
p 0-0-1 1
p.grandtexte 0-1-1 11
p#grandtexte 1-0-1 101
body p#grandtexte 1-0-2 102
body p#grandtexte ul.maliste 1-1-3 113
body p#grandtexte ul.maliste li 1-1-4 114

Si deux règles ont le même poids, celle qui se trouve plus bas dans la cascade l'emporte.

Téléchargez les documents suivants et suivez les directives données en classe : Travaux formatifs: spécificité des sélecteurs CSS

Outil diagnostic: !important

Le poids de la déclaration est aussi pris en compte. Vous pouvez définir une règle comme étant «importante», comme ceci

a:link { color: blue !important; }

Le mot !important est écrit à la suite de la valeur, après une espace et avant le point-virgule. Il force le navigateur à afficher cette valeur, quelles que soit les valeurs rencontrées plus bas dans la cascade.

Vous devez utiliser cet outil avec parcimonie.

Le mot !important constitue surtout un outil diagnostic pour le développeur web. Utilisé temporairement, il permet en effet de détecter des conflits de règles de style lors de la conception de la mise en forme d'une page Web.

Le modèle de boite en CSS

CSS est souvent illustré par un modèle de boîte :

Le modèle de boîte décomposé

padding (marge interne) est transparent : il s'agit de l'espace adjacent au contenu et laisse voir la couleur d'arrière-plan ou l'image d'arrière-plan de l'élément auquel il appartient.

margin (marge externe) est transparent : il laisse voir la couleur d'arrière-plan ou l'image d'arrière-plan de l'élément parent sous-jacent, et non pas de l'élément auquel il appartient.

border (bordure) se situe entre le padding et le margin.

En français, padding est traduit indifféremment par « remplissage », « espacement » ou « marge interne », alors que margin est traduit par « marge » ou « marge externe ».

Le modèle de boîte tel qu'il apparaît à l'écran

Pour comprendre le modèle de boîte, téléchargez les fichiers sources suivants: tf_cours06_modeleboite.zip.

Nous ferons l'exercice en classe.

Une autre manière, plus détaillée, de voir le modèle de boîte : padding, border et margin peuvent être définis dans les quatre directions.

Le modèle de boîte

Comment calculer la largeur d'un élément?

La propriété width correspond par défaut strictement à la largeur du contenu. Par exemple, les déclarations suivantes:

width: 130px;

padding: 10px;

border: 10px;

margin: 10px;

produisent ce résultat:

Le calcul de la largeur d'une boîte

La largeur totale affichée est donc de 10+10+10+130+10+10+10 = 190 px

Notez padding, border et margin sont des propriétés « raccourcies ».

  • Lorsqu'on utilise margin ou padding tout seul, accompagné d'une seule valeur (ex.: margin:10px;), cette valeur s'applique à la fois aux marges du haut, de droite, du bas et de gauche, alors que la formule longue margin-top ne s'applique qu'à la marge du haut.
  • Vous croiserez souvent une déclaration écrite comme ceci :
    margin: 5px 10px 15px 12px;
    .
    Elle signifie la même chose que ces quatres déclarations :
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 15px;
    margin-left: 12px;

Propriétés de l'arrière-plan: background

La propriété background permet de mettre en forme l'arrière-plan des éléments d'une page Web.

Couleur d'arrière-plan: background-color

Valeurs: transparent, inherit ou un code de couleur

Valeur initiale: transparent

Cet exemple montre plusieurs façons d'écrire une valeur désignant une couleur d'arrière-plan:

{background-color: #FD3401;}

{background-color: #0F0;}

{background-color: rgb(200,88,5);}

{background-color: rgb(0%,0%,0%);}

Images d'arrière-plan: background-image

Valeurs: url(adresse de l'image), none, inherit

Valeur initiale: none

Exemple d'utilisation:

ul { list-style-type:none; } li { background-image:url(images/pique.gif); background-repeat:no-repeat; background-position:0 0; }

Rendu :

  • Premier élément de liste
  • Deuxième élément de liste

Mosaïque d'arrière-plan: background-repeat

Valeurs: repeat, repeat-x, repeat-y, no-repeat, inherit

Valeur initiale: repeat

Exemple employant la valeur repeat en arrière-plan d'un paragraphe de 500px de largeur:

Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement?

Exemple employant la valeur no-repeat :

Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement?

Exemple employant la valeur repeat-x :

Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement?

Exemple employant la valeur repeat-y :

Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement?

Position d'arrière-plan: background-position

Valeurs:

  • % : pourcentage (en x et y, à partir du coin supérieur gauche du conteneur parent),
  • px : distance en pixels (en x et y, à partir du coin supérieur gauche du conteneur parent),
  • mots-clés (en x: left, center, right; en y: top, middle, bottom), inherit

Valeur initiale: 0 0 (identique à left top)

Par exemple 10% 25% donnent ce résultat:

Ces valeurs correspondent à un point se trouvant à 10% du bord gauche du paragraphe et à 25% du bord supérieur de ce même paragraphe, comme le montre l'image en arrière-plan affichée ici.

Par exemple 10px 25px donnent ce résultat:

Ces valeurs correspondent à un point se trouvant à 10 pixels du bord gauche du paragraphe et à 25 pixels du bord supérieur de ce même paragraphe, comme le montre l'image en arrière-plan affichée ici.

On peut mélanger mots clés et valeurs, comme le montre cet exemple où center 15px donnent ce résultat:

Ces valeurs correspondent à un point centré horizontalement dans le paragraphe et se trouvant à 30 pixels du bord supérieur de ce même paragraphe, comme le montre l'image en arrière-plan affichée ici.

Exemple d'utilisation d'images d'arrière-plan multiples (cliquez sur CSS pour voir le code CSS et sur HTML pour voir le code HTML) :

See the Pen c07-bimagemultiple01 by Sylvain Lamoureux (@slamoureux) on CodePen.

Point d'attache de l'arrière-plan: background-attachment

Valeurs: scroll, fixed, inherit

Valeur initiale: scroll

Exemple: background-attachment: scroll;

Ce paragraphe contient une image d'arrière-plan avec la valeur scroll pour la propriété background-attachment.






Lorsque la page défile, l'image défile avec le reste du contenu de cette page.

Exemple: background-attachment: fixed;

Ce paragraphe contient une image d'arrière-plan avec la valeur fixed pour la propriété background-attachment.





Lorsque la page défile, l'image reste en place, comme si le contenu défilait par dessus.

Super propriété de l'arrière-plan: background

Valeurs: background-color, background-image, background-repeat, background-attachment, background-position

Règles d'utilisation: aucune valeur n'est obligatoire et les valeurs peuvent apparaître dans n'importe quel ordre.

Si deux valeurs sont fournies pour la propriété background-position, elles doivent apparaître ensemble en commençant par la valeur horizontale (x), suivie immédiatement par la valeur verticale (y).

Exemple 1:

background: #fff url(images/decor.jpg) repeat-x scroll 0 4px;

Exemple 2 (images multiples):

background: url(images/rond.jpg) no-repeat 0 50%, url(images/care.jpg) no-repeat 120px 10px, url(images/triangle.jpg) repeat-y center top;

Puisqu'il s'agit d'une propriété abrégée, les valeurs omises seront réinitialisées aux valeurs par défaut des propriétés correspondantes. Par exemple, si on omet de citer les valeurs pour la propriété background-position, ce sont les valeurs 0 0 qui seront implicitement reconnues.

Utiliser des images d'arrière-plan

Les images d'arrière-plan sont utilisées pour rehausser l'aspect graphique d'une page HTML. Elles sont insérées par l'intermédiaire des règles de style et ne contribuent pas au référencement de la page où elles s'affichent.

Les images du contenu sont mises en place par l'intermédiaire de la balise img dans le code HTML ; elles contribuent au référencement de la page où elles se trouvent au même titre que le texte.

Étude de cas

Prenons l'exemple du site recréé dans le TP6. Notez comme l'image de l'entête s'adapte en largeur à toutes les résolutions.

Sur un écran large :

Images d'arrière-plan à taille variable.

Sur un écran étroit :

Images d'arrière-plan à taille variable.

Comment cela est-il possible?

Voyons d'abord d'où provient cette image dans la feuille de style:

Exemple d'utilisation d'images d'arrière-plan.

En analysant ces règles de style, vous noterez que « l'image » de l'entête est en réalité composée de quatre images.

La présence des ornementations situées aux extrémités du filet inférieur de l'image de l'entête rend nécessaire l'utilisation de trois images. En effet, avec une seule image, ces ornementations auraient été cachées sur les petits écrans comme on le voit ici :

Sur un écran large :

Images d'arrière-plan à taille variable.

Sur un écran étroit (disparition des ornementations lors de l'utilisation d'une seule image) :

La stratégie est la suivante :

  1. L'image du logo étant un élément de contenu, il est avantageux de l'insérer dans le HTML à l'aide d'une balise img afin qu'elle soit référencée;
  2. L'image des filets prologeant le logo de chaque côté est purement décorative et à ce titre est insérée par une règle de style, en arrière-plan de header;
  3. Les deux images d'ornementation terminant le filet inférieur sont aussi insérées, grâce aux CSS, en arrière-plan de l'élément header.

Ces quatres images sont les suivantes:

entete.gif

entete_lignes.gif


Entête gauche

entete_gauche.gif


Entête droite.

entete_droite.gif

  1. entete.gif: La première image est le logo inséré dans le HTML à l'aide d'un élément img.
  2. entete_lignes.gif: La deuxième image a une largeur suffisante (3000px) pour satisfaire un grand nombre de résolutions d'écran. Elle est centrée à l'horizontal et à 43 pixels du haut de son parent (center 43px). Elle située dans header, un conteneur fluide qui comporte une largeur maximale de 60em (960px) hérité de son parent body.
  3. entete_gauche.gif: La deuxième image est aussi située dans header dont la hauteur est de 153px et la largeur n'est pas spécifiée, ce qui signifie qu'elle sera dictée par le conteneur parent (body). Cette image est située à l'extrême gauche de son parent et à 123 pixels du sommet de celui-ci (left 123px).
  4. entete_droite.gif: La troisième image est aussi située dans header. Cette image est placée à l'extrême droite de son parent et à 123 pixels du sommet de celui-ci (right 123px).

Résultat final, quelque soit la résolution :

Activités d'évaluation

Contrôle de lecture 2

Le contrôle de lecture 2 aura lieu au cours 8.

Il concerne le contenu des pages Web des leçons 4, 6 et 7.

Questions de révision

  • Remplacez les trois règles de style suivantes par une seule équivalente:
    h1 {color:blue; font-weight:bold;}
    h2 {color:blue; font-weight:bold;}
    h3 {color:blue; font-weight:bold;}
  • Nommez au moins trois des cinq sources de règles de style en suivant l'ordre de la cascade.
  • Décrivez à l'aide d'un diagramme (rectangles et traits) la hiérarchie de l'extrait de code HTML affiché plus bas.
    Question de révision
  • À partir de l'extrait HTML ci-dessus, créez une règle de style complète et fonctionnelle qui permet d'attribuer la couleur rouge exclusivement à la chaîne de caractères «doivent être descendants».
  • À partir de l'extrait HTML suivant, créez un sélecteur qui permet de viser uniquement le troisième lien de cette liste en particulier.
  • <ul class="menu-principal"> <li>Lien 1</li> <li>Lien 2</li> <li>Lien 3</li> <li>Lien 4</li> <li>Lien 5</li> </ul>

TP6

Le TP6 a pour objectif d'expérimenter les propriétés reliées à l'arrière-plan des éléments.

Documents à remettre

Un dossier rigoureusement nommé comme suit:

  • groupe du lundi 8h : gr2_nominitialeprenom_tp6
  • groupes du lundi 12h : gr1_nominitialeprenom_tp6

Le dossier de remise contient un fichier tp6a.html, un fichier tp6b.html et un dossier images contenant les images fournies pour le TP6a.

Structure de fichiers :

Échéancier

Remettez le dossier complet, zippé, sur LÉA, dans l'espace prévu à cette fin, au plus tard :

  • le vendredi suivant le cours, 9h le matin.

Grille d'évaluation (pondération: 4% de la session)

TP6a:

  • La taille de la bannière correspond aux exigences de l'énoncé: /2
  • La bannière est centrée: /2
  • Une bordure entoure la bannière: /2
  • Une marge entoure la bannière: /2
  • la bordure comporte des coins ronds: /2
  • L'image geektatoo est bien positionnée: /2
  • L'image citmarqueg est bien positionnée: /2
  • L'image citmarqued est bien positionnée: /2
  • Le texte est bien positionné: /2
  • La mise en en forme du texte respecte le ton et l'équilibre de la maquette: /2
  • Total: /20

TP6b:

  • La barre de menu est horizontale: /2
  • La barre de menu est bien centrée: /2
  • La barre de menu comporte une marge dans le haut: /2
  • Le texte des hyperliens est centré en hauteur et en largeur: /2
  • Le dégradé des hyperliens est bien placé: /2
  • L'effet au survol des hyperliens est fonctionnel: /2
  • L'effet de survol comprend un changement de couleur du texte et une inversion du dégradé: /2
  • Les premier et dernier hyperliens comportent des coins extérieurs arrondis: /2
  • Les hyperlien sont séparés par une bordure en pointillés: /2
  • Le dernier hyperlien ne comporte pas de bordure en pointillés sur la droite: /2
  • Total: /20

TP6a: Travail à faire

Téléchargez les images: tp6a_images.zip

Voici la maquette de la bannière que vous devez reproduire :

Maquette tp6a

À partir de la maquette proposée, recréez la bannière en insérant les trois images d'arrière-plan fournies.

Pour ce faire, créez un dossier de travail au nom de grx_nomprenom_tp6, insérez-y le dossier images, ouvrez-le dans Brackets, puis créez un fichier HTML nommé tp6a.html.

Insérez la structure de base habituelle de la page HTML.

Dans l'élément <head>, Créez une feuille de style interne débutant par la règle de style suivante :

<style> <!-- * { margin: 0; padding: 0; } --> </style>

Voici les indications pour la création de la bannière :

  • Rédigez le balisage suivant (en plus du balisage de base pour la page HTML):
    Balisage du tp6.
  • Attribuez à <header> une largeur (width) de 860px et CENTREZ ce conteneur dans la fenêtre du navigateur à l'aide de marges appropriée.
  • Donnez à <header> une hauteur (height) de 340px.
  • Attribuez-lui une bordure (voir maquette) et arrondissez les coins avec un rayon de courbure de 12px.
  • Placez les trois images d'arrière-plan comme le montre la maquette. Utilisez les coordonnées en x et en y pour placez les images. (Voir les notes de cours plus haut à ce sujet.)
  • Placez et mettez en forme les textes de la citation et de la signature en vous inspirant de la maquette: police, taille, marges, etc. Notez la présence de classes dans le HTML vous permettant de cibler chacun des p individuellement.
  • Utilisez des marges afin d'éviter que header ne soit collé sur les bordures de la fenêtre.
  • Commentez votre feuille de style au besoin.

TP6b: Travail à faire

Le TP6b consiste à créer une barre de menu horizontale, centrée, et dont les hyperliens présentent un effet de changement de couleur au survol.

Maquette à reproduire pour le TP6b
Maquette tp6b.
  1. Créez un fichier HTML au nom de tp6b.html.
  2. En plus du balisage habituel de la page, inséréz le balisage suivant:

    Balisage du tp6b.
  3. Dans l'élément <head>, Créez une feuille de style interne débutant par la règle de style suivante :
  4. <style> <!-- * { margin: 0; padding: 0; } --> </style>
  5. Créez les règles de style qui permettent de placer les éléments du menu à l'horizontal, comme le montre la maquette.
  6. Créez les règles de style pour la mise en forme des hyperliens.
  7. Créez les règles de style qui produisent l'effet de survol des hyperliens: