Meny

Topp 30+ populære CSS-intervjuspørsmål og svar

  • Hoved
  • Annen
  • Topp 30+ populære CSS-intervjuspørsmål og svar

top 30 popular css interview questions

Prøv Instrumentet Vårt For Å Eliminere Problemer

Liste over mest populære CSS-intervjuspørsmål med svar:

De CSS spørsmål som dekker nesten alle grunnleggende og avanserte CSS-kategorier er forklart med eksempler.

CSS er en av de viktigste funksjonene i nettutvikling. Det er et språk som vi kan beskrive utseendet til websider på.

Derfor er det viktig å dekke over alle grunnleggende og avanserte deler av CSS. For å bli en god webutvikler og knekke webutviklerintervjuet, må du lære CSS.

CSS intervju spørsmål (1)

Ofte stilte spørsmål om CSS-intervju

Nedenfor er listen over de mest stilte spørsmålene og svarene på CSS-intervjuene i enkle termer for enkel forståelse.

La oss begynne!!

Q # 1) Hva er CSS?

Svar: CSS skisserer stilen til en HTML-webside. Det er et språk som vi kan angi atferden til en HTML-webside. Den beskriver hvordan HTML-innholdet vises på skjermen.

CSS styrer utformingen av flere HTML-websider. CSS er referert til som Cascading Style Sheet.

Q # 2) Nevn alle modulene som brukes i den nåværende versjonen av CSS.

Svar: Det er flere moduler i CSS som angitt nedenfor:

  • Velger
  • Boksmodell
  • Bakgrunner og grenser
  • Teksteffekter
  • 2D / 3D-transformasjoner
  • Animasjoner
  • Flere kolonneoppsett
  • Brukergrensesnitt.

Q # 3) Skille mellom CSS2 og CSS3.

Svar: Forskjellene mellom CSS2 og CSS3 er som følger:

  • CSS3 er delt inn i to forskjellige seksjoner som kalles en modul. Mens det i CSS2 blir alt til ett dokument med all informasjonen i det.
  • CSS3-moduler støttes nesten i alle nettlesere, og på den annen side støttes ikke moduler i CSS og CSS2 i alle nettlesere.
  • I CSS3 vil vi oppdage at mange grafikkrelaterte egenskaper har blitt introdusert som Border-radius eller box-shadow, flexbox.
  • I CSS3 kan en bruker presisere flere bakgrunnsbilder på en nettside ved å bruke egenskaper som bakgrunnsbilde, bakgrunnsposisjon og bakgrunns-repeterende stiler.

Q # 4) Sitere forskjellige typer CSS.

Svar: Det er tre typer CSS som nevnt nedenfor:

  • Utvendig: Disse er skrevet i separate filer.
  • Innvendig: Disse er sitert øverst i websidekodedokumentet.
  • På linje: Disse er skrevet rett ved siden av teksten.

Spørsmål nr. 5) Hvorfor er det eksterne stilarket nyttig?

Svar: Eksternt stilark er veldig nyttig når vi skriver alle stylingkodene i en enkelt fil, og den kan brukes hvor som helst ved å bare henvise til lenken til den eksterne stilarkfilen.

Så hvis vi gjør noen endringer i den eksterne filen, kan endringene også observeres på nettsiden. Dermed kan vi si at det er veldig nyttig, og det gjør arbeidet ditt enkelt mens du arbeider med større filer.

Q # 6) Hva er bruken av et innebygd stilark? ?

Svar: Innebygd stilark gir oss privilegiet å definere stiler på ett sted i et HTML-dokument.

Vi kan generere flere klasser ved hjelp av et innebygd stilark for bruk på flere tagtyper på en webside, og det er heller ikke nødvendig å laste ned ekstra for å importere informasjonen.

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.

en del av

Sp # 7) Hvordan bruker jeg CSS-velgeren?

Svar: Ved å bruke CSS-velgeren kan vi velge innholdet vi ønsker å style, slik at vi kan si at det er en bro mellom stilarket og HTML-filene.

Syntaksen for CSS-velgeren er 'velg' HTML-elementer opprettet på ID, klasse, type osv.

Q # 8) Forklar begrepet Tweening.

Svar: Tweening er prosessen der vi lager mellombilder mellom to bilder for å få utseendet til det første bildet som utvikler seg til det andre bildet.

Den brukes hovedsakelig til å lage animasjon.

Q # 9) Definer CSS-bildeskripter.

Svar: CSS-bildeskripter er en gruppe bilder som plasseres i ett bilde. Det reduserer ladetiden og forespørselenummeret til serveren mens du projiserer flere bilder på en enkelt webside.

Q # 10) Forklar begrepet Responsive web design.

Svar: Det er en metode der vi designer og utvikler en webside i henhold til brukeraktivitetene og forholdene som er basert på forskjellige komponenter som størrelsen på skjermen, bærbarheten til websiden på de forskjellige enhetene osv. Det gjøres ved å bruke forskjellige fleksible oppsett og rutenett.

Q # 11) Hva er CSS-tellere?

Svar: CSS-tellere er variabler som kan økes med regler i CSS som inspektør sporer hvor mange ganger variabelen har blitt brukt.

Q # 12) Hva er CSS-spesifisitet?

Svar: CSS-spesifisitet er en poengsum eller rang som bestemmer hvilken stilerklæring som skal brukes til et element. (*) denne universelle velgeren har lav spesifisitet mens ID-velgerne har høy spesifisitet.

Det er fire kategorier i CSS som autoriserer velgerens spesifisitetsnivå.

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

Sp # 13) Hvordan kan vi beregne spesifisitet?

Svar: For å beregne spesifisitet begynner vi med 0, så må vi legge til 1000 for hver ID, og ​​vi må legge 10 til attributtene, klasser eller pseudoklasser med hvert elementnavn eller pseudo-element, og senere må vi legge til 1 til dem .

Eksempel:

h2 #content h2

heading

Sp # 14) Hvordan lager vi et avrundet hjørne ved å bruke CSS?

Svar: Vi kan lage et avrundet hjørne ved å bruke eiendommen 'border-radius'. Vi kan bruke denne eiendommen 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!

grense-radius

Sp # 15) Hvordan vil du legge til rammebilder i et HTML-element?

Svar: Vi kan stille inn bildet som skal brukes som grense-bilde ved siden av et element ved å bruke egenskapen til CSS 'border-image'.

Eksempel:

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

Spørsmål nr. 16) Hva er graderinger i CSS?

Svar: Det er en egenskap til CSS som lar deg vise en jevn transformasjon mellom to eller flere enn to spesifiserte farger.

Det er to typer graderinger som er tilstede i CSS. De er:

  • Lineær gradering
  • Radial Gradient

Spørsmål nr. 17) Hva er CSS flexbox?

Svar: Den lar deg designe en fleksibel responsiv layoutstruktur uten å bruke noen flyt- eller posisjonsegenskaper til CSS. For å bruke CSS flexbox må du først definere en flex container.

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 egenskapene til flexbox.

Svar: Det er flere egenskaper til flexboxen som brukes på HTML-websiden.

De er:

  • flex-retning
  • flex-wrap
  • flex-flow
  • rettferdiggjøre innhold
  • align-items
  • juster innhold

Spørsmål nr. 19) Hvordan justere bildet vertikalt i en inndeling som strekker seg vertikalt på hele websiden?

juster bildet vertikalt i en inndeling

Svar: Det kan gjøres ved å bruke syntaksen verticle-align: midt i elementet, og til og med kan vi binde de to tekstspennene rundt med et annet spenn, og etter dette må vi bruke verticle-align: midt i innholdet #ikon.

Q # 20) Hva er forskjellen mellom polstring og margin?

Svar: I CSS er margen egenskapen som vi kan skape plass rundt elementer. Vi kan til og med skape plass til de ytre definerte grensene.

I CSS har vi marginegenskap som følger:

  • margin-topp
  • margin-høyre
  • margin-bunn
  • Margin-venstre

Marginegenskap har noen definerte verdier som vist nedenfor.

  • Auto - Ved å bruke denne eiendomsleseren beregner du margen.
  • Lengde - Det setter marginverdiene i px, pt, cm osv.
  • % - Den angir bredden% av elementet.
  • Arv - Ved denne egenskapen kan vi arve marginegenskapen fra det overordnede elementet.

I CSS er polstring egenskapen vi kan generere plass rundt innholdet til et element så vel som innenfor en hvilken som helst kjent grense.

CSS polstring har også egenskaper som,

  1. Polstring-topp
  2. Polstring-høyre
  3. Polstring-bunn
  4. Polstring-venstre

Negative verdier er ikke tillatt i polstring.

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

Spørsmål nr. 21) Hva er bruken av Box Model i CSS?

Svar: I CSS er boksmodellen en boks som binder alle HTML-elementene, og den inneholder funksjoner som marginer, kantlinjer, polstring og det faktiske innholdet.

Ved å bruke en boksmodell får vi myndighet til å legge til kantene rundt elementene, og vi kan også definere rommet mellom elementene.

Q # 22) Hvordan kan vi legge til ikoner på websiden?

Svar: Vi kan legge til ikoner på HTML-websiden ved å bruke et ikonbibliotek som font-awesome.

Vi må legge til navnet på den gitte ikonklassen til ethvert innebygd HTML-element. ( eller). Ikoner i ikonbibliotekene er skalerbare vektorer som kan tilpasses med CSS.

Spørsmål nr. 23) Hva er en CSS-pseudoklasse?

Svar: Det er en klasse som brukes til å definere en spesiell tilstand for et HTML-element.

Denne klassen kan brukes ved å utforme et element når en bruker sniker seg over det, og det kan også style et HTML-element når det får fokus.

selector:pseudo-class { property:value; }

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

Svar: Det er en funksjon av CSS som brukes til å style de gitte delene av et element.

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

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

Q # 25) Hva er CSS opacity?

Svar: Det er egenskapen som utdyper gjennomsiktigheten til et element.

Ved denne egenskapen kan vi gjennomsiktig bildet som kan ta verdiene fra 0,0-1,0. Hvis verdien er lavere, er bildet mer gjennomsiktig. IE8 og tidligere versjoner av nettleseren kan ta verdiene fra 0-100.

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

Q # 26) Skriv alle posisjonstilstandene som brukes i CSS.

Svar: I CSS er det fire posisjonstilstander som angitt nedenfor:

  • Statisk (standard)
  • Slektning
  • Fikset
  • Absolutt

Spørsmål nr. 27) Hva er navigasjonsfelt i CSS?

Svar: Ved å bruke navigasjonsfelt kan vi lage en vanlig HTML-side til en brukerspesifikk og mer dynamisk webside. I utgangspunktet er det en liste over lenker, derav bruk av

    og
  • elementer gir perfekt mening.

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

    Spørsmål nr. 28) Hva er forskjellen mellom relativ og absolutt i CSS?

    Svar: Hovedforskjellen mellom relativ og absolutt er at 'relativ' brukes til samme tag i CSS, og det betyr at hvis vi skriver til venstre: 10px, vil polstringen skifte til 10px til venstre mens absolutt er totalt relativt til det ikke- statisk foreldre.

    Det betyr at hvis vi skriver venstre: 10px så vil resultatet være 10px langt fra venstre kant av det overordnede elementet.

    Q # 29) Definer ‘viktige’ erklæringer som brukes i CSS.

    Svar: Viktige erklæringer er definert som den erklæringen som har mer betydning enn den vanlige erklæringen.

    Under utførelsen overstyrer erklæringen erklæringen som har mindre betydning.

    For eksempel, hvis det er to brukere som har en viktig erklæring, vil en av erklæringene overstyre erklæringen til en annen bruker.

    For eksempel:
    Kropp {bakgrunn: # FF00FF! Viktig; farge: blå}

    java legge til elementer i en matrise

    I denne kroppen har bakgrunn mer vekt enn fargen.

    Q # 30) Definer forskjellige kaskaderingsmetoder som kan brukes i kaskaderingsrekkefølgen.

    Svar: Cascading order er i seg selv en sorteringsmetode som tillater mange andre forskjellige sorteringsmetoder:

    a) Sorter etter opprinnelse: Det er noen regler som kan gi en alternativ måte definert som:

    • Den normale vekten til stilarket til en bestemt leverandør vil bli overstyrt av den økte vekten til brukerens stilark.
    • Regler for stilark for en bestemt bruker overstyres av den normale bredden på leverandørens stilark.

    b) Sorter etter velgerens spesifisitet: Mindre spesifikk velger er blitt overstyrt av den mer spesifikke velgeren.

    For eksempel , En kontekstuell velger er mindre spesifikk i forhold til ID-velgeren som er en mer spesifikk og med den kontekstuelle velgeren blir overstyrt av ID-velgeren.

    c) Sorter etter angitt rekkefølge: Dette kommer i scenariet når de to velgerne har samme vekt og de andre egenskapene enn spesifikasjonen som vil bli sett for å overstyre.

    Eksempel:

    Alle andre stiler blir sett overstyrt hvis stilattributtet brukes til innebygd stil.

    Og hvis linkelementet brukes til ekstern stil, vil det overstyre den importerte stilen.

    Q # 31) Skille mellom innebygd og blokkelement.

    Svar: Inline-element har ikke et element for å stille inn bredde og høyde, og det har heller ikke linjeskift.

    Eksempel: em, sterk, etc.

    Spesifikasjon av blokkeringselementer:

    • De har linjeskift.
    • De definerer bredden ved å sette en container og tillater også innstillingshøyde.
    • Den kan også inneholde et element som forekommer i det innebygde elementet.

    Eksempel:

    bredde og høyde
    maks bredde og maks høyde
    min-bredde og min-høyde
    hei (i = 1-6) - overskriftelement
    p- Avsnittelement.

    Spørsmål nr. 32) Hvordan brukes begrepet arv i CSS?

    Svar: Arv er et konsept der barneklassen vil arve egenskapene til sin overordnede klasse. Det er et konsept som er brukt på mange språk og er den enkle måten å definere den samme egenskapen på nytt.

    Den brukes i CSS for å definere hierarkiet fra toppnivå til bunnivå. Arvede eiendommer kan overstyres av barneklassen hvis barnet bruker samme navn.

    Eksempel:

    Kropp {font-size: 15pt;}

    Og en annen definisjon blir definert i barneklassen

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

    All avsnittsteksten vises med egenskapen og vil bli definert i brødteksten bortsett fra H1-stilen som bare viser teksten i skrift 18.

    Q # 33) Skille mellom ID og klasse.

    Svar: Både ID og klasse er brukt i HTML og tildeler verdien fra CSS.

    Vennligst finn forskjellene nedenfor:

    • ID-en er et slags element som unikt tildeler et navn til et bestemt element, mens klassen har et element med et bestemt sett med egenskaper som kan brukes til hele blokken.
    • ID-en kan brukes som et element fordi den unikt kan identifisere den, mens klasse også er definert for å blokkere elementene og bruker for mange koder uansett hvor den brukes.
    • ID gir begrensningen for å bruke egenskapene til ett bestemt element, mens arv blir brukt på en bestemt blokk eller gruppe av elementet i klassen.

    Konklusjon

    Denne intervjuelisten for spørsmål og svar vil hjelpe deg med å knekke webutviklerintervjuet for både friskere og erfaringsnivå. Dette er de hyppige spørsmålene som blir stilt i intervjuet.

    Håper denne artikkelen vil bidra til å knekke og møte ethvert intervju relatert til CSS for en webutvikler.

    Foreslått lesing = >> Nettutviklerintervju Spørsmål og svar

    Vi ønsker deg lykke til !!

    Anbefalt lesing

^