Utiliser plusieurs éléments

Jusqu'ici, on a vu comment modifier le style d'un élément sur la page. Mais la plupart du temps, on aura besoin d'afficher plusieurs éléments différents. Pour cela, nous allons voir aujourd'hui la clef Sub qui sert à ajouter des éléments enfants.

Compilez donc cet exemple :

background: white
color: black
font-size: 150%
left: 0
top: 0
width: 100%
height: 100%
Sub:
 - Text: "<html>Êtes vous vraiment sûr de vouloir faire ce que vous vous apprêtez à faire ?<hr/>C'est peut-être bien une annerie, vous savez ?"
   text-align: justify
   left: 10%
   top: 10%
   width: 80%
   height: 30%
 - left: 0%
   top: 80%
   width: 50%
   height: 20%
   Sub:
     - position: relative
       display: table
       width: 100%
       height: 100%
       Sub:
         - Text: Non
           position: relative
           display: table-cell
           top: 0
           left: 0
           width: 100%
           height: 100%
           font-size: 200%
           color: yellow
           text-align: center
           vertical-align: middle
           background: "#333"
           border: "medium solid #777"
     - left: 0
       top: 0
       width: 100%
       height: 60%
       border-radius: 0 0 50% 50%
       background: "#ffe"
       opacity: 0.5
 - left: 50%
   top: 80%
   width: 50%
   height: 20%
   Sub:
     - position: relative
       display: table
       width: 100%
       height: 100%
       Sub:
         - Text: Oui
           position: relative
           display: table-cell
           top: 0
           left: 0
           width: 100%
           height: 100%
           font-size: 200%
           color: yellow
           text-align: center
           vertical-align: middle
           background: "#333"
           border: "medium solid #777"
     - left: 0
       top: 0
       width: 100%
       height: 60%
       border-radius: 0 0 50% 50%
       background: "#ffe"
       opacity: 0.5

Il y a plusieurs choses à noter ici. Tout d'abord, la clef Text peut recevoir du HTML. il suffit de commencer le texte par <html> et les tags du HTML seront interprétés.

Ensuite, on voit quelques tirets dans ce code. Ils permettent de délimiter les éléments d'une liste. En effet, la clef Sub s'attend à une liste de sous-éléments. Dans notre exemple, il y a 3 sous-éléments : le texte et les deux boutons. Chacun de ses éléments peut posséder des sous-éléments, comme c'est le cas ici pour les boutons qui ont un aspect compliqué.

Enfin, on constate que les propriétés de styles sont hérités par les sous-éléments. Ainsi, on n'a pas spécifié la couleur du texte dans l'élément qui lui est dédié. Mais ce texte sera noir car l'élément racine a spécifié cette propriété (color: black).