CSS signifie des feuilles de style en cascade. Il s’agit d’un langage de programmation utilisé pour décrire la présentation et le style d’un document écrit en HTML ou XML. CSS fournit un ensemble de règles et de propriétés qui définissent comment les éléments doivent être affichés sur une page Web.
Avec CSS, les concepteurs Web et les développeurs peuvent contrôler divers aspects de l’apparence d’un site Web, y compris la disposition, les couleurs, les polices, l’espacement et les effets. En séparant les informations de style du contenu, CSS permet un processus de développement Web plus efficace et flexible.
CSS fonctionne sur un principe en cascade, où les règles de style multiple peuvent être appliquées à un élément, et le style final est déterminé par l’ordre de spécificité et l’application de différents sélecteurs. Cela permet une personnalisation et une cohérence faciles sur les pages Web.
Les sélecteurs CSS sont utilisés pour cibler des éléments HTML spécifiques ou des groupes d’éléments pour appliquer les styles souhaités. Les sélecteurs peuvent être basés sur des types d’éléments, des noms de classe, des ID, des attributs, etc., offrant une grande flexibilité dans le style.
CSS3, la dernière version de CSS, a introduit de nombreuses nouvelles fonctionnalités, y compris des options de mise en page avancées, des transitions, des animations, des gradients, etc., permettant une conception Web encore plus créative et interactive.
Contour de l’article
- Partie 1: Créez un quiz CSS étonnant en utilisant l’IA instantanément dans OnlineExamMaker
- Partie 2: 15 Questions et réponses du quiz CSS
- Partie 3: Essayez le générateur de questions OnlineExamMaker pour créer des questions de quiz
Partie 1: Créez un quiz CSS étonnant en utilisant l’IA instantanément dans OnlineExamMaker
Le moyen le plus rapide d’évaluer les compétences CSS des candidats est d’utiliser une plate-forme d’évaluation de l’IA comme OnlineExamMaker. Avec le générateur de questions en ligne d’Exammaker, vous pouvez saisir du contenu, comme le texte, les documents ou les sujets, puis générer automatiquement des questions dans divers formats (par exemple, à choix multiple, vrai / faux, réponse courte). Son élève d’examen d’IA peut noter automatiquement l’examen et générer des rapports perspicaces après que votre candidat a soumis l’évaluation.
Aperçu de ses principales caractéristiques liées à l’évaluation:
● Créez jusqu’à 10 types de questions, y compris les questions à choix multiples, vraies / fausses, remplies, correspondant, réponse courte et essai.
● Génère automatiquement des rapports détaillés – scores individuels, rapport de question et performances de groupe.
● Score instantanément des questions objectives et les réponses subjectives utilisent une notation basée sur les rubriques pour la cohérence.
● L’API et le SSO aident les formateurs à intégrer en ligne EXAMMaker avec Google Classroom, Microsoft Teams, CRM et plus encore.
Générez automatiquement des questions à l’aide de l’IA
Partie 2: 15 Questions et réponses du quiz CSS
or
1. Question: Quelle est la signification de l’acronyme CSS?
A. Cascading Style Sheets
B. Computer Style Sheets
C. Creative Style System
D. Cascading Script Sheets
Réponse: A
Explication: CSS signifie Cascading Style Sheets, qui est un langage utilisé pour décrire l’apparence des documents HTML et XML.
2. Question: Comment appliquer une couleur de fond rouge à un élément div?
A. background-color: red;
B. color: red;
C. background: rouge;
D. font-color: red;
Réponse: A
Explication: La propriété background-color définit la couleur de fond d’un élément, et “red” est une valeur valide pour les couleurs.
3. Question: Quel sélecteur CSS cible un élément avec l’ID “header”?
A. .header
B. header
C. #header
D. *header
Réponse: C
Explication: Le sélecteur d’ID utilise le symbole # suivi du nom de l’ID, comme #header, pour cibler un élément spécifique.
4. Question: Quelle propriété CSS est utilisée pour définir la police d’un texte?
A. font-family
B. text-font
C. font-style
D. text-family
Réponse: A
Explication: La propriété font-family spécifie la famille de polices à utiliser pour le texte d’un élément.
5. Question: Comment centrer horizontalement un élément à l’intérieur d’un conteneur?
A. margin: auto;
B. text-align: center;
C. display: flex; justify-content: center;
D. Toutes les options ci-dessus peuvent fonctionner selon le contexte
Réponse: D
Explication: margin: auto; fonctionne pour les blocs, text-align: center; pour les éléments en ligne, et display: flex; avec justify-content: center; pour les flex containers.
6. Question: Quelle valeur de la propriété display rend un élément en ligne?
A. block
B. inline
C. flex
D. grid
Réponse: B
Explication: La valeur “inline” de la propriété display fait en sorte que l’élément s’affiche en ligne avec d’autres éléments, sans prendre toute la largeur.
7. Question: Comment masquer un élément sans l’enlever du flux du document?
A. display: none;
B. visibility: hidden;
C. opacity: 0;
D. display: block;
Réponse: B
Explication: visibility: hidden; rend l’élément invisible mais conserve son espace dans le flux, contrairement à display: none;.
8. Question: Quelle propriété définit l’espacement entre les lettres d’un texte?
A. letter-spacing
B. word-spacing
C. line-height
D. font-size
Réponse: A
Explication: La propriété letter-spacing contrôle l’espace entre les lettres individuelles dans un texte.
9. Question: Dans le modèle de boîte CSS, que représente la propriété padding?
A. L’espace autour de l’élément
B. L’espace entre le contenu et la bordure
C. La bordure elle-même
D. L’espace extérieur de l’élément
Réponse: B
Explication: Padding définit l’espace entre le contenu de l’élément et sa bordure, augmentant ainsi la taille intérieure.
10. Question: Comment créer un effet de survol sur un lien?
A. a:hover { color: blue; }
B. a:active { color: blue; }
C. a:link { color: blue; }
D. a:visited { color: blue; }
Réponse: A
Explication: Le pseudo-sélecteur :hover s’applique lorsqu’un utilisateur survole un élément avec le curseur, comme un lien.
11. Question: Quelle unité CSS est relative à la taille de la police de l’élément racine?
A. px
B. em
C. rem
D. %
Réponse: C
Explication: rem (root em) est une unité relative à la taille de la police de l’élément html racine, offrant une meilleure scalabilité.
12. Question: Comment activer le layout Flexbox sur un conteneur?
A. display: flex;
B. display: grid;
C. flex: 1;
D. layout: flex;
Réponse: A
Explication: La propriété display: flex; transforme un élément en conteneur Flexbox pour aligner ses enfants.
13. Question: Quelle propriété CSS contrôle l’opacité d’un élément?
A. opacity
B. transparency
C. visibility
D. alpha
Réponse: A
Explication: La propriété opacity définit le niveau de transparence d’un élément, avec des valeurs entre 0 (complètement transparent) et 1 (opaque).
14. Question: Comment définir une largeur responsive pour un élément?
A. width: 100%;
B. width: auto;
C. @media only screen and (max-width: 600px) { width: 100%; }
D. width: responsive;
Réponse: C
Explication: Utiliser des media queries comme @media permet de définir des styles basés sur la taille de l’écran, rendant l’élément responsive.
15. Question: Quelle pseudo-classe est utilisée pour cibler le premier enfant d’un élément?
A. :first-child
B. :last-child
C. :nth-child(1)
D. :first-of-type
Réponse: A
Explication: La pseudo-classe :first-child sélectionne l’élément qui est le premier enfant de son parent.
or
Partie 3: Essayez le générateur de questions OnlineExamMaker pour créer des questions de quiz
Générez automatiquement des questions à l’aide de l’IA