top 30 popular css interview questions
Elenco delle domande di intervista CSS più popolari con risposte:
Il CSS domande che coprono quasi tutte le categorie CSS di base e avanzate sono spiegate con esempi.
I CSS sono una delle caratteristiche più essenziali dello sviluppo Web. È un linguaggio con il quale possiamo descrivere l'aspetto delle pagine web.
Quindi, è essenziale coprire tutte le parti di base e avanzate del CSS. Per diventare un buon sviluppatore web e superare con successo il colloquio con lo sviluppatore web, devi imparare i CSS.
Domande frequenti sul colloquio CSS
Di seguito è riportato l'elenco delle domande e delle risposte dell'intervista CSS più frequenti in termini semplici per una facile comprensione.
Iniziamo!!
D # 1) Cos'è il CSS?
Risposta: CSS delinea lo stile di una pagina web HTML. È un linguaggio con il quale possiamo impostare il comportamento di una pagina web HTML. Descrive come il contenuto HTML verrà mostrato sullo schermo.
CSS controlla il layout di diverse pagine web HTML. CSS è indicato come il foglio di stile a cascata.
D # 2) Assegna un nome a tutti i moduli utilizzati nella versione corrente di CSS.
Risposta: ci sono diversi moduli in CSS come indicato di seguito:
- Selettori
- Modello Box
- Sfondi e bordi
- Effetti di testo
- Trasformazioni 2D / 3D
- Animazioni
- Layout a più colonne
- Interfaccia utente.
D # 3) Distinguere tra CSS2 e CSS3.
Risposta: Le differenze tra CSS2 e CSS3 sono le seguenti:
- CSS3 è diviso in due diverse sezioni chiamate modulo. Mentre in CSS2 tutto accede a un unico documento con tutte le informazioni in esso.
- I moduli CSS3 sono supportati quasi su tutti i browser e d'altra parte i moduli CSS e CSS2 non sono supportati in tutti i browser.
- In CSS3, troveremo che molte caratteristiche relative alla grafica sono state introdotte come Border-radius o box-shadow, flexbox.
- In CSS3, un utente può definire più immagini di sfondo su una pagina Web utilizzando proprietà come gli stili di immagine di sfondo, posizione dello sfondo e ripetizione dello sfondo.
D # 4) Cita diversi tipi di CSS.
Risposta: Esistono tre tipi di CSS come indicato di seguito:
- Esterno: Questi sono scritti in file separati.
- Interno: Questi sono citati all'inizio del documento del codice della pagina web.
- In linea: Questi sono scritti proprio accanto al testo.
D # 5) Perché è utile il foglio di stile esterno?
Risposta: Il foglio di stile esterno è molto utile poiché scriviamo tutti i codici di stile in un unico file e può essere utilizzato ovunque facendo semplicemente riferimento al collegamento di quel file di foglio di stile esterno.
Quindi, se apportiamo modifiche a quel file esterno, le modifiche possono essere osservate anche sulla pagina web. Quindi possiamo dire che è molto utile e semplifica il tuo lavoro mentre lavori su file più grandi.
D # 6) Quali sono gli usi di un foglio di stile incorporato ?
Risposta: Il foglio di stile incorporato ci dà il privilegio di definire gli stili in un unico punto in un documento HTML.
Possiamo generare più classi utilizzando un foglio di stile incorporato da utilizzare su più tipi di tag di una pagina web e inoltre non è richiesto alcun download aggiuntivo per importare le informazioni.
Esempio:
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) Come utilizzare il selettore CSS?
Risposta: Utilizzando il selettore CSS, possiamo scegliere il contenuto a cui vogliamo dare uno stile in modo da poter dire che è un ponte tra il foglio di stile e i file HTML.
La sintassi per il selettore CSS è 'selezionare' elementi HTML creati sul loro ID, classe, tipo, ecc.
D # 8) Spiega il concetto di Tweening.
Risposta: Il tweening è il processo in cui creiamo fotogrammi intermedi tra due immagini per ottenere l'aspetto della prima immagine che si sviluppa nella seconda immagine.
Viene utilizzato principalmente per creare animazioni.
D # 9) Definisci gli script di immagini CSS.
Risposta: Gli script di immagini CSS sono un gruppo di immagini che vengono inserite in un'immagine. Riduce il tempo di caricamento e il numero di richieste al server durante la proiezione di più immagini in una singola pagina web.
D # 10) Spiega il termine Responsive web design.
Risposta: È un metodo in cui progettiamo e sviluppiamo una pagina Web in base alle attività e alle condizioni dell'utente che si basano su vari componenti come le dimensioni dello schermo, la portabilità della pagina Web sui diversi dispositivi, ecc. Viene fatto utilizzando diversi layout e griglie flessibili.
D # 11) Cosa sono i contatori CSS?
Risposta: I contatori CSS sono variabili che possono essere incrementate da regole CSS che ispettore tengono traccia di quante volte la variabile è stata utilizzata.
D # 12) Cos'è la specificità CSS?
Risposta: La specificità CSS è un punteggio o una classificazione che decide quale dichiarazione di stile deve essere utilizzata per un elemento. (*) questo selettore universale ha una bassa specificità mentre i selettori ID hanno un'elevata specificità.
Ci sono quattro categorie in CSS che autorizzano il livello di specificità del selettore.
- Stile in linea
- ID
- Classi, attributi e pseudo-classi.
- Elementi e pseudo-elementi.
D # 13) Come possiamo calcolare la specificità?
Risposta: Per calcolare la specificità inizieremo con 0, quindi dobbiamo aggiungere 1000 per ogni ID e dobbiamo aggiungere 10 agli attributi, classi o pseudo-classi con ogni nome di elemento o pseudo-elemento e successivamente dobbiamo aggiungere 1 a loro .
Esempio:
h2 #content h2 heading
Q # 14) Come realizziamo un angolo arrotondato usando i CSS?
Risposta: Possiamo creare un angolo arrotondato utilizzando la proprietà 'border-radius'. Possiamo applicare questa proprietà a qualsiasi elemento.
Esempio:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
D # 15) Come aggiungerai le immagini dei bordi a un elemento HTML?
Risposta: Possiamo impostare l'immagine da utilizzare come immagine di bordo accanto a un elemento utilizzando la proprietà del CSS 'immagine di bordo'.
Esempio:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }Q # 16) Cosa sono i gradienti nei CSS?
Risposta: È una proprietà dei CSS che consente di visualizzare una trasformazione uniforme tra due o più di due colori specificati.
Esistono due tipi di sfumature presenti nei CSS. Sono:
- Gradiente lineare
- Gradiente radiale
D # 17) Che cos'è CSS flexbox?
Risposta: Ti consente di progettare una struttura di layout reattiva flessibile senza utilizzare alcuna proprietà float o posizionamento dei CSS. Per utilizzare CSS flexbox è necessario definire inizialmente un contenitore flessibile.
Esempio:
.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.
Q # 18) Scrivi tutte le proprietà del flexbox.
Risposta: Ci sono diverse proprietà del flexbox che vengono utilizzate nella pagina web HTML.
Sono:
- direzione flessibile
- avvolgimento flessibile
- flusso flessibile
- giustificare il contenuto
- align-items
- allineare il contenuto
D # 19) Come allineare l'immagine verticalmente in una divisione che si estende verticalmente su tutta la pagina web?
Risposta: Può essere fatto usando la sintassi verticle-align: middle nell'elemento e anche noi possiamo legare le due estensioni di testo intorno con un altro span e dopo questo, dobbiamo usare verticle-align: middle nell'icona del contenuto.
Q # 20) Qual è la differenza tra padding e margin?
Risposta: In CSS, il margine è la proprietà con cui possiamo creare spazio attorno agli elementi. Possiamo persino creare spazio per i confini definiti dall'esterno.
In CSS, abbiamo la proprietà margin come segue:
- margin-top
- margine destro
- margine inferiore
- Margine sinistro
La proprietà Margin ha alcuni valori definiti come mostrato di seguito.
- Auto - Utilizzando questo browser delle proprietà si calcola il margine.
- Lunghezza - Imposta i valori del margine in px, pt, cm ecc.
- % - Imposta la larghezza% dell'elemento.
- Eredita - Con questa proprietà possiamo ereditare la proprietà margin dall'elemento genitore.
In CSS, il riempimento è la proprietà con cui possiamo generare spazio attorno al contenuto di un elemento e all'interno di qualsiasi bordo noto.
Il riempimento CSS ha anche proprietà come,
- Imbottitura in alto
- Imbottitura a destra
- Fondo imbottito
- Imbottitura sinistra
I valori negativi non sono consentiti nel riempimento.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }D # 21) Qual è l'uso del Box Model nei CSS?
Risposta: In CSS, il box model è un box che lega tutti gli elementi HTML e include funzionalità come margini, bordo, padding e il contenuto effettivo.
Utilizzando un modello a scatola avremo l'autorità di aggiungere i bordi intorno agli elementi e possiamo anche definire lo spazio tra gli elementi.
D # 22) Come possiamo aggiungere icone alla pagina web?
Risposta: Possiamo aggiungere icone alla pagina web HTML utilizzando una libreria di icone come font-awesome.
Dobbiamo aggiungere il nome della classe di icone data a qualsiasi elemento HTML inline. ( o). Le icone nelle librerie di icone sono vettori scalabili che possono essere personalizzati con CSS.
D # 23) Cos'è una pseudo-classe CSS?
Risposta: È una classe utilizzata per definire uno stato speciale di un elemento HTML.
Questa classe può essere utilizzata per applicare uno stile a un elemento quando un utente ha curiosato su di esso e può anche applicare uno stile a un elemento HTML quando viene attivato.
selector:pseudo-class { property:value; }D # 24) Spiega il concetto di pseudo-elementi nei CSS.
Risposta: È una funzionalità dei CSS che viene utilizzata per definire lo stile delle parti di un elemento.
Per esempio ,possiamo definire lo stile della prima lettera o riga di un elemento HTML.
selector::pseudo-element { property:value; }D # 25) Cos'è l'opacità CSS?
Risposta: È la proprietà che elabora la trasparenza di un elemento.
Con questa proprietà, possiamo rendere trasparente l'immagine che può assumere i valori da 0,0 a 1,0. Se il valore è inferiore, l'immagine è più trasparente. IE8 e le versioni precedenti del browser possono assumere i valori da 0 a 100.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}D # 26) Scrivi tutti gli stati di posizione usati nei CSS.
Risposta: In CSS, ci sono quattro stati di posizione come indicato di seguito:
- Statico (predefinito)
- Parente
- Fisso
- Assoluto
D # 27) Cosa sono le barre di navigazione nei CSS?
Risposta: Usando le barre di navigazione possiamo trasformare una normale pagina HTML in una pagina web specifica per l'utente e più dinamica. Fondamentalmente, è un elenco di collegamenti, quindi l'uso di
- e
- elementi ha perfettamente senso.
ul { list-style-type: none; margin: 0; padding: 0; }Q # 28) Quali sono le differenze tra relativo e assoluto nei CSS?
Risposta: La differenza principale tra relativo e assoluto è che 'relativo' è usato per lo stesso tag in CSS e significa che se scriviamo il left: 10px allora il padding si sposterà a 10px a sinistra mentre assoluto è totalmente relativo al non- genitore statico.
Significa che, se scriviamo left: 10px, il risultato sarà 10px lontano dal bordo sinistro dell'elemento genitore.
D # 29) Definisci le dichiarazioni 'importanti' usate nei CSS.
Risposta: Le dichiarazioni importanti sono definite come quella dichiarazione che ha più importanza della normale dichiarazione.
Durante l'esecuzione, queste dichiarazioni sovrascrivono la dichiarazione che ha meno importanza.
Per esempio, se ci sono due utenti che hanno una dichiarazione importante, una delle dichiarazioni sovrascriverà la dichiarazione di un altro utente.
Per esempio:
Corpo {sfondo: # FF00FF! Important; colore blu}come faccio ad aprire un file dat su un mac
In questo corpo, lo sfondo ha più peso del colore.
D # 30) Definire diversi metodi a cascata che possono essere usati all'interno dell'ordine a cascata.
Risposta: L'ordine a cascata è esso stesso un metodo di ordinamento che consente molti altri metodi di ordinamento diversi:
a) Ordina per origine: Ci sono alcune regole che possono fornire un modo alternativo definito come:
- Il peso normale del foglio di stile di un particolare provider verrà sovrascritto dall'aumento del peso del foglio di stile dell'utente.
- Le regole del foglio di stile di un particolare utente verranno sovrascritte dalla larghezza normale del foglio di stile del provider.
b) Ordina per specificità del selettore: Il selettore meno specifico è stato sovrascritto dal selettore più specifico.
Per esempio , Un selettore contestuale è meno specifico rispetto al selettore ID che è uno più specifico e con quel selettore contestuale è stato sovrascritto dal selettore ID.
c) Ordina per ordine specificato: Ciò si verifica nello scenario in cui i due selettori hanno lo stesso peso e le altre proprietà rispetto alla specifica che verranno visualizzate per l'override.
Esempio:
Tutti gli altri stili verranno visualizzati come sovrascritti se l'attributo style viene utilizzato per lo stile inline.
Inoltre, se l'elemento link viene utilizzato per lo stile esterno, sovrascriverà lo stile importato.
D # 31) Differenzia tra elemento inline e block.
Risposta: L'elemento in linea non ha un elemento per impostare larghezza e altezza e inoltre non ha l'interruzione di riga.
Esempio: em, forte, ecc.
Specifica dell'elemento di blocco:
- Hanno l'interruzione di riga.
- Definiscono la larghezza impostando un contenitore e consentono anche di impostare l'altezza.
- Può anche contenere un elemento che si trova nell'elemento inline.
Esempio:
larghezza e altezza
larghezza massima e altezza massima
min-width e min-height
hi (i = 1-6) - elemento di intestazione
p- Elemento paragrafo.D # 32) Come viene applicato il concetto di ereditarietà nei CSS?
Risposta: L'ereditarietà è un concetto in cui la classe figlia erediterà le proprietà della sua classe genitore. È un concetto utilizzato in molte lingue ed è il modo più semplice per definire nuovamente la stessa proprietà.
Viene utilizzato nei CSS per definire la gerarchia dal livello superiore al livello inferiore. Le proprietà ereditate possono essere sovrascritte dalla classe del figlio se il figlio utilizza lo stesso nome.
Esempio:
Corpo {font-size: 15pt;}
E un'altra definizione viene definita nella classe figlio
Corpo {font-size: 15pt;}
H1 {font-size: 18pt;}Tutto il testo del paragrafo verrà visualizzato utilizzando la proprietà e sarà definito nel corpo tranne per lo stile H1 che mostrerà il testo solo nel font 18.
D # 33) Distinguere tra ID e classe.
Risposta: Sia l'ID che la classe sono stati utilizzati in HTML e assegnano il valore da CSS.
Di seguito trovi le differenze:
- L'ID è un tipo di elemento che assegna in modo univoco un nome a un particolare elemento mentre class ha un elemento con un certo insieme di proprietà che possono essere utilizzate per il blocco completo.
- L'id può essere utilizzato come elemento perché può identificarlo in modo univoco mentre la classe è anche definita per bloccare gli elementi e applica troppi tag ovunque venga utilizzata.
- ID fornisce la restrizione per utilizzare le sue proprietà a un elemento specifico mentre in classe l'ereditarietà viene applicata a un blocco o gruppo specifico dell'elemento.
Conclusione
Questa lista di domande e risposte per l'intervista ti aiuterà a superare l'intervista con lo sviluppatore Web per un livello di esperienza più fresco. Queste sono le domande frequenti poste durante l'intervista.
Spero che questo articolo aiuti a decifrare e affrontare qualsiasi intervista relativa ai CSS per uno sviluppatore Web.
Lettura consigliata = >> Domande e risposte dell'intervista allo sviluppatore web
Vi auguriamo tutto il successo !!
Lettura consigliata