Exercice 06 - Les sélecteurs CSS¶

Mise en place de l'exercice¶

Téléchargez le projet de départ dans le devoir Teams et copiez-le dans votre répertoire designweb
Créez ensuite un dossier nommé css et dans ce dossier un fichier style.css où vous allez écrire votre code css.
Reliez votre fichier css au fichier index.html
Une fois le travail terminé, compressez votre dossier et remettez le sur Teams.

Consignes¶

Note

Vous devez faire cette exercice uniquement avec des règles css. Il y a plusieurs solutions possibles pour les sélecteurs à utiliser, à vous de décider. Peut-être que vous devrez rechercher des solutions sur internet.

Modifiez le titre de la page « Exercice sur les sélecteurs CSS »
- La couleur du texte doit être rouge.
- La taille de la police doit être 3 fois plus grande. (utilisez l'unité de mesure {em})
- Le texte doit être centré
Pour tous les paragraphes
- La première lettre doit être 2 fois plus grande que le reste du texte et en italique.
- L’alignement du texte doit être « justifié ».
Pour le premier paragraphe
- La première lettre doit être de couleur mauve.
Pour les 4 paragraphes suivant de la section article
- La première lettre doit être de couleur verte
Quand on survole le titre « Consignes »
- La couleur du texte doit changer pour celle de votre choix

Attention

Pour les prochaines consignes, vous allez devoir rechecher par vous-même les propriétés à utiliser. C'est impossible de toutes les retenir par coeur et vous devez apprendre à faire vos propres recherche pour trouver l'information.

Assurez vous aussi de bien comprendre les solutions que vous mettez en place.

Stylisez un lien¶

Sélectionnez un mot dans un des paragraphes et transformez le en lien hypertexte, à vous de choisir vers quelle page pointe le lien. Modifiez le style du lien selon les points suivants :

Le texte doit être de la même couleur que le texte du paragraphe (par défaut la couleur est bleu). Si on change la couleur du texte du paragraphe, le lien aura lui aussi la même couleur.
Changez la barre de soulignement pour une barre ondulée et de couleur rouge.
Quand on survole le lien, la barre de soulignement doit disparaitre complêtement et le fond du texte doit être jaune, comme s'il était surligné.

Mise en forme du bloc des consignes¶

Transformez le bloc où sont inscrit les consignes de la façon suivante :

Ajoutez une bordure de 2 pixels de couleur #daa520.
Les coins de la bordure sont arrondis.
Le bloc doit avoir une largeur de 600 pixels.
Ajoutez aussi un espacement interne de 10 pixels sur les 4 côtés.
Il y a une image de fond, utilisez celle-ci : ex06_image_fond.jpg.
L'image doit être étiré pour quelle occupe toute la largeur du bloc.
Pour la touche finale ajoutez une ombre autour du bloc.

Le résultat devrait ressembler à ceci

CSS Diner¶

Créer un fichier texte à la racine de votre projet intitulé css-diner-solution.txt
Réalisez les exercices à l'adresse suivante et inscrivez les solutions dans le fichier texte.
CSS Diner : https://flukeout.github.io/

Essayez de réussir les 32 niveaux, on regarde ça ensemble au prochain cours.
Prenez le temps de lire les explications (en anglais) dans le menu de droite, elles vous expliquent souvent le sélecteur à utiliser.

Réponses de l'exercice

Les réponses à tous les numéros de l'exercice

01.  plate
02.  bento
03.  #fancy
04.  plate apple
05.  #fancy pickle
06.  .small
07.  orange.small
08.  bento orange.small
09.  plate, bento
10.  *
11.  plate *
12.  plate + apple
13.  bento ~ pickle
14.  plate > apple
15.  plate orange:first-child
16.  plate apple:only-child, plate pickle:only-child
17.  #fancy apple:last-child, pickle
18.  plate:nth-child(3)
19.  bento:nth-last-child(3)
20.  apple:first-of-type
21.  plate:nth-of-type(even)
22.  plate:nth-of-type(2n+3)
23.  plate apple:only-of-type
24.  apple:last-of-type, orange:last-of-type
25.  bento:empty
26.  apple:not(.small)
27.  [for]
28.  plate[for]
29.  [for="Vitaly"]
30.  [for^='Sa']
31.  [for$='ato']
32.  [for*='obb']