Menu

Top 30+ populære CSS-spørgsmål og svar

top 30 popular css interview questions

Prøv Vores Instrument Til At Fjerne Problemer

Liste over mest populære CSS-interviewspørgsmål med svar:

Det CSS spørgsmål, der dækker næsten alle de grundlæggende og avancerede CSS-kategorier, forklares med eksempler.

CSS er en af ​​de mest væsentlige funktioner i webudvikling. Det er et sprog, hvormed vi kan beskrive udseendet på websider.

Derfor er det vigtigt at dække over alle de grundlæggende og avancerede dele af CSS. For at blive en god webudvikler og knække webudviklerinterviewet med succes, skal du lære CSS.

CSS-interviewspørgsmål (1)

Ofte stillede spørgsmål om CSS-interview

Nedenfor er listen over de hyppigst stillede spørgsmål og svar på CSS-interview og svar i enkle termer for din nemme forståelse.

Lad os begynde!!

Q # 1) Hvad er CSS?

Svar: CSS skitserer stilen på en HTML-webside. Det er et sprog, hvormed vi kan indstille adfærden på en HTML-webside. Den beskriver, hvordan HTML-indholdet vises på skærmen.

CSS styrer layoutet på flere HTML-websider. CSS kaldes Cascading Style Sheet.

Q # 2) Navngiv alle de moduler, der bruges i den aktuelle version af CSS.

Svar: Der er flere moduler i CSS som anført nedenfor:

  • Vælgere
  • Kassemodel
  • Baggrunde og grænser
  • Teksteffekter
  • 2D / 3D-transformationer
  • Animationer
  • Flere kolonnelayout
  • Brugergrænseflade.

Q # 3) Skel mellem CSS2 og CSS3.

Svar: Forskellene mellem CSS2 og CSS3 er som følger:

  • CSS3 er opdelt i to forskellige sektioner, der kaldes et modul. Mens der i CSS2 alt tiltræder et enkelt dokument med alle oplysningerne i det.
  • CSS3-moduler understøttes næsten i enhver browser, og på den anden side understøttes moduler i CSS og CSS2 ikke i enhver browser.
  • I CSS3 finder vi, at mange grafikrelaterede egenskaber er blevet introduceret som Border-radius eller box-shadow, flexbox.
  • I CSS3 kan en bruger præcisere flere baggrundsbilleder på en webside ved hjælp af egenskaber som baggrundsbillede, baggrundsposition og baggrunds-gentagelsesformat.

Q # 4) Citer forskellige typer CSS.

Svar: Der er tre typer CSS som nævnt nedenfor:

  • Ekstern: Disse er skrevet i separate filer.
  • Indre: Disse er citeret øverst i websidekodedokumentet.
  • Inline: Disse skrives lige ved siden af ​​teksten.

Spørgsmål nr. 5) Hvorfor er det eksterne stilark nyttigt?

Svar: Eksternt stilark er meget nyttigt, da vi skriver alle stylingkoder i en enkelt fil, og det kan bruges hvor som helst ved blot at henvise til linket til den eksterne stilarkfil.

Så hvis vi foretager ændringer i den eksterne fil, kan ændringerne også observeres på websiden. Således kan vi sige, at det er meget nyttigt, og det gør dit arbejde let, mens du arbejder på større filer.

Q # 6) Hvad er brugen af ​​et integreret typografiark? ?

Svar: Integreret typografiark giver os ret til at definere typografier ét sted i et HTML-dokument.

Vi kan generere flere klasser ved hjælp af et indlejret typografiark til brug på flere tagtyper på en webside, og der er heller ikke behov for ekstra download for at importere oplysningerne.

Eksempel:

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.

indlejret

Spørgsmål nr. 7) Hvordan bruges CSS-vælger?

Svar: Ved at bruge CSS-vælgeren kan vi vælge det indhold, som vi vil style, så vi kan sige, at det er en bro mellem stilarket og HTML-filerne.

Syntaksen for CSS-vælgeren er 'vælg' HTML-elementer oprettet på deres id, klasse, type osv.

Q # 8) Forklar begrebet Tweening.

Svar: Tweening er den proces, hvor vi opretter mellemliggende rammer mellem to billeder for at få fremkomsten af ​​det første billede, der udvikler sig til det andet billede.

Det bruges hovedsageligt til oprettelse af animation.

Q # 9) Definer CSS-billedskripter.

Svar: CSS-billedskripter er en gruppe billeder, der placeres i et billede. Det reducerer indlæsningstiden og anmodningsnummeret til serveren, mens du projicerer flere billeder på en enkelt webside.

Q # 10) Forklar udtrykket Responsivt webdesign.

Svar: Det er en metode, hvor vi designer og udvikler en webside i henhold til brugeraktiviteter og betingelser, der er baseret på forskellige komponenter som skærmens størrelse, bærbarhed af websiden på de forskellige enheder osv. Det gøres ved hjælp af forskellige fleksible layout og gitre.

Spørgsmål nr. 11) Hvad er CSS-tællere?

Svar: CSS-tællere er variabler, der kan forøges af reglerne i CSS, som inspektøren sporer, hvor mange gange variablen er blevet brugt.

Spørgsmål nr. 12) Hvad er CSS-specificitet?

Svar: CSS-specificitet er en score eller rang, der bestemmer, hvilken stilerklæring der skal bruges til et element. (*) denne universelle vælger har lav specificitet, mens ID-vælgere har høj specificitet.

Der er fire kategorier i CSS, der godkender vælgerens specificitetsniveau.

  • Inline stil
  • ID'er
  • Klasser, attributter og pseudoklasser.
  • Elementer og pseudo-elementer.

Q # 13) Hvordan kan vi beregne specificitet?

Svar: For at beregne specificitet starter vi med 0, så skal vi tilføje 1000 for hvert ID, og ​​vi skal tilføje 10 til attributterne, klasser eller pseudoklasser med hvert elementnavn eller pseudo-element, og senere skal vi tilføje 1 til dem .

Eksempel:

h2 #content h2

heading

Spørgsmål nr. 14) Hvordan laver vi et afrundet hjørne ved hjælp af CSS?

Svar: Vi kan lave et afrundet hjørne ved at bruge ejendommen 'border-radius'. Vi kan anvende denne egenskab på ethvert element.

Eksempel:

#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; }

Rounded corners for an element with a specified background color:

Rounded corners!

grænse-radius

Spørgsmål nr. 15) Hvordan tilføjer du rammebilleder til et HTML-element?

Svar: Vi kan indstille billedet til at blive brugt som grænsebillede ved siden af ​​et element ved hjælp af egenskaben CSS “border-image”.

Eksempel:

#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }

Spørgsmål nr. 16) Hvad er gradienter i CSS?

Svar: Det er en egenskab ved CSS, som giver dig mulighed for at vise en jævn transformation mellem to eller flere end to angivne farver.

Der er to typer gradienter, der findes i CSS. De er:

  • Lineær gradient
  • Radial gradient

Spørgsmål nr. 17) Hvad er CSS flexbox?

Svar: Det giver dig mulighed for at designe en fleksibel responsiv layoutstruktur uden at bruge nogen float- eller positioneringsegenskaber for CSS. For at bruge CSS flexbox skal du først definere en flexcontainer.

Eksempel:

.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.

flexbox

Q # 18) Skriv alle egenskaberne for flexbox.

Svar: Der er flere egenskaber ved flexbox, der bruges på HTML-websiden.

De er:

  • flex-retning
  • flex-wrap
  • flex-flow
  • retfærdiggør-indhold
  • align-items
  • juster-indhold

Spørgsmål nr. 19) Hvordan justeres billedet lodret i en division, der spænder lodret på hele websiden?

juster billedet lodret i en division

Svar: Det kan gøres ved hjælp af syntaksen verticle-align: midten i elementet, og selv vi kan binde de to tekstspænd rundt med et andet span, og efter dette skal vi bruge verticle-align: middle i indholdet #icon.

Spørgsmål nr. 20) Hvad er forskellen mellem polstring og margen?

Svar: I CSS er margenen den egenskab, hvormed vi kan skabe plads omkring elementer. Vi kan endda skabe plads til de ydre definerede grænser.

I CSS har vi marginegenskaber som følger:

  • margin-top
  • margen-højre
  • margin-bund
  • Margin-venstre

Marginegenskab har nogle definerede værdier som vist nedenfor.

  • Auto - Brug af denne egenskabsbrowser beregner margenen.
  • Længde - Det indstiller marginværdierne i px, pt, cm osv.
  • % - Det indstiller bredden% af elementet.
  • Arve - Ved denne egenskab kan vi arve marginegenskaben fra det overordnede element.

I CSS er polstring den egenskab, hvormed vi kan generere plads omkring elementets indhold såvel som inden for enhver kendt grænse.

CSS polstring har også egenskaber som,

  1. Polstring-top
  2. Polstring-højre
  3. Polstring-bund
  4. Polstring-venstre

Negative værdier er ikke tilladt i polstring.

div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }

Spørgsmål nr. 21) Hvad er brugen af ​​Box Model i CSS?

Svar: I CSS er boksmodellen en boks, der binder alle HTML-elementerne, og den indeholder funktioner som margener, kant, polstring og det faktiske indhold.

Ved at bruge en boksmodel får vi autoriteten til at tilføje grænserne rundt om elementerne, og vi kan også definere rummet mellem elementerne.

Spørgsmål nr. 22) Hvordan kan vi føje ikoner til websiden?

Svar: Vi kan tilføje ikoner til HTML-websiden ved hjælp af et ikonbibliotek som font-awesome.

Vi er nødt til at tilføje navnet på den givne ikonklasse til ethvert indbygget HTML-element. ( eller). Ikoner i ikonbibliotekerne er skalerbare vektorer, der kan tilpasses med CSS.

Spørgsmål nr. 23) Hvad er en CSS-pseudoklasse?

Svar: Det er en klasse, der bruges til at definere en speciel tilstand for et HTML-element.

Denne klasse kan bruges ved at style et element, når en bruger snokede over det, og det kan også style et HTML-element, når det får fokus.

selector:pseudo-class { property:value; }

Q # 24) Forklar begrebet pseudo-elementer i CSS.

Svar: Det er et træk ved CSS, der bruges til at style de givne dele af et element.

For eksempel ,vi kan style det første bogstav eller linjen i et HTML-element.

selector::pseudo-element { property:value; }

Spørgsmål nr. 25) Hvad er CSS opacitet?

Svar: Det er ejendommen, der uddyber gennemsigtigheden af ​​et element.

Ved denne egenskab kan vi gennemsigtige billedet, der kan tage værdierne fra 0,0-1,0. Hvis værdien er lavere, er billedet mere gennemsigtigt. IE8 og tidligere versioner af browseren kan tage værdierne fra 0-100.

img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}

Q # 26) Skriv alle de positionstilstande, der bruges i CSS.

Svar: I CSS er der fire positionstilstande som anført nedenfor:

  • Statisk (standard)
  • I forhold
  • Fast
  • Absolut

Spørgsmål nr. 27) Hvad er navigationsbjælker i CSS?

Svar: Ved at bruge navigationsbjælker kan vi lave en almindelig HTML-side til en brugerspecifik og mere dynamisk webside. Dybest set er det en liste over links, dermed brug af

    og
  • elementer giver den perfekte mening.

    ul { list-style-type: none; margin: 0; padding: 0; }

    Spørgsmål nr. 28) Hvad er forskellen mellem relativ og absolut i CSS?

    Svar: Hovedforskellen mellem relativ og absolut er, at 'relativ' bruges til det samme mærke i CSS, og det betyder, at hvis vi skriver til venstre: 10px, så skifter polstringen til 10px i venstre, mens absolut er fuldstændig relativ til det ikke- statisk forælder.

    Det betyder, at hvis vi skriver venstre: 10px, så vil resultatet være 10px langt fra den venstre kant af det overordnede element.

    Q # 29) Definer 'vigtige' erklæringer, der bruges i CSS.

    Svar: Vigtige erklæringer defineres som den erklæring, der har større betydning end den normale erklæring.

    Under udførelsen tilsidesætter disse erklæringer erklæringen, som har mindre betydning.

    For eksempel, hvis der er to brugere, der har en vigtig erklæring, tilsidesætter en af ​​erklæringerne erklæringen fra en anden bruger.

    For eksempel:
    Krop {baggrund: # FF00FF! Vigtigt; farve: blå}

    hvad er et godt sted at se anime

    I denne krop har baggrunden mere vægt end farven.

    Q # 30) Definer forskellige kaskaderingsmetoder, der kan bruges i kaskaderækkefølgen.

    Svar: Cascading order er i sig selv en sorteringsmetode, der tillader mange andre forskellige sorteringsmetoder:

    a) Sorter efter oprindelse: Der er nogle regler, der kan give en alternativ måde defineret som:

    • Den normale vægt for en bestemt udbyders stilark vil blive tilsidesat af den øgede vægt af brugerens stilark.
    • Regler for typografiark for en bestemt bruger tilsidesættes af den normale bredde på udbyderens stilark.

    b) Sorter efter vælgerens specificitet: Mindre specifik vælger er blevet tilsidesat af den mere specifikke vælger.

    For eksempel , En kontekstuel vælger er mindre specifik i sammenligning med ID-vælgeren, som er en mere specifik og med den kontekstuelle vælger er blevet tilsidesat af ID-vælgeren.

    c) Sorter efter den angivne rækkefølge: Dette kommer i scenariet, når de to vælgere har samme vægt og de andre egenskaber end den specifikation, der ses som tilsidesættelse.

    Eksempel:

    Alle andre stilarter ses tilsidesat, hvis stilattributten bruges til indbygget stil.

    Og også hvis linkelementet bruges til ekstern typografi, tilsidesætter det den importerede stil.

    Q # 31) Skel mellem indbygget og blokelement.

    Svar: Inline-element har ikke et element til at indstille bredde og højde, og det har heller ikke linjeskift.

    Eksempel: em, stærk osv.

    Block element specifikation:

    • De har linjeskift.
    • De definerer bredden ved at indstille en container og tillader også indstilling af højde.
    • Det kan også indeholde et element, der forekommer i det integrerede element.

    Eksempel:

    bredde og højde
    maks. bredde og maks. højde
    min-bredde og min-højde
    hej (i = 1-6) - overskriftelement
    p- Afsnitselement.

    Spørgsmål nr. 32) Hvordan anvendes begrebet arv i CSS?

    Svar: Arv er et koncept, hvor barneklassen vil arve egenskaberne for sin overordnede klasse. Det er et koncept, der er brugt på mange sprog og er den nemme måde at definere den samme egenskab på igen.

    Det bruges i CSS til at definere hierarkiet fra det øverste niveau til det nederste niveau. Arvelige ejendomme kan tilsidesættes af børnenes klasse, hvis barnet bruger det samme navn.

    Eksempel:

    Body {font-size: 15pt;}

    Og en anden definition defineres i børneklassen

    Body {font-size: 15pt;}
    H1 {skriftstørrelse: 18pt;}

    Al afsnitsteksten vises ved hjælp af egenskaben og defineres i kroppen undtagen H1-stilen, der kun viser teksten i skrifttype 18.

    Q # 33) Skel mellem ID og klasse.

    Svar: Både ID og klasse er brugt i HTML og tildeler værdien fra CSS.

    Find nedenstående forskelle:

    • ID'et er en slags element, der entydigt tildeler et navn til et bestemt element, hvorimod klassen har et element med et bestemt sæt egenskaber, der kan bruges til den komplette blok.
    • Id'et kan bruges som et element, fordi det entydigt kan identificere det, mens klasse også er defineret til at blokere elementerne og anvender for mange tags, uanset hvor det bruges.
    • ID giver begrænsningen for at bruge dets egenskaber til et specifikt element, mens arv i klasse påføres en bestemt blok eller gruppe af elementet.

    Konklusion

    Denne interviewspørgsmål og svarliste hjælper dig med at knække webudviklerinterviewet for friskere såvel som oplevelsesniveau. Dette er de hyppige spørgsmål, der stilles i interviewet.

    Håber, at denne artikel hjælper med at knække og møde ethvert interview relateret til CSS for en webudvikler.

    Foreslået læsning = >> Webudvikler Interview Spørgsmål og svar

    Vi ønsker dig al succes !!

    Anbefalet læsning

^