top 30 popular css interview questions
Листа најпопуларнијих ЦСС питања са интервјуима са одговорима:
Тхе ЦСС питања која покривају готово све основне и напредне ЦСС категорије објашњавају се примерима.
ЦСС је једна од најважнијих карактеристика веб развоја. То је језик којим можемо описати изглед веб страница.
Стога је неопходно покрити све основне и напредне делове ЦСС-а. Да бисте постали добар веб програмер и успешно провалили интервју за веб програмера, морате научити ЦСС.
Често постављана питања о ЦСС интервјуу
Доље је дата листа најчешће постављаних питања и одговора у ЦСС-у на једноставан начин за ваше лакше разумевање.
Почнимо!!
П # 1) Шта је ЦСС?
Одговор: ЦСС описује стил ХТМЛ веб странице. То је језик помоћу којег можемо поставити понашање ХТМЛ веб странице. Описује како ће се ХТМЛ садржај приказивати на екрану.
ЦСС контролише изглед неколико ХТМЛ веб страница. ЦСС се назива Цасцадинг Стиле Схеет.
П # 2) Именујте све модуле који се користе у тренутној верзији ЦСС-а.
Одговор: Постоји неколико модула у ЦСС-у, као што је наведено у наставку:
- Селектори
- Модел кутије
- Позадине и границе
- Тект Еффецтс
- 2Д / 3Д трансформације
- Анимације
- Изглед више колона
- Кориснички интерфејс.
П # 3) Разликујте ЦСС2 и ЦСС3.
Одговор: Разлике између ЦСС2 и ЦСС3 су следеће:
- ЦСС3 је подељен у два различита одељка која се називају модул. Док у ЦСС2 све улази у један документ са свим информацијама у њему.
- ЦСС3 модули подржани су готово у сваком прегледачу, а с друге стране модули ЦСС и ЦСС2 нису подржани у сваком прегледачу.
- У ЦСС3 ћемо открити да су уведене многе карактеристике повезане са графиком попут Бордер-радиус или бок-схадов, флекбок.
- У ЦСС3 корисник може прецизно одредити више слика у позадини на веб страници користећи својства као што су стилови позадинске слике, положаја позадине и понављања позадине.
П # 4) Наведите различите врсте ЦСС-а.
Одговор: Постоје три врсте ЦСС-а као што је поменуто у наставку:
- Спољни: Они су написани у одвојеним датотекама.
- Интерно: Они су наведени на врху документа са кодом веб странице.
- У реду: Они су написани одмах поред текста.
П # 5) Зашто је спољна табела стилова корисна?
Одговор: Спољна табела стилова је врло корисна јер све кодове стилова пишемо у једну датотеку и може се користити било где само позивајући се на везу те датотеке спољне табеле стилова.
Дакле, ако направимо било какве промене у тој спољној датотеци, промене се такође могу уочити на веб страници. Стога можемо рећи да је веома користан и олакшава вам рад током рада на већим датотекама.
П # 6) Која је употреба уграђеног листа стилова ?
Одговор: Уграђена табела стилова даје нам привилегију да дефинишемо стилове на једном месту у ХТМЛ документу.
Можемо да генеришемо више класа помоћу уграђеног листа стилова за употребу на више типова ознака веб странице, а такође није потребно додатно преузимање за увоз информација.
Пример:
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.
П # 7) Како се користи ЦСС селектор?
Одговор: Коришћењем ЦСС селектора можемо одабрати садржај који желимо да стилизујемо, тако да можемо рећи да је мост између табеле стилова и ХТМЛ датотека.
Синтакса за ЦСС селектор је 'селецт' ХТМЛ елементи креирани на основу њиховог ид-а, класе, типа итд.
П # 8) Објасните концепт твеенинга.
Одговор: Твеенинг је поступак у којем креирамо средње оквире између две слике да бисмо добили изглед прве слике која се развија у другу слику.
Углавном се користи за креирање анимације.
П # 9) Дефинишите ЦСС скрипте слика.
Одговор: ЦСС скрипте слика су група слика које се смештају у једну слику. Смањује време учитавања и број захтева серверу док пројектује више слика на једну веб страницу.
П # 10) Објасните појам прилагодљиви веб дизајн.
Одговор: То је метода којом дизајнирамо и развијамо веб страницу у складу са корисничким активностима и условима који се заснивају на разним компонентама попут величине екрана, преносивости веб странице на различитим уређајима итд. То се постиже коришћењем различити флексибилни распореди и решетке.
П # 11) Шта су ЦСС бројачи?
Одговор: ЦСС бројачи су променљиве које се могу повећати правилима ЦСС-а која инспектор прате колико је пута променљива коришћена.
П # 12) Шта је специфичност ЦСС-а?
Одговор: ЦСС специфичност је оцена или ранг који одлучује која декларација стила мора да се користи за елемент. (*) овај универзални селектор има малу специфичност док ИД селектори имају високу специфичност.
У ЦСС-у постоје четири категорије које одобравају ниво специфичности селектора.
- Инлине стиле
- Личне карте
- Класе, атрибути и псеудо-класе.
- Елементи и псеудо-елементи.
П # 13) Како можемо израчунати специфичност?
Одговор: Да бисмо израчунали специфичност започињемо са 0, тада за сваки ИД морамо додати 1000, а атрибутима, класама или псеудо-класама морамо додати 10 са именом сваког елемента или псеудо-елементом, а касније им морамо додати 1 .
Пример:
h2 #content h2 heading
П # 14) Како да направимо заобљени угао помоћу ЦСС-а?
Одговор: Можемо направити заобљени угао користећи својство „радијус границе“. Ово својство можемо применити на било који елемент.
Пример:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
П # 15) Како ћете додати обрубне слике у ХТМЛ елемент?
Одговор: Можемо поставити слику која ће се користити као гранична слика уз елемент користећи својство ЦСС-а „бордер-имаге“.
Пример:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }
П # 16) Шта су градијенти у ЦСС-у?
Одговор: То је својство ЦСС-а које вам омогућава да прикажете глатку трансформацију између две или више од две наведене боје.
У ЦСС-у постоје две врсте градијената. Су:
- Линеарни градијент
- Радијални градијент
П # 17) Шта је ЦСС флекбок?
Одговор: Омогућава вам да дизајнирате флексибилну реактивну структуру распореда без употребе било каквог својства плутања или позиционирања ЦСС-а. Да бисте користили ЦСС флекбок, потребно је да у почетку дефинишете флек контејнер.
Пример:
.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.
П # 18) Напишите сва својства флексбокса.
Одговор: Постоји неколико својстава флексбокса која се користе на ХТМЛ веб страници.
Су:
- флекс-смер
- флек-врап
- флекс-ток
- оправдати-садржај
- алигн-итемс
- алигн-цонтент
П # 19) Како вертикално поравнати слику у одељку који се вертикално протеже на целој веб страници?
Одговор: То се може урадити коришћењем синтаксе вертицле-алигн: миддле у елементу, па чак и да повежемо два распона текста са другим распоном, а након тога морамо да користимо вертицле-алигн: миддле у садржају #ицон.
П # 20) Која је разлика између попуњавања и маргине?
Одговор: У ЦСС-у маргина је својство помоћу којег можемо створити простор око елемената. Можемо чак створити простор до споља дефинисаних граница.
У ЦСС-у имамо својство маргине на следећи начин:
- маргин-топ
- маргина-десно
- маргина-дно
- Маргина-лева
Својство маргина има неке дефинисане вредности као што је приказано доле.
- Ауто - Коришћење овог прегледача својстава израчунава маржу.
- Дужина - Поставља вредности маргине у пк, пт, цм итд.
- % - Поставља ширину% елемента.
- Наследити - Овим својством можемо наследити маргин својство од родитељског елемента.
У ЦСС-у додавање је особина помоћу које можемо генерисати простор око садржаја елемента као и унутар било које познате границе.
ЦСС подлога такође има својства попут,
- Паддинг-топ
- Паддинг-ригхт
- Подстављено дно
- Паддинг-лефт
Негативне вредности нису допуштене у попуњавању.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }
П # 21) Каква је употреба Бок модела у ЦСС-у?
Одговор: У ЦСС-у, модел оквира је оквир који повезује све ХТМЛ елементе и укључује функције попут маргина, обруба, додавања и стварног садржаја.
Коришћењем модела оквира добићемо овлашћење за додавање ивица око свих елемената, а такође можемо дефинисати и простор између елемената.
П # 22) Како можемо додати иконе на веб страницу?
Одговор: Можемо додати иконе на ХТМЛ веб страницу помоћу библиотеке икона попут фонт-авесоме.
Морамо да додамо име дате класе икона било којем уграђеном ХТМЛ елементу. ( или). Иконе у библиотекама икона су скалабилни вектори који се могу прилагодити ЦСС-ом.
П # 23) Шта је ЦСС псеудо-класа?
Одговор: То је класа која се користи за дефинисање посебног стања ХТМЛ елемента.
Ова класа се може користити стилизовањем елемента када га је корисник прегледао, а такође може обликовати и ХТМЛ елемент када добије фокус.
selector:pseudo-class { property:value; }
П # 24) Објасните концепт псеудо-елемената у ЦСС-у.
Одговор: То је карактеристика ЦСС-а која се користи за обликовање задатих делова елемента.
На пример ,можемо обликовати прво слово или ред ХТМЛ елемента.
selector::pseudo-element { property:value; }
П # 25) Шта је ЦСС непрозирност?
Одговор: Својство је које разрађује транспарентност елемента.
Овим својством можемо да прозиримо слику која може попримити вредности од 0,0-1,0. Ако је вредност нижа, онда је слика прозирнија. ИЕ8 и старије верзије прегледача могу да узимају вредности од 0-100.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}
П # 26) Напишите сва стања положаја која се користе у ЦСС-у.
Одговор: У ЦСС-у постоје четири стања положаја како је наведено у наставку:
- Статичка (подразумевано)
- У односу
- Фиксно
- Апсолутно
П # 27) Шта су траке за навигацију у ЦСС-у?
Одговор: Коришћењем навигационих трака можемо од обичне ХТМЛ странице направити корисничку и динамичнију веб страницу. У основи, то је листа веза, отуда и употреба
- и
- елементи имају савршен смисао.
ul { list-style-type: none; margin: 0; padding: 0; }
П # 28) Које су разлике између релативног и апсолутног у ЦСС-у?
Одговор: Главна разлика између релативног и апсолутног је у томе што се „релативни“ користи за исту ознаку у ЦСС-у, што значи да ако напишемо лево: 10 пиксела, тада ће се додавање померити на 10 пиксела лево, док је апсолутно потпуно релативно у односу на статични родитељ.
Значи, ако напишемо лефт: 10пк, онда ће резултат бити 10пк далеко од леве ивице надређеног елемента.
П # 29) Дефинишите „важне“ декларације које се користе у ЦСС-у.
Одговор: Важне декларације се дефинишу као она декларација која има већу важност од уобичајене декларације.
Током извршавања, ове декларације поништавају декларацију која има мање важности.
На пример, ако два корисника имају важну декларацију, тада ће једна од декларација заменити декларацију другог корисника.
На пример:
Боди {бацкгроунд: # ФФ00ФФ! Важно; боја: плава}питања за интервју за веб услуге за искусне
У овом телу позадина има већу тежину од боје.
П # 30) Дефинишите различите каскадне методе које се могу користити унутар каскадног редоследа.
Одговор: Каскадни редослед је сам по себи метод сортирања који омогућава многе друге различите методе сортирања:
а) Поредај по пореклу: Постоје нека правила која могу пружити алтернативни начин дефинисан као:
- Уобичајена тежина табеле стилова одређеног добављача биће замењена повећаном тежином табеле стилова корисника.
- Правила табела стилова одређеног корисника биће замењена нормалном ширином табеле стилова добављача.
б) Поредај по специфичности селектора: Мање специфичан селектор је замењен прецизнијим селектором.
На пример , Контекстуални селектор је мање специфичан у поређењу са ИД селектором који је специфичнији и тим контекстуалним селектором је надјачан селектор ИД-а.
ц) Поредај по наведеном редоследу: Ово долази у сценарију када су два селектора исте тежине и друга својства осим спецификације која ће се видети за поништавање.
Пример:
Сви остали стилови ће бити замењени ако се атрибут стила користи за уграђени стил.
Такође, ако се елемент везе користи за спољни стил, тада ће заменити увезени стил.
П # 31) Разликовати линијски и блок елемент.
Одговор: Уграђени елемент нема елемент за подешавање ширине и висине, а такође нема ни прелом линије.
Пример: ем, јак итд.
Спецификација елемента блока:
- Имају прекид линије.
- Ширину дефинишу постављањем контејнера и такође омогућавају подешавање висине.
- Такође може садржати елемент који се јавља у уграђеном елементу.
Пример:
ширина и висина
мак-ширина и мак-висина
мин-ширина и мин-висина
хи (и = 1-6) - елемент заглавља
п- Елемент пасуса.П # 32) Како се концепт наследства примењује у ЦСС-у?
Одговор: Наслеђивање је концепт у којем ће наследна класа наследити својства своје родитељске класе. То је концепт који се користи на многим језицима и једноставан је начин да се поново дефинише исто својство.
Користи се у ЦСС-у за дефинисање хијерархије од горњег до доњег нивоа. Наслеђена својства може да замени дечји разред ако дете користи исто име.
Пример:
Тело {фонт-сизе: 15пт;}
И друга дефиниција се дефинише у класи детета
Тело {фонт-сизе: 15пт;}
Х1 {фонт-сизе: 18пт;}Сав текст пасуса биће приказан помоћу својства и биће дефинисан у телу, осим за стил Х1 који ће текст приказивати само у фонту 18.
П # 33) Разликовати ИД и класу.
Одговор: И ИД и класа се користе у ХТМЛ-у и додељују вредност из ЦСС-а.
У наставку се налазе разлике:
- ИД је врста елемента који јединствено додељује име одређеном елементу, док класа има елемент са одређеним скупом својстава који се могу користити за цео блок.
- Ид се може користити као елемент јер га може јединствено идентификовати, док је класа такође дефинисана да блокира елементе и примењује превише ознака где год се користи.
- ИД пружа ограничење употребе његових својстава за један одређени елемент, док се у класи наследство примењује на одређени блок или групу елемента.
Закључак
Ова листа питања и одговора за интервју помоћи ће вам да размислите о интервјуу за веб програмере како за новији, тако и за ниво искуства. Ово су честа питања која се постављају у интервјуу.
Надам се да ће овај чланак помоћи да се разреши сваки интервју везан за ЦСС за веб програмера.
Предложено читање = >> Питања и одговори за интервјуе за веб програмере
Желимо вам сав успех !!
Препоручено читање