font - Exercices

Fonte 1.

Modifiez le css pour que la police soit de même taille que le div père pour les div enfants d'un div.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Imbrication </title>
        <style>
            html{font-size: 30px;}
            div{font-size: 0.9em;}
        </style>
    </head>
    <body>
         <div>
         Génération 0
             <div>
             Génération 1
                 <div>
                 Génération 2
                     <div>
                     Génération 3
                        <div>
                        Génération 4
                        </div>
                     </div>
                 </div>
             </div>
         </div>
    </body>
</html>

Il suffit d'utiliser l'unité rem au lieu de l'unité em.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Couleurs </title>
        <style>
            html{font-size: 20px;}
            div{font-size: 0.9rem;}
        </style>
    </head>
    <body>
        Taille de référence.
        <div>
         Génération 0
             <div>
             Génération 1
                 <div>
                 Génération 2
                     <div>
                     Génération 3
                        <div>
                        Génération 4
                        </div>
                     </div>
                 </div>
             </div>
         </div>
    </body>
</html>

Fonte 2.

Modifiez le css afin que la première ligne de chaque paragraphe soit en petites majuscules. On utilisera le pseudo-élément ::first-line.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Devos </title>
        <style>
        
        </style>
    </head>
    <body>
    
    <h2> Un extrait de sketch de R.Devos </h2>
         <p>Actuellement, mon immeuble est sens dessus dessous. 
          Tous les locataires du dessous voudraient habiter au-dessus. Tout cela parce que le locataire
qui est au-dessus est allé raconter par en dessous que l'air que l'on respirait à l’étage au-dessus était meilleur que celui que l'on respirait à l’étage en dessous.</p>
<p>
Alors, le locataire qui est en dessous a tendance à envier celui qui est au-dessus et à mépriser celui qui est en dessous.
Moi, je suis au-dessus de ça.
Si je méprise celui qui est en dessous, ce n'est pas parce qu'il est en dessous, c'est parce qu'il convoite l'appartement qui est au-dessus, le mien.
</p>
<p>
Remarquez . . . moi, je lui céderais bien mon appartement à celui du dessous à condition d'obtenir celui du dessus.
Mais je ne compte pas trop dessus.
D'abord parce que je n'ai pas de sous. Ensuite, au-dessus de celui qui est au-dessus, il n'y a plus d'appartement. Alors, le locataire du dessous qui monterait au-dessus obligerait celui du dessus à redescendre en dessous.
Or, je sais que celui du dessus n'y tient pas. D'autant que, comme la femme du dessous est tombée amoureuse de celui du dessus, celui du dessus n'a aucun intérêt à ce que le mari de la femme du dessous monte au-dessus.
Alors, là-dessus ... quelqu'un est-il allé raconter à celui du dessous qu'il avait vu sa femme bras dessus, bras dessous avec celui du dessus ???
Toujours est-il que celui du dessous l'a su.
Et un jour que la femme du dessous était allée rejoindre celui du dessus,
comme elle retirait ses dessous ... et lui, ses dessus ... soi-disant parce qu'il avait trop chaud en dessous ... Je l'ai su .. parce que d'en dessous, on entend tout ce qui se passe au-dessus ...
Bref! Celui du dessous leur est tombé dessus. 
Comme ils étaient tous les deux soûls, ils se sont tapés dessus. 
Finalement, c'est celui du dessous qui a eu le dessus!</p>
    </body>
</html>

On remarquera, si ce n'est déjà fait, que la notion de première ligne est relative à la taille de police, à la largeur utilisée pour écrire le texte...

Il s'agit bien de la première ligne sur l'écran, à l'affichage.

Pour sélectionner la première phrase plutôt que la première ligne, on pourrait utiliser javascript (pour repérer le premier caractère marquant une fin de phrase : point, point d'exclamation, point d'interrogation notamment).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Devos </title>
        <style>
             p::first-line{
             font-variant : small-caps;
             }
        </style>
    </head>
    <body>
    
    <h2> Un extrait de sketch de R.Devos </h2>
         <p>Actuellement, mon immeuble est sens dessus dessous. 
          Tous les locataires du dessous voudraient habiter au-dessus. Tout cela parce que le locataire
qui est au-dessus est allé raconter par en dessous que l'air que l'on respirait à l’étage au-dessus était meilleur que celui que l'on respirait à l’étage en dessous.</p>
<p>
Alors, le locataire qui est en dessous a tendance à envier celui qui est au-dessus et à mépriser celui qui est en dessous.
Moi, je suis au-dessus de ça.
Si je méprise celui qui est en dessous, ce n'est pas parce qu'il est en dessous, c'est parce qu'il convoite l'appartement qui est au-dessus, le mien.
</p>
<p>
Remarquez . . . moi, je lui céderais bien mon appartement à celui du dessous à condition d'obtenir celui du dessus.
Mais je ne compte pas trop dessus.
D'abord parce que je n'ai pas de sous. Ensuite, au-dessus de celui qui est au-dessus, il n'y a plus d'appartement. Alors, le locataire du dessous qui monterait au-dessus obligerait celui du dessus à redescendre en dessous.
Or, je sais que celui du dessus n'y tient pas. D'autant que, comme la femme du dessous est tombée amoureuse de celui du dessus, celui du dessus n'a aucun intérêt à ce que le mari de la femme du dessous monte au-dessus.
Alors, là-dessus ... quelqu'un est-il allé raconter à celui du dessous qu'il avait vu sa femme bras dessus, bras dessous avec celui du dessus ???
Toujours est-il que celui du dessous l'a su.
Et un jour que la femme du dessous était allée rejoindre celui du dessus,
comme elle retirait ses dessous ... et lui, ses dessus ... soi-disant parce qu'il avait trop chaud en dessous ... Je l'ai su .. parce que d'en dessous, on entend tout ce qui se passe au-dessus ...
Bref! Celui du dessous leur est tombé dessus. 
Comme ils étaient tous les deux soûls, ils se sont tapés dessus. 
Finalement, c'est celui du dessous qui a eu le dessus!</p>
    </body>
</html>