≡

Bilan de compétences sous forme de Quiz

Les Sélecteurs CSS

Liste des Tuto

Les sélecteurs CSS

Liste des compétences

Minuscules et Majuscules en CSS
Les règles de nommage des identificateurs et des classes.
Nom et Rôle des sélecteurs
Utilisation des sélecteurs

Faire le Quiz Voir le Corrigé

Liste des compétences et des tests

Minuscules et Majuscules en CSS

Les règles de nommage des identificateurs et des classes.

Nom et Rôle des sélecteurs

Utilisation des sélecteurs

Sélectionner tous les éléments du document et mettre les margin à zéro.

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner tous les enfants de section et mettre la couleur du fond à gray.

<!DOCTYPE html> <html> <head> <title>Les sélecteurs</title> <meta charset="utf-8"> </head> <body> <section> <h2>Titre de cette section</h2> <p>Premier paragraphe</p> <ul> <li>Choix 1.</li> <li>Choix 2.</li> <ul> </section> <h2>Titre après la section</h2> <p>Premier paragraphe</p> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Ecrire la règle CSS. Utiliser l'id 'para' et mettre la couleur du paragraphe en rouge ?

<!DOCTYPE html> <html> <head> <title>Utiliser un sélecteur d'id</title> <meta charset="utf-8"> </head> <body> <p id='para'>Mettre ce paragraphe en rouge</p> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Ecrire la règle CSS. Utiliser la classe 'para' et aligner le texte au centre du pragraphe ?

.. <body> .. <p class='para'>Aligner ce texte au centre</p> .. </body> ..

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner tous les h1 et mettre la couleur du texte à rouge

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Ecrire la règle CSS. Utiliser l'id 'para' associé au type de son l'élément pour mettre la couleur en rouge ?

<!DOCTYPE html> <html> <head> <title>Utiliser un sélecteur d'id</title> <meta charset="utf-8"> </head> <body> <p id='para'>Mettre ce paragraphe en rouge</p> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Ecrire la règle CSS. Utiliser la classe 'para' associé au type de son l'élément et mettre le texte en rouge ?

<!DOCTYPE html> <html> <head> <title>Utiliser un sélecteur d'id</title> <meta charset="utf-8"> </head> <body> <p class='para'>Mettre ce paragraphe en rouge</p> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner h2 et id='para' ?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <h2>Titre</h2> <p>Paragraphe</p> <p id='para'>Autre paragraphe</p> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner toutes les images qui ont un attribut title

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <img src='paris-notre-dame.jpg' title='Gargouille de Paris Notre-Dame' > <img src='paris-seine.jpg' title='Paris bords de Seine' > <img src='paris-eiffel.jpg' title='La tour Eiffel à Paris' > <img src='paris-triomphe.jpg' title="L'arc de triomphe" > <img src='paris-trocadero.jpg' title='Paris'> <img src='paris-sacre-coeur.jpg' > </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner toutes les images qui ont un attribut title contenant uniquement le mot Paris. (Ecrire 'Paris' entre simple quote)

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner toutes les images qui ont un attribut title contenant le mot Paris. (Ecrire 'Paris' entre simple quote)

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner toutes les images qui ont un attribut title qui commence par le mot Paris. (Ecrire 'Paris' entre simple quote)

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner toutes les images qui ont un attribut title qui se termine par le mot Paris. (Ecrire 'Paris' entre simple quote)

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner uniquement le bouton connexion de la classe push_button en utilisant l'id d'un ancêtre

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .push_button { border: 1px solid black; background-color: green; } </style> </head> <body> <div id='dialog-connexion'> <form> <button class='push_button'>Connexion</button> </form> </div> <div id='dialog-deconnexion'> <form> <button class='push_button'>Deconnexion</button> </form> </div> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner uniquement les deux premiers paragraphes

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>Paragraphe 1</p> <p>Paragraphe 2</p> <div><p>Paragraph 3</p></div> <article> <p>Paragraph 4.</p> <p>Paragraph 5.</p> </article> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner uniquement le paragraphe qui contient "Premier paragraphe d'introduction"

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> </head> <body> <p>Un paragraphe avant article.</p> <article> <ul> <li>List Item</li> <li>List Item</li> </ul> </article> <p>Premier paragraphe d'introduction.</p> <p>Second paragraphe</p> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner tous les paragraphes qui sont derrières la balise fermante article

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner tous les liens qui ne sont pas visités

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner tous les liens qui sont visités

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner tous les liens qui sont survolés

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner l'état actif de tous les liens

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Donner la formule mnémotechnique qui permet de se souvenir de l'ordre de déclaration des pseudo-classes relatives à l'état des liens

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner les entrées de type input qui sont activées.

<!DOCTYPE html> <html> <head> </head> <body> <form> <input type='checkbox' checked='checked' ><br> <input type='text' enabled='enabled' value='enabled' ><br> <input type='text' disabled='disabled' value='disabled' > </form> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner les entrées de type input qui sont désactivées.

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner les entrées de type input qui sont cochées

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner le premier paragraphe (sans utiliser le numéro de son rang)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>Premier paragraphe</p> <p>Deuxieme paragraphe</p> <p>Troisieme paragraphe</p> <p>Quatrieme paragraphe</p> <p>Cinquieme paragraphe</p> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner le dernier paragraphe (sans utiliser le numéro de son rang)

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner le deuxième paragraphe

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner les paragraphes de rang pair

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner les paragraphes de rang impair

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner la première lettre d'un paragraphe

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>La premiere lettre</p> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Sélectionner la première ligne d'un paragraphe

<!DOCTYPE html> <html> <head> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, soluta alias aut deleniti voluptas officiis tempora obcaecati nobis nulla saepe voluptates temporibus est hic cumque eligendi blanditiis atque reprehenderit numquam labore rerum possimus porro animi sed laudantium sapiente fugiat nostrum. Perferendis, dicta nostrum odit in illum consectetur dolore eaque accusantium autem! Vero, ratione totam aperiam a minima dignissimos unde saepe repellat non natus. Illum, sint unde explicabo reprehenderit numquam? Possimus, neque quas quod ullam repellat natus suscipit labore ducimus iste facere.</p> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Pour ajouter du contenu au début d'un élément il est possible de se servir d'un pseudo-élément. Lequel ?

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Pour ajouter du contenu à la fin d'un élément il est possible de se servir d'un pseudo-élément. Lequel ?

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Lorsque l'on utilise les pseudos élément before ou after quel est le nom de la propriété qu'il faut utiliser pour y placer le contenu ?

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Politique de confidentialité

Mentions Légales