top 30 popular css interview questions
Liste des questions d'entrevue CSS les plus populaires avec réponses:
Le CSS les questions couvrant presque toutes les catégories CSS de base et avancées sont expliquées avec des exemples.
CSS est l'une des fonctionnalités les plus essentielles du développement Web. C'est un langage par lequel nous pouvons décrire l'apparence des pages Web.
Par conséquent, il est essentiel de couvrir toutes les parties de base et avancées du CSS. Afin de devenir un bon développeur Web et de réussir l'entretien avec les développeurs Web, vous devez apprendre le CSS.
Questions d'entrevue CSS fréquemment posées
Vous trouverez ci-dessous la liste des questions et réponses d'entretien CSS les plus fréquemment posées en termes simples pour vous faciliter la compréhension.
Commençons!!
Q # 1) Qu'est-ce que CSS?
Répondre: CSS décrit le style d'une page Web HTML. C'est un langage par lequel nous pouvons définir le comportement d'une page Web HTML. Il décrit comment le contenu HTML sera affiché à l'écran.
CSS contrôle la mise en page de plusieurs pages Web HTML. CSS est appelé feuille de style en cascade.
Q # 2) Nommez tous les modules qui sont utilisés dans la version actuelle de CSS.
Réponse: Il existe plusieurs modules en CSS comme indiqué ci-dessous:
- Sélecteurs
- Modèle de boîte
- Arrière-plans et bordures
- Effets de texte
- Transformations 2D / 3D
- Animations
- Disposition à plusieurs colonnes
- Interface utilisateur.
Q # 3) Faites la distinction entre CSS2 et CSS3.
Répondre: Les différences entre CSS2 et CSS3 sont les suivantes:
- CSS3 est divisé en deux sections différentes appelées module. Alors qu'en CSS2, tout accède dans un seul document avec toutes les informations qu'il contient.
- Les modules CSS3 sont pris en charge presque sur tous les navigateurs et, d'autre part, les modules de CSS et CSS2 ne sont pas pris en charge dans tous les navigateurs.
- Dans CSS3, nous verrons que de nombreuses caractéristiques graphiques ont été introduites comme Border-radius ou box-shadow, flexbox.
- Dans CSS3, un utilisateur peut préciser plusieurs images d'arrière-plan sur une page Web en utilisant des propriétés telles que les styles background-image, background-position et background-repeat.
Q # 4) Citez différents types de CSS.
Réponse: Il existe trois types de CSS comme indiqué ci-dessous:
- Externe: Ceux-ci sont écrits dans des fichiers séparés.
- Interne: Ceux-ci sont cités en haut du document de code de la page Web.
- En ligne: Ceux-ci sont écrits juste à côté du texte.
Q # 5) Pourquoi la feuille de style externe est-elle utile?
Répondre: La feuille de style externe est très utile car nous écrivons tous les codes de style dans un seul fichier et elle peut être utilisée n'importe où en se référant simplement au lien de ce fichier de feuille de style externe.
Ainsi, si nous apportons des modifications à ce fichier externe, les modifications peuvent également être observées sur la page Web. Ainsi, nous pouvons dire que c'est très utile et que cela facilite votre travail tout en travaillant sur des fichiers plus volumineux.
Q # 6) Quelles sont les utilisations d'une feuille de style incorporée ?
Répondre: La feuille de style intégrée nous donne le privilège de définir des styles en un seul endroit dans un document HTML.
Nous pouvons générer plusieurs classes à l'aide d'une feuille de style intégrée à utiliser sur plusieurs types de balises d'une page Web et aucun téléchargement supplémentaire n'est requis pour l'importation des informations.
Exemple:
p { font-family: georgia, serif; font-size: x-large; color:#ff9900; } a:hover { color: LimeGreen; text-decoration: none; } Embedded style sheet gives us the privilege to define styles at one place in a HTML document. We can generate multiple classes using embedded style sheet to use on multiple tag types a web page and also there is no extra downloading required importing the information.
Q # 7) Comment utiliser le sélecteur CSS?
Répondre: En utilisant le sélecteur CSS, nous pouvons choisir le contenu que nous voulons styliser afin de pouvoir dire qu'il s'agit d'un pont entre la feuille de style et les fichiers HTML.
La syntaxe du sélecteur CSS est de 'sélectionner' les éléments HTML créés sur leur id, classe, type, etc.
Q # 8) Expliquez le concept de Tweening.
Répondre: L'interpolation est le processus dans lequel nous créons des cadres intermédiaires entre deux images pour obtenir l'apparence de la première image qui se développe dans la deuxième image.
Il est principalement utilisé pour créer des animations.
Q # 9) Définissez des scripts d'image CSS.
Répondre: Les scripts d'image CSS sont un groupe d'images qui sont placées dans une seule image. Il réduit le temps de chargement et le numéro de demande sur le serveur tout en projetant plusieurs images sur une seule page Web.
Q # 10) Expliquez le terme Conception Web réactive.
Répondre: C'est une méthode dans laquelle nous concevons et développons une page Web en fonction des activités et des conditions de l'utilisateur qui sont basées sur divers composants comme la taille de l'écran, la portabilité de la page Web sur les différents appareils, etc. Cela se fait en utilisant différentes dispositions et grilles flexibles.
Q # 11) Que sont les compteurs CSS?
Répondre: Les compteurs CSS sont des variables qui peuvent être incrémentées par des règles de CSS qui permettent à l'inspecteur de suivre le nombre de fois où la variable a été utilisée.
Q # 12) Quelle est la spécificité CSS?
Répondre: La spécificité CSS est un score ou un rang qui décide quelle déclaration de style doit être utilisée pour un élément. (*) ce sélecteur universel a une faible spécificité tandis que les sélecteurs d'ID ont une spécificité élevée.
Il existe quatre catégories en CSS qui autorisent le niveau de spécificité du sélecteur.
- Style en ligne
- ID
- Classes, attributs et pseudo-classes.
- Éléments et pseudo-éléments.
Q # 13) Comment pouvons-nous calculer la spécificité?
Répondre: Pour calculer la spécificité, nous commencerons par 0, puis nous devons ajouter 1000 pour chaque ID et nous devons ajouter 10 aux attributs, classes ou pseudo-classes avec chaque nom d'élément ou pseudo-élément et plus tard, nous devons leur ajouter 1 .
Exemple:
h2 #content h2 heading
Q # 14) Comment faire un coin arrondi en utilisant CSS?
Répondre: On peut faire un coin arrondi en utilisant la propriété «border-radius». Nous pouvons appliquer cette propriété à n'importe quel élément.
Exemple:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
Q # 15) Comment allez-vous ajouter des images de bordure à un élément HTML?
Répondre: Nous pouvons définir l'image à utiliser comme image de bordure à côté d'un élément en utilisant la propriété de CSS «border-image».
Exemple:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }Q # 16) Que sont les dégradés en CSS?
Répondre: C'est une propriété de CSS qui vous permet d'afficher une transformation en douceur entre deux ou plus de deux couleurs spécifiées.
Il existe deux types de dégradés présents dans CSS. Elles sont:
- Gradient linéaire
- Dégradé radial
Q # 17) Qu'est-ce que CSS flexbox?
Répondre: Il vous permet de concevoir une structure de mise en page flexible et réactive sans utiliser de propriété flottante ou de positionnement de CSS. Pour utiliser CSS flexbox, vous devez d'abord définir un conteneur flex.
Exemple:
.flex-container { display: flex; background-color: #f4b042; } .flex-container > div { background-color: #d60a33; margin: 10px; padding: 20px; font-size: 30px; } 1 2 3 Example of flex box.
Q # 18) Écrivez toutes les propriétés de la flexbox.
Répondre: Il existe plusieurs propriétés de la flexbox qui sont utilisées dans la page Web HTML.
Elles sont:
- flex-direction
- flex-wrap
- flex-flow
- justifier le contenu
- align-items
- align-content
Q # 19) Comment aligner l'image verticalement dans une division qui s'étend verticalement sur toute la page Web?
Répondre: Cela peut être fait en utilisant la syntaxe verticle-align: middle dans l'élément et même nous pouvons lier les deux étendues de texte avec une autre étendue et après cela, nous devons utiliser verticle-align: middle dans le contenu #icon.
Q # 20) Quelle est la différence entre le remplissage et la marge?
Répondre: En CSS, la marge est la propriété par laquelle nous pouvons créer de l'espace autour des éléments. Nous pouvons même créer de l'espace aux frontières extérieures définies.
En CSS, nous avons la propriété margin comme suit:
- margin-top
- marge droite
- marge-bas
- Marge gauche
La propriété Margin a des valeurs définies comme indiqué ci-dessous.
- Auto - L'utilisation de ce navigateur de propriétés calcule la marge.
- Longueur - Il définit les valeurs de marge en px, pt, cm etc.
- % - Il définit le% de largeur de l'élément.
- Hériter - Par cette propriété, nous pouvons hériter de la propriété margin de l'élément parent.
En CSS, le remplissage est la propriété par laquelle nous pouvons générer de l'espace autour du contenu d'un élément ainsi qu'à l'intérieur de toute bordure connue.
Le remplissage CSS a également des propriétés telles que,
- Haut de rembourrage
- Rembourrage à droite
- Rembourrage en bas
- Rembourrage à gauche
Les valeurs négatives ne sont pas autorisées dans le remplissage.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }Q # 21) Quelle est l'utilité du Box Model en CSS?
Répondre: En CSS, le modèle de boîte est une boîte qui lie tous les éléments HTML et comprend des fonctionnalités telles que les marges, la bordure, le remplissage et le contenu réel.
En utilisant un modèle de boîte, nous obtiendrons l'autorisation d'ajouter les bordures tout autour des éléments et nous pouvons également définir l'espace entre les éléments.
Q # 22) Comment pouvons-nous ajouter des icônes à la page Web?
Répondre: Nous pouvons ajouter des icônes à la page Web HTML en utilisant une bibliothèque d'icônes comme font-awesome.
Nous devons ajouter le nom de la classe d'icônes donnée à tout élément HTML en ligne. ( ou). Les icônes des bibliothèques d'icônes sont des vecteurs évolutifs qui peuvent être personnalisés avec CSS.
Q # 23) Qu'est-ce qu'une pseudo-classe CSS?
Répondre: C'est une classe qui sert à définir un état spécial d'un élément HTML.
Cette classe peut être utilisée en stylisant un élément lorsqu'un utilisateur l'a fouillé et elle peut également styliser un élément HTML lorsqu'il obtient le focus.
selector:pseudo-class { property:value; }Q # 24) Expliquez le concept de pseudo-éléments en CSS.
Répondre: C'est une fonctionnalité de CSS qui est utilisée pour styliser les parties données d'un élément.
Par exemple ,nous pouvons styliser la première lettre ou la première ligne d'un élément HTML.
selector::pseudo-element { property:value; }Q # 25) Qu'est-ce que l'opacité CSS?
Répondre: C'est la propriété qui élabore sur la transparence d'un élément.
Grâce à cette propriété, nous pouvons rendre transparent l'image qui peut prendre les valeurs de 0,0 à 1,0. Si la valeur est inférieure, l'image est plus transparente. IE8 et les versions antérieures du navigateur peuvent prendre les valeurs de 0 à 100.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}Q # 26) Écrivez tous les états de position utilisés dans CSS.
Réponse: En CSS, il y a quatre états de position comme indiqué ci-dessous:
- Statique (par défaut)
- Relatif
- Fixé
- Absolu
Q # 27) Que sont les barres de navigation en CSS?
Répondre: En utilisant les barres de navigation, nous pouvons transformer une page HTML ordinaire en une page Web spécifique à l'utilisateur et plus dynamique. Fondamentalement, il s'agit d'une liste de liens, d'où l'utilisation de
- et
- éléments est parfaitement logique.
ul { list-style-type: none; margin: 0; padding: 0; }Q # 28) Quelles sont les différences entre relatif et absolu en CSS?
Répondre: La principale différence entre relatif et absolu est que «relatif» est utilisé pour la même balise en CSS et cela signifie que si nous écrivons la gauche: 10px alors le remplissage se déplacera à 10px à gauche tandis que absolu est totalement relatif au non- parent statique.
Cela signifie que si nous écrivons à gauche: 10px, le résultat sera 10px loin du bord gauche de l'élément parent.
Q # 29) Définissez les déclarations «importantes» utilisées dans CSS.
Répondre: Les déclarations importantes sont définies comme la déclaration qui a plus d'importance que la déclaration normale.
Lors de l'exécution, ces déclarations remplacent la déclaration qui a moins d'importance.
Par exemple, s'il y a deux utilisateurs ayant une déclaration importante, l'une des déclarations remplacera la déclaration d'un autre utilisateur.
Par exemple:
Corps {arrière-plan: # FF00FF! Important; Couleur bleue}sites Web pour télécharger gratuitement des vidéos youtube
Dans ce corps, le fond a plus de poids que la couleur.
Q # 30) Définissez différentes méthodes de cascade qui peuvent être utilisées dans l'ordre de cascade.
Répondre: L'ordre en cascade est lui-même une méthode de tri qui permet de nombreuses autres méthodes de tri différentes:
a) Trier par origine: Il existe des règles qui peuvent fournir une autre manière définie comme:
- L'épaisseur normale de la feuille de style d'un fournisseur particulier sera remplacée par l'augmentation du poids de la feuille de style de l'utilisateur.
- Les règles de la feuille de style d’un utilisateur particulier seront remplacées par la largeur normale de la feuille de style du fournisseur.
b) Trier par spécificité du sélecteur: Le sélecteur moins spécifique est remplacé par le sélecteur plus spécifique.
Par exemple , Un sélecteur contextuel est moins spécifique par rapport au sélecteur d'ID qui est plus spécifique et avec ce sélecteur contextuel est remplacé par le sélecteur d'ID.
c) Trier par ordre spécifié: Cela se produit dans le scénario où les deux sélecteurs ont le même poids et les autres propriétés que la spécification qui seront vues pour le remplacement.
Exemple:
Tous les autres styles seront vus remplacés si l'attribut style est utilisé pour le style en ligne.
Et aussi, si l'élément de lien est utilisé pour le style externe, il remplacera le style importé.
Q # 31) Faites la différence entre un élément en ligne et un élément de bloc.
Répondre: L'élément en ligne n'a pas d'élément pour définir la largeur et la hauteur et il n'a pas non plus de saut de ligne.
Exemple: em, fort, etc.
Spécification des éléments de bloc:
- Ils ont le saut de ligne.
- Ils définissent la largeur en définissant un conteneur et permettent également de définir la hauteur.
- Il peut également contenir un élément qui apparaît dans l'élément en ligne.
Exemple:
largeur et hauteur
max-width et max-height
largeur min et hauteur min
hi (i = 1-6) - élément d'en-tête
p- Élément de paragraphe.Q # 32) Comment le concept d'héritage est-il appliqué dans CSS?
Répondre: L'héritage est un concept dans lequel la classe enfant héritera des propriétés de sa classe parent. C'est un concept qui est utilisé dans de nombreux langages et qui permet de redéfinir facilement la même propriété.
Il est utilisé en CSS pour définir la hiérarchie du niveau supérieur au niveau inférieur. Les propriétés héritées peuvent être remplacées par la classe des enfants si l’enfant utilise le même nom.
Exemple:
Corps {font-size: 15pt;}
Et une autre définition est en cours de définition dans la classe enfant
Corps {font-size: 15pt;}
H1 {taille de la police: 18 pt;}Tout le texte du paragraphe sera affiché en utilisant la propriété et sera défini dans le corps sauf pour le style H1 qui affichera le texte en police 18 uniquement.
Q # 33) Faites la différence entre l'ID et la classe.
Répondre: L'ID et la classe sont tous deux utilisés en HTML et attribuent la valeur de CSS.
Veuillez trouver ci-dessous les différences:
- L'ID est un type d'élément qui attribue de manière unique un nom à un élément particulier, tandis que la classe a un élément avec un certain ensemble de propriétés qui peuvent être utilisées pour le bloc complet.
- L'identifiant peut être utilisé comme élément car il peut l'identifier de manière unique alors que la classe est également définie pour bloquer les éléments et applique trop de balises partout où elle est utilisée.
- ID fournit la restriction d'utiliser ses propriétés sur un élément spécifique alors qu'en classe l'héritage est appliqué à un bloc ou un groupe spécifique de l'élément.
Conclusion
Cette liste de questions et réponses d'entrevue vous aidera à déchiffrer l'entrevue avec les développeurs Web pour un niveau plus frais et un niveau d'expérience. Telles sont les questions fréquemment posées lors de l'entrevue.
J'espère que cet article vous aidera à craquer et à faire face à toute interview liée au CSS pour un développeur Web.
Suggestion de lecture = >> Questions et réponses d'entrevue de développeur Web
Nous vous souhaitons tout le succès !!
lecture recommandée