top 30 popular css interview questions
Списък на най-популярните CSS интервюта с отговори:
The CSS въпроси, обхващащи почти всички основни и разширени CSS категории, са обяснени с примери.
CSS е една от най-съществените характеристики на уеб разработката. Това е език, с който можем да опишем външния вид на уеб страниците.
Следователно е от съществено значение да се покрият всички основни и усъвършенствани части на CSS. За да станете добър уеб разработчик и да пробиете успешно интервюто за уеб разработчици, трябва да научите CSS.
Често задавани въпроси за интервю за CSS
По-долу е даден списъкът с най-често задаваните въпроси и отговори на CSS интервю с прости думи за вашето лесно разбиране.
Да започваме!!
В # 1) Какво е CSS?
Отговор: CSS очертава стила на HTML уеб страница. Това е език, чрез който можем да зададем поведението на HTML уеб страница. Той описва как HTML съдържанието ще се показва на екрана.
CSS контролира оформлението на няколко HTML уеб страници. CSS се нарича Каскаден стил.
В # 2) Назовете всички модули, които се използват в текущата версия на CSS.
Отговор: Има няколко модула в CSS, както е посочено по-долу:
- Селектори
- Модел на кутия
- Фонове и граници
- Текстови ефекти
- 2D / 3D трансформации
- Анимации
- Оформление на няколко колони
- Потребителски интерфейс.
В # 3) Разграничаване между CSS2 и CSS3.
Отговор: Разликите между CSS2 и CSS3 са както следва:
- CSS3 е разделен на два различни раздела, които се наричат модул. Докато в CSS2 всичко се присъединява към един документ с цялата информация в него.
- Модулите CSS3 се поддържат почти във всеки браузър, а от друга страна модулите на CSS и CSS2 не се поддържат във всеки браузър.
- В CSS3 ще открием, че са въведени много характеристики, свързани с графики като Border-radius или box-shadow, flexbox.
- В CSS3 потребителят може да прецизира множество фонови изображения на уеб страница, като използва свойства като фоново изображение, фон на фона и стилове за повторение на фона.
В # 4) Посочете различни видове CSS.
Отговор: Има три вида CSS, както е споменато по-долу:
- Външен: Те са написани в отделни файлове.
- Вътрешен: Те са цитирани в горната част на кодовия документ на уеб страницата.
- В редица: Те са написани точно до текста.
В # 5) Защо е полезен външният лист със стилове?
Отговор: Външният лист със стилове е много полезен, тъй като пишем всички кодове за стилизиране в един файл и той може да се използва навсякъде, като просто се позовава на връзката към този външен файл със стилове.
Така че, ако направим някакви промени в този външен файл, тогава промените могат да се наблюдават и на уеб страницата. По този начин можем да кажем, че е много полезен и улеснява работата ви, докато работите върху по-големи файлове.
В # 6) Какви са ползите от вградения лист със стилове ?
Отговор: Вградената таблица със стилове ни дава привилегията да дефинираме стилове на едно място в HTML документ.
Можем да генерираме множество класове, като използваме вградена таблица със стилове, за да ги използваме в множество типове маркери на уеб страница, а също така не е необходимо допълнително изтегляне за импортиране на информацията.
Пример:
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) Как да използвам CSS селектора?
Отговор: С помощта на CSS селектора можем да изберем съдържанието, което искаме да стилизираме, за да можем да кажем, че то е мост между таблицата със стилове и HTML файловете.
Синтаксисът на CSS селектора е 'select' HTML елементи, създадени върху техния id, клас, тип и т.н.
В # 8) Обяснете понятието туининг.
Отговор: Туинингът е процесът, при който създаваме междинни кадри между две изображения, за да получим вида на първото изображение, което се развива във второто изображение.
Използва се главно за създаване на анимация.
В # 9) Определете CSS скриптове за изображения.
Отговор: CSS скриптове за изображения са група от изображения, които се поставят в едно изображение. Той намалява времето за зареждане и номера на заявката към сървъра, докато проектира множество изображения в една уеб страница.
Въпрос # 10) Обяснете термина Отзивчив уеб дизайн.
Отговор: Това е метод, при който ние проектираме и разработваме уеб страница според дейностите и условията на потребителя, които се основават на различни компоненти като размера на екрана, преносимостта на уеб страницата на различните устройства и т.н. Това се прави с помощта на различни гъвкави оформления и решетки.
В # 11) Какво представляват CSS броячите?
Отговор: CSS броячите са променливи, които могат да бъдат увеличени от правилата на CSS, които инспектор проследяват колко пъти е била използвана променливата.
В # 12) Какво представлява CSS спецификата?
Отговор: Специфичността на CSS е резултат или ранг, който решава коя декларация за стил трябва да се използва за елемент. (*) този универсален селектор има ниска специфичност, докато селекторите на ID имат висока специфичност.
Има четири категории в CSS, които разрешават нивото на специфичност на селектора.
- Вграден стил
- ИД
- Класове, атрибути и псевдокласове.
- Елементи и псевдоелементи.
В # 13) Как можем да изчислим специфичността?
Отговор: За да изчислим специфичността, ще започнем с 0, след това трябва да добавим 1000 за всеки идентификатор и трябва да добавим 10 към атрибутите, класовете или псевдокласовете с име на всеки елемент или псевдоелемент и по-късно трябва да добавим 1 към тях .
Пример:
h2 #content h2 heading
В # 14) Как да направим заоблен ъгъл с помощта на CSS?
Отговор: Можем да направим заоблен ъгъл, като използваме свойството “border-radius”. Можем да приложим това свойство към всеки елемент.
Пример:
#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) Как ще добавите гранични изображения към HTML елемент?
Отговор: Можем да зададем изображението да се използва като гранично изображение заедно с елемент, като използваме свойството на CSS “border-image”.
Пример:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }В # 16) Какво представляват градиентите в CSS?
Отговор: Това е свойство на CSS, което ви позволява да покажете плавна трансформация между два или повече от два посочени цвята.
В CSS има два вида градиенти. Те са:
- Линеен градиент
- Радиален градиент
В # 17) Какво представлява CSS flexbox?
Отговор: Тя ви позволява да проектирате гъвкава отзивчива структура на оформлението, без да използвате каквото и да е свойство на поплавък или позициониране на CSS. За да използвате CSS flexbox, първоначално трябва да дефинирате flex контейнер.
Пример:
.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) Напишете всички свойства на flexbox.
Отговор: Има няколко свойства на flexbox, които се използват в HTML уеб страницата.
Те са:
- flex-посока
- гъвкаво обвиване
- flex-flow
- justify-content
- align-items
- align-content
В # 19) Как да подравним изображението вертикално в разделение, което се простира вертикално на цялата уеб страница?
Отговор: Това може да се направи, като се използва синтаксис verticle-align: middle в елемента и дори ние можем да обвържем двете текстови обхвати наоколо с друг интервал и след това трябва да използваме verticle-align: middle в съдържанието #icon.
Въпрос # 20) Каква е разликата между подложка и марж?
Отговор: В CSS полето е свойството, чрез което можем да създадем пространство около елементи. Можем дори да създадем пространство до външните граници.
В CSS имаме свойство margin, както следва:
- margin-top
- марж-дясно
- margin-bottom
- Марж-ляво
Свойството Margin има някои дефинирани стойности, както е показано по-долу.
- Автоматичен - Използването на това свойство браузър изчислява маржа.
- Дължина - Той задава стойностите на границите в px, pt, cm и т.н.
- % - Задава ширината% на елемента.
- Наследяване - Чрез това свойство можем да наследим свойството margin от родителския елемент.
В CSS подложката е свойството, чрез което можем да генерираме пространство около съдържанието на даден елемент, както и във всяка известна граница.
CSS подложката също има свойства като,
- Подложка
- Уплътнение вдясно
- Подложка отдолу
- Подложка-ляво
Отрицателните стойности не се допускат в подложка.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }В # 21) Каква е ползата от Box Model в CSS?
Отговор: В CSS моделът на кутиите е поле, което свързва всички HTML елементи и включва функции като полета, рамка, подплънки и действителното съдържание.
С помощта на модел на кутия ще получим правомощието да добавяме границите навсякъде около елементите и също така можем да дефинираме пространството между елементите.
В # 22) Как можем да добавим икони към уеб страницата?
Отговор: Можем да добавяме икони към HTML страницата, като използваме библиотека с икони като страхотен шрифт.
Трябва да добавим името на дадения клас икона към всеки вграден HTML елемент. ( или). Иконите в библиотеките с икони са мащабируеми вектори, които могат да бъдат персонализирани с CSS.
В # 23) Какво е CSS псевдоклас?
Отговор: Това е клас, който се използва за дефиниране на специално състояние на HTML елемент.
Този клас може да се използва чрез стилизиране на елемент, когато потребител го е плъзнал, а също така може да стилизира HTML елемент, когато получи фокуса.
selector:pseudo-class { property:value; }В # 24) Обяснете концепцията за псевдоелементите в CSS.
Отговор: Това е характеристика на CSS, която се използва за стилизиране на дадените части на елемент.
Например ,можем да стилизираме първата буква или ред на HTML елемент.
selector::pseudo-element { property:value; }В # 25) Какво представлява непрозрачността на CSS?
Отговор: Това е свойството, което разработва прозрачността на даден елемент.
Чрез това свойство можем да прозрачно изображение, което може да приеме стойностите от 0.0-1.0. Ако стойността е по-ниска, тогава изображението е по-прозрачно. IE8 и по-ранните версии на браузъра могат да приемат стойностите от 0-100.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}В # 26) Напишете всички състояния на позицията, използвани в CSS.
Отговор: В CSS има четири състояния на позиция, както е посочено по-долу:
- Статично (по подразбиране)
- Относително
- Фиксирана
- Абсолютно
В # 27) Какво представляват навигационните ленти в CSS?
Отговор: С помощта на навигационните ленти можем да превърнем обикновена HTML страница в специфична за потребителя и по-динамична уеб страница. По принцип това е списък с връзки, следователно използване на
- и
- елементи има идеалния смисъл.
ul { list-style-type: none; margin: 0; padding: 0; }В # 28) Какви са разликите между относителното и абсолютното в CSS?
Отговор: Основната разлика между относителна и абсолютна е, че „относителна“ се използва за един и същ таг в CSS и това означава, че ако напишем лявата: 10px, тогава подложката ще се измести до 10px вляво, докато абсолютната е напълно относителна към не- статичен родител.
Това означава, че ако напишем left: 10px, резултатът ще бъде 10px далеч от левия край на родителския елемент.
В # 29) Определете „важни“ декларации, използвани в CSS.
Отговор: Важните декларации се дефинират като тази декларация, която има по-голямо значение от нормалната декларация.
Докато се изпълняват, тези декларации заменят декларацията, която е с по-малко значение.
Например, ако има двама потребители, които имат важна декларация, тогава една от декларациите ще замени декларацията на друг потребител.
Например:
Body {background: # FF00FF! Important; цвят: син}най-добрите сайтове за гледане на аниме, дублирани
В това тяло фонът има по-голяма тежест от цвета.
В # 30) Определете различни каскадни методи, които могат да се използват в рамките на каскадния ред.
Отговор: Каскадният ред сам по себе си е метод за сортиране, който позволява много други различни методи за сортиране:
а) Сортиране по произход: Има някои правила, които могат да осигурят алтернативен начин, определен като:
- Нормалното тегло на таблицата със стилове на конкретен доставчик ще бъде заменено от увеличеното тегло на таблицата със стилове на потребителя.
- Правилата за таблици със стилове на конкретен потребител ще бъдат заменени от нормалната ширина на таблицата със стилове на доставчика.
б) Сортиране по специфичност на селектора: По-конкретният селектор е заменен от по-специфичния селектор.
Например , Контекстният селектор е по-малко специфичен в сравнение с ID селектора, който е по-специфичен и с този контекстен селектор е заменен от селектора на ID.
в) Сортиране по посочена поръчка: Това се случва в сценария, когато двата селектора са с еднакво тегло и другите свойства, освен спецификацията, които ще се видят за отмяна.
Пример:
Всички останали стилове ще бъдат заменени, ако атрибутът style се използва за вграден стил.
И също така, ако елементът за връзка се използва за външен стил, той ще замени импортирания стил.
В # 31) Разграничаване между вграден и блоков елемент.
Отговор: Вграденият елемент няма елемент за задаване на ширина и височина, а също така няма прекъсване на реда.
Пример: ем, силен и т.н.
Спецификация на блоковия елемент:
- Те наистина имат прекъсване на линията.
- Те определят ширината чрез задаване на контейнер и също така позволяват задаване на височина.
- Той може също да съдържа елемент, който се среща във вградения елемент.
Пример:
ширина и височина
максимална ширина и максимална височина
мин. ширина и мин. височина
hi (i = 1-6) - заглавен елемент
p- Абзац елемент.В # 32) Как се прилага концепцията за наследяване в CSS?
Отговор: Наследяването е концепция, при която дъщерният клас ще наследи свойствата на своя родителски клас. Това е понятие, което се използва на много езици и е лесният начин за дефиниране на същото свойство отново.
Използва се в CSS за дефиниране на йерархията от най-горното до долното ниво. Наследените свойства могат да бъдат заменени от детския клас, ако детето използва същото име.
Пример:
Основно {размер на шрифта: 15pt;}
И друго определение се дефинира в детския клас
Основно {размер на шрифта: 15pt;}
H1 {размер на шрифта: 18pt;}Целият текст на абзаца ще се покаже с помощта на свойството и ще бъде дефиниран в тялото, с изключение на стила H1, който ще показва текста само с шрифт 18.
Въпрос # 33) Разграничаване между идентификатора и класа.
Отговор: И двата ID и клас се използват в HTML и присвояват стойността от CSS.
По-долу можете да намерите разликите:
- ID е вид елемент, който уникално присвоява име на определен елемент, докато класът има елемент с определен набор от свойства, които могат да се използват за пълния блок.
- Идентификаторът може да се използва като елемент, защото може да го идентифицира по уникален начин, докато класът също е дефиниран да блокира елементите и прилага твърде много тагове навсякъде, където се използва.
- ID предоставя ограничението да се използват свойствата му за един специфичен елемент, докато в класа наследяването се прилага към определен блок или група от елемента.
Заключение
Този списък с въпроси и отговори за интервю ще ви помогне да пробиете интервюто за уеб разработчици за по-свежо, както и ниво на опит. Това са честите въпроси, задавани в интервюто.
Надявам се, че тази статия ще ви помогне да се справите с всяко интервю, свързано с CSS за уеб разработчик.
Предложено четене = >> Въпроси и отговори за интервю за уеб разработчици
Пожелаваме ви успех !!
Препоръчително четене