top 30 popular css interview questions
Liste der beliebtesten CSS-Interviewfragen mit Antworten:
Das CSS Fragen, die fast alle grundlegenden und fortgeschrittenen CSS-Kategorien abdecken, werden anhand von Beispielen erläutert.
CSS ist eine der wichtigsten Funktionen der Webentwicklung. Es ist eine Sprache, mit der wir das Erscheinungsbild von Webseiten beschreiben können.
Daher ist es wichtig, alle grundlegenden und erweiterten Teile des CSS zu vertuschen. Um ein guter Webentwickler zu werden und das Webentwicklerinterview erfolgreich zu knacken, müssen Sie CSS lernen.
Häufig gestellte Fragen zum CSS-Interview
Nachstehend finden Sie eine Liste der am häufigsten gestellten Fragen und Antworten zu CSS-Interviews in einfachen Worten, damit Sie sie leichter verstehen.
Lasst uns beginnen!!
F # 1) Was ist CSS?
Antworten: CSS beschreibt den Stil einer HTML-Webseite. In dieser Sprache können wir das Verhalten einer HTML-Webseite festlegen. Es wird beschrieben, wie der HTML-Inhalt auf dem Bildschirm angezeigt wird.
CSS steuert das Layout mehrerer HTML-Webseiten. CSS wird als Cascading Style Sheet bezeichnet.
F # 2) Nennen Sie alle Module, die in der aktuellen Version von CSS verwendet werden.
Antwort: Es gibt mehrere Module in CSS, wie unten angegeben:
- Selektoren
- Box Modell
- Hintergründe und Grenzen
- Texteffekte
- 2D / 3D-Transformationen
- Animationen
- Mehrspaltiges Layout
- Benutzeroberfläche.
F # 3) Unterscheiden Sie zwischen CSS2 und CSS3.
Antworten: Die Unterschiede zwischen CSS2 und CSS3 sind wie folgt:
- CSS3 ist in zwei verschiedene Abschnitte unterteilt, die als Modul bezeichnet werden. Während in CSS2 alles in einem einzigen Dokument mit allen darin enthaltenen Informationen zusammengefasst ist.
- CSS3-Module werden fast in jedem Browser unterstützt, und andererseits werden Module von CSS und CSS2 nicht in jedem Browser unterstützt.
- In CSS3 werden wir feststellen, dass viele grafikbezogene Merkmale wie Randradius oder Box-Shadow-Flexbox eingeführt wurden.
- In CSS3 kann ein Benutzer mehrere Hintergrundbilder auf einer Webseite mithilfe von Eigenschaften wie Hintergrundbild, Hintergrundposition und Hintergrundwiederholungsstilen präzisieren.
F # 4) Nennen Sie verschiedene Arten von CSS.
Antwort: Es gibt drei Arten von CSS, wie unten erwähnt:
- Extern: Diese werden in separaten Dateien geschrieben.
- Intern: Diese werden oben im Code-Dokument der Webseite zitiert.
- Im Einklang: Diese stehen direkt neben dem Text.
F # 5) Warum ist das externe Stylesheet nützlich?
Antworten: Externes Stylesheet ist sehr nützlich, da wir alle Styling-Codes in eine einzige Datei schreiben und es überall verwendet werden kann, indem nur auf den Link dieser externen Stylesheet-Datei verwiesen wird.
Wenn wir also Änderungen an dieser externen Datei vornehmen, können die Änderungen auch auf der Webseite beobachtet werden. Daher können wir sagen, dass es sehr nützlich ist und Ihre Arbeit bei der Arbeit an größeren Dateien erleichtert.
F # 6) Wozu dient ein eingebettetes Stylesheet? ?
Antworten: Eingebettetes Stylesheet gibt uns das Privileg, Stile an einer Stelle in einem HTML-Dokument zu definieren.
Wir können mehrere Klassen mithilfe eines eingebetteten Stylesheets generieren, das für mehrere Tag-Typen einer Webseite verwendet werden kann. Außerdem ist kein zusätzlicher Download zum Importieren der Informationen erforderlich.
Beispiel:
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.
F # 7) Wie verwende ich den CSS-Selektor?
Antworten: Mithilfe des CSS-Selektors können wir den Inhalt auswählen, den wir formatieren möchten, sodass wir sagen können, dass es sich um eine Brücke zwischen dem Stylesheet und den HTML-Dateien handelt.
Die Syntax für den CSS-Selektor lautet 'Auswählen' von HTML-Elementen, die anhand ihrer ID, Klasse, ihres Typs usw. erstellt wurden.
F # 8) Erklären Sie das Konzept des Tweening.
Antworten: Tweening ist der Prozess, bei dem wir Zwischenbilder zwischen zwei Bildern erstellen, um das Erscheinungsbild des ersten Bildes zu erhalten, das sich zum zweiten Bild entwickelt.
Es wird hauptsächlich zum Erstellen von Animationen verwendet.
F # 9) Definieren Sie CSS-Bildskripte.
Antworten: CSS-Bildskripte sind eine Gruppe von Bildern, die in einem Bild platziert werden. Es reduziert die Ladezeit und die Anforderungsnummer für den Server, während mehrere Bilder auf eine einzelne Webseite projiziert werden.
F # 10) Erläutern Sie den Begriff Responsive Webdesign.
Antworten: Es ist eine Methode, mit der wir eine Webseite gemäß den Benutzeraktivitäten und -bedingungen entwerfen und entwickeln, die auf verschiedenen Komponenten wie der Größe des Bildschirms, der Portabilität der Webseite auf den verschiedenen Geräten usw. basieren verschiedene flexible Layouts und Gitter.
F # 11) Was sind CSS-Zähler?
Antworten: CSS-Zähler sind Variablen, die durch CSS-Regeln erhöht werden können, mit denen der Inspektor nachverfolgt, wie oft die Variable verwendet wurde.
F # 12) Was ist CSS-Spezifität?
Antworten: Die CSS-Spezifität ist eine Punktzahl oder ein Rang, der entscheidet, welche Stildeklaration für ein Element verwendet werden muss. (*) Dieser universelle Selektor weist eine geringe Spezifität auf, während ID-Selektoren eine hohe Spezifität aufweisen.
In CSS gibt es vier Kategorien, die die Spezifitätsstufe des Selektors autorisieren.
- Inline-Stil
- IDs
- Klassen, Attribute und Pseudoklassen.
- Elemente und Pseudoelemente.
F # 13) Wie können wir die Spezifität berechnen?
Antworten: Um die Spezifität zu berechnen, beginnen wir mit 0, dann müssen wir 1000 für jede ID hinzufügen und wir müssen 10 zu den Attributen, Klassen oder Pseudoklassen mit jedem Elementnamen oder Pseudoelement hinzufügen und später müssen wir 1 zu ihnen hinzufügen .
Beispiel:
h2 #content h2 heading
F # 14) Wie machen wir mit CSS eine abgerundete Ecke?
Antworten: Mit der Eigenschaft „Rahmenradius“ können wir eine abgerundete Ecke erstellen. Wir können diese Eigenschaft auf jedes Element anwenden.
Beispiel:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
F # 15) Wie fügen Sie einem HTML-Element Rahmenbilder hinzu?
Antworten: Wir können das Bild, das als Rahmenbild verwendet werden soll, neben einem Element festlegen, indem wir die Eigenschaft von CSS „Rahmenbild“ verwenden.
Beispiel:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }F # 16) Was sind Gradienten in CSS?
Antworten: Es ist eine Eigenschaft von CSS, mit der Sie eine reibungslose Transformation zwischen zwei oder mehr als zwei angegebenen Farben anzeigen können.
Es gibt zwei Arten von Verläufen, die in CSS vorhanden sind. Sie sind:
- Linearer Gradient
- Radialer Gradient
F # 17) Was ist CSS Flexbox?
Antworten: Sie können damit eine flexible reaktionsschnelle Layoutstruktur entwerfen, ohne die Float- oder Positionierungseigenschaft von CSS zu verwenden. Um die CSS-Flexbox verwenden zu können, müssen Sie zunächst einen Flex-Container definieren.
Beispiel:
.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.
F # 18) Schreiben Sie alle Eigenschaften der Flexbox.
Antworten: Es gibt verschiedene Eigenschaften der Flexbox, die auf der HTML-Webseite verwendet werden.
Sie sind:
- Flex-Richtung
- Flex-Wrap
- Flex-Flow
- Inhalt rechtfertigen
- Elemente ausrichten
- Inhalt ausrichten
F # 19) Wie kann das Bild vertikal in einer Abteilung ausgerichtet werden, die sich vertikal über die gesamte Webseite erstreckt?
Antworten: Dies kann mithilfe der Syntax verticle-align: middle im Element erfolgen, und sogar wir können die beiden Textbereiche mit einem anderen Bereich verknüpfen. Danach müssen wir verticle-align: middle im Inhalt #icon verwenden.
F # 20) Was ist der Unterschied zwischen Polsterung und Rand?
Antworten: In CSS ist der Rand die Eigenschaft, mit der wir Raum um Elemente erstellen können. Wir können sogar Raum für die außen definierten Grenzen schaffen.
In CSS haben wir die Margin-Eigenschaft wie folgt:
- Rand oben
- Rand rechts
- Rand-unten
- Rand links
Die Margin-Eigenschaft hat einige definierte Werte, wie unten gezeigt.
- Auto - Mit diesem Eigenschaftenbrowser wird der Spielraum berechnet.
- Länge - Hiermit werden die Randwerte in px, pt, cm usw. festgelegt.
- % - Hiermit wird die Breite% des Elements festgelegt.
- Erben - Durch diese Eigenschaft können wir die margin-Eigenschaft vom übergeordneten Element erben.
In CSS ist das Auffüllen die Eigenschaft, mit der wir Platz um den Inhalt eines Elements sowie innerhalb eines bekannten Rahmens generieren können.
CSS-Padding hat auch Eigenschaften wie:
- Polsterung
- Polsterung rechts
- Polsterung unten
- Polsterung links
Negative Werte sind beim Auffüllen nicht zulässig.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }F # 21) Was ist die Verwendung des Box-Modells in CSS?
Antworten: In CSS ist das Box-Modell eine Box, die alle HTML-Elemente bindet und Funktionen wie Ränder, Rahmen, Auffüllung und den tatsächlichen Inhalt enthält.
Durch die Verwendung eines Boxmodells erhalten wir die Berechtigung, die Ränder um die Elemente herum hinzuzufügen, und wir können auch den Abstand zwischen den Elementen definieren.
F # 22) Wie können wir der Webseite Symbole hinzufügen?
Antworten: Wir können der HTML-Webseite Symbole hinzufügen, indem wir eine Symbolbibliothek wie font-awesome verwenden.
Wir müssen jedem Inline-HTML-Element den Namen der angegebenen Symbolklasse hinzufügen. ( oder). Symbole in den Symbolbibliotheken sind skalierbare Vektoren, die mit CSS angepasst werden können.
F # 23) Was ist eine CSS-Pseudoklasse?
Antworten: Diese Klasse wird verwendet, um einen speziellen Status eines HTML-Elements zu definieren.
Diese Klasse kann verwendet werden, indem ein Element formatiert wird, wenn ein Benutzer darüber geschnüffelt hat, und indem ein HTML-Element formatiert wird, wenn es den Fokus erhält.
selector:pseudo-class { property:value; }F # 24) Erklären Sie das Konzept der Pseudoelemente in CSS.
Antworten: Es ist eine Funktion von CSS, mit der die angegebenen Teile eines Elements formatiert werden.
Zum Beispiel ,Wir können den ersten Buchstaben oder die erste Zeile eines HTML-Elements formatieren.
selector::pseudo-element { property:value; }F # 25) Was ist CSS-Deckkraft?
Antworten: Es ist die Eigenschaft, die die Transparenz eines Elements herausarbeitet.
Durch diese Eigenschaft können wir das Bild transparent machen, das die Werte von 0.0-1.0 annehmen kann. Wenn der Wert niedriger ist, ist das Bild transparenter. IE8 und frühere Versionen des Browsers können die Werte von 0 bis 100 annehmen.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}F # 26) Schreiben Sie alle in CSS verwendeten Positionszustände.
Antwort: In CSS gibt es vier Positionszustände, wie unten angegeben:
- Statisch (Standard)
- Relativ
- Fest
- Absolut
F # 27) Was sind Navigationsleisten in CSS?
Antworten: Mithilfe von Navigationsleisten können wir aus einer normalen HTML-Seite eine benutzerspezifische und dynamischere Webseite machen. Grundsätzlich handelt es sich um eine Liste von Links, daher die Verwendung von
- und
- Elemente macht den perfekten Sinn.
ul { list-style-type: none; margin: 0; padding: 0; }F # 28) Was sind die Unterschiede zwischen relativ und absolut in CSS?
Antworten: Der Hauptunterschied zwischen relativ und absolut besteht darin, dass 'relativ' für dasselbe Tag in CSS verwendet wird. Wenn wir also links schreiben: 10px, verschiebt sich die Auffüllung links auf 10px, während absolut absolut relativ zum Nicht-Tag ist. statisches übergeordnetes Element.
Wenn wir also links schreiben: 10px, ist das Ergebnis 10px vom linken Rand des übergeordneten Elements entfernt.
F # 29) Definieren Sie wichtige Deklarationen, die in CSS verwendet werden.
Antworten: Wichtige Erklärungen sind definiert als die Erklärung, die wichtiger ist als die normale Erklärung.
Während der Ausführung überschreiben diese Deklarationen die Deklaration, die weniger wichtig ist.
Zum Beispiel, Wenn zwei Benutzer eine wichtige Deklaration haben, überschreibt eine der Deklarationen die Deklaration eines anderen Benutzers.
Zum Beispiel:
Körper {Hintergrund: # FF00FF! Wichtig; Farbe blau}Unternehmen, die Sie dafür bezahlen, ihre Produkte zu testen
In diesem Körper hat der Hintergrund mehr Gewicht als die Farbe.
F # 30) Definieren Sie verschiedene Kaskadenmethoden, die innerhalb der Kaskadenreihenfolge verwendet werden können.
Antworten: Die kaskadierende Reihenfolge ist selbst eine Sortiermethode, die viele andere verschiedene Sortiermethoden ermöglicht:
a) Nach Herkunft sortieren: Es gibt einige Regeln, die einen alternativen Weg bieten können, der wie folgt definiert ist:
- Das normale Gewicht des Stylesheets eines bestimmten Anbieters wird durch das erhöhte Gewicht des Stylesheets des Benutzers überschrieben.
- Stylesheet-Regeln eines bestimmten Benutzers werden durch die normale Breite des Stylesheets des Anbieters überschrieben.
b) Nach Selektorspezifität sortieren: Weniger spezifischer Selektor wurde vom spezifischeren Selektor überschrieben.
Zum Beispiel Ein kontextbezogener Selektor ist im Vergleich zu einem spezifischeren ID-Selektor weniger spezifisch und wurde mit diesem kontextuellen Selektor vom ID-Selektor überschrieben.
c) Nach angegebener Reihenfolge sortieren: Dies tritt in dem Szenario auf, in dem die beiden Selektoren das gleiche Gewicht und die anderen Eigenschaften als die Spezifikation haben, die zum Überschreiben angezeigt wird.
Beispiel:
Alle anderen Stile werden überschrieben, wenn das Stilattribut für den Inline-Stil verwendet wird.
Wenn das Link-Element für einen externen Stil verwendet wird, wird der importierte Stil überschrieben.
Q # 31) Unterscheiden Sie zwischen Inline- und Blockelement.
Antworten: Das Inline-Element verfügt nicht über ein Element zum Festlegen von Breite und Höhe sowie über keinen Zeilenumbruch.
Beispiel: em, stark usw.
Blockelementspezifikation:
- Sie haben den Zeilenumbruch.
- Sie definieren die Breite durch Einstellen eines Containers und ermöglichen auch das Einstellen der Höhe.
- Es kann auch ein Element enthalten, das im Inline-Element vorkommt.
Beispiel:
Breite und Höhe
maximale Breite und maximale Höhe
min-Breite und min-Höhe
hi (i = 1-6) - Überschriftenelement
p- Absatzelement.F # 32) Wie wird das Konzept der Vererbung in CSS angewendet?
Antworten: Vererbung ist ein Konzept, bei dem die untergeordnete Klasse die Eigenschaften ihrer übergeordneten Klasse erbt. Es ist ein Konzept, das in vielen Sprachen verwendet wird und die einfache Möglichkeit ist, dieselbe Eigenschaft erneut zu definieren.
Es wird in CSS verwendet, um die Hierarchie von der obersten bis zur untersten Ebene zu definieren. Vererbte Eigenschaften können von der Klasse der Kinder überschrieben werden, wenn das Kind denselben Namen verwendet.
Beispiel:
Körper {Schriftgröße: 15pt;}
Eine weitere Definition wird in der untergeordneten Klasse definiert
Körper {Schriftgröße: 15pt;}
H1 {Schriftgröße: 18pt;}Der gesamte Absatztext wird mithilfe der Eigenschaft angezeigt und im Textkörper definiert, mit Ausnahme des H1-Stils, bei dem der Text nur in Schriftart 18 angezeigt wird.
F # 33) Unterscheiden Sie zwischen ID und Klasse.
Antworten: Sowohl ID als auch Klasse werden in HTML verwendet und weisen den Wert aus CSS zu.
Nachfolgend finden Sie die Unterschiede:
- Die ID ist eine Art Element, das einem bestimmten Element eindeutig einen Namen zuweist, während die Klasse ein Element mit einem bestimmten Satz von Eigenschaften hat, die für den gesamten Block verwendet werden können.
- Die ID kann als Element verwendet werden, da sie es eindeutig identifizieren kann, während die Klasse auch zum Blockieren der Elemente definiert ist und zu viele Tags anwendet, wo immer sie verwendet wird.
- ID bietet die Einschränkung, seine Eigenschaften für ein bestimmtes Element zu verwenden, während in der Klasse die Vererbung auf einen bestimmten Block oder eine bestimmte Gruppe des Elements angewendet wird.
Fazit
Diese Frage- und Antwortliste für Interviews hilft Ihnen dabei, das Interview mit Webentwicklern sowohl auf frischerem als auch auf erfahrenem Niveau zu knacken. Dies sind die häufigsten Fragen, die im Interview gestellt werden.
Ich hoffe, dieser Artikel wird dazu beitragen, ein Interview mit CSS für einen Webentwickler zu knacken und sich ihm zu stellen.
Empfohlene Lektüre = >> Fragen und Antworten zum Webentwickler-Interview
Wir wünschen Ihnen viel Erfolg !!
Literatur-Empfehlungen