top 30 popular css interview questions
Popis najpopularnijih pitanja o CSS intervjuima s odgovorima:
The CSS pitanja koja pokrivaju gotovo sve osnovne i napredne CSS kategorije objašnjavaju se primjerima.
CSS je jedna od najvažnijih karakteristika web razvoja. To je jezik kojim možemo opisati izgled web stranica.
Stoga je neophodno pokriti sve osnovne i napredne dijelove CSS-a. Da biste postali dobar web programer i uspješno provalili intervju za web programere, morate naučiti CSS.
Često postavljana pitanja o CSS intervjuu
Slijedi popis najčešće postavljanih pitanja i odgovora na CSS intervjuu koji su jednostavni za vaše lakše razumijevanje.
Počnimo!!
P # 1) Što je CSS?
Odgovor: CSS ocrtava stil HTML web stranice. To je jezik pomoću kojeg možemo postaviti ponašanje HTML web stranice. Opisuje kako će se HTML sadržaj prikazivati na zaslonu.
CSS kontrolira izgled nekoliko HTML web stranica. CSS se naziva Cascading Style Sheet.
P # 2) Navedite sve module koji se koriste u trenutnoj verziji CSS-a.
Odgovor: U CSS-u postoji nekoliko modula kako je navedeno u nastavku:
- Selektori
- Model kutije
- Pozadine i granice
- Tekstualni efekti
- 2D / 3D transformacije
- Animacije
- Izgled više stupaca
- Korisničko sučelje.
P # 3) Razlikovati CSS2 i CSS3.
Odgovor: Razlike između CSS2 i CSS3 su sljedeće:
- CSS3 podijeljen je u dva različita odjeljka koja se nazivaju modul. Dok u CSS2 sve ulazi u jedan dokument sa svim informacijama.
- CSS3 moduli podržani su gotovo u svakom pregledniku, a s druge strane moduli CSS i CSS2 nisu podržani u svakom pregledniku.
- U CSS3 ćemo otkriti da su uvedene mnoge karakteristike povezane s grafikom poput Border-radius ili box-shadow, flexbox.
- U CSS3 korisnik može precizirati više pozadinskih slika na web stranici koristeći svojstva kao što su pozadina slika, pozadina-položaj i pozadina-ponavljanje stilova.
P # 4) Navedite različite vrste CSS-a.
Odgovor: Postoje tri vrste CSS-a kao što je spomenuto u nastavku:
- Vanjski: Oni su napisani u zasebnim datotekama.
- Interno: Navedeni su na vrhu dokumenta s kodom web stranice.
- U redu: Oni su napisani tik uz tekst.
P # 5) Zašto je vanjski tabelarni stil koristan?
Odgovor: Vanjska tablica stilova vrlo je korisna jer sve kodove za oblikovanje zapisujemo u jednu datoteku i može se koristiti bilo gdje samo pozivanjem na vezu te datoteke s vanjskim tabelama stilova.
Dakle, ako napravimo bilo kakve promjene u toj vanjskoj datoteci, tada se promjene mogu primijetiti i na web stranici. Stoga možemo reći da je vrlo koristan i olakšava vam rad tijekom rada na većim datotekama.
P # 6) Koje su koristi ugrađenog stilskog lista ?
Odgovor: Ugrađeni stil daje nam privilegiju definirati stilove na jednom mjestu u HTML dokumentu.
Možemo generirati više klasa pomoću ugrađenog lista stilova za upotrebu na više vrsta oznaka web stranice, a također nije potrebno dodatno preuzimanje za uvoz podataka.
Primjer:
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.
P # 7) Kako koristiti CSS selektor?
Odgovor: Korištenjem CSS selektora možemo odabrati sadržaj koji želimo stilizirati kako bismo mogli reći da je most između stilskog lista i HTML datoteka.
Sintaksa za CSS selektor je 'select' HTML elementi stvoreni na njihovom id, klasi, tipu itd.
P # 8) Objasnite pojam tweeninga.
Odgovor: Tweening je postupak u kojem stvaramo srednje okvire između dvije slike kako bismo dobili izgled prve slike koja se razvija u drugu sliku.
Uglavnom se koristi za stvaranje animacije.
P # 9) Definirajte CSS skripte slika.
Odgovor: CSS skripte slika su skupina slika koje su smještene u jednu sliku. Smanjuje vrijeme učitavanja i broj zahtjeva poslužitelju dok projicira više slika na jednu web stranicu.
P # 10) Objasnite pojam Responzivni web dizajn.
Odgovor: To je metoda kojom dizajniramo i razvijamo web stranicu prema korisničkim aktivnostima i uvjetima koji se temelje na raznim komponentama poput veličine zaslona, prenosivosti web stranice na različitim uređajima itd. To se radi pomoću različiti fleksibilni rasporedi i rešetke.
P # 11) Što su CSS brojači?
Odgovor: CSS brojači su varijable koje se mogu povećati pravilima CSS-a koja inspektor prate koliko je puta varijabla korištena.
P # 12) Što je CSS specifičnost?
Odgovor: CSS specifičnost je ocjena ili rang koji odlučuje koja se deklaracija stila mora koristiti za element. (*) ovaj univerzalni selektor ima malu specifičnost, dok ID selektori imaju visoku specifičnost.
U CSS-u postoje četiri kategorije koje odobravaju razinu specifičnosti selektora.
- Inline stil
- Osobne iskaznice
- Klase, atributi i pseudo-klase.
- Elementi i pseudo-elementi.
P # 13) Kako možemo izračunati specifičnost?
Odgovor: Da bismo izračunali specifičnost započet ćemo s 0, tada za svaki ID moramo dodati 1000, a atributima, klasama ili pseudo-klasama moramo dodati 10 s imenom svakog elementa ili pseudo-elementom, a kasnije im moramo dodati 1 .
Primjer:
h2 #content h2 heading
P # 14) Kako pomoću CSS-a napraviti zaobljeni kut?
Odgovor: Zaobljeni kut možemo napraviti pomoću svojstva „border-radius“. Ovo svojstvo možemo primijeniti na bilo koji element.
Primjer:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
P # 15) Kako ćete dodati obrubne slike u HTML element?
Odgovor: Možemo postaviti sliku koja će se koristiti kao rubna slika uz element pomoću svojstva CSS-a 'border-image'.
Primjer:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }
P # 16) Što su gradijenti u CSS-u?
Odgovor: To je svojstvo CSS-a koje vam omogućuje prikaz glatke transformacije između dvije ili više od dvije navedene boje.
Postoje dvije vrste gradijenata prisutne u CSS-u. Oni su:
- Linearni gradijent
- Radijalni gradijent
P # 17) Što je CSS flexbox?
Odgovor: Omogućuje vam dizajniranje fleksibilne responzivne strukture izgleda bez korištenja plutajućeg ili pozicijskog svojstva CSS-a. Da biste koristili CSS flexbox, u početku morate definirati flex spremnik.
Primjer:
.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.
P # 18) Napišite sva svojstva flexboxa.
Odgovor: Postoji nekoliko svojstava flexboxa koji se koriste na HTML web stranici.
Oni su:
- fleks-smjer
- flex-wrap
- fleks-protok
- opravdati-sadržaj
- poravnati-stavke
- poravnati-sadržaj
P # 19) Kako vertikalno poravnati sliku u odjeljku koji se okomito proteže na cijeloj web stranici?
Odgovor: To se može učiniti korištenjem sintakse verticle-align: middle u elementu, pa čak i mi možemo povezati dva raspona teksta s drugim rasponom, a nakon toga, moramo koristiti verticle-align: middle u sadržaju #icon.
P # 20) Koja je razlika između popunjavanja i margine?
Odgovor: U CSS-u je margina svojstvo pomoću kojeg možemo stvoriti prostor oko elemenata. Možemo čak stvoriti prostor do vanjskih definiranih granica.
U CSS-u imamo svojstvo margine kako slijedi:
- margin-top
- margina-desno
- margina-dno
- Margina-lijeva
Svojstvo margina ima neke definirane vrijednosti kao što je prikazano u nastavku.
- Automatski - Korištenje ovog preglednika svojstava izračunava maržu.
- Duljina - Postavlja vrijednosti margine u px, pt, cm itd.
- % - Postavlja širinu% elementa.
- Naslijediti - Ovim svojstvom možemo naslijediti margin svojstvo od nadređenog elementa.
U CSS-u je dodavanje svojstvo pomoću kojeg možemo generirati prostor oko sadržaja elementa kao i unutar bilo koje poznate granice.
CSS podloga također ima svojstva poput,
- Padding-top
- Padding-desno
- Podstavljeno dno
- Padding-lijevo
Negativne vrijednosti nisu dopuštene u popunjavanju.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }
P # 21) Čemu služi Box Model u CSS-u?
Odgovor: U CSS-u je model okvira okvir koji povezuje sve HTML elemente i uključuje značajke poput margina, obruba, dodavanja i stvarnog sadržaja.
Korištenjem modela okvira dobit ćemo ovlast za dodavanje obruba oko svih elemenata, a također možemo definirati razmak između elemenata.
P # 22) Kako možemo dodati ikone na web stranicu?
Odgovor: Možemo dodati ikone na HTML web stranicu pomoću biblioteke ikona poput font-awesome.
Moramo dodati naziv zadane klase ikona bilo kojem ugrađenom HTML elementu. ( ili). Ikone u knjižnicama ikona skalabilni su vektori koji se mogu prilagoditi CSS-om.
P # 23) Što je CSS pseudo-klasa?
Odgovor: To je klasa koja se koristi za definiranje posebnog stanja HTML elementa.
Ovu se klasu može koristiti stiliziranjem elementa kada ga je korisnik pregledao, a također može oblikovati i HTML element kada dobije fokus.
selector:pseudo-class { property:value; }
P # 24) Objasnite pojam pseudo-elemenata u CSS-u.
Odgovor: To je značajka CSS-a koja se koristi za oblikovanje zadanih dijelova elementa.
Na primjer ,možemo oblikovati prvo slovo ili redak HTML elementa.
selector::pseudo-element { property:value; }
P # 25) Što je CSS neprozirnost?
Odgovor: Svojstvo je to koje razrađuje transparentnost elementa.
Ovim svojstvom možemo proziriti sliku koja može poprimiti vrijednosti od 0,0-1,0. Ako je vrijednost niža, tada je slika prozirnija. IE8 i starije verzije preglednika mogu poprimiti vrijednosti od 0-100.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}
P # 26) Napišite sva stanja položaja koja se koriste u CSS-u.
Odgovor: U CSS-u postoje četiri stanja položaja kako je navedeno u nastavku:
- Statički (zadano)
- Relativni
- Fiksno
- Apsolutno
P # 27) Što su navigacijske trake u CSS-u?
Odgovor: Korištenjem navigacijskih traka možemo od obične HTML stranice napraviti korisničku i dinamičniju web stranicu. U osnovi, to je popis poveznica, dakle upotreba
- i
- elementi imaju savršen smisao.
ul { list-style-type: none; margin: 0; padding: 0; }
P # 28) Koje su razlike između relativnog i apsolutnog u CSS-u?
Odgovor: Glavna razlika između relativnog i apsolutnog je u tome što se 'relativni' koristi za istu oznaku u CSS-u, što znači da ako napišemo lijevo: 10px, tada će se dodavanje pomaknuti na 10px u lijevo, dok je absolute potpuno u odnosu na ne- statični roditelj.
Znači, ako napišemo left: 10px, tada će rezultat biti 10px daleko od lijevog ruba nadređenog elementa.
P # 29) Definirajte 'važne' deklaracije koje se koriste u CSS-u.
Odgovor: Važne deklaracije definirane su kao ona deklaracija koja ima veću važnost od uobičajene deklaracije.
Tijekom izvršavanja, ove deklaracije poništavaju deklaraciju koja ima manje važnosti.
Na primjer, ako dva korisnika imaju važnu deklaraciju, tada će jedna od deklaracija poništiti deklaraciju drugog korisnika.
Na primjer:
Body {pozadina: # FF00FF! Važno; boja: plava}pitanja i odgovori za intervju za android pdf
U ovom tijelu pozadina ima veću težinu od boje.
P # 30) Definirajte različite kaskadne metode koje se mogu koristiti unutar kaskadnog reda.
Odgovor: Kaskadni redoslijed je sam po sebi metoda sortiranja koja omogućava mnoge druge različite metode sortiranja:
a) Poredaj prema podrijetlu: Postoje neka pravila koja mogu pružiti alternativni način definiran kao:
- Uobičajena težina stilskog lista određenog davatelja nadjačat će povećana težina korisničkog stilskog lista.
- Pravila tablica stilova određenog korisnika nadjačat će normalna širina stilskog lista davatelja usluge.
b) Poredaj prema specifičnosti selektora: Manje specifičan selektor nadjačao je specifičniji selektor.
Na primjer , Kontekstualni selektor je manje specifičan u odnosu na ID selektor koji je specifičniji i tim kontekstualnim selektorom je nadjačan ID selektor.
c) Poredaj po navedenom redoslijedu: To se događa u scenariju kada su dva selektora iste težine i druga svojstva osim specifikacije koja će se vidjeti kao nadjačana.
Primjer:
Svi ostali stilovi bit će zamijenjeni ako se atribut style koristi za umetnuti stil.
A također, ako se element veze koristi za vanjski stil, tada će nadjačati uvezeni stil.
P # 31) Razlikovati linijski i blok element.
Odgovor: Ugrađeni element nema element za postavljanje širine i visine, a također nema ni prijeloma retka.
Primjer: em, jaka itd.
Specifikacija blok elementa:
- Imaju prekid linije.
- Širinu definiraju postavljanjem spremnika i također omogućuju postavljanje visine.
- Može sadržavati i element koji se javlja u umetnutom elementu.
Primjer:
širina i visina
max-širina i max-visina
min-širina i min-visina
hi (i = 1-6) - element naslova
p- Element odlomka.P # 32) Kako se koncept nasljeđivanja primjenjuje u CSS-u?
Odgovor: Nasljeđivanje je koncept u kojem će podređena klasa naslijediti svojstva svoje roditeljske klase. To je koncept koji se koristi na mnogim jezicima i jednostavan je način za ponovno definiranje istog svojstva.
Koristi se u CSS-u za definiranje hijerarhije od gornje do donje razine. Naslijeđena svojstva može nadjačati dječji razred ako dijete koristi isto ime.
Primjer:
Tijelo {font-size: 15pt;}
I druga se definicija definira u razredu djeteta
Tijelo {font-size: 15pt;}
H1 {veličina slova: 18pt;}Sav tekst odlomaka prikazat će se pomoću svojstva i bit će definiran u tijelu, osim za stil H1 koji će tekst prikazivati samo u fontu 18.
P # 33) Razlikovati ID i klasu.
Odgovor: I ID i klasa koriste se u HTML-u i dodjeljuju vrijednost iz CSS-a.
U nastavku pogledajte razlike:
- ID je vrsta elementa koji jedinstveno dodjeljuje ime određenom elementu, dok klasa ima element s određenim skupom svojstava koji se mogu koristiti za cijeli blok.
- Id se može koristiti kao element jer ga može jedinstveno identificirati, dok je klasa također definirana da blokira elemente i primjenjuje previše oznaka gdje god se koristi.
- ID pruža ograničenje upotrebe njegovih svojstava za jedan određeni element, dok se u klasi nasljeđivanje primjenjuje na određeni blok ili grupu elementa.
Zaključak
Ovaj popis pitanja i odgovora za intervju pomoći će vam da razbijete intervju za web programere za svježiju razinu iskustva. To su česta pitanja koja se postavljaju u intervjuu.
Nadam se da će ovaj članak pomoći da se razriješi svaki intervju vezan za CSS za web programera.
Predloženo čitanje = >> Pitanja i odgovori za internetske programere
Želimo vam sav uspjeh !!
Preporučena literatura