top 30 popular css interview questions
Seznam nejoblíbenějších dotazů na rozhovory s CSS s odpověďmi:
The CSS na příkladech jsou vysvětleny otázky pokrývající téměř všechny základní a pokročilé kategorie CSS.
CSS je jednou z nejdůležitějších vlastností vývoje webu. Je to jazyk, kterým můžeme popsat vzhled webových stránek.
Proto je nezbytné zakrýt všechny základní a pokročilé části CSS. Abyste se stali dobrým webovým vývojářem a úspěšně prolomili rozhovor s webovým vývojářem, musíte se naučit CSS.
Často kladené otázky ohledně rozhovorů s CSS
Níže je uveden seznam nejčastěji kladených otázek a odpovědí na pohovor s CSS, abyste je snadno pochopili.
Začněme!!
Otázka č. 1) Co je CSS?
Odpovědět: CSS nastiňuje styl webové stránky HTML. Je to jazyk, ve kterém můžeme nastavit chování webové stránky HTML. Popisuje, jak bude obsah HTML zobrazen na obrazovce.
CSS řídí rozložení několika webových stránek HTML. CSS se označuje jako kaskádový styl.
Otázka 2) Pojmenujte všechny moduly, které se používají v aktuální verzi CSS.
Odpověď: V CSS je několik modulů, jak je uvedeno níže:
- Selektory
- Krabicový model
- Pozadí a hranice
- Textové efekty
- 2D / 3D transformace
- Animace
- Rozložení více sloupců
- Uživatelské rozhraní.
Otázka č. 3) Rozlišujte mezi CSS2 a CSS3.
Odpovědět: Rozdíly mezi CSS2 a CSS3 jsou následující:
- CSS3 je rozdělen do dvou různých sekcí, které se nazývají modul. Zatímco v CSS2 vše vstupuje do jednoho dokumentu se všemi informacemi v něm.
- Moduly CSS3 jsou podporovány téměř ve všech prohlížečích a na druhé straně moduly CSS a CSS2 nejsou podporovány ve všech prohlížečích.
- V CSS3 zjistíme, že bylo zavedeno mnoho charakteristik souvisejících s grafikou, jako je Border-radius nebo box-shadow, flexbox.
- V CSS3 může uživatel upřesnit více obrázků na pozadí na webové stránce pomocí vlastností, jako jsou pozadí, obrázek, poloha na pozadí a opakování pozadí.
Otázka č. 4) Uveďte různé typy CSS.
Odpověď: Níže jsou uvedeny tři typy CSS:
- Externí: Ty jsou zapsány v samostatných souborech.
- Vnitřní: Ty jsou uvedeny v horní části dokumentu o kódu webové stránky.
- V souladu: Ty jsou psány hned vedle textu.
Otázka č. 5) Proč je externí šablona stylů užitečná?
Odpovědět: Externí šablona stylů je velmi užitečná, protože všechny stylingové kódy píšeme do jednoho souboru a lze ji použít kdekoli pouhým odkazem na odkaz na tento externí soubor stylů.
Pokud tedy provedeme nějaké změny v tomto externím souboru, lze je také pozorovat na webové stránce. Můžeme tedy říci, že je to velmi užitečné a usnadňuje vám práci při práci na větších souborech.
Otázka č. 6) Jaká je použití vložené šablony stylů ?
Odpovědět: Vložený list stylů nám dává oprávnění definovat styly na jednom místě v dokumentu HTML.
Můžeme generovat více tříd pomocí vloženého seznamu stylů, který lze použít na více typech značek webové stránky, a také není nutné žádné další stahování pro import informací.
Příklad:
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.
Otázka č. 7) Jak používat selektor CSS?
Odpovědět: Pomocí selektoru CSS můžeme vybrat obsah, který chceme stylovat, abychom mohli říci, že jde o most mezi šablonou stylů a soubory HTML.
Syntaxe pro selektor CSS je „výběr“ prvků HTML vytvořených na jejich ID, třídě, typu atd.
Otázka č. 8) Vysvětlete koncept doplnění.
Odpovědět: Tweening je proces, při kterém vytváříme mezilehlé snímky mezi dvěma obrazy, abychom získali vzhled prvního obrazu, který se vyvine do druhého obrazu.
Používá se hlavně k vytváření animací.
Otázka č. 9) Definujte obrazové skripty CSS.
Odpovědět: Skripty obrázků CSS jsou skupina obrázků, které jsou umístěny do jednoho obrázku. Snižuje dobu načítání a počet požadavků na server při promítání více obrazů na jednu webovou stránku.
Otázka č. 10) Vysvětlete termín Responsive web design.
Odpovědět: Jedná se o metodu, při které navrhujeme a vyvíjíme webovou stránku podle činností a podmínek uživatele, které jsou založeny na různých komponentách, jako je velikost obrazovky, přenositelnost webové stránky na různých zařízeních atd. Děje se to pomocí různá flexibilní rozvržení a mřížky.
Otázka č. 11) Co jsou čítače CSS?
Odpovědět: Čítače CSS jsou proměnné, které lze zvýšit pravidly CSS, která kontrolují, kolikrát byla proměnná použita.
Otázka č. 12) Co je specifičnost CSS?
Odpovědět: Specifičnost CSS je skóre nebo pořadí, které rozhoduje o tom, které deklarace stylu se má použít pro prvek. (*) tento univerzální selektor má nízkou specificitu, zatímco selektory ID mají vysokou specificitu.
V CSS existují čtyři kategorie, které autorizují úroveň specificity selektoru.
- Inline styl
- ID
- Třídy, atributy a pseudotřídy.
- Prvky a pseudoprvky.
Otázka č. 13) Jak můžeme vypočítat specificitu?
Odpovědět: Pro výpočet specificity začneme s 0, pak musíme přidat 1000 pro každé ID a musíme přidat 10 k atributům, třídám nebo pseudotřídám s každým názvem prvku nebo pseudoelementu a později k nim přidat 1 .
Příklad:
h2 #content h2 heading
Otázka č. 14) Jak pomocí CSS vytvoříme zaoblený roh?
Odpovědět: Můžeme vytvořit zaoblený roh pomocí vlastnosti „border-radius“. Tuto vlastnost můžeme použít na jakýkoli prvek.
Příklad:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
Otázka č. 15) Jak přidáte obrázky ohraničení k prvku HTML?
Odpovědět: Pomocí vlastnosti CSS „border-image“ můžeme nastavit obrázek, který má být použit jako border-image vedle prvku.
Příklad:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }Otázka č. 16) Co jsou přechody v CSS?
Odpovědět: Jedná se o vlastnost CSS, která umožňuje zobrazit plynulou transformaci mezi dvěma nebo více než dvěma určenými barvami.
V CSS jsou dva typy přechodů. Oni jsou:
- Lineární přechod
- Radiální gradient
Otázka č. 17) Co je CSS flexbox?
Odpovědět: Umožňuje vám navrhnout flexibilní strukturu citlivého rozvržení bez použití jakékoli floatové nebo poziční vlastnosti CSS. Chcete-li použít flexbox CSS, musíte nejprve definovat kontejner flex.
Příklad:
.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.
Otázka č. 18) Napište všechny vlastnosti flexboxu.
Odpovědět: Existuje několik vlastností flexboxu, které se používají na webové stránce HTML.
Oni jsou:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- zarovnat položky
- zarovnat obsah
Otázka č. 19) Jak vertikálně zarovnat obrázek v divizi, která se rozprostírá vertikálně na celé webové stránce?
Odpovědět: To lze provést pomocí syntaxe verticle-align: middle v prvku a dokonce můžeme spojit dva textové rozpětí kolem s dalším rozpětím a poté musíme použít verticle-align: middle v obsahu #icon.
Otázka č. 20) Jaký je rozdíl mezi polstrováním a okrajem?
Odpovědět: V CSS je okraj vlastnost, pomocí které můžeme vytvořit prostor kolem prvků. Můžeme dokonce vytvořit prostor k externě definovaným hranicím.
V CSS máme vlastnost margin takto:
- horní okraj
- pravý okraj
- dolní okraj
- Okraj vlevo
Vlastnost Margin má některé definované hodnoty, jak je uvedeno níže.
- Auto - Pomocí této vlastnosti prohlížeč vypočítá marži.
- Délka - Nastavuje hodnoty okrajů v px, pt, cm atd.
- % - Nastavuje šířku% prvku.
- Zdědit - Touto vlastností můžeme zdědit vlastnost margin z nadřazeného prvku.
V CSS je výplň vlastnost, pomocí které můžeme generovat prostor kolem obsahu prvku i uvnitř jakéhokoli známého ohraničení.
Výplň CSS má také vlastnosti jako,
- Vycpávka
- Výplň vpravo
- Polstrované dno
- Polstrování vlevo
Záporné hodnoty nejsou v odsazení povoleny.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }Otázka č. 21) Jaké je použití modelu Box v CSS?
Odpovědět: V CSS je model pole box, který váže všechny prvky HTML a obsahuje funkce jako okraje, ohraničení, odsazení a skutečný obsah.
Použitím krabicového modelu získáme oprávnění přidávat hranice kolem prvků a můžeme také definovat prostor mezi prvky.
Otázka č. 22) Jak můžeme přidat ikony na webovou stránku?
Odpovědět: Můžeme přidat ikony na webovou stránku HTML pomocí knihovny ikon, jako je font-awesome.
Do libovolného vloženého prvku HTML musíme přidat název dané třídy ikon. ( nebo). Ikony v knihovnách ikon jsou škálovatelné vektory, které lze přizpůsobit pomocí CSS.
Otázka č. 23) Co je to pseudotřída CSS?
Odpovědět: Jedná se o třídu, která se používá k definování zvláštního stavu prvku HTML.
Tuto třídu lze použít stylem elementu, když nad ním uživatel čmuchal, a také může stylovat element HTML, když dostane fokus.
selector:pseudo-class { property:value; }Otázka č. 24) Vysvětlete koncept pseudoprvků v CSS.
Odpovědět: Jedná se o vlastnost CSS, která se používá ke stylizaci daných částí prvku.
Například ,můžeme stylizovat první písmeno nebo řádek prvku HTML.
selector::pseudo-element { property:value; }Otázka č. 25) Co je neprůhlednost CSS?
Odpovědět: Je to vlastnost, která rozpracovává průhlednost prvku.
Touto vlastností můžeme transparentní obrázek, který může nabývat hodnot od 0,0 do 1,0. Pokud je hodnota nižší, je obrázek průhlednější. IE8 a dřívější verze prohlížeče mohou nabývat hodnot 0-100.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}Otázka č. 26) Napište všechny stavy polohy použité v CSS.
Odpověď: V CSS existují čtyři stavy pozic, jak je uvedeno níže:
- Statické (výchozí)
- Relativní
- Pevný
- Absolutní
Otázka č. 27) Co jsou navigační lišty v CSS?
Odpovědět: Pomocí navigačních lišt můžeme z obyčejné stránky HTML vytvořit uživatelskou a dynamičtější webovou stránku. V zásadě se jedná o seznam odkazů, tedy použití
- a
- prvky dává dokonalý smysl.
ul { list-style-type: none; margin: 0; padding: 0; }Otázka č. 28) Jaké jsou rozdíly mezi relativními a absolutními v CSS?
Odpovědět: Hlavní rozdíl mezi relativním a absolutním je ten, že „relativní“ se používá pro stejnou značku v CSS a znamená to, že když napíšeme left: 10px, pak se výplň posune na 10px vlevo, zatímco absolutní je zcela relativní k non- statický rodič.
To znamená, že pokud napíšeme left: 10px, pak bude výsledek 10px daleko od levého okraje nadřazeného prvku.
Otázka č. 29) Definujte „důležitá“ prohlášení použitá v CSS.
Odpovědět: Důležité deklarace jsou definovány jako deklarace, která má větší důležitost než normální deklarace.
Při provádění mají tato prohlášení přednost před deklarací, která má menší význam.
Například, pokud existují dva uživatelé, kteří mají důležitou deklaraci, pak jedno z deklarací přepíše deklaraci jiného uživatele.
Například:
Body {background: # FF00FF! Important; barva: modrá}bezplatný software pro časový rozvrh pro malé firmy
V tomto těle má pozadí větší váhu než barva.
Otázka 30) Definujte různé kaskádové metody, které lze použít uvnitř kaskádového pořadí.
Odpovědět: Kaskádové pořadí je samo o sobě metodou řazení, která umožňuje mnoho dalších různých metod řazení:
a) Seřadit podle původu: Existují některá pravidla, která mohou poskytovat alternativní způsob definovaný jako:
- Normální váha šablony stylů konkrétního poskytovatele bude přepsána zvýšenou váhou šablony stylů uživatele.
- Pravidla šablony stylů konkrétního uživatele budou přepsána normální šířkou šablony stylů poskytovatele.
b) Seřadit podle specifičnosti selektoru: Méně specifický selektor je přepsán konkrétnějším selektorem.
Například „Kontextový selektor je méně specifický ve srovnání se selektorem ID, který je konkrétnější as tímto kontextovým selektorem je přepsán voličem ID.
c) Řadit podle zadaného pořadí: To přichází ve scénáři, když mají dva selektory stejnou váhu a jiné vlastnosti než specifikace, které se zobrazí pro přepsání.
Příklad:
Všechny ostatní styly budou přepsány, pokud je pro vložený styl použit atribut stylu.
A také, pokud je prvek odkazu použit pro externí styl, přepíše importovaný styl.
Otázka č. 31) Rozlišujte mezi vloženým a blokovým prvkem.
Odpovědět: Vložený prvek nemá prvek pro nastavení šířky a výšky a také nemá zalomení řádku.
Příklad: em, silný atd.
Specifikace prvku bloku:
- Mají konec řádku.
- Definují šířku nastavením kontejneru a také umožňují nastavení výšky.
- Může také obsahovat prvek, který se vyskytuje v vloženém prvku.
Příklad:
šířka a výška
maximální šířka a maximální výška
minimální šířka a minimální výška
ahoj (i = 1-6) - prvek záhlaví
p- Prvek odstavce.Otázka č. 32) Jak se v CSS uplatňuje koncept dědičnosti?
Odpovědět: Dědičnost je koncept, ve kterém podřízená třída zdědí vlastnosti své nadřazené třídy. Jedná se o koncept, který se používá v mnoha jazycích a je snadným způsobem, jak znovu definovat stejnou vlastnost.
V CSS se používá k definování hierarchie od nejvyšší úrovně ke spodní úrovni. Zděděné vlastnosti mohou být přepsány třídou dítěte, pokud dítě používá stejný název.
Příklad:
Text {font-size: 15pt;}
A další definice je definována v podřízené třídě
Text {font-size: 15pt;}
H1 {font-size: 18pt;}Veškerý text odstavce se zobrazí pomocí vlastnosti a bude definován v těle s výjimkou stylu H1, který zobrazí text pouze v písmu 18.
Otázka č. 33) Rozlišujte mezi ID a třídou.
Odpovědět: ID i třída se používají v HTML a přiřazuje hodnotu z CSS.
Níže najdete rozdíly:
- ID je druh prvku, který jednoznačně přiřadí název určitému prvku, zatímco třída má prvek s určitou sadou vlastností, které lze použít pro celý blok.
- ID lze použít jako prvek, protože jej může jednoznačně identifikovat, zatímco třída je také definována tak, aby blokovala prvky a kdekoli je použita, použije příliš mnoho značek.
- ID poskytuje omezení pro použití jeho vlastností na jeden konkrétní prvek, zatímco ve třídě se dědičnost aplikuje na konkrétní blok nebo skupinu prvku.
Závěr
Tento seznam otázek a odpovědí na rozhovor vám pomůže prolomit rozhovor s vývojářem webu na čerstvější i vyšší úroveň zkušeností. Toto jsou časté otázky kladené v rozhovoru.
Doufám, že tento článek pomůže prolomit a čelit jakémukoli rozhovoru týkajícímu se CSS pro webového vývojáře.
Doporučené čtení = >> Web Developer Interview Otázky a odpovědi
Přejeme vám hodně úspěchů !!
Doporučené čtení