top 30 popular css interview questions
Lista över mest populära CSS-intervjufrågor med svar:
De CSS frågor som täcker nästan alla grundläggande och avancerade CSS-kategorier förklaras med exempel.
CSS är en av de viktigaste funktionerna i webbutveckling. Det är ett språk som vi kan beskriva utseendet på webbsidor på.
Därför är det viktigt att täcka över alla grundläggande och avancerade delar av CSS. För att bli en bra webbutvecklare och knäcka webbutvecklarintervjun framgångsrikt måste du lära dig CSS.
Vanliga frågor om CSS-intervjuer
Nedan följer en lista med de vanligaste frågorna och svaren på CSS-intervjuer i enkla termer för enkel förståelse.
Låt oss börja!!
F # 1) Vad är CSS?
Svar: CSS beskriver stilen för en HTML-webbsida. Det är ett språk som vi kan ställa in beteendet för en HTML-webbsida. Den beskriver hur HTML-innehållet visas på skärmen.
CSS styr layouten på flera HTML-webbsidor. CSS kallas Cascading Style Sheet.
F # 2) Namnge alla moduler som används i den aktuella versionen av CSS.
Svar: Det finns flera moduler i CSS enligt nedan:
- Väljare
- Lådmodell
- Bakgrunder och gränser
- Texteffekter
- 2D / 3D-omvandlingar
- Animationer
- Flera kolumnlayout
- Användargränssnitt.
F # 3) Gör skillnad mellan CSS2 och CSS3.
Svar: Skillnaderna mellan CSS2 och CSS3 är följande:
- CSS3 är uppdelad i två olika sektioner som kallas en modul. I CSS2 ansluts allt till ett enda dokument med all information i det.
- CSS3-moduler stöds nästan i alla webbläsare och å andra sidan stöds inte moduler i CSS och CSS2 i alla webbläsare.
- I CSS3 kommer vi att upptäcka att många grafikrelaterade egenskaper har introducerats som Border-radius eller box-shadow, flexbox.
- I CSS3 kan en användare precisera flera bakgrundsbilder på en webbsida med hjälp av egenskaper som bakgrundsbild, bakgrundsposition och bakgrundsupprepningsstilar.
F # 4) Citera olika typer av CSS.
Svar: Det finns tre typer av CSS som nämns nedan:
- Extern: Dessa skrivs i separata filer.
- Inre: Dessa citeras högst upp i webbsidans koddokument.
- I kö: Dessa skrivs bredvid texten.
F # 5) Varför är det externa formatmallen användbart?
Svar: Extern stilark är mycket användbar eftersom vi skriver alla stylingkoder i en enda fil och den kan användas var som helst genom att bara hänvisa till länken till den externa stilarkfilen.
Så om vi gör några ändringar i den externa filen kan ändringarna också observeras på webbsidan. Således kan vi säga att det är mycket användbart och det gör ditt arbete enkelt när du arbetar med större filer.
F # 6) Vad är användningen av ett inbäddat formatmall? ?
Svar: Inbäddat stilark ger oss rätt att definiera format på ett ställe i ett HTML-dokument.
Vi kan generera flera klasser med hjälp av ett inbäddat formatmall för att använda på flera taggtyper på en webbsida och det krävs inte heller någon extra nedladdning för att importera informationen.
Exempel:
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) Hur använder jag CSS-väljaren?
Svar: Genom att använda CSS-väljaren kan vi välja det innehåll som vi vill utforma så att vi kan säga att det är en bro mellan stilarket och HTML-filerna.
Syntaxen för CSS-väljaren är 'välj' HTML-element som skapats på deras id, klass, typ etc.
F # 8) Förklara begreppet Tweening.
Svar: Tweening är processen där vi skapar mellanramar mellan två bilder för att få utseendet på den första bilden som utvecklas till den andra bilden.
Den används främst för att skapa animering.
F # 9) Definiera CSS-bildskript.
Svar: CSS-bildskript är en grupp bilder som placeras i en bild. Det minskar laddningstiden och begäranumret till servern medan du projicerar flera bilder till en enda webbsida.
F # 10) Förklara termen Responsive webbdesign.
Svar: Det är en metod där vi utformar och utvecklar en webbsida enligt användaraktiviteter och villkor som baseras på olika komponenter som skärmens storlek, bärbarhet på webbsidan på de olika enheterna etc. Det görs med hjälp av olika flexibla layouter och rutnät.
F # 11) Vad är CSS-räknare?
Svar: CSS-räknare är variabler som kan ökas av CSS-regler som inspektören spårar hur många gånger variabeln har använts.
F # 12) Vad är CSS-specificitet?
Svar: CSS-specificitet är en poäng eller rang som avgör vilken stildeklaration som ska användas för ett element. (*) den här universella väljaren har låg specificitet medan ID-väljare har hög specificitet.
Det finns fyra kategorier i CSS som godkänner väljarens specificitetsnivå.
- Inline stil
- ID
- Klasser, attribut och pseudoklasser.
- Element och pseudoelement.
F # 13) Hur kan vi beräkna specificitet?
Svar: För att beräkna specificitet börjar vi med 0, då måste vi lägga till 1000 för varje ID och vi måste lägga 10 till attributen, klasserna eller pseudoklasserna med varje elementnamn eller pseudoelement och senare måste vi lägga till 1 till dem .
Exempel:
h2 #content h2 heading
F # 14) Hur skapar vi ett rundat hörn med CSS?
Svar: Vi kan skapa ett avrundat hörn med hjälp av egenskapen 'gränsradie'. Vi kan tillämpa den här egenskapen på alla element.
Exempel:
#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) Hur lägger du till kantbilder till ett HTML-element?
Svar: Vi kan ställa in bilden som ska användas som gränsbild tillsammans med ett element genom att använda egenskapen för CSS ”border-image”.
Exempel:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }
F # 16) Vad är gradienter i CSS?
Svar: Det är en egenskap hos CSS som låter dig visa en smidig omvandling mellan två eller fler än två angivna färger.
Det finns två typer av övertoningar som finns i CSS. Dom är:
- Linjär lutning
- Radiell lutning
F # 17) Vad är CSS flexbox?
Svar: Det låter dig designa en flexibel responsiv layoutstruktur utan att använda någon flyt- eller positioneringsegenskap för CSS. För att använda CSS flexbox måste du först definiera en flexcontainer.
Exempel:
.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) Skriv alla egenskaper hos flexboxen.
Svar: Det finns flera egenskaper hos flexbox som används på HTML-webbsidan.
Dom är:
- flex-riktning
- flex-wrap
- flex-flöde
- rättfärdiga-innehåll
- justera-objekt
- anpassa innehåll
F # 19) Hur man justerar bilden vertikalt i en uppdelning som sträcker sig vertikalt på hela webbsidan?
Svar: Det kan göras genom att använda syntaxen verticle-align: mitt i elementet och till och med kan vi binda de två textomfången runt med ett annat intervall och efter detta måste vi använda verticle-align: mitt i innehållet #ikon.
F # 20) Vad är skillnaden mellan stoppning och marginal?
Svar: I CSS är marginalen den egenskap genom vilken vi kan skapa utrymme runt element. Vi kan till och med skapa utrymme för de yttre definierade gränserna.
I CSS har vi marginalegenskap enligt följande:
- marginal-topp
- marginal-höger
- marginalbotten
- Marginal-vänster
Marginegenskapen har några definierade värden som visas nedan.
- Auto - Med hjälp av den här webbläsaren beräknas marginalen.
- Längd - Det ställer in marginalvärdena i px, pt, cm etc.
- % - Det ställer in bredden% av elementet.
- Ärva - Genom den här egenskapen kan vi ärva marginalegenskapen från det överordnade elementet.
I CSS är vaddering den egenskap genom vilken vi kan skapa utrymme runt ett elements innehåll såväl som inom alla kända gränser.
CSS-stoppning har också egenskaper som,
- Vadderingstopp
- Vaddering-rätt
- Vaddering-botten
- Vaddering-vänster
Negativa värden är inte tillåtna i stoppning.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }
F # 21) Vad är användningen av Box Model i CSS?
Svar: I CSS är boxmodellen en ruta som binder alla HTML-element och den innehåller funktioner som marginaler, kantlinjer, stoppning och det faktiska innehållet.
Genom att använda en rutmodell får vi befogenhet att lägga till gränserna runt elementen och vi kan också definiera utrymmet mellan elementen.
F # 22) Hur kan vi lägga till ikoner på webbsidan?
Svar: Vi kan lägga till ikoner på HTML-webbsidan genom att använda ett ikonbibliotek som font-awesome.
Vi måste lägga till namnet på den angivna ikonklassen i alla inbyggda HTML-element. ( eller). Ikoner i ikonbiblioteken är skalbara vektorer som kan anpassas med CSS.
F # 23) Vad är en CSS-pseudoklass?
Svar: Det är en klass som används för att definiera ett speciellt tillstånd för ett HTML-element.
Denna klass kan användas genom att utforma ett element när en användare snookade över det och det kan också utforma ett HTML-element när det blir fokus.
selector:pseudo-class { property:value; }
F # 24) Förklara begreppet pseudo-element i CSS.
Svar: Det är en funktion i CSS som används för att utforma de angivna delarna av ett element.
Till exempel ,vi kan utforma den första bokstaven eller raden i ett HTML-element.
selector::pseudo-element { property:value; }
F # 25) Vad är CSS opacitet?
Svar: Det är egenskapen som utarbetar transparensen hos ett element.
Med den här egenskapen kan vi genomskinliga bilden som kan ta värdena från 0,0-1,0. Om värdet är lägre är bilden mer transparent. IE8 och tidigare versioner av webbläsaren kan ta värdena 0-100.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}
F # 26) Skriv alla positionstillstånd som används i CSS.
Svar: I CSS finns det fyra positionstillstånd som anges nedan:
- Statisk (standard)
- Släkting
- Fast
- Absolut
F # 27) Vad är navigeringsfält i CSS?
Svar: Genom att använda navigeringsfält kan vi göra en vanlig HTML-sida till en användarspecifik och mer dynamisk webbsida. I grund och botten är det en lista över länkar, därav användning av
- och
- element ger perfekt mening.
ul { list-style-type: none; margin: 0; padding: 0; }
F # 28) Vilka är skillnaderna mellan relativa och absoluta i CSS?
Svar: Huvudskillnaden mellan relativ och absolut är att 'relativ' används för samma tagg i CSS och det betyder att om vi skriver till vänster: 10px så kommer stoppningen att flyttas till 10px till vänster medan absolut är helt relativt den icke- statisk förälder.
Det betyder, om vi skriver vänster: 10px så kommer resultatet att vara 10px långt från den överordnade elementets vänstra kant.
F # 29) Definiera ”viktiga” deklarationer som används i CSS.
Svar: Viktiga deklarationer definieras som den deklarationen som har mer betydelse än den normala deklarationen.
Under genomförandet åsidosätter dessa deklarationer deklarationen som har mindre betydelse.
Till exempel, om det finns två användare som har en viktig deklaration kommer en av deklarationerna att åsidosätta en annan användares deklaration.
Till exempel:
Kropp {bakgrund: # FF00FF! Viktigt; färgen blå}hur man bygger ett säkert nätverk
I den här kroppen har bakgrunden mer vikt än färgen.
F # 30) Definiera olika kaskadmetoder som kan användas i kaskadordningen.
Svar: Cascading order är i sig en sorteringsmetod som tillåter många andra olika sorteringsmetoder:
a) Sortera efter ursprung: Det finns några regler som kan ge ett alternativt sätt definierat som:
- Den normala vikten för en viss leverantörs stilark kommer att åsidosättas av den ökade vikten för användarens stilark.
- Regler för stilart för en viss användare åsidosätts av den normala bredden på leverantörens stilark.
b) Sortera efter väljarens specificitet: Mindre specifik väljare har åsidosatts av den mer specifika väljaren.
Till exempel , En kontextuell väljare är mindre specifik i jämförelse med ID-väljaren som är en mer specifik och med den sammanhangsväljaren har åsidosatts av ID-väljaren.
c) Sortera efter angiven ordning: Detta kommer i scenariot när de två väljarna har samma vikt och de andra egenskaperna än specifikationen som kommer att ses för åsidosättande.
Exempel:
Alla andra stilar kommer att åsidosättas om attributet style används för inline-stil.
Och även om länkelementet används för extern stil, kommer det att åsidosätta den importerade stilen.
F # 31) Skill mellan inline- och blockelement.
Svar: Inline-elementet har inte ett element för att ställa in bredd och höjd och det har inte heller radbrytning.
Exempel: em, stark, etc.
Blockelementspecifikation:
- De har linjepaus.
- De definierar bredden genom att ställa in en container och tillåter också inställningshöjd.
- Det kan också innehålla ett element som förekommer i det inbyggda elementet.
Exempel:
bredd och höjd
max-bredd och max-höjd
min-bredd och min-höjd
hej (i = 1-6) - rubrikelement
p- Styckeelement.F # 32) Hur används begreppet arv i CSS?
Svar: Arv är ett koncept där barnklassen kommer att ärva egenskaperna hos sin moderklass. Det är ett begrepp som används på många språk och är det enkla sättet att definiera samma egenskap igen.
Den används i CSS för att definiera hierarkin från toppnivå till bottennivå. Ärvda fastigheter kan åsidosättas av barnklassen om barnet använder samma namn.
Exempel:
Kropp {font-size: 15pt;}
Och en annan definition definieras i barnklassen
Kropp {font-size: 15pt;}
H1 {font-size: 18pt;}All stycketexten visas med egenskapen och kommer att definieras i brödtexten förutom H1-stilen som endast visar texten i teckensnitt 18.
F # 33) Skill mellan ID och klass.
Svar: Både ID och klass har använts i HTML och tilldelar värdet från CSS.
Nedan hittar du skillnaderna:
- ID är ett slags element som unikt tilldelar ett namn till ett visst element medan klassen har ett element med en viss uppsättning egenskaper som kan användas för hela blocket.
- Id kan användas som ett element eftersom det unikt kan identifiera det medan klass också definieras för att blockera elementen och tillämpar för många taggar varhelst den används.
- ID tillhandahåller begränsningen att använda dess egenskaper till ett specifikt element medan i klass arvet tillämpas på ett specifikt block eller en grupp av elementet.
Slutsats
Denna intervjufråga och svarlista hjälper dig att knäcka webbutvecklarintervjun för både fräschare och erfarenhetsnivå. Det här är de vanliga frågorna som ställs i intervjun.
Hoppas den här artikeln hjälper till att knäcka och möta alla intervjuer relaterade till CSS för en webbutvecklare.
Föreslagen läsning = >> Webbutvecklare Intervju Frågor och svar
Vi önskar er all framgång !!
Rekommenderad läsning