Die 50 wichtigsten CSS-Interviewfragen und -antworten (2024)

Hier finden Sie Fragen und Antworten zu CSS (CSS3)-Interviews für Studienanfänger und erfahrene Kandidaten, die ihren Traumjob bekommen möchten.

Kostenloser PDF-Download: CSS-Interviewfragen

1. Was ist CSS?

Die vollständige Form von CSS sind Cascading Style Sheets. Es handelt sich um eine Stilsprache, die einfach genug ist HTML Elemente. Es ist im Webdesign beliebt und wird auch häufig in XHTML eingesetzt.


2. Was ist der Ursprung von CSS?

Die Standard Generalized Markup Language markierte in den 1980er Jahren den Beginn der Stylesheets.


3. Welche verschiedenen CSS-Varianten gibt es?

Die Variationen für CSS sind:

  • CSS 1
  • CSS 2
  • CSS 2.1
  • CSS 3
  • CSS 4

4. Was sind die Einschränkungen von CSS?

Einschränkungen sind:

  •  Ein Aufsteigen nach Selektoren ist nicht möglich
  • Einschränkungen der vertikalen Kontrolle
  • Keine Ausdrücke
  • Keine Spaltendeklaration
  • Pseudoklasse, die nicht durch dynamisches Verhalten gesteuert wird
  • Regeln, Stile, Ausrichtung auf bestimmten Text nicht möglich

5. Was sind die Vorteile von CSS?

Vorteile sind:

  • Bandbreite
  • Websiteweite Konsistenz
  • Neuformatierung der Seite
  • Zugänglichkeit
  • Inhalt von Präsentation getrennt

6. Was sind CSS-Frameworks?

Es handelt sich um vorgefertigte Bibliotheken, die mithilfe der CSS-Sprache eine einfachere und standardkonformere Gestaltung von Webseiten ermöglichen.

Fragen im CSS-Vorstellungsgespräch
Fragen zum CSS3-Interview

7. Wie können Blockelemente mit CSS1 zentriert werden?

Elemente auf Blockebene können wie folgt zentriert werden:

Die Eigenschaften margin-left und margin-right können auf einen expliziten Wert gesetzt werden:

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

In diesem Fall sind der linke und der rechte Rand jeweils fünf Ems breit, da sie die zehn Ems aufteilen, die von (40em-30em) übrig geblieben sind. Es war nicht erforderlich, eine explizite Breite für das BODY-Element festzulegen. Dies wurde hier der Einfachheit halber gemacht.


8. Wer pflegt die CSS-Spezifikationen?

Das World Wide Web Consortium pflegt die CSS-Spezifikationen.

Fragen zum CSS3-Interview
Fragen zum CSS3-Interview

9. Auf wie viele Arten kann ein CSS als Webseite integriert werden?

CSS kann auf drei Arten integriert werden:

  • Inline: Das Style-Attribut kann verwendet werden, um HTML-Elemente mit CSS anzuwenden.
  • Eingebettet: Das Head-Element kann ein Style-Element haben, in dem der Code platziert werden kann.
  • Verlinkt/Importiert: CSS kann in einer externen Datei platziert und über ein Link-Element verlinkt werden.

10. Welche Vorteile und Nachteile haben externe Style Sheets?

Vorteile:

  • Eine Datei kann zur Steuerung mehrerer Dokumente mit unterschiedlichen Stilen verwendet werden.
  • Mehrere HTML-Elemente können viele Dokumente haben, die Klassen haben können.
  • Um Stile in zusammengesetzten Situationen zu gruppieren, werden Methoden wie Selektor und Gruppierung verwendet.

Demerits:

  • Für den Import von Dokumenten mit Stilinformationen ist ein zusätzlicher Download erforderlich.
  • Zum Rendern des Dokuments sollte das externe Stylesheet geladen werden.
  • Für kleine Stildefinitionen nicht praktikabel.

11. Besprechen Sie die Vor- und Nachteile eingebetteter Style Sheets?

Vorteile eingebetteter Stylesheets:

  • In einem einzigen Dokument können mehrere Tag-Typen erstellt werden.
  • Stile können in komplexen Situationen mithilfe von Auswahl- und Gruppierungsmethoden angewendet werden.
  • Ein zusätzlicher Download ist nicht erforderlich.

Nachteile eingebetteter Stylesheets:

  • Mehrere Dokumente können nicht kontrolliert werden.

12. Was bedeutet CSS-Selektor?

Ein String-Äquivalent von HTML-Elementen, durch die Deklarationen oder eine Reihe davon deklariert werden, und ein Link, auf den zur Verknüpfung von HTML und Stylesheet verwiesen werden kann, ist ein CSS-Selektor.


13. Die Medientypen eintragen, die CSS zulässt?

Die Gestaltung und Individualisierung von Dokumenten erfolgt über Medien. Durch Anwenden der Mediensteuerung auf die externen Stylesheets können diese durch Laden aus dem Netzwerk abgerufen und verwendet werden.


14. Logische Tags von physischen Tags unterscheiden?

  • Während physische Tags auch als Präsentationsmarkierungen bezeichnet werden, sind logische Tags für das Erscheinungsbild nutzlos.
  • Physische Tags sind neuere Versionen, während logische Tags alt sind und sich auf den Inhalt konzentrieren.

15. Stylesheet-Konzept von HTML unterscheiden?

Während HTML eine einfache Strukturmethode bietet, fehlt ihm im Gegensatz zu Stylesheets das Styling. Darüber hinaus verfügen Stylesheets über bessere Browserfunktionen und Formatierungsoptionen.


16. Beschreiben Sie den „Regelsatz“?

Regelsatz: Selektoren können an andere Selektoren angehängt werden, um durch den Regelsatz identifiziert zu werden.

Es hat zwei Teile:

  • Selektor, zB R und
  • Erklärung {text-indent: 11pt}

17. Kommentar zur Groß-/Kleinschreibung von CSS?

Obwohl es bei CSS keine Berücksichtigung der Groß-/Kleinschreibung gibt, ist dies bei Schriftartfamilien, URLs von Bildern usw. der Fall. Nur wenn XML Da auf der Seite Deklarationen zusammen mit XHTML DOCTYPE verwendet werden, muss bei CSS die Groß-/Kleinschreibung beachtet werden.


18. Deklarationsblock definieren?

Ein Richtungskatalog in geschweiften Klammern bestehend aus Eigenschaft, Doppelpunkt und Wert wird als Deklarationsblock bezeichnet.
Beispiel: [Eigenschaft 1: Wert 3]


19. Die Attribute der verschiedenen Schriftarten eintragen?

Sie sind:

  • Schriftstil
  • Schriftart-Variante
  • Schriftstärke
  • Schriftgröße/Zeilenhöhe
  • Schriftfamilie
  • Bildunterschrift
  • Symbol

 


20. Warum ist es einfach, eine Datei durch Importieren einzufügen?

Durch den Import können externe Blätter kombiniert und in viele Blätter eingefügt werden. Verschiedene Dateien und Blätter können für unterschiedliche Funktionen verwendet werden. Syntax:

@import-Notation, verwendet mit tag.


21. Wozu dient der Klassenselektor?

Selektoren, die für einen bestimmten Stil einzigartig sind, werden als CLASS-Selektoren bezeichnet. Dadurch kann eine Stildeklaration und Zuordnung zu HTML erfolgen. Syntax:

Klassenname
Es kann AZ, az oder Ziffern sein.
.top {font: 14em ;}, Klassenselektor
Diese Klasse ist mit einem Element verknüpft


22. Klassenselektor vom ID-Selektor unterscheiden?

Während dem Klassenselektor ein Gesamtblock zugewiesen wird, bevorzugt der ID-Selektor nur ein einzelnes Element, das sich von anderen Elementen unterscheidet. Mit anderen Worten: IDs sind eindeutig, Klassen hingegen nicht. Es ist möglich, dass ein Element sowohl eine Klasse als auch eine ID hat.


23. Kann in CSS mehr als eine Deklaration hinzugefügt werden?

Ja, dies kann durch die Verwendung eines Semikolons erreicht werden.


24. Was sind Pseudoelemente?

Pseudoelemente werden verwendet, um einigen Selektoren Spezialeffekte hinzuzufügen. CSS wird zum Anwenden von Stilen im HTML-Markup verwendet. In einigen Fällen, in denen zusätzliches Markup oder Styling für das Dokument nicht möglich ist, steht in CSS eine Funktion zur Verfügung, die als Pseudoelemente bezeichnet wird. Dadurch wird eine zusätzliche Markierung des Dokuments ermöglicht, ohne das eigentliche Dokument zu beeinträchtigen.


25. Wie kann man die Unterstreichung von Hyperlinks außer Kraft setzen?

Steueranweisungen und externe Stylesheets werden verwendet, um unterstreichende Hyperlinks außer Kraft zu setzen.

Z.B:

B {

text-decoration: none;

}

<B href="career.html" style="text-decoration: none">link text</B>

 


26. Was passiert, wenn 100 % Breite zusammen mit Floats auf der gesamten Seite verwendet werden?

Bei der Float-Deklaration wird jedes Mal, wenn es in Form des Rahmens verwendet wird, 1 Pixel hinzugefügt, und danach ist noch mehr Float zulässig.


27. Kann der Standardeigenschaftswert über CSS wiederhergestellt werden? Wenn ja, wie?

In CSS können Sie aufgrund fehlender Standardwerte nicht zu alten Werten zurückkehren. Die Eigenschaft kann neu deklariert werden, um die Standardeigenschaft zu erhalten.


28. Geben Sie die verschiedenen verwendeten Medientypen an?

Unterschiedliche Medien haben unterschiedliche Eigenschaften, da die Groß- und Kleinschreibung nicht beachtet wird.

Sie sind:

  • Aural – für Klangsynthesizer und Sprache
  • Drucken – gibt beim Drucken eine Vorschau des Inhalts
  • Projektion – projiziert das CSS auf Projektoren.
  • Handheld – verwendet Handheld-Geräte.
  • Bildschirm – Computer- und Laptop-Bildschirme.

29. Was ist das CSS-Box-Modell und was sind seine Elemente?

Dieses Feld definiert Design und Layout von CSS-Elementen. Die Elemente sind:

Marge: Die oberste Ebene, die Gesamtstruktur wird angezeigt
Grenze: Die Füll- und Inhaltsoption mit einem Rahmen wird angezeigt. Die Hintergrundfarbe beeinflusst den Rand.
Polsterung: Leerzeichen wird angezeigt. Die Hintergrundfarbe beeinflusst den Rand.
Inhalt: Der tatsächliche Inhalt wird angezeigt.


30. Was ist ein Kontextselektor?

Der Selektor, der zum Auswählen spezieller Vorkommen eines Elements verwendet wird, wird als Kontextselektor bezeichnet. Ein Leerzeichen trennt die einzelnen Selektoren. Bei dieser Art von Selektor wird nur das letzte Element des Musters angesprochen. Zum Beispiel: TD P TEXT {Farbe: Blau}


31. RGB-Werte mit hexadezimalen Farbcodes vergleichen?

Eine Farbe kann auf zwei Arten angegeben werden:

  • Eine Farbe wird durch 6 Zeichen dargestellt, also eine hexadezimale Farbkodierung. Es ist eine Kombination aus Zahlen und Buchstaben und wird durch ein # vorangestellt. Beispiel: g {Farbe: #00cjfi}
  • Eine Farbe wird durch eine Mischung aus Rot, Grün und Blau dargestellt. Auch der Wert einer Farbe kann angegeben werden. Beispiel: rgb(r,g,b): Bei diesem Typ können die Werte zwischen den Ganzzahlen 0 und 255 liegen. rgb(r%,g%,b%): Der Rot-, Grün- und Blau-Prozentsatz wird angezeigt.

32. Bild-Sprites mit Kontext zu CSS definieren?

Wenn eine Reihe von Bildern zu einem Bild zusammengefasst wird, spricht man von „Image Sprites“. Da das Laden jedes Bildes auf einer Webseite Zeit kostet, verkürzt die Verwendung von Bild-Sprites den Zeitaufwand und liefert Informationen schnell.

CSS-Codierung:

img.add { width: 60px; height: 55px; background: url (image.god) 0 0; }

 

In diesem Fall wird nur der benötigte Teil verwendet. Der Anwender kann hierdurch erheblich Spielraum und Zeit sparen.


33. Gruppierung und Verschachtelung in CSS vergleichen?

Gruppierung: Selektoren können mit denselben Eigenschaftswerten gruppiert und der Code reduziert werden.
Z.B :

h1 {

color: blue;

}

h2 {

color: blue;

}

p {

color: blue;

}

 

Aus dem Code ist ersichtlich, dass jedes Element die gleiche Eigenschaft hat. Umschreiben kann vermieden werden, indem jeder Selektor durch ein Komma getrennt geschrieben wird.

Verschachtelung: Das Angeben eines Selektors innerhalb eines Selektors wird als Verschachtelung bezeichnet.

P

{

color: red;

text-align: left;

}

.marked

{

background-color: blue;

}

.marked p

{

color: green;

}

 


34. Wie kann die Dimension eines Elements definiert werden?

Dimensionseigenschaften können wie folgt definiert werden:

  • Größe
  • Maximale Höhe
  • Maximale Breite
  • Mindesthöhe
  • Mindestbreite
  • Breite

35. Float-Eigenschaft von CSS definieren?

Mithilfe der Float-Eigenschaft kann das Bild zusammen mit dem Text, der um das Bild herum umbrochen werden soll, nach rechts oder links verschoben werden. Elemente vor der Anwendung dieser Eigenschaft ändern ihre Eigenschaften nicht.


36. Wie funktioniert der Z-Index?

Bei der Verwendung von CSS zur Positionierung von HTML-Elementen kann es zu Überschneidungen kommen. Der Z-Index hilft bei der Angabe des überlappenden Elements. Es handelt sich um eine Zahl, die positiv oder negativ sein kann; der Standardwert ist Null.


37. Was ist eine würdevolle Erniedrigung?

Falls die Komponente ausfällt, funktioniert sie trotz einer ordnungsgemäßen Verschlechterung weiterhin ordnungsgemäß. Bei der Gestaltung einer Webseite wird die neueste Browseranwendung verwendet. Da es nicht für jedermann verfügbar ist, gibt es eine Grundfunktionalität, die die Nutzung für ein breiteres Publikum ermöglicht. Falls das Bild nicht angezeigt werden kann, wird der Text mit dem Alt-Tag angezeigt.


38. Was ist progressive Verbesserung?

Es ist eine Alternative zur würdevollen Degradierung, die sich auf die Materie des Webs konzentriert. Die Funktionalität ist dieselbe, bietet Benutzern mit der neuesten Bandbreite jedoch einen zusätzlichen Vorteil. Es ist in letzter Zeit stark im Einsatz, da mobile Internetverbindungen ihre Basis erweitern.


39. Wie kann die Abwärtskompatibilität in CSS gestaltet werden?

HTML-Blattmethoden werden mit CSS zusammengearbeitet und entsprechend verwendet.


40. Wie kann die Lücke unter dem Bild entfernt werden?

Da Bilder als Inline-Elemente genauso behandelt werden wie Texte, bleibt eine Lücke, die wie folgt entfernt werden kann:

CSS

img { display: block ; }

 


41. Warum steht @import nur oben?

@import wird nur ganz oben bevorzugt, um überschreibende Regeln zu vermeiden. Im Allgemeinen wird in den meisten Programmiersprachen wie Java, Modula usw. die Rangfolge eingehalten. In C ist das # ein prominentes Beispiel dafür, dass ein @import ganz oben steht.


42. Welcher der folgenden Punkte hat mehr Vorrang: CSS-Eigenschaften oder HTML-Prozeduren?

CSS hat gegenüber HTML-Prozeduren Vorrang. Browser, die keine CSS-Unterstützung haben, zeigen HTML-Attribute an.


43. Was ist Inline-Stil?

Der Inline-Stil in einem CSS wird verwendet, um einzelnen HTML-Elementen Stile hinzuzufügen.


44. Wie können Kommentare in CSS hinzugefügt werden?

Die Kommentare in CSS können mit /* und */ hinzugefügt werden.


45. Attributauswahl definieren?

Es wird durch eine Reihe von Elementen, einen Wert und seine Teile definiert.


46. ​​Eigentum definieren?

Ein Stil, der bei der Beeinflussung von CSS hilft. ZB SCHRIFTART. Sie enthalten entsprechende Werte oder Eigenschaften, z. B. hat FONT unterschiedliche Stile wie Fett, Kursiv usw.


47. Was ist ein alternatives Stylesheet?

Mit alternativen Stylesheets kann der Benutzer über das Menü „Ansicht“ > „Seitenstil“ den Stil auswählen, in dem die Seite angezeigt wird. Mithilfe des alternativen Stylesheets kann der Benutzer je nach Bedarf und Vorlieben mehrere Versionen der Seite anzeigen.


48. Sind Anführungszeichen in URLs obligatorisch?

Anführungszeichen sind in URLs optional und können einfach oder doppelt sein.


49. Was ist at-rule?

Eine Regel, die im gesamten Blatt und nicht nur teilweise gilt, wird als At-Regel bezeichnet. Vorangestellt ist ein @, gefolgt von AZ, az oder 0-9.


50. Wie kann CSS kaskadiert werden, um es mit dem persönlichen Blatt des Benutzers zu mischen?

Eigenschaften können an empfohlenen Stellen festgelegt und das Dokument für CSS geändert werden, um es mit dem persönlichen Blatt des Benutzers zu vermischen.

Diese Interviewfragen werden Ihnen auch bei Ihrem Lebenslauf (mündlich) helfen. In jeder Branche nimmt die Nutzung von Websites und Webanwendungen von Tag zu Tag zu, und CSS ist ein wesentlicher Bestandteil für die Erstellung attraktiver Websites. Daher besteht ein großer Bedarf an UI/UX- und Webdesignern mit guten CSS- und HTML-Kenntnissen.

Teilen

10 Kommentare

  1. Unvollständige Informationen. Wenn Sie eine Antwort geben möchten, machen Sie diese klar. Diese Art von Fragen stellt der Interviewer.

  2. Avatar Kavana Shiva Kumar sagt:

    Vielen Dank, sehr nützliche Informationen

  3. Bei allen theoretischen Fragen wäre es besser gewesen, wenn Sie auch ein paar praktische, beispielbasierte Fragen gestellt hätten.

  4. Avatar Technisch versierte sagt:

    Die folgende Antwort ist unvollständig
    „22. Klassenselektor vom ID-Selektor unterscheiden?
    Während dem Klassenselektor ein Gesamtblock zugewiesen wird, bevorzugt der ID-Selektor nur ein einzelnes Element, das sich von anderen Elementen unterscheidet.“

    Ich schätze die große Anstrengung.

    Vielen Dank.

    1. Avatar Administrator sagt:

      Die Antwort wurde aktualisiert

  5. Guter Eintrag! Einen schönen Tag noch ! :) :)

  6. Bitte definieren Sie Float, Hintergrund-Bewegtbild und Watch-Clip-Tag-Element in CSS.
    Vielen Dank
    Von Ashish

  7. Vielen Dank für das Scheren, es ist großartig. Bitte schreiben Sie mehr über dieses Thema.

    1. Hallo Herr, mein Live-Server funktioniert nicht richtig. Ich klicke auf die Schaltfläche „Ausführen“, um mein Projekt auszuführen, und es funktioniert. Das Hauptproblem besteht darin, dass ich mein Projekt nicht ausführen kann, wenn ich etwas in Tags oder Wörtern ändere. Nur wenn Ich stoppe diesen Live-Server und starte ihn, dann funktioniert er wieder. Ich weiß nicht, wie ich damit umgehen soll. Wenn Sie Zeit haben, beantworten Sie bitte meine Frage. Vielen Dank.

  8. Avatar Abhijeet Sapkale sagt:

    Vielen Dank für den tollen Fragebogen

Hinterlassen Sie uns einen Kommentar

E-Mail-Adresse wird nicht veröffentlicht. Pflichtfelder sind MIT * gekennzeichnet. *