top 30 popular css interview questions
Lista celor mai populare întrebări de interviu CSS cu răspunsuri:
CSS întrebările care acoperă aproape toate categoriile CSS de bază și avansate sunt explicate cu exemple.
CSS este una dintre cele mai esențiale caracteristici ale dezvoltării web. Este un limbaj prin care putem descrie aspectul paginilor web.
Prin urmare, este esențial să acoperiți toate porțiunile de bază și avansate ale CSS. Pentru a deveni un bun dezvoltator web și pentru a sparge cu succes interviul dezvoltatorului web, trebuie să învățați CSS.
Întrebări frecvente ale interviului CSS
Mai jos este lista celor mai frecvente întrebări și răspunsuri la interviu CSS în termeni simpli pentru înțelegerea dvs. ușoară.
Să începem!!
Q # 1) Ce este CSS?
Răspuns: CSS prezintă stilul unei pagini web HTML. Este un limbaj prin care putem seta comportamentul unei pagini web HTML. Acesta descrie modul în care conținutul HTML va fi afișat pe ecran.
CSS controlează aspectul mai multor pagini web HTML. CSS este denumit Foaie de stil în cascadă.
Q # 2) Denumiți toate modulele care sunt utilizate în versiunea curentă a CSS.
Răspuns: Există mai multe module în CSS, după cum se arată mai jos:
- Selectoare
- Model cutie
- Medii și frontiere
- Efecte text
- Transformări 2D / 3D
- Animații
- Aspectul coloanei multiple
- Interfața cu utilizatorul.
Q # 3) Distingeți între CSS2 și CSS3.
Răspuns: Diferențele dintre CSS2 și CSS3 sunt următoarele:
- CSS3 este împărțit în două secțiuni diferite care sunt numite un modul. În timp ce în CSS2 totul intră într-un singur document cu toate informațiile în el.
- Modulele CSS3 sunt acceptate aproape în fiecare browser și, pe de altă parte, modulele CSS și CSS2 nu sunt acceptate în fiecare browser.
- În CSS3, vom descoperi că au fost introduse multe caracteristici legate de grafică, cum ar fi Border-radius sau box-shadow, flexbox.
- În CSS3, un utilizator poate preciza mai multe imagini de fundal pe o pagină web utilizând proprietăți precum stilul de imagine de fundal, poziția de fundal și stilurile de repetare a fundalului.
Q # 4) Citați diferite tipuri de CSS.
Răspuns: Există trei tipuri de CSS, după cum se menționează mai jos:
- Extern: Acestea sunt scrise în fișiere separate.
- Intern: Acestea sunt citate în partea de sus a documentului de cod al paginii web.
- In linie: Acestea sunt scrise chiar lângă text.
Q # 5) De ce este utilă foaia de stil externă?
Răspuns: Foaia de stil externă este foarte utilă deoarece scriem toate codurile de stil într-un singur fișier și poate fi utilizată oriunde, doar făcând referire la linkul respectivului fișier de foaie de stil extern.
Deci, dacă facem modificări în acel fișier extern, modificările pot fi observate și pe pagina web. Astfel putem spune că este foarte util și vă ușurează munca în timp ce lucrați la fișiere mai mari.
Q # 6) Care sunt utilizările unei foi de stil încorporate ?
Răspuns: Foaia de stil încorporată ne oferă privilegiul de a defini stiluri într-un singur loc într-un document HTML.
Putem genera mai multe clase folosind o foaie de stil încorporată pentru a fi utilizate pe mai multe tipuri de etichete ale unei pagini web și, de asemenea, nu este necesară descărcarea suplimentară pentru importul informațiilor.
Exemplu:
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.
Q # 7) Cum se folosește selectorul CSS?
Răspuns: Folosind selectorul CSS, putem alege conținutul pe care dorim să îl stilizăm, astfel încât să putem spune că este o punte între foaia de stil și fișierele HTML.
Sintaxa pentru selectorul CSS este „selectați” elemente HTML create pe id, clasă, tip etc.
Q # 8) Explicați conceptul de Tweening.
Răspuns: Tweening este procesul prin care creăm cadre intermediare între două imagini pentru a obține aspectul primei imagini care se dezvoltă în a doua imagine.
Este utilizat în principal pentru crearea animației.
Q # 9) Definiți scripturi de imagine CSS.
Răspuns: Scripturile de imagine CSS sunt un grup de imagini care sunt plasate într-o singură imagine. Reduce timpul de încărcare și numărul de solicitări către server în timp ce proiectează mai multe imagini într-o singură pagină web.
Q # 10) Explicați termenul de proiectare web receptivă.
Răspuns: Este o metodă prin care proiectăm și dezvoltăm o pagină web în funcție de activitățile și condițiile utilizatorului, care se bazează pe diferite componente, cum ar fi dimensiunea ecranului, portabilitatea paginii web pe diferite dispozitive etc. Se realizează prin utilizarea diferite planuri și grile flexibile.
Q # 11) Ce sunt contoare CSS?
Răspuns: Contoare CSS sunt variabile care pot fi incrementate de regulile CSS care inspectorul urmărește de câte ori a fost utilizată variabila.
Q # 12) Ce este specificitatea CSS?
Răspuns: Specificitatea CSS este un scor sau un rang care decide ce declarație de stil trebuie utilizată pentru un element. (*) acest selector universal are o specificitate scăzută, în timp ce selectoarele ID au o specificitate ridicată.
Există patru categorii în CSS care autorizează nivelul de specificitate al selectorului.
- Stil inline
- ID-uri
- Clase, atribute și pseudo-clase.
- Elemente și pseudo-elemente.
Q # 13) Cum putem calcula specificitatea?
Răspuns: Pentru a calcula specificitatea vom începe cu 0, apoi trebuie să adăugăm 1000 pentru fiecare ID și trebuie să adăugăm 10 la atribute, clase sau pseudo-clase cu fiecare nume de element sau pseudo-element și mai târziu trebuie să adăugăm 1 la ele .
Exemplu:
h2 #content h2 heading
Q # 14) Cum facem un colț rotunjit folosind CSS?
Răspuns: Putem face un colț rotunjit folosind proprietatea „border-radius”. Putem aplica această proprietate oricărui element.
Exemplu:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
Q # 15) Cum veți adăuga imagini de margine la un element HTML?
Răspuns: Putem seta imaginea să fie utilizată ca imagine de margine alături de un element folosind proprietatea CSS „border-image”.
Exemplu:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }Q # 16) Ce sunt gradienții în CSS?
Răspuns: Este o proprietate a CSS care vă permite să afișați o transformare lină între două sau mai mult de două culori specificate.
Există două tipuri de gradienți care sunt prezenți în CSS. Sunt:
- Gradient liniar
- Gradient radial
Q # 17) Ce este CSS flexbox?
Răspuns: Vă permite să proiectați o structură flexibilă de layout receptiv fără a utiliza nici o proprietate flotantă sau de poziționare a CSS. Pentru a utiliza CSS flexbox trebuie să definiți inițial un container flex.
Exemplu:
.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.
Q # 18) Scrieți toate proprietățile flexbox-ului.
Răspuns: Există mai multe proprietăți ale flexbox-ului care sunt utilizate în pagina web HTML.
Sunt:
- direcție flexibilă
- flex-wrap
- flex-flow
- justify-content
- alinia-elemente
- align-content
Q # 19) Cum să aliniați imaginea pe verticală într-o diviziune care se întinde vertical pe întreaga pagină web?
Răspuns: Se poate face folosind sintaxa verticle-align: middle în element și chiar putem lega cele două întinderi de text în jurul valorii de cu un alt interval și după aceasta, trebuie să folosim verticle-align: middle în conținutul #icon.
Q # 20) Care este diferența dintre umplutură și margine?
Răspuns: În CSS, marja este proprietatea prin care putem crea spațiu în jurul elementelor. Putem chiar să creăm spațiu către frontierele definite exterior.
În CSS, avem proprietăți de marjă după cum urmează:
- marginea-sus
- margine-dreapta
- marginea-jos
- Margină-stânga
Proprietatea de marjă are câteva valori definite așa cum se arată mai jos.
- Auto - Utilizarea acestei proprietăți browser calculează marja.
- Lungime - Setează valorile marjei în px, pt, cm etc.
- % - Setează lățimea% a elementului.
- Moștenește - Prin această proprietate putem moșteni proprietatea margin de la elementul părinte.
În CSS, umplerea este proprietatea prin care putem genera spațiu în jurul conținutului unui element, precum și în interiorul oricărei margini cunoscute.
Căptușirea CSS are, de asemenea, proprietăți precum,
- Căptușeală
- Căptușire-dreapta
- Umplutură de fund
- Căptușire-stânga
Valorile negative nu sunt permise în umplutură.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }Q # 21) La ce folosește modelul Box în CSS?
Răspuns: În CSS, modelul casetei este o casetă care leagă toate elementele HTML și include caracteristici precum margini, margine, căptușire și conținutul real.
Prin utilizarea unui model de cutie vom obține autoritatea de a adăuga chenarele în jurul elementelor și putem defini și spațiul dintre elemente.
Q # 22) Cum putem adăuga pictograme pe pagina web?
Răspuns: Putem adăuga pictograme la pagina web HTML utilizând o bibliotecă de pictograme cum ar fi font-awesome.
Trebuie să adăugăm numele clasei de pictograme date la orice element HTML în linie. ( sau). Pictogramele din bibliotecile de pictograme sunt vectori scalabili care pot fi personalizați cu CSS.
Q # 23) Ce este o pseudo-clasă CSS?
Răspuns: Este o clasă care este utilizată pentru a defini o stare specială a unui element HTML.
Această clasă poate fi utilizată prin stilizarea unui element atunci când un utilizator a ascuns-o și, de asemenea, poate stiliza un element HTML când primește focalizarea.
selector:pseudo-class { property:value; }Q # 24) Explicați conceptul de pseudo-elemente în CSS.
Răspuns: Este o caracteristică a CSS care este utilizată pentru a stiliza părțile date ale unui element.
De exemplu ,putem stiliza prima literă sau linie a unui element HTML.
selector::pseudo-element { property:value; }Q # 25) Ce este opacitatea CSS?
Răspuns: Este proprietatea care elaborează transparența unui element.
Prin această proprietate, putem transpara imaginea care poate lua valorile de la 0,0-1,0. Dacă valoarea este mai mică, atunci imaginea este mai transparentă. IE8 și versiunile anterioare ale browserului pot lua valorile de la 0 la 100.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}Q # 26) Scrieți toate stările de poziție utilizate în CSS.
Răspuns: În CSS, există patru stări de poziție, după cum se arată mai jos:
- Static (implicit)
- Relativ
- Fix
- Absolut
Q # 27) Ce sunt barele de navigare din CSS?
Răspuns: Folosind bare de navigare putem transforma o pagină HTML obișnuită într-o pagină web specifică utilizatorului și mai dinamică. Practic, este o listă de link-uri, prin urmare utilizarea
- și
- elementele au sensul perfect.
ul { list-style-type: none; margin: 0; padding: 0; }Q # 28) Care sunt diferențele dintre relativ și absolut în CSS?
Răspuns: Principala diferență între relativ și absolut este că „relativ” este utilizat pentru aceeași etichetă în CSS și înseamnă că, dacă scriem stânga: 10px, atunci umplutura se va deplasa la 10px în stânga, în timp ce absolut este total relativ la non- părinte static.
Înseamnă, dacă scriem stânga: 10px, atunci rezultatul va fi 10px departe de marginea stângă a elementului părinte.
Q # 29) Definiți declarațiile „importante” utilizate în CSS.
Răspuns: Declarațiile importante sunt definite ca acea declarație care are mai multă importanță decât declarația normală.
În timpul executării, aceste declarații anulează declarația care are o importanță mai mică.
De exemplu, dacă există doi utilizatori care au o declarație importantă, atunci una dintre declarații va anula declarația unui alt utilizator.
De exemplu:
Corp {fundal: # FF00FF! Important; Culoarea albastra}exemple de cross site scripting în java
În acest corp, fundalul are mai multă greutate decât culoarea.
Q # 30) Definiți diferite metode în cascadă care pot fi utilizate în interiorul ordinii în cascadă.
Răspuns: Ordinea în cascadă este ea însăși o metodă de sortare care permite multe alte metode de sortare diferite:
a) Sortează după origine: Există câteva reguli care pot oferi o cale alternativă definită ca:
- Greutatea normală a foii de stil a unui anumit furnizor va fi suprascrisă de greutatea crescută a foii de stil a utilizatorului.
- Regulile foii de stil ale unui anumit utilizator vor fi suprascrise de lățimea normală a foii de stil a furnizorului.
b) Sortați după specificitatea selectorului: Selectorul mai puțin specific a fost suprascris de selectorul mai specific.
De exemplu , Un selector contextual este mai puțin specific în comparație cu selectorul ID, care este unul mai specific și cu acel selector contextual a fost suprascris de selectorul ID.
c) Sortați după ordinea specificată: Acest lucru vine în scenariul în care cei doi selectori au aceeași greutate și celelalte proprietăți decât specificația care va fi văzută pentru suprascriere.
Exemplu:
Toate celelalte stiluri vor fi înlocuite dacă atributul de stil este utilizat pentru stilul în linie.
Și, de asemenea, dacă elementul de legătură este utilizat pentru stilul extern, atunci acesta va suprascrie stilul importat.
Q # 31) Diferențiați între elementul în linie și elementul bloc.
Răspuns: Elementul în linie nu are un element pentru a seta lățimea și înălțimea și, de asemenea, nu are întreruperea liniei.
Exemplu: em, puternic etc.
Specificația elementului bloc:
- Au întrerupere.
- Acestea definesc lățimea prin setarea unui container și permit, de asemenea, setarea înălțimii.
- De asemenea, poate conține un element care apare în elementul inline.
Exemplu:
latime si inaltime
lățimea maximă și înălțimea maximă
min-lățime și min-înălțime
hi (i = 1-6) - element de antet
p- Element de paragraf.Q # 32) Cum se aplică conceptul de moștenire în CSS?
Răspuns: Moștenirea este un concept în care clasa copil va moșteni proprietățile clasei sale părinte. Este un concept care a fost folosit în multe limbi și este modalitatea ușoară de a defini din nou aceeași proprietate.
Este folosit în CSS pentru a defini ierarhia de la nivelul superior la nivelul inferior. Proprietățile moștenite pot fi anulate de clasa copiilor dacă copilul folosește același nume.
Exemplu:
Corp {font-size: 15pt;}
Și o altă definiție este definită în clasa copil
Corp {font-size: 15pt;}
H1 {font-size: 18pt;}Tot textul paragrafului va fi afișat folosind proprietatea și va fi definit în corp, cu excepția stilului H1, care va afișa textul numai în fontul 18.
Q # 33) Diferențiați între ID și clasă.
Răspuns: Atât ID-ul, cât și clasa sunt utilizate în HTML și atribuie valoarea din CSS.
Vă rugăm să găsiți mai jos diferențele:
- ID-ul este un fel de element care atribuie un nume în mod unic unui anumit element, în timp ce clasa are un element cu un anumit set de proprietăți care pot fi utilizate pentru blocul complet.
- ID-ul poate fi folosit ca element, deoarece îl poate identifica în mod unic, în timp ce clasa este definită și pentru a bloca elementele și aplică prea multe etichete oriunde este utilizată.
- ID oferă restricția de a-și utiliza proprietățile unui anumit element, în timp ce în clasă moștenirea este aplicată unui anumit bloc sau grup al elementului.
Concluzie
Această listă de întrebări și răspunsuri de interviu vă va ajuta să spargeți interviul dezvoltatorului web pentru un nivel mai proaspăt, precum și de experiență. Acestea sunt întrebările frecvente adresate în cadrul interviului.
Sper că acest articol vă va ajuta să faceți față oricărui interviu legat de CSS pentru un dezvoltator web.
Citire sugerată = >> Întrebări și răspunsuri pentru interviul dezvoltatorului web
Vă dorim tot succesul !!
Lectură recomandată