Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.
For the best experience please use the latest Chrome, Safari or Firefox browser.
L'élément ci-dessous vous permet de choisir une couleur (si votre navigateur ne le reconnaît pas, utilisez par exemple ce site).
En utilisant cette couleur, essayez de reproduire les couleurs suivantes : bleu, rouge, vert, jaune, magenta, cyan, blanc, noir. Ce sont les 8 couleurs principales.
En sachant que du mélange de couleurs correspond à faire la moyenne des valeurs RGB, qu'éclaircir/foncer revient à faire la moyenne avec du blanc/noir, essayez de proposer des proportions pour faire : du rose, du marron, du orange.
En sachant que rendre les trois valeurs plus proche les unes des autres consiste à désaturer (rendre moins vif) les couleurs, essayez de proposer des proportions pour faire : du jaune caca d'oie, du bleu terne.
Voir une série de solutions.
Reprenez le résultat de l'exercice 6 (source ; source du PSG ; source de l'ASM). Appliquez une feuille de style globale pour obtenir l'affichage proposé ici en solution. Rajoutez un identifiant au body de chaque page pour les distinguer et appliquer les règles différentes pour le titre.
Voici la feuille de style pour la correction ainsi que les sources HTML (source ; source du PSG ; source de l'ASM).
Regardez ce fichier. Commencez par vérifier que quand vous utilisez les fonctions de loupe (Ctrl+Shift++, Ctrl+Shift+-), toutes les phrases restent proprotionnellement de même taille.
Ensuite, changez la taille de la police par défaut. Observez la différence entre les unités relatives et absolues. Regardez aussi la différence em/rem.
Revenez à une taille normale de police par défaut (taille 16 sur mon Firefox ; taille "moyenne" sur mon Chrome). Vérifiez que vous êtes à 100% de grossissement. Quelle est la taille du carré ?
En utilisant le résultat de xdpyinfo | grep dimen dans un terminal, vérifiez quelle est la résolution de votre écran selon le système. En utilisant un mètre, vérifiez pourquoi on a un décalage.
Prenez le texte généré aléatoirement de ce fichier.
Modifiez-le de façon à obtenir ce fichier.
Les mesures utiles: la largeur width à appliquer au body est de 450px, et la font-size de cet élément doit être de 20px et les marges à la valeur spéciale auto.
Correction : Fichier HTML et Fichier CSS.
Deux boîtes dont le contenu a une hauteur et une largeur spécifiée sont visualisées dans un affichage qui a une hauteur et une largeur spécifiée.
En tenant compte des spécifications qui sont données, établissez de façon précise les distances entre les boîtes et le bord de la zone d'affichage.
NB: au cas où la taille totale horizontale d'une boîte n'atteint pas la zone d'affichage, la boîte est placée à gauche par défaut (et la marge droite est agrandie). Si le contenu n'a pas de taille fixée, c'est alors la taille du contenu qui est agrandie (mais ce n'est pas le cas dans cet exercice).
C'est également vrai dans l'autre direction pour la dernière boîte si elle n'atteint pas le bas (la page est tassée vers le haut).
Résultat et correction.
Pour vous entraîner avec les flexbox, vous allez jouer dans la mare.
Vous devez aller au moins jusqu'au niveau 13 !
Si vous voulez découvrir le principe des grilles CSS, vous pouvez cultiver vos carottes.
Essayez d'aller jusqu'au niveau 17 !
Voici un code source (il ressemble à ceci sans CSS).
Expliquez de quelle couleur va s'afficher chacun des nombres.
Après, vous pouvez regarder la solution.
