linkedin-skill-assessments-quizzes

CSS

Q1. Parmi ces sélecteurs, quel sélecteur a la spécificité la plus élevée pour la sélection de l’élément de lien d’ancre ?

ul li a
a
.example a
div a

Q2. En utilisant un sélecteur d’attribut, comment sélectionneriez-vous un élément <a> avec un attribut “title” ?

Remarque: une alternative à la question ci-dessous.

Q3. Quel est le sélecteur CSS pour une balise <a> contenant l’attribut title ?

Remarque: une alternative à la question ci-dessus.

Q4. CSS Grid et Flexbox deviennent de plus en plus populaires pour créer des mises en page de page. Cependant, les flottants sont toujours couramment utilisés, en particulier lors de la manipulation d’une base de code plus ancienne ou si vous devez prendre en charge des versions plus anciennes des navigateurs. Quelles sont deux techniques valides utilisées pour effacer les flottants ?

Q5. Quel(s) élément(s) correspondent aux sélecteurs suivants ?

1) .nav {
  ...;
}
2) nav {
  ...;
}
3) #nav {
  ...;
}

  1. Un élément avec un ID "nav"
  2. Un élément nav
  3. Un élément avec une classe "nav"

  1. Un élément avec une classe "nav"
  2. Un élément nav
  3. Un élément avec un ID "nav"

  1. Un élément avec une classe "nav"
  2. Un élément nav
  3. Un div avec un ID "nav"

Q6. Lors de l’ajout de styles de transparence, quelle est la différence entre l’utilisation de la propriété opacity et de la propriété background avec une valeur rgba() ?

Q7. Qu’est-ce qui est vrai des éléments de bloc et d’éléments en ligne ?

Q8. CSS Grid a introduit une nouvelle unité de longueur, fr, pour créer des pistes de grille flexibles. En vous référant à l’exemple de code ci-dessous, quelles seront les largeurs des trois colonnes ?

.grid {
  display: grid;
  width: 500px;
  grid-template-columns: 50px 1fr 2fr;
}

Remarque: une alternative à la question ci-dessous.

Q9. Si la largeur du conteneur est de 500 pixels, quelle sera la largeur des trois colonnes dans cette disposition ?

.grid { display: grid; grid-template-columns: 50px 1fr 2fr; }

Remarque: une alternative à la question ci-dessus.

Q10. À quoi sert la propriété line-height ?

pace entre deux lignes de contenu

Q11. Trois de ces choix sont vrais concernant les sélecteurs de classe. Lequel n’est pas vrai ?

Remarque: une alternative à la question ci-dessous.

Q12. Qu’est-ce qui n’est pas vrai à propos des sélecteurs de classe ?

Q13. Il existe de nombreuses propriétés qui peuvent être utilisées pour aligner des éléments et créer des mises en page de page, telles que float, position, flexbox et grid. Parmi ces quatre propriétés, laquelle devrait être utilisée pour aligner une barre de navigation globale qui reste fixe en haut de la page ?

Q14. Dans l’exemple abrégé ci-dessous, quelles propriétés de fond individuelles sont représentées ?

background: blue url(image.jpg) no-repeat scroll 0px 0px;

background-color: blue;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px 0px;

background-color: blue;
background-img: url(image.jpg);
background-repeat: no-repeat;
background-scroll: scroll;
background-size: 0px 0px;

background-color: blue;
background-src: url(image.jpg);
background-repeat: no-repeat;
background-wrap: scroll;
background-position: 0px 0px;

background-color: blue;
background-src: url(image.jpg);
background-repeat: no-repeat;
background-scroll: scroll;
background-position: 0px 0px;

Q15. Dans cet exemple, selon les règles de cascade et de spécificité, quelle couleur aura le lien ?

.example {
  color: yellow;
}
ul li a {
  color: blue;
}
ul a {
  color: green;
}
a {
  color: red;
}

<ul>
  <li><a href="#" class="example">lien</a></li>
  <li>élément de liste</li>
  <li>élément de liste</li>
</ul>

Q16. Lorsque des éléments se chevauchent, ils sont ordonnés sur l’axe z (c’est-à-dire quel élément en couvre un autre). La propriété z-index peut être utilisée pour spécifier l’ordre z des éléments chevauchants. Quel ensemble d’affirmations concernant la propriété z-index est vrai ?

Note : une alternative à la question ci-dessous.

Q17. Lorsque des éléments à l’intérieur d’un conteneur se chevauchent, la propriété z-index peut être utilisée pour indiquer comment ces éléments sont empilés les uns sur les autres. Quel ensemble d’affirmations est vrai ?

  1. Les valeurs de z-index plus élevées apparaissent au-dessus des éléments avec une valeur de z-index inférieure.
  2. Des nombres négatifs et positifs peuvent être utilisés.
  3. La propriété z-index peut être utilisée uniquement sur des éléments positionnés.

  1. Les valeurs de z-index plus faibles apparaissent au-dessus des éléments avec une valeur de z-index plus élevée.
  2. Des nombres négatifs et positifs peuvent être utilisés.
  3. La propriété z-index peut être utilisée avec ou sans éléments positionnés.

  1. Les valeurs de z-index plus faibles apparaissent au-dessus des éléments avec une valeur de z-index plus élevée.
  2. Des nombres négatifs et positifs peuvent être utilisés.
  3. La propriété z-index doit également être utilisée avec des éléments positionnés.

  1. Les valeurs de z-index plus élevées apparaissent au-dessus des éléments avec une valeur de z-index inférieure.
  2. Seuls des nombres positifs peuvent être utilisés.
  3. La propriété z-index doit également être utilisée avec des éléments positionnés.

Note : une alternative à la question ci-dessous.

Q18. Quelle est la différence entre les paramètres line-height suivants ?

line-height: 20px;
line-height: 2;

Q19. Dans l’exemple suivant, quelle couleur sera appliquée au paragraphe un et au paragraphe deux ?

<section>
  <p>paragraphe un</p>
</section>

<p>paragraphe deux</p>

section p {
  color: red;
}
section + p {
  color: blue;
}

Q20. Quelles sont trois manières valides d’ajouter du CSS à une page HTML ?

  1. Externe ; le CSS est écrit dans un fichier séparé.
  2. En ligne ; le CSS est ajouté dans la balise <head> de la page HTML.
  3. Interne ; le CSS est inclus dans les balises HTML.

  1. Externe ; le CSS est écrit dans un fichier séparé et est lié à l'élément <header> du fichier HTML.
  2. En ligne ; le CSS est ajouté à la balise HTML.
  3. Interne ; le CSS est inclus dans l'élément <header> du fichier HTML.

  1. Externe ; le CSS est écrit dans un fichier séparé et est lié à l'élément <head> du fichier HTML.
  2. Interne ; le CSS est inclus dans l'élément <header> du fichier HTML.
  3. En ligne ; le CSS est ajouté à la balise HTML.



  1. Externe ; le CSS est écrit dans un fichier séparé et est lié à l'élément <head> du fichier HTML.
  2. En ligne ; le CSS est ajouté à la balise HTML.
  3. Interne ; le CSS est inclus dans l'élément <head> du fichier HTML.

Q21. Quelle affirmation est vraie concernant le format d’image SVG ?

Q22. Dans l’exemple ci-dessous, quand la couleur rose sera-t-elle appliquée à l’élément ancre ?

a:active {
  color: pink;
}

Q23. Pour changer la couleur d’un SVG à l’aide de CSS, quelle propriété est utilisée ?

Q24. Lorsque vous utilisez position: fixed, l’élément sera toujours positionné par rapport à quoi ?

Q25. Par défaut, une image d’arrière-plan se répétera _

Q26. Lors de l’utilisation de media queries, les types de média sont utilisés pour cibler une catégorie de périphérique. Quel choix liste les types de média valides actuels ?

Q27. Comment pouvez-vous rendre la première lettre de chaque paragraphe de la page en rouge ?

Q28. Dans cet exemple, quel est le sélecteur, la propriété et la valeur ?

p {
  color: #000000;
}

  "p" est le sélecteur
  "#000000" est la propriété
  "couleur" est la valeur

  "p" est le sélecteur
  "couleur" est la propriété
  "#000000" est la valeur

  "couleur" est le sélecteur
  "#000000" est la propriété
  "#p" est la valeur

  "couleur" est le sélecteur
  "p" est la propriété
  "#000000" est la valeur

Q29. Sur quoi est basée l’unité rem ?

Q30. Quel choix donnerait à un élément de bloc des coins arrondies ?

Documentation officielle :

Certainly! Here are the questions and their multiple-choice answers translated into French:

Q31. Dans l’exemple de requête multimédia suivant, quelles conditions sont ciblées?

@media (min-width: 1024px), screen and (orientation: landscape) {
  ...;
}

Q32. Les propriétés de transformation CSS sont utilisées pour modifier la forme et la position des objets sélectionnés. La propriété transform-origin spécifie l’emplacement de l’origine de transformation de l’élément. Par défaut, quel est l’emplacement de l’origine?

Reference

Q33. Quelle des valeurs suivantes n’est pas une valeur de couleur valide? (Alternative: Quel choix n’est pas une valeur de couleur valide?)

Q34. Quel est l’espace vertical entre les deux éléments ci-dessous?

<div style="margin-bottom: 2rem;">Div 1</div>
<div style="margin-top: 2rem;">Div 2</div>

Reference MDN Webdocs

Q35. Lors de l’utilisation de la méthode Flexbox, quelle propriété et valeur sont utilisées pour afficher les éléments flex en colonne?

Q36. Quel type de déclaration prévaudra?

Q37. La propriété flex-direction est utilisée pour spécifier la direction dans laquelle les éléments flex sont affichés. Quelles sont les valeurs utilisées pour spécifier la direction des éléments dans les exemples suivants?

quote

Q38. Il existe deux combinateurs de frères qui peuvent être utilisés pour sélectionner des éléments contenus dans le même élément parent ; le combinateur général de frères (~) et le combinateur de frères adjacents (+). En référence à l’exemple ci-dessous, quels éléments auront les styles appliqués?

h2 ~ p {
  color: blue;
}
h2 + p {
  background: beige;
}

<section>
  <p>paragraphe 1</p>
  <h2>Titre</h2>
  <p>paragraphe 2</p>
  <p>paragraphe 3</p>
</section>

Note: une variante de la question ci-dessous.

Q39. Quels élément(s) seront bleus?

h2 ~ p {
  color: blue;
}

<section>
  <p>P1</p>
  <h2>H2</h2>
  <p>P3</p>
  <p>P4</p>
</section>

Reference

Q40. Lors de l’utilisation de Flexbox, la propriété “justify-content” peut être utilisée pour distribuer l’espace entre les éléments flex le long de l’axe principal. Quelle valeur devrait être utilisée pour répartir de manière é

gale les éléments flex à l’intérieur du conteneur présenté ci-dessous?

quote

Q41. Il existe de nombreux avantages à utiliser des polices d’icônes. Quel est l’un de ces avantages?

Q42. Quelle est la différence entre display:none et visibility:hidden?

Q43. Quel sélecteur et propriété utiliseriez-vous pour mettre à l’échelle un élément pour le rendre 50% plus petit au survol?

Q44. Laquelle des déclarations concernant les polices d’icônes est vraie?

Q45. Les valeurs de la propriété font-weight peuvent être des mots-clés ou des nombres. Pour chaque valeur numérique ci-dessous, quel est le mot-clé associé?

font-weight: 400;
font-weight: 700;

J’espère que cela vous sera utile!

This site is open source. Improve this page.