Menu

Najobľúbenejších 30+ populárnych otázok a odpovedí na pohovor s CSS

  • Hlavná
  • Iné
  • Najobľúbenejších 30+ populárnych otázok a odpovedí na pohovor s CSS

top 30 popular css interview questions

Vyskúšajte Náš Nástroj Na Odstránenie Problémov

Zoznam najobľúbenejších otázok s rozhovorom s CSS:

The CSS na príkladoch sú vysvetlené otázky týkajúce sa takmer všetkých základných a pokročilých kategórií CSS.

CSS je jednou z najdôležitejších vlastností vývoja webu. Je to jazyk, v ktorom môžeme opísať vzhľad webových stránok.

Preto je nevyhnutné zakryť všetky základné a pokročilé časti CSS. Aby ste sa stali dobrým webovým vývojárom a úspešne prelomili rozhovor s webovým vývojárom, musíte sa naučiť CSS.

Otázky týkajúce sa rozhovorov s CSS (1)

Často kladené otázky týkajúce sa rozhovorov s CSS

Ďalej je uvedený zoznam najčastejšie kladených otázok a odpovedí na pohovory s CSS, aby ste im ľahšie porozumeli.

Začnime!!

Otázka č. 1) Čo je to CSS?

Odpoveď: CSS načrtáva štýl webovej stránky HTML. Je to jazyk, pomocou ktorého môžeme nastaviť správanie webovej stránky HTML. Opisuje, ako sa obsah HTML zobrazí na obrazovke.

CSS riadi rozloženie niekoľkých webových stránok HTML. CSS sa označuje ako šablóna kaskádových štýlov.

Otázka 2) Vymenujte všetky moduly, ktoré sa používajú v aktuálnej verzii CSS.

Odpoveď: V CSS je niekoľko modulov, ako je uvedené nižšie:

  • Selektory
  • Krabicový model
  • Pozadie a hranice
  • Textové efekty
  • 2D / 3D transformácie
  • Animácie
  • Rozloženie viacerých stĺpcov
  • Používateľské rozhranie.

Otázka 3) Rozlišujte medzi CSS2 a CSS3.

Odpoveď: Rozdiely medzi CSS2 a CSS3 sú nasledovné:

  • CSS3 je rozdelený do dvoch rôznych častí, ktoré sa nazývajú modul. Zatiaľ čo v CSS2 všetko vstupuje do jedného dokumentu so všetkými informáciami v ňom.
  • Moduly CSS3 sú podporované takmer vo všetkých prehliadačoch a na druhej strane moduly CSS a CSS2 nie sú podporované vo všetkých prehliadačoch.
  • V CSS3 zistíme, že bolo predstavených veľa charakteristík súvisiacich s grafikou, ako napríklad Border-radius alebo box-shadow, flexbox.
  • V CSS3 môže používateľ precízovať viac obrázkov na pozadí na webovej stránke pomocou vlastností ako štýly pozadia, obrázka, polohy pozadia a štýlov opakovania pozadia.

Otázka č. 4) Citujte rôzne typy CSS.

Odpoveď: Existujú tri typy CSS, ktoré sú uvedené nižšie:

  • Externé: Tieto sú napísané v samostatných súboroch.
  • Interné: Tieto sú citované v hornej časti dokumentu s kódom webovej stránky.
  • V rade: Tieto sú napísané hneď vedľa textu.

Otázka č. 5) Prečo je externá predloha štýlov užitočná?

Odpoveď: Externá šablóna štýlov je veľmi užitočná, pretože všetky štýlové kódy píšeme do jedného súboru a je možné ju použiť kdekoľvek, iba pomocou odkazu na odkaz na tento externý súbor so štýlmi.

Takže ak urobíme v tomto externom súbore nejaké zmeny, zmeny je možné pozorovať aj na webovej stránke. Dá sa teda povedať, že je veľmi užitočný a uľahčuje vám prácu pri práci s väčšími súbormi.

Otázka č. 6) Aké sú použitia vloženej šablóny štýlov ?

Odpoveď: Vložený zoznam štýlov nám dáva oprávnenie definovať štýly na jednom mieste v dokumente HTML.

Môžeme vygenerovať viac tried pomocou vloženej šablóny štýlov na použitie na viacerých typoch značiek na webovej stránke a tiež nie je potrebné žiadne ďalšie sťahovanie pre import informácií.

Prí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.

vložený

Otázka č. 7) Ako používať selektor CSS?

Odpoveď: Pomocou selektora CSS môžeme zvoliť obsah, ktorý chceme upraviť, aby sme mohli povedať, že je mostom medzi šablónou štýlov a súbormi HTML.

Syntax pre selektor CSS je „výber“ prvkov HTML vytvorených na základe ich id, triedy, typu atď.

Otázka č. 8) Vysvetlite pojem Tweening.

Odpoveď: Tweening je proces, pri ktorom vytvárame medzirámce medzi dvoma obrázkami, aby sme získali vzhľad prvého obrázka, ktorý sa vyvinie do druhého obrazu.

Používa sa hlavne na vytváranie animácií.

Otázka č. 9) Definujte obrázkové skripty CSS.

Odpoveď: Obrázkové skripty CSS sú skupina obrázkov, ktoré sú umiestnené do jedného obrázka. Znižuje čas načítania a počet požiadaviek na server pri premietaní viacerých obrázkov na jednu webovú stránku.

Otázka č. 10) Vysvetlite pojem responzívny webový dizajn.

Odpoveď: Je to metóda, pri ktorej navrhujeme a vyvíjame webovú stránku podľa aktivít a podmienok používateľa, ktoré sú založené na rôznych komponentoch, ako je veľkosť obrazovky, prenosnosť webovej stránky na rôzne zariadenia atď. Vykonáva sa pomocou rôzne flexibilné rozloženia a mriežky.

Otázka č. 11) Čo sú počítadlá CSS?

Odpoveď: Počítadlá CSS sú premenné, ktoré je možné zvýšiť pravidlami CSS, ktoré kontrolujú, koľkokrát bola premenná použitá.

Otázka č. 12) Čo je špecifickosť CSS?

Odpoveď: Špecifickosť CSS je skóre alebo hodnotenie, ktoré rozhoduje o tom, ktorá deklarácia štýlu sa má pre daný prvok použiť. (*) tento univerzálny selektor má nízku špecifickosť, zatiaľ čo selektory ID majú vysokú špecificitu.

V CSS sú štyri kategórie, ktoré autorizujú úroveň špecifickosti selektora.

  • Inline štýl
  • ID
  • Triedy, atribúty a pseudotriedy.
  • Prvky a pseudoprvky.

Otázka č. 13) Ako môžeme vypočítať špecifickosť?

Odpoveď: Na výpočet špecifickosti začneme s 0, potom musíme ku každému ID pridať 1000 a k atribútom, triedam alebo pseudotriedam musíme pridať 10 s každým názvom prvku alebo pseudoprvkom a neskôr k nim pridať 1 .

Príklad:

h2 #content h2

heading

Otázka č. 14) Ako vytvoríme zaoblený roh pomocou CSS?

Odpoveď: Zaoblíme roh pomocou vlastnosti „border-radius“. Túto vlastnosť môžeme použiť na akýkoľvek prvok.

Prí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!

polomer hranice

Otázka č. 15) Ako pridáte obrázky okrajov k prvku HTML?

Odpoveď: Pomocou vlastnosti CSS „border-image“ môžeme nastaviť obrázok, ktorý sa má použiť ako border-image popri prvku.

Príklad:

#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }

Otázka č. 16) Čo sú gradienty v CSS?

Odpoveď: Je to vlastnosť CSS, ktorá umožňuje zobraziť plynulú transformáciu medzi dvoma alebo viac ako dvoma zadanými farbami.

V CSS sú dva typy prechodov. Oni sú:

  • Lineárny gradient
  • Radiálny gradient

Otázka 17) Čo je CSS flexbox?

Odpoveď: Umožňuje vám navrhnúť flexibilnú štruktúru reagujúceho rozloženia bez použitia akejkoľvek vlastnosti float alebo positioning CSS. Ak chcete používať flexbox CSS, musíte najskôr definovať kontajner flex.

Prí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.

flexbox

Otázka č. 18) Napíšte všetky vlastnosti flexboxu.

Odpoveď: Existuje niekoľko vlastností flexboxu, ktoré sa používajú na webovej stránke HTML.

Oni sú:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • zarovnať položky
  • align-content

Otázka č. 19) Ako vertikálne zarovnať obrázok v rozdelení, ktoré sa rozprestiera vertikálne na celej webovej stránke?

zarovnať obrázok vertikálne v rozdelení

Odpoveď: Dá sa to urobiť pomocou syntaxe verticle-align: middle v prvku a dokonca môžeme spojiť dva rozpätia textu okolo s iným rozpätím a potom musíme v obsahu #icon použiť verticle-align: middle.

Otázka 20) Aký je rozdiel medzi výplňou a okrajom?

Odpoveď: V CSS je okraj vlastnosť, pomocou ktorej môžeme vytvárať priestor okolo prvkov. Môžeme dokonca vytvoriť priestor po vonkajšie definované hranice.

V CSS máme vlastnosť margin takto:

  • margin-top
  • margin-right
  • margin-bottom
  • Okraj zľava

Vlastnosť Okraj má niektoré definované hodnoty, ako je uvedené nižšie.

  • Auto - Pomocou tohto prehľadávača vlastností sa počíta marža.
  • Dĺžka - Nastavuje hodnoty okrajov v px, pt, cm atď.
  • % - Nastavuje šírku% prvku.
  • Dediť - Touto vlastnosťou môžeme dediť vlastnosť margin od nadradeného prvku.

V CSS je výplň vlastnosť, pomocou ktorej môžeme generovať priestor okolo obsahu prvku aj vo vnútri akejkoľvek známej hranice.

Výplň CSS má tiež vlastnosti ako,

  1. Polstrovanie
  2. Polstrovanie-pravé
  3. Polstrované dno
  4. Výplň - ľavá

Negatívne hodnoty nie sú v odsadení povolené.

div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }

Otázka č. 21) Aké je použitie modelu Box v CSS?

Odpoveď: V CSS je krabicový model box, ktorý viaže všetky prvky HTML a obsahuje funkcie ako okraje, ohraničenie, výplň a skutočný obsah.

Použitím krabicového modelu dostaneme oprávnenie pridávať hranice okolo prvkov a môžeme tiež definovať priestor medzi prvkami.

Otázka č. 22) Ako môžeme pridať ikony na webovú stránku?

Odpoveď: Na webovú stránku HTML môžeme pridávať ikony pomocou knižnice ikon, napríklad font-awesome.

Musíme vložiť názov danej triedy ikon do každého vloženého prvku HTML. ( alebo). Ikony v knižniciach ikon sú škálovateľné vektory, ktoré je možné prispôsobiť pomocou CSS.

Otázka č. 23) Čo je to pseudotrieda CSS?

Odpoveď: Je to trieda, ktorá sa používa na definovanie špeciálneho stavu prvku HTML.

Túto triedu je možné použiť na styling prvku, keď nad ním používateľ sliedil, a tiež môže upraviť štýl prvku HTML, keď sa na neho zameria.

selector:pseudo-class { property:value; }

Otázka č. 24) Vysvetlite koncept pseudoprvkov v CSS.

Odpoveď: Je to vlastnosť CSS, ktorá sa používa na štýlovanie daných častí prvku.

Napríklad ,môžeme upraviť štýl prvého písmena alebo riadku prvku HTML.

selector::pseudo-element { property:value; }

Otázka č. 25) Čo je nepriehľadnosť CSS?

Odpoveď: Je to vlastnosť, ktorá rozpracováva priehľadnosť prvku.

Touto vlastnosťou môžeme priehľadne vykresliť obraz, ktorý dokáže nadobúdať hodnoty od 0,0 do 1,0. Ak je hodnota nižšia, obrázok je transparentnejší. IE8 a staršie verzie prehľadávača môžu nadobúdať hodnoty od 0 do 100.

img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}

Otázka č. 26) Napíš všetky pozičné stavy použité v CSS.

Odpoveď: V CSS existujú štyri stavy pozícií, ako je uvedené nižšie:

  • Statické (predvolené)
  • Relatívne
  • Opravené
  • Absolútne

Otázka č. 27) Čo sú to navigačné lišty v CSS?

Odpoveď: Pomocou navigačných pruhov môžeme z obyčajnej stránky HTML vytvoriť užívateľsky špecifickejšiu a dynamickejšiu webovú stránku. V zásade je to zoznam odkazov, teda použitie

    a
  • prvky dáva dokonalý zmysel.

    ul { list-style-type: none; margin: 0; padding: 0; }

    Otázka č. 28) Aké sú rozdiely medzi relatívnym a absolútnym v CSS?

    Odpoveď: Hlavný rozdiel medzi relatívnym a absolútnym je, že „relatívny“ sa používa pre rovnakú značku v CSS a znamená to, že ak napíšeme zľava: 10px, výplň sa posunie na 10px vľavo, zatiaľ čo absolútna je úplne relatívna k non- statický rodič.

    To znamená, že ak napíšeme left: 10px, potom bude výsledok 10px ďaleko od ľavého okraja nadradeného prvku.

    Otázka č. 29) Definujte „dôležité“ vyhlásenia použité v CSS.

    Odpoveď: Dôležité vyhlásenia sú definované ako také vyhlásenia, ktoré majú väčší význam ako bežné vyhlásenia.

    Počas vykonávania tieto vyhlásenia majú prednosť pred vyhlásením, ktoré má menší význam.

    Napríklad, ak majú dvaja používatelia dôležité vyhlásenie, jedno z vyhlásení má prednosť pred vyhlásením iného používateľa.

    Napríklad:
    Body {background: # FF00FF! Important; farba: modrá}

    softvér na kopírovanie DVD do počítača

    V tomto tele má pozadie väčšiu váhu ako farba.

    Otázka 30) Definujte rôzne kaskádové metódy, ktoré je možné použiť v kaskádovom poradí.

    Odpoveď: Kaskádové poradie je sama o sebe metódou triedenia, ktorá umožňuje mnoho ďalších rôznych metód triedenia:

    a) Zoradiť podľa pôvodu: Existuje niekoľko pravidiel, ktoré môžu poskytovať alternatívny spôsob definovaný ako:

    • Normálna váha šablóny štýlov konkrétneho poskytovateľa bude prepísaná zvýšenou hmotnosťou šablóny štýlov používateľa.
    • Pravidlá šablóny štýlov konkrétneho používateľa budú prepísané normálnou šírkou šablóny štýlov poskytovateľa.

    b) Zoradiť podľa špecifickosti selektora: Menej konkrétny selektor je prepísaný konkrétnejším selektorom.

    Napríklad , Kontextový selektor je menej špecifický v porovnaní so selektorom ID, ktorý je konkrétnejší, as týmto kontextovým selektorom je prepísaný selektorom ID.

    c) Zoradiť podľa zadaného poradia: To nastáva v scenári, keď majú dva selektory rovnakú váhu a iné vlastnosti, ako je špecifikácia, ktorá sa prejaví pri prepísaní.

    Príklad:

    Ak sa pre vložený štýl použije atribút style, všetky ostatné štýly sa prepíšu.

    A tiež, ak sa prvok odkazu použije pre externý štýl, prepíše importovaný štýl.

    Otázka č. 31) Rozlišujte medzi vloženým a blokovým prvkom.

    Odpoveď: Vložený prvok nemá prvok na nastavenie šírky a výšky a nemá ani zalomenie riadku.

    Príklad: em, silný, atď.

    Špecifikácia blokového prvku:

    • Majú zalomenie riadku.
    • Definujú šírku nastavením kontajnera a umožňujú aj nastavenie výšky.
    • Môže tiež obsahovať prvok, ktorý sa vyskytuje v vloženom prvku.

    Príklad:

    šírka a výška
    maximálna šírka a maximálna výška
    minimálna šírka a minimálna výška
    ahoj (i = 1-6) - nadpisový prvok
    p - odsekový prvok.

    Otázka č. 32) Ako sa v CSS uplatňuje koncept dedenia?

    Odpoveď: Dedenie je koncept, v ktorom podradená trieda zdedí vlastnosti svojej nadradenej triedy. Jedná sa o koncept, ktorý sa používa v mnohých jazykoch, a je jednoduchým spôsobom, ako znova definovať tú istú vlastnosť.

    V CSS sa používa na definovanie hierarchie od najvyššej úrovne po spodnú úroveň. Zdedené vlastnosti môže trieda dieťaťa prepísať, ak dieťa používa rovnaké meno.

    Príklad:

    Text {font-size: 15pt;}

    A v detskej triede sa definuje iná definícia

    Text {font-size: 15pt;}
    H1 {font-size: 18pt;}

    Celý text odseku sa zobrazí pomocou vlastnosti a bude definovaný v tele okrem štýlu H1, ktorý zobrazí text iba písmom 18.

    Otázka č. 33) Rozlišujte medzi ID a triedou.

    Odpoveď: ID aj trieda sa používajú v HTML a priraďuje im hodnotu z CSS.

    Nižšie nájdete rozdiely:

    • ID je druh prvku, ktorý jedinečne priradí názov konkrétnemu prvku, zatiaľ čo trieda má prvok s určitou sadou vlastností, ktoré je možné použiť pre celý blok.
    • ID je možné použiť ako prvok, pretože ho môže jednoznačne identifikovať, zatiaľ čo trieda je tiež definovaná tak, aby blokovala prvky, a všade, kde sa používa, použije príliš veľa značiek.
    • ID poskytuje obmedzenie na použitie jeho vlastností na jeden konkrétny prvok, zatiaľ čo v triede sa dedičstvo uplatňuje na konkrétny blok alebo skupinu prvku.

    Záver

    Tento zoznam otázok a odpovedí na pohovory vám pomôže rozlúsknuť rozhovor s webovým vývojárom na čerstvejšej aj skúsenejšej úrovni. Toto sú časté otázky kladené v rozhovore.

    Dúfam, že tento článok pomôže prekonať akýkoľvek rozhovor s CSS pre webového vývojára.

    Navrhované čítanie = >> Interview s webovým vývojárom, otázky a odpovede

    Prajeme vám veľa úspechov !!

    Odporúčané čítanie

^