top 30 popular css interview questions
Llista de preguntes d'entrevistes CSS més populars amb respostes:
El CSS les preguntes que cobreixen gairebé totes les categories CSS bàsiques i avançades s’expliquen amb exemples.
CSS és una de les funcions més essencials del desenvolupament web. És un llenguatge mitjançant el qual podem descriure l’aspecte de les pàgines web.
Per tant, és essencial cobrir totes les parts bàsiques i avançades del CSS. Per convertir-vos en un bon desenvolupador web i fer l’entrevista amb desenvolupadors web amb èxit, heu d’aprendre CSS.
Preguntes freqüents sobre l'entrevista CSS
A continuació es mostra la llista de preguntes i respostes a les entrevistes CSS més freqüents en termes senzills per facilitar-ne la comprensió.
Comencem!!
P # 1) Què és CSS?
Resposta: CSS descriu l’estil d’una pàgina web HTML. És un llenguatge mitjançant el qual podem configurar el comportament d’una pàgina web HTML. Descriu com es mostrarà el contingut HTML a la pantalla.
CSS controla el disseny de diverses pàgines web HTML. CSS es coneix com el full d'estil en cascada.
Q # 2) Anomeneu tots els mòduls que s'utilitzen a la versió actual de CSS.
Resposta: Hi ha diversos mòduls en CSS, tal com s'indica a continuació:
- Selectors
- Model de caixa
- Fons i fronteres
- Efectes de text
- Transformacions 2D / 3D
- Animacions
- Disseny de diverses columnes
- Interfície d'usuari.
Q # 3) Distingir entre CSS2 i CSS3.
Resposta: Les diferències entre CSS2 i CSS3 són les següents:
- CSS3 es divideix en dues seccions diverses que s'anomenen mòdul. Mentre que a CSS2 tot accedeix a un sol document amb tota la informació que conté.
- Els mòduls CSS3 són compatibles gairebé amb tots els navegadors i, en canvi, els mòduls CSS i CSS2 no són compatibles amb tots els navegadors.
- A CSS3, trobarem que s’han introduït moltes característiques relacionades amb els gràfics com Border-radius o box-shadow, flexbox.
- A CSS3, un usuari pot precisar diverses imatges de fons en una pàgina web mitjançant propietats com ara estils imatge de fons, posició de fons i repetició de fons.
Q # 4) Citeu diferents tipus de CSS.
Resposta: Hi ha tres tipus de CSS, tal com s'esmenta a continuació:
- Extern: Aquests s’escriuen en fitxers separats.
- Intern: Es citen a la part superior del document de codi de la pàgina web.
- En linia: S’escriuen just al costat del text.
P # 5) Per què és útil el full d'estil extern?
Resposta: El full d’estil extern és molt útil ja que escrivim tots els codis d’estil en un sol fitxer i es pot utilitzar en qualsevol lloc només fent referència a l’enllaç d’aquest fitxer de full d’estil extern.
Per tant, si fem canvis en aquest fitxer extern, els canvis també es poden observar a la pàgina web. Per tant, podem dir que és molt útil i us facilita la feina mentre treballeu en fitxers més grans.
Q # 6) Quins són els usos d'un full d'estil incrustat ?
Resposta: El full d’estils incrustat ens dóna el privilegi de definir estils en un sol lloc en un document HTML.
Podem generar diverses classes mitjançant un full d’estil incrustat per utilitzar en diversos tipus d’etiquetes d’una pàgina web i tampoc no es necessita cap descàrrega addicional per importar la informació.
Exemple:
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.
Q # 7) Com utilitzar el selector CSS?
Resposta: Mitjançant l’ús del selector CSS, podem triar el contingut que volem estilitzar de manera que puguem dir que és un pont entre el full d’estils i els fitxers HTML.
La sintaxi del selector CSS és 'seleccionar' elements HTML creats a la seva identificació, classe, tipus, etc.
Q # 8) Expliqueu el concepte de Tweening.
Resposta: La interpolació és el procés pel qual creem marcs intermedis entre dues imatges per obtenir l’aspecte de la primera imatge que es converteix en la segona imatge.
S'utilitza principalment per crear animacions.
Q # 9) Definiu scripts d'imatge CSS.
Resposta: Els scripts d’imatges CSS són un grup d’imatges que es col·loquen en una imatge. Redueix el temps de càrrega i el número de sol·licitud al servidor mentre es projecten diverses imatges en una sola pàgina web.
Q # 10) Expliqueu el terme Disseny web responsiu.
Resposta: És un mètode mitjançant el qual dissenyem i desenvolupem una pàgina web d’acord amb les activitats i condicions de l’usuari que es basen en diversos components com la mida de la pantalla, la portabilitat de la pàgina web en els diferents dispositius, etc. Es fa mitjançant l’ús de diferents dissenys i quadrícules flexibles.
Q # 11) Què són els comptadors CSS?
Resposta: Els comptadors CSS són variables que es poden incrementar mitjançant regles de CSS que inspeccionen el seguiment de quantes vegades s’ha utilitzat la variable.
P # 12) Què és l'especificitat de CSS?
Resposta: L'especificitat CSS és una puntuació o un rang que decideix quina declaració d'estil s'ha d'utilitzar per a un element. (*) aquest selector universal té una especificitat baixa, mentre que els selectors d’ID tenen una especificitat elevada.
Hi ha quatre categories a CSS que autoritzen el nivell d’especificitat del selector.
- Estil en línia
- Identificacions
- Classes, atributs i pseudo-classes.
- Elements i pseudoelements.
P # 13) Com podem calcular l’especificitat?
Resposta: Per calcular l'especificitat començarem amb 0, després haurem d'afegir 1000 per a cada identificador i hem d'afegir 10 als atributs, classes o pseudo-classes amb cada nom d'element o pseudo-element i, posteriorment, n'hi haurem d'afegir 1. .
Exemple:
h2 #content h2 heading
P # 14) Com es fa una cantonada arrodonida mitjançant CSS?
Resposta: Podem fer una cantonada arrodonida mitjançant la propietat 'border-radius'. Podem aplicar aquesta propietat a qualsevol element.
Exemple:
#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) Com afegirà imatges de vora a un element HTML?
Resposta: Podem configurar la imatge que s’utilitzarà com a imatge de vora al costat d’un element mitjançant la propietat de CSS “border-image”.
Exemple:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }P # 16) Quins són els degradats de CSS?
Resposta: És una propietat de CSS que us permet mostrar una transformació fluida entre dos o més de dos colors especificats.
Hi ha dos tipus de degradats presents a CSS. Ells són:
- Gradient lineal
- Gradient radial
P # 17) Què és CSS flexbox?
Resposta: Us permet dissenyar una estructura de disseny flexible sensible sense utilitzar cap propietat flotant ni de posicionament de CSS. Per utilitzar CSS flexbox, heu de definir inicialment un contenidor flex.
Exemple:
.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) Escriviu totes les propietats del flexbox.
Resposta: Hi ha diverses propietats de la flexbox que s’utilitzen a la pàgina web HTML.
Ells són:
- direcció flex
- flex-wrap
- flex-flow
- justificar-contingut
- alinear-elements
- alinear-contingut
P # 19) Com alinear la imatge verticalment en una divisió que abasta verticalment a tota la pàgina web?
Resposta: Es pot fer utilitzant la sintaxi verticle-align: middle de l’element i fins i tot podem enllaçar els dos trams de text amb un altre span i, després d’això, hem d’utilitzar verticle-align: middle al contingut #icon.
P # 20) Quina diferència hi ha entre farciment i marge?
Resposta: A CSS, el marge és la propietat mitjançant la qual podem crear espai al voltant dels elements. Fins i tot podem crear espai a les fronteres definides a l’exterior.
A CSS, tenim la propietat de marge de la següent manera:
- marge superior
- marge-dreta
- marge-inferior
- Marge esquerre
La propietat de marge té alguns valors definits com es mostra a continuació.
- Automàtic - Si utilitzeu aquesta propietat, el navegador calcula el marge.
- Llargada - Estableix els valors del marge en px, pt, cm, etc.
- % - Estableix l'amplada% de l'element.
- Hereta - Amb aquesta propietat podem heretar la propietat margin de l’element pare.
A CSS, el farciment és la propietat mitjançant la qual podem generar espai al voltant del contingut d’un element, així com dins de qualsevol vora coneguda.
El farcit CSS també té propietats com,
- Tapa de farciment
- Encoixinat dret
- Funda de farciment
- Encoixinat-esquerra
No es permeten valors negatius en el farciment.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }P # 21) Quin ús té el model Box a CSS?
Resposta: A CSS, el model de quadre és un quadre que uneix tots els elements HTML i inclou funcions com els marges, la vora, el farciment i el contingut real.
Mitjançant l’ús d’un model de caixa obtindrem l’autoritat per afegir les vores al voltant dels elements i també podem definir l’espai entre els elements.
P # 22) Com podem afegir icones a la pàgina web?
Resposta: Podem afegir icones a la pàgina web HTML mitjançant una biblioteca d’icones com font-awesome.
Hem d’afegir el nom de la classe d’icones donada a qualsevol element HTML en línia. ( o bé). Les icones de les biblioteques d’icones són vectors escalables que es poden personalitzar amb CSS.
P # 23) Què és una pseudo-classe CSS?
Resposta: És una classe que s'utilitza per definir un estat especial d'un element HTML.
Aquesta classe es pot utilitzar donant estil a un element quan un usuari l’hagi escorregut i també pot donar estil a un element HTML quan rep el focus.
selector:pseudo-class { property:value; }Q # 24) Expliqueu el concepte de pseudoelements a CSS.
Resposta: És una característica de CSS que s'utilitza per donar estil a les parts d'un element.
Per exemple ,podem donar estil a la primera lletra o línia d’un element HTML.
selector::pseudo-element { property:value; }P # 25) Què és l’opacitat CSS?
Resposta: És la propietat que s’elabora sobre la transparència d’un element.
Amb aquesta propietat, podem transparentar la imatge que pot agafar els valors de 0,0-1,0. Si el valor és inferior, la imatge serà més transparent. IE8 i versions anteriors del navegador poden prendre els valors de 0 a 100.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}P # 26) Escriviu tots els estats de posició utilitzats a CSS.
Resposta: a CSS, hi ha quatre estats de posició tal com s’indica a continuació:
- Estàtic (predeterminat)
- Relatiu
- Fixat
- Absolut
P # 27) Què són les barres de navegació a CSS?
Resposta: Mitjançant les barres de navegació podem convertir una pàgina HTML comuna en una pàgina web específica per a l'usuari i més dinàmica. Bàsicament, es tracta d’una llista d’enllaços, per tant, l’ús de
- i
- elements té el sentit perfecte.
ul { list-style-type: none; margin: 0; padding: 0; }P # 28) Quines diferències hi ha entre relatiu i absolut en CSS?
Resposta: La principal diferència entre relatiu i absolut és que s’utilitza “relatiu” per a la mateixa etiqueta a CSS i vol dir que si escrivim l’esquerra: 10 px, el farciment canviarà a 10 px a l’esquerra, mentre que l’absolut és totalment relatiu a la pare estàtic.
Vol dir que, si escrivim a l’esquerra: 10 px, el resultat serà de 10 px lluny de la vora esquerra de l’element pare.
P # 29) Definiu declaracions ‘importants’ que s’utilitzen a CSS.
Resposta: Les declaracions importants es defineixen com aquella declaració que té més importància que la declaració normal.
Mentre s’executen, aquestes declaracions anul·len la declaració que té menys importància.
Per exemple, si hi ha dos usuaris que tenen una declaració important, una de les declaracions anul·larà la declaració d'un altre usuari.
Per exemple:
Cos {fons: # FF00FF! Important; color: blau}proveïdors de comptes de correu electrònic gratuïts als EUA
En aquest cos, el fons té més pes que el color.
P # 30) Definiu diferents mètodes en cascada que es poden utilitzar dins de l'ordre en cascada.
Resposta: L'ordre en cascada és un mètode d'ordenació que permet molts altres mètodes d'ordenació diferents:
a) Ordena per origen: Hi ha algunes regles que poden proporcionar una forma alternativa definida com:
- El pes normal del full d’estils d’un proveïdor concret serà substituït per l’augment del pes del full d’estil de l’usuari.
- Les regles del full d’estils d’un usuari concret se substituiran per l’amplada normal del full d’estils del proveïdor.
b) Ordeneu per l’especificitat del selector: El selector més específic ha substituït el selector menys específic.
Per exemple , Un selector contextual és menys específic en comparació amb el selector d'ID que és més específic i amb aquest selector contextual s'ha substituït pel selector d'ID.
c) Ordena per ordre especificat: Això passa en l’escenari en què els dos selectors tenen el mateix pes i les altres propietats diferents de l’especificació que es veurà per sobreescriure.
Exemple:
La resta d'estils es veuran anul·lats si l'atribut style s'utilitza per a l'estil en línia.
I, a més, si l'element d'enllaç s'utilitza per a un estil extern, substituirà l'estil importat.
P # 31) Diferencieu l'element en línia i l'element de bloc.
Resposta: L'element en línia no té un element per definir l'amplada i l'alçada i tampoc no té el salt de línia.
Exemple: em, forts, etc.
Especificació de l'element de bloc:
- Tenen el salt de línia.
- Defineixen l'amplada establint un contenidor i també permeten configurar l'alçada.
- També pot contenir un element que es produeix a l'element en línia.
Exemple:
amplada i alçada
amplada màxima i alçada màxima
amplada mínima i alçada mínima
hola (i = 1-6): element de capçalera
p- Element de paràgraf.Q # 32) Com s'aplica el concepte d'herència a CSS?
Resposta: L’herència és un concepte en què la classe fill heretarà les propietats de la seva classe pare. És un concepte que s’utilitza en molts idiomes i és la forma més fàcil de definir de nou la mateixa propietat.
S'utilitza a CSS per definir la jerarquia des del nivell superior fins al nivell inferior. La classe infantil pot anul·lar les propietats heretades si el nen utilitza el mateix nom.
Exemple:
Cos {font-size: 15pt;}
I s’està definint una altra definició a la classe infantil
Cos {font-size: 15pt;}
H1 {font-size: 18pt;}Tot el text del paràgraf es mostrarà amb la propietat i es definirà al cos, excepte l'estil H1, que només mostrarà el text amb la font 18.
Q # 33) Diferencieu entre la identificació i la classe.
Resposta: Tant l'ID com la classe s'han utilitzat en HTML i assigna el valor de CSS.
A continuació trobareu les diferències:
- L'ID és un tipus d'element que assigna un nom de manera única a un element concret mentre que la classe té un element amb un determinat conjunt de propietats que es poden utilitzar per al bloc complet.
- L'identificador es pot utilitzar com a element perquè el pot identificar de forma única, mentre que la classe també es defineix per bloquejar els elements i aplica massa etiquetes allà on s'utilitzi.
- L'ID proporciona la restricció per utilitzar les seves propietats a un element específic, mentre que a la classe l'herència s'aplica a un bloc o grup específic de l'element.
Conclusió
Aquesta llista de preguntes i respostes de l’entrevista us ajudarà a trencar l’entrevista per a desenvolupadors web per obtenir un nivell d’experiència més fresc. Aquestes són les preguntes més freqüents que es fan a l’entrevista.
Espero que aquest article us ajudi a trencar i afrontar qualsevol entrevista relacionada amb CSS per a un desenvolupador web.
Lectura suggerida = >> Preguntes i respostes d’entrevistes de desenvolupadors web
Us desitgem tot l’èxit !!
Lectura recomanada