top 30 popular css interview questions
Lijst met de meest populaire CSS-interviewvragen met antwoorden:
De CSS vragen die betrekking hebben op bijna alle basis- en geavanceerde CSS-categorieën, worden uitgelegd met voorbeelden.
CSS is een van de meest essentiële kenmerken van webontwikkeling. Het is een taal waarmee we het uiterlijk van webpagina's kunnen beschrijven.
Daarom is het essentieel om alle basis- en geavanceerde delen van de CSS te verbergen. Om een goede webontwikkelaar te worden en het interview met webontwikkelaars met succes te kraken, moet u CSS leren.
Veelgestelde vragen over CSS-sollicitatiegesprekken
Hieronder vindt u de lijst met de meest gestelde CSS-interviewvragen en antwoorden in eenvoudige bewoordingen, zodat u ze gemakkelijk kunt begrijpen.
Laten we beginnen!!
V # 1) Wat is CSS?
Antwoord: CSS schetst de stijl van een HTML-webpagina. Het is een taal waarmee we het gedrag van een HTML-webpagina kunnen instellen. Het beschrijft hoe de HTML-inhoud op het scherm wordt weergegeven.
CSS regelt de lay-out van verschillende HTML-webpagina's. CSS wordt de Cascading Style Sheet genoemd.
Q # 2) Noem alle modules die worden gebruikt in de huidige versie van CSS.
Antwoord: Er zijn verschillende modules in CSS, zoals hieronder vermeld:
- Selectoren
- Doosmodel
- Achtergronden en randen
- Teksteffecten
- 2D / 3D-transformaties
- Animaties
- Meerdere kolommen
- Gebruikersomgeving.
V # 3) Maak onderscheid tussen CSS2 en CSS3.
Antwoord: De verschillen tussen CSS2 en CSS3 zijn als volgt:
- CSS3 is verdeeld in twee verschillende secties die een module worden genoemd. Terwijl in CSS2 alles wordt samengevoegd in één document met alle informatie erin.
- CSS3-modules worden bijna op elke browser ondersteund en aan de andere kant worden modules van CSS en CSS2 niet in elke browser ondersteund.
- In CSS3 zullen we zien dat veel grafische kenmerken zijn geïntroduceerd, zoals Border-radius of box-shadow, flexbox.
- In CSS3 kan een gebruiker meerdere achtergrondafbeeldingen op een webpagina preciseren met behulp van eigenschappen zoals achtergrondafbeelding, achtergrondpositie en achtergrondherhalingsstijlen.
Vraag 4) Noem verschillende soorten CSS.
Antwoord: Er zijn drie soorten CSS, zoals hieronder vermeld:
- Extern: Deze zijn in aparte bestanden geschreven.
- Intern: Deze worden bovenaan het codedocument van de webpagina vermeld.
- In lijn: Deze zijn naast de tekst geschreven.
V # 5) Waarom is de externe stylesheet nuttig?
Antwoord: Een externe stijlpagina is erg handig omdat we alle stijlcodes in een enkel bestand schrijven en het overal kan worden gebruikt door gewoon naar de link van dat externe stijlbladbestand te verwijzen.
Als we dus wijzigingen aanbrengen in dat externe bestand, dan kunnen de wijzigingen ook op de webpagina worden bekeken. We kunnen dus zeggen dat het erg handig is en het uw werk gemakkelijk maakt terwijl u aan grotere bestanden werkt.
V # 6) Wat zijn de toepassingen van een embedded stylesheet?
Antwoord: Embedded style sheet geeft ons het voorrecht om stijlen op één plek in een HTML-document te definiëren.
We kunnen meerdere klassen genereren met behulp van een ingesloten stijlblad om op meerdere tagtypen van een webpagina te gebruiken en er is ook geen extra download vereist voor het importeren van de informatie.
Voorbeeld:
V # 7) Hoe CSS-selector te gebruiken?
Antwoord: Door de CSS-selector te gebruiken, kunnen we de inhoud kiezen die we willen opmaken, zodat we kunnen zeggen dat het een brug is tussen het stijlblad en de HTML-bestanden.
De syntaxis voor CSS-selector is 'selecteer' HTML-elementen die zijn gemaakt op basis van hun id, klasse, type, enz.
V # 8) Leg het concept van tweening uit.
Antwoord: Tweening is het proces waarbij we tussenliggende frames tussen twee afbeeldingen maken om het uiterlijk van de eerste afbeelding te krijgen die zich ontwikkelt tot de tweede afbeelding.
Het wordt voornamelijk gebruikt voor het maken van animaties.
V # 9) CSS-afbeeldingscripts definiëren.
Antwoord: CSS-afbeeldingscripts zijn een groep afbeeldingen die in één afbeelding worden geplaatst. Het vermindert de laadtijd en het verzoeknummer naar de server terwijl meerdere afbeeldingen op een enkele webpagina worden geprojecteerd.
Vraag 10) Leg de term Responsive webdesign uit.
Antwoord: Het is een methode waarbij we een webpagina ontwerpen en ontwikkelen op basis van de gebruikersactiviteiten en voorwaarden die zijn gebaseerd op verschillende componenten zoals de grootte van het scherm, de draagbaarheid van de webpagina op de verschillende apparaten, enz. Het wordt gedaan door gebruik te maken van verschillende flexibele lay-outs en rasters.
V # 11) Wat zijn CSS-tellers?
Antwoord: CSS-tellers zijn variabelen die kunnen worden opgehoogd door CSS-regels waarmee de inspecteur bijhoudt hoe vaak de variabele is gebruikt.
Vraag 12) Wat is CSS-specificiteit?
Antwoord: CSS-specificiteit is een score of rang die bepaalt welke stijlverklaring moet worden gebruikt voor een element. (*) deze universele selector heeft een lage specificiteit, terwijl ID-selectors een hoge specificiteit hebben.
Er zijn vier categorieën in CSS die het specificiteitsniveau van de selector autoriseren.
- Inline stijl
- ID's
- Klassen, attributen en pseudo-klassen.
- Elementen en pseudo-elementen.
V # 13) Hoe kunnen we specificiteit berekenen?
Antwoord: Om specificiteit te berekenen, beginnen we met 0, dan moeten we 1000 optellen voor elke ID en moeten we 10 toevoegen aan de attributen, klassen of pseudo-klassen met elke elementnaam of pseudo-element en later moeten we er 1 aan toevoegen .
Voorbeeld:
V # 14) Hoe maken we een afgeronde hoek door CSS te gebruiken?
Antwoord: Met de eigenschap 'border-radius' kunnen we een afgeronde hoek maken. We kunnen deze eigenschap op elk element toepassen.
Voorbeeld:
V # 15) Hoe voegt u randafbeeldingen toe aan een HTML-element?
Antwoord: We kunnen de afbeelding die moet worden gebruikt als de randafbeelding naast een element instellen door de eigenschap van CSS 'border-image' te gebruiken.
Voorbeeld:
V # 16) Wat zijn verlopen in CSS?
Antwoord: Het is een eigenschap van CSS waarmee u een vloeiende transformatie tussen twee of meer dan twee opgegeven kleuren kunt weergeven.
Er zijn twee soorten verlopen die aanwezig zijn in CSS. Zij zijn:
- Lineair verloop
- Radiaal verloop
Q # 17) Wat is CSS flexbox?
Antwoord: Hiermee kunt u een flexibele responsieve lay-outstructuur ontwerpen zonder gebruik te maken van zwevende of positioneringseigenschappen van CSS. Om CSS flexbox te gebruiken, moet u in eerste instantie een flexcontainer definiëren.
hoe u een jar-bestand in Windows uitvoert
Voorbeeld:
Q # 18) Schrijf alle eigenschappen van de flexbox.
Antwoord: Er zijn verschillende eigenschappen van de flexbox die worden gebruikt in de HTML-webpagina.
Zij zijn:
- flex-richting
- flex-wrap
- flex-stroom
- rechtvaardigen-inhoud
- align-items
- align-content
V # 19) Hoe kan ik een afbeelding verticaal uitlijnen in een verdeling die verticaal over de hele webpagina loopt?
Antwoord: Het kan worden gedaan door de syntaxis verticle-align: middle in het element te gebruiken en zelfs we kunnen de twee tekstoverspanningen rondbinden met een andere span en daarna moeten we verticle-align: middle gebruiken in de content #icon.
V # 20) Wat is het verschil tussen opvulling en marge?
Antwoord: In CSS is de marge de eigenschap waarmee we ruimte rond elementen kunnen creëren. We kunnen zelfs ruimte creëren aan de buiten gedefinieerde grenzen.
In CSS hebben we de marge-eigenschap als volgt:
- marge-top
- marge-rechts
- marge-onder
- Marge links
Marge-eigenschap heeft enkele gedefinieerde waarden, zoals hieronder wordt weergegeven.
- Auto - Met behulp van deze eigenschappenbrowser wordt de marge berekend.
- Lengte - Het stelt de margewaarden in px, pt, cm etc.
- Het stelt de breedte% van het element in.
- Overnemen - Met deze eigenschap kunnen we de eigenschap margin overnemen van het bovenliggende element.
In CSS is opvulling de eigenschap waarmee we ruimte kunnen genereren rond de inhoud van een element en binnen elke bekende rand.
CSS-padding heeft ook eigenschappen zoals,
- Gewatteerde bovenkant
- Padding-rechts
- Opvulling-bodem
- Padding-links
Negatieve waarden zijn niet toegestaan in opvulling.
V # 21) Wat is het gebruik van het Box-model in CSS?
Antwoord: In CSS is het box-model een box die alle HTML-elementen bindt en bevat functies zoals marges, rand, opvulling en de daadwerkelijke inhoud.
Door een boxmodel te gebruiken, krijgen we de autoriteit om de randen rondom de elementen toe te voegen en kunnen we ook de ruimte tussen de elementen definiëren.
V # 22) Hoe kunnen we pictogrammen aan de webpagina toevoegen?
Antwoord: We kunnen pictogrammen aan de HTML-webpagina toevoegen door een pictogrambibliotheek zoals font-awesome te gebruiken.
We moeten de naam van de gegeven pictogramklasse toevoegen aan elk inline HTML-element. ofPictogrammen in de pictogrambibliotheken zijn schaalbare vectoren die kunnen worden aangepast met CSS.
V # 23) Wat is een CSS-pseudo-klasse?
Antwoord: Het is een klasse die wordt gebruikt om een speciale staat van een HTML-element te definiëren.
Deze klasse kan worden gebruikt door een element op te maken wanneer een gebruiker eroverheen snuffelt, en het kan ook een HTML-element opmaken wanneer het de focus krijgt.
Vraag 24) Leg het concept van pseudo-elementen in CSS uit.
Antwoord: Het is een kenmerk van CSS dat wordt gebruikt om de gegeven delen van een element op te maken.
Bijvoorbeeld we kunnen de eerste letter of regel van een HTML-element opmaken.
V # 25) Wat is CSS-ondoorzichtigheid?
Antwoord: Het is de eigenschap die voortborduurt op de transparantie van een element.
Met deze eigenschap kunnen we de afbeelding transparant maken die de waarden van 0,0-1,0 kan aannemen. Als de waarde lager is, is de afbeelding transparanter. IE8 en eerdere versies van de browser kunnen waarden aannemen van 0-100.
V # 26) Schrijf alle positietoestanden die in CSS worden gebruikt.
Antwoord: In CSS zijn er vier positiestatussen zoals hieronder vermeld:
- Statisch (standaard)
- Familielid
- Gemaakt
- Absoluut
V # 27) Wat zijn navigatiebalken in CSS?
Antwoord: Met behulp van navigatiebalken kunnen we van een gewone HTML-pagina een gebruikerspecifieke en meer dynamische webpagina maken. In feite is het een lijst met links, dus het gebruik van
- en
- elementen klopt helemaal.
V # 28) Wat zijn de verschillen tussen relatief en absoluut in CSS?
Antwoord: Het belangrijkste verschil tussen relatief en absoluut is dat 'relatief' wordt gebruikt voor dezelfde tag in CSS en het betekent dat als we de linkerzijde schrijven: 10px, de opvulling verschuift naar 10px aan de linkerkant, terwijl absoluut totaal relatief is aan de niet- statische ouder.
Het betekent dat als we links schrijven: 10px, het resultaat 10px ver van de linkerrand van het bovenliggende element zal zijn.
V # 29) Definieer ‘belangrijke’ declaraties die in CSS worden gebruikt.
Antwoord: Belangrijke verklaringen worden gedefinieerd als die verklaring die belangrijker is dan de normale aangifte.
Tijdens de uitvoering overschrijven deze verklaringen de verklaring die minder belangrijk is.
Bijvoorbeeld, als er twee gebruikers zijn met een belangrijke aangifte, zal een van de verklaringen de aangifte van een andere gebruiker overschrijven.
Bijvoorbeeld:
Body {achtergrond: # FF00FF! Belangrijk; kleur blauw}In dit lichaam heeft de achtergrond meer gewicht dan de kleur.
V # 30) Definieer verschillende trapsgewijze methoden die kunnen worden gebruikt binnen de trapsgewijze volgorde.
Antwoord: Trapsgewijze volgorde is zelf een sorteermethode die veel andere sorteermethoden mogelijk maakt:
a) Sorteer op herkomst: Er zijn enkele regels die een alternatieve manier kunnen bieden, gedefinieerd als:
- Het normale gewicht van de stylesheet van een bepaalde provider wordt overschreven door het grotere gewicht van de stylesheet van de gebruiker.
- Stylesheet-regels van een bepaalde gebruiker worden overschreven door de normale breedte van het stylesheet van de provider.
b) Sorteer op specificiteit van de selector: Minder specifieke selector wordt overschreven door de meer specifieke selector.
Bijvoorbeeld Een contextuele selector is minder specifiek in vergelijking met de ID-selector die specifieker is en met die contextuele selector wordt deze overschreven door de ID-selector.
c) Sorteer op volgorde: Dit komt in het scenario wanneer de twee selectors hetzelfde gewicht hebben en de andere eigenschappen dan de specificatie die zullen worden overschreven.
Voorbeeld:
Alle andere stijlen zullen overschreven worden als het style-attribuut wordt gebruikt voor inline-stijl.
En ook, als het link-element wordt gebruikt voor een externe stijl, zal het de geïmporteerde stijl overschrijven.
Q # 31) Maak onderscheid tussen inline- en blokelement.
Antwoord: Inline-element heeft geen element om de breedte en hoogte in te stellen en heeft ook geen regeleinde.
Voorbeeld: em, sterk, etc.
Blokelement specificatie:
- Ze hebben de regeleinde.
- Ze bepalen de breedte door een container te plaatsen en laten ook de hoogte toe.
- Het kan ook een element bevatten dat voorkomt in het inline-element.
Voorbeeld:
breedte en hoogte
max-breedte en max-hoogte
min-breedte en min-hoogte
hi (i = 1-6) - kopelement
p- Alinea-element.V # 32) Hoe wordt het concept van overerving toegepast in CSS?
Antwoord: Overerving is een concept waarbij de onderliggende klasse de eigenschappen van de bovenliggende klasse zal erven. Het is een concept dat in veel talen wordt gebruikt en het is de gemakkelijke manier om dezelfde eigenschap opnieuw te definiëren.
Het wordt in CSS gebruikt om de hiërarchie van het hoogste niveau naar het onderste niveau te definiëren. Overgenomen eigenschappen kunnen worden overschreven door de klas van de kinderen als het kind dezelfde naam gebruikt.
Voorbeeld:
Body {font-size: 15pt;}
En een andere definitie wordt gedefinieerd in de kinderklasse
Body {font-size: 15pt;}
H1 {font-size: 18pt;}Alle alineatekst wordt weergegeven met behulp van de eigenschap en wordt gedefinieerd in de hoofdtekst, behalve de H1-stijl die de tekst alleen in lettertype 18 zal weergeven.
Q # 33) Maak onderscheid tussen de ID en de klasse.
Antwoord: Zowel ID als klasse wordt gebruikt in HTML en wijst de waarde toe vanuit CSS.
Hieronder vindt u de verschillen:
- De ID is een soort element dat op unieke wijze een naam toewijst aan een bepaald element, terwijl klasse een element heeft met een bepaalde set eigenschappen die voor het volledige blok kunnen worden gebruikt.
- De id kan als een element worden gebruikt omdat het het uniek kan identificeren, terwijl class ook is gedefinieerd om de elementen te blokkeren en te veel tags toepast waar het ook wordt gebruikt.
- ID biedt de beperking om zijn eigenschappen te gebruiken voor één specifiek element, terwijl in de klas de overerving wordt toegepast op een specifiek blok of groep van het element.
Gevolgtrekking
Deze lijst met interviewvragen en -antwoorden zal je helpen om het webontwikkelaarsinterview te kraken voor zowel frisser als ervaringsniveau. Dit zijn de veelgestelde vragen die tijdens het interview worden gesteld.
Ik hoop dat dit artikel zal helpen om elk interview met betrekking tot CSS voor een webontwikkelaar te kraken en tegemoet te treden.
Voorgestelde lezing = >> Interviewvragen en antwoorden voor webontwikkelaars
Wij wensen u veel succes !!
Aanbevolen literatuur