Tech Test Partie 2-3 Flashcards
Question 1. Pt. 2
Quelles étapes doit-on suivre pour importer du CSS dans un fichier HTML ?
- Créer un fichier ayant l’extension .css
- Utiliser la balise <link></link> pour importer le fichier
Question 2. Pt.2
On a le code HTML suivant :
<body>
<h1>Bienvenue sur ma page</h1>
<p>Ceci est le super contenu de mon paragraphe</p>
</body>
Comment faire pour que la couleur du titre ainsi que du paragraphe soient #ff1493 ?
- h1, p {
color: #ff1493;
} - h1 {
color: #ff1493;
}
. p {
color: #ff1493;
} - h1, p {
color: rgb(255, 20, 147);
Question 3. Pt.2
On a le HTML suivant :
<p></p>
<p></p>
À partir de l’aperçu suivant, quelles propriétés de texte ont été appliquées dans les classes premier-paragraphe ou deuxieme-paragraphe ?
- text-align
- font-size
- font-family
Question 4. Pt.2
Regardez le CodePen Quiz P2Q4, dans lequel vous avez la classe elem.
Lorsque vous le survolez avec la souris, l’opacité de l’élément est moins forte.
Par quelles valeurs pourriez-vous remplacer le code de la ligne 9 pour obtenir le même résultat ? (N’hésitez pas à tester les différentes valeurs proposées.)
- background-color: rgba(25, 25, 112, 0.7);
Question 5. Pt.2
Voici le CodePen Quiz P2Q5.
Quelle(s) propriété(s) ajouter ou modifier à la classe .banniere pour que mon background s’adapte bien en largeur (en restant sur une taille d’écran classique), s’affiche une seule fois et affiche aussi bien le sol que le ciel ?
- background-size: cover;
- background-position: center;
Question 6. Pt.2
Vous avez la page juste en dessous. Le HTML et le CSS ont été codés de sorte à avoir :
<div>
<h1>☀️ Bienvenue sur ma page 🏝</h1>
</div>
<h2>Ici, vous avez le contenu de la page</h2>
Que devez-vous écrire dans le fichier CSS au niveau de la classe .banner pour obtenir le même résultat ? N’hésitez pas à copier-coller le code pour voir ce que vous obtenez.
- background: linear-gradient(to left, #1CB5E0, #000046);
- background: linear-gradient(to right,#000046, #1CB5E0);
Question 7. Pt.2
Quelles propriétés manque-t-il pour obtenir le même résultat ?
- box-shadow
- border-radius
Question 8. Pt.2
Quel bout de code CSS vous permet de créer un effet où le texte, ainsi que le bord qui entoure le lien, deviennent bleu lorsqu’on clique sur le lien ?
- a:active {
color: blue;
border-color: blue;
}
Question 1. Pt.3
Parmi les affirmations suivantes, laquelle est fausse ?
- L’apparence visuelle du site dépend beaucoup de la structure des balises <header> , <main> et <footer>
Question 2. Pt.3
Quel bout de code ajouter dans la classe .element pour arriver à la capture d’écran ci-dessous ?
- padding: 50px;
- padding-top: 50px;
padding-bottom: 50px;
Question 3. Pt.3
Parmi les éléments suivants, lesquels sont nativement des éléments inline qui vont se mettre les uns à la suite des autres sans prendre toute la largeur ?
- span
- a
Question 4. Pt.3
Quelle ligne de code manque-t-il à la classe .conteneur pour obtenir le résultat suivant ?
- flex-wrap: wrap;
Question 5. Pt.3
Quelle propriété appliquée sur un élément dans une mise en page Flexbox permet de modifier l’ordre des éléments en les réagençant sans modifier le HTML ?
- order
Question 6. Pt.3
Parmi les affirmations suivantes, laquelle est exacte ?
- Les gap permettent d’espacer les éléments entre eux dans les CSS Grids
Question 7. Pt.3
Quelles sont les options offertes par la propriété display ?
- Transformer un élément inline en élément block
- Cacher entièrement un élément
- Profiter des avantages de l’ inline et de ceux des block
