top 30 popular css interview questions
Lista de preguntas de la entrevista CSS más populares con respuestas:
los CSS Las preguntas que cubren casi todas las categorías CSS básicas y avanzadas se explican con ejemplos.
CSS es una de las características más esenciales del desarrollo web. Es un lenguaje mediante el cual podemos describir la apariencia de las páginas web.
Por lo tanto, es esencial cubrir todas las partes básicas y avanzadas del CSS. Para convertirse en un buen desarrollador web y descifrar la entrevista de desarrollador web con éxito, necesita aprender CSS.
Preguntas frecuentes de la entrevista de CSS
A continuación se muestra la lista de preguntas y respuestas de entrevistas CSS más frecuentes en términos simples para su fácil comprensión.
¡¡Empecemos!!
P # 1) ¿Qué es CSS?
Responder: CSS describe el estilo de una página web HTML. Es un lenguaje mediante el cual podemos establecer el comportamiento de una página web HTML. Describe cómo se mostrará el contenido HTML en la pantalla.
CSS controla el diseño de varias páginas web HTML. CSS se conoce como hoja de estilo en cascada.
P # 2) Nombre todos los módulos que se utilizan en la versión actual de CSS.
Respuesta: Hay varios módulos en CSS como se indica a continuación:
- Selectores
- Modelo de caja
- Fondos y Fronteras
- Efectos de texto
- Transformaciones 2D / 3D
- Animaciones
- Diseño de múltiples columnas
- Interfaz de usuario.
P # 3) Distinga entre CSS2 y CSS3.
Responder: Las diferencias entre CSS2 y CSS3 son las siguientes:
- CSS3 se divide en dos secciones distintas que se denominan módulo. Mientras que en CSS2 todo accede a un solo documento con toda la información en él.
- Los módulos CSS3 son compatibles con casi todos los navegadores y, por otro lado, los módulos CSS y CSS2 no son compatibles con todos los navegadores.
- En CSS3, encontraremos que se han introducido muchas características relacionadas con los gráficos, como Border-radius o box-shadow, flexbox.
- En CSS3, un usuario puede precisar varias imágenes de fondo en una página web mediante el uso de propiedades como los estilos background-image, background-position y background-repeat.
P # 4) Cite diferentes tipos de CSS.
Respuesta: Hay tres tipos de CSS como se menciona a continuación:
- Externo: Estos están escritos en archivos separados.
- Interno: Estos se citan en la parte superior del documento de código de la página web.
- En línea: Estos están escritos junto al texto.
P # 5) ¿Por qué es útil la hoja de estilo externa?
Responder: La hoja de estilo externa es muy útil ya que escribimos todos los códigos de estilo en un solo archivo y se puede usar en cualquier lugar con solo hacer referencia al enlace de ese archivo de hoja de estilo externo.
Entonces, si hacemos algún cambio en ese archivo externo, los cambios también se pueden observar en la página web. Por lo tanto, podemos decir que es muy útil y facilita su trabajo mientras trabaja en archivos más grandes.
P # 6) ¿Cuáles son los usos de una hoja de estilo incrustada? ?
Responder: La hoja de estilo incrustada nos da el privilegio de definir estilos en un solo lugar en un documento HTML.
Podemos generar múltiples clases usando una hoja de estilo incrustada para usar en múltiples tipos de etiquetas de una página web y también no se requiere una descarga adicional para importar la información.
Ejemplo:
|_+_| 
P # 7) ¿Cómo usar el selector CSS?
Responder: Usando el selector de CSS, podemos elegir el contenido al que queremos aplicar estilo, de modo que podamos decir que es un puente entre la hoja de estilo y los archivos HTML.
La sintaxis para el selector de CSS es 'seleccionar' elementos HTML creados en su ID, clase, tipo, etc.
P # 8) Explique el concepto de Tweening.
Responder: La interpolación es el proceso en el que creamos cuadros intermedios entre dos imágenes para obtener la apariencia de la primera imagen que se convierte en la segunda imagen.
Se utiliza principalmente para crear animaciones.
P # 9) Defina secuencias de comandos de imágenes CSS.
Responder: Los scripts de imágenes CSS son un grupo de imágenes que se colocan en una imagen. Reduce el tiempo de carga y el número de solicitud al servidor mientras proyecta múltiples imágenes en una sola página web.
P # 10) Explique el término diseño web adaptable.
Responder: Es un método en el que diseñamos y desarrollamos una página web en función de las actividades y condiciones del usuario que se basan en varios componentes como el tamaño de la pantalla, la portabilidad de la página web en los diferentes dispositivos, etc. Se realiza mediante diferentes diseños y cuadrículas flexibles.
P # 11) ¿Qué son los contadores CSS?
Responder: Los contadores de CSS son variables que se pueden incrementar mediante reglas de CSS que hacen un seguimiento del inspector de cuántas veces se ha utilizado la variable.
P # 12) ¿Qué es la especificidad de CSS?
Responder: La especificidad de CSS es una puntuación o rango que decide qué declaración de estilo se debe usar para un elemento. (*) este selector universal tiene baja especificidad mientras que los selectores de ID tienen alta especificidad.
Hay cuatro categorías en CSS que autorizan el nivel de especificidad del selector.
- Estilo en línea
- Identificaciones
- Clases, atributos y pseudoclases.
- Elementos y pseudoelementos.
P # 13) ¿Cómo podemos calcular la especificidad?
Responder: Para calcular la especificidad comenzaremos con 0, luego tenemos que sumar 1000 por cada ID y tenemos que sumar 10 a los atributos, clases o pseudo-clases con cada nombre de elemento o pseudo-elemento y luego tenemos que sumarles 1 .
Ejemplo:
|_+_|P # 14) ¿Cómo hacemos una esquina redondeada usando CSS?
Responder: Podemos hacer una esquina redondeada usando la propiedad “border-radius”. Podemos aplicar esta propiedad a cualquier elemento.
Ejemplo:
|_+_| 
P # 15) ¿Cómo agregará imágenes de borde a un elemento HTML?
Responder: Podemos configurar la imagen que se utilizará como imagen de borde junto a un elemento utilizando la propiedad de CSS 'imagen de borde'.
Ejemplo:
|_+_|P # 16) ¿Qué son los degradados en CSS?
Responder: Es una propiedad de CSS que le permite mostrar una transformación suave entre dos o más de dos colores especificados.
Hay dos tipos de degradados que están presentes en CSS. Son:
- Gradiente lineal
- Gradiente radial
P # 17) ¿Qué es CSS flexbox?
Responder: Le permite diseñar una estructura de diseño flexible y receptiva sin utilizar ninguna propiedad flotante o de posicionamiento de CSS. Para usar CSS flexbox, primero debe definir un contenedor flexible.
crear una matriz de cadenas en java
Ejemplo:
|_+_| 
Q # 18) Escriba todas las propiedades del flexbox.
Responder: Hay varias propiedades del flexbox que se utilizan en la página web HTML.
Son:
- dirección flexible
- envoltura flexible
- flujo flexible
- justificar el contenido
- alinear-elementos
- alinear contenido
P # 19) ¿Cómo alinear la imagen verticalmente en una división que se extiende verticalmente en toda la página web?
Responder: Se puede hacer usando la sintaxis verticle-align: middle en el elemento e incluso podemos enlazar los dos tramos de texto con otro tramo y después de esto, tenemos que usar verticle-align: middle en el #icon de contenido.
P # 20) ¿Cuál es la diferencia entre relleno y margen?
Responder: En CSS, el margen es la propiedad mediante la cual podemos crear espacio alrededor de los elementos. Incluso podemos crear espacio para los bordes exteriores definidos.
En CSS, tenemos la propiedad de margen de la siguiente manera:
- margen superior
- margen derecho
- margen inferior
- Margen izquierdo
La propiedad de margen tiene algunos valores definidos como se muestra a continuación.
- Auto - El uso de este navegador de propiedades calcula el margen.
- Largo - Establece los valores de margen en px, pt, cm, etc.
- % – Establece el ancho% del elemento.
- Heredar - Mediante esta propiedad podemos heredar la propiedad margin del elemento padre.
En CSS, el relleno es la propiedad mediante la cual podemos generar espacio alrededor del contenido de un elemento, así como dentro de cualquier borde conocido.
El relleno CSS también tiene propiedades como,
- Acolchado superior
- Padding-right
- Fondo acolchado
- Padding-left
No se permiten valores negativos en el relleno.
|_+_|P # 21) ¿Cuál es el uso del modelo de caja en CSS?
Responder: En CSS, el modelo de caja es una caja que une todos los elementos HTML e incluye características como márgenes, borde, relleno y el contenido real.
Al usar un modelo de caja, obtendremos la autoridad para agregar los bordes alrededor de los elementos y también podemos definir el espacio entre los elementos.
P # 22) ¿Cómo podemos agregar íconos a la página web?
Responder: Podemos agregar íconos a la página web HTML usando una biblioteca de íconos como font-awesome.
Tenemos que agregar el nombre de la clase de icono dada a cualquier elemento HTML en línea. ( o). Los iconos de las bibliotecas de iconos son vectores escalables que se pueden personalizar con CSS.
P # 23) ¿Qué es una pseudoclase CSS?
Responder: Es una clase que se utiliza para definir un estado especial de un elemento HTML.
Esta clase se puede usar aplicando estilo a un elemento cuando un usuario fisgoneó sobre él y también puede aplicar estilo a un elemento HTML cuando recibe el foco.
|_+_|P # 24) Explique el concepto de pseudo-elementos en CSS.
Responder: Es una característica de CSS que se utiliza para diseñar las partes dadas de un elemento.
Por ejemplo ,podemos diseñar la primera letra o línea de un elemento HTML.
|_+_|P # 25) ¿Qué es la opacidad CSS?
Responder: Es la propiedad que se basa en la transparencia de un elemento.
Mediante esta propiedad, podemos transparentar la imagen que puede tomar los valores de 0.0-1.0. Si el valor es menor, la imagen es más transparente. IE8 y las versiones anteriores del navegador pueden tomar los valores de 0 a 100.
|_+_|Q # 26) Escriba todos los estados de posición usados en CSS.
Respuesta: En CSS, hay cuatro estados de posición como se indica a continuación:
- Estático (predeterminado)
- Relativo
- Reparado
- Absoluto
P # 27) ¿Qué son las barras de navegación en CSS?
Responder: Mediante el uso de barras de navegación, podemos convertir una página HTML normal en una página web específica del usuario y más dinámica. Básicamente, es una lista de enlaces, de ahí el uso de
- y
- elementos tiene el perfecto sentido.|_+_|
P # 28) ¿Cuáles son las diferencias entre relativo y absoluto en CSS?
Responder: La principal diferencia entre relativo y absoluto es que 'relativo' se usa para la misma etiqueta en CSS y significa que si escribimos a la izquierda: 10px, el relleno cambiará a 10px en la izquierda, mientras que el absoluto es totalmente relativo al no padre estático.
Es decir, si escribimos a la izquierda: 10px, el resultado será 10px lejos del borde izquierdo del elemento padre.
P # 29) Defina las declaraciones 'importantes' utilizadas en CSS.
Responder: Las declaraciones importantes se definen como aquella declaración que tiene más importancia que la declaración normal.
Durante la ejecución, estas declaraciones anulan la declaración que tiene menos importancia.
Por ejemplo, si hay dos usuarios que tienen una declaración importante, una de las declaraciones anulará la declaración de otro usuario.
Por ejemplo:
Cuerpo {fondo: # FF00FF! Importante; color azul}En este cuerpo, el fondo tiene más peso que el color.
P # 30) Defina diferentes métodos en cascada que se pueden usar dentro del orden en cascada.
Responder: El orden en cascada es en sí mismo un método de clasificación que permite muchos otros métodos de clasificación diferentes:
a) Ordenar por origen: Hay algunas reglas que pueden proporcionar una forma alternativa definida como:
- El peso normal de la hoja de estilo de un proveedor en particular será anulado por el mayor peso de la hoja de estilo del usuario.
- Las reglas de la hoja de estilo de un usuario en particular serán anuladas por el ancho normal de la hoja de estilo del proveedor.
b) Ordenar por la especificidad del selector: El selector más específico es anulado por el selector menos específico.
Por ejemplo , Un selector contextual es menos específico en comparación con el selector de ID, que es uno más específico y con ese selector contextual es anulado por el selector de ID.
c) Ordenar por orden especificado: Esto ocurre en el escenario en el que los dos selectores tienen el mismo peso y las otras propiedades distintas de la especificación se verán para invalidar.
Ejemplo:
Todos los demás estilos se verán anulados si el atributo de estilo se usa para el estilo en línea.
Y también, si el elemento de enlace se usa para estilo externo, anulará el estilo importado.
P # 31) Diferenciar entre elemento en línea y bloque.
Responder: El elemento en línea no tiene un elemento para establecer el ancho y la altura y tampoco tiene el salto de línea.
Ejemplo: em, fuerte, etc.
Especificación del elemento de bloque:
- Tienen el salto de línea.
- Definen el ancho colocando un contenedor y también permiten establecer la altura.
- También puede contener un elemento que aparece en el elemento en línea.
Ejemplo:
anchura y altura
max-width y max-height
min-width y min-height
hi (i = 1-6) - elemento de encabezado
p- Elemento de párrafo.P # 32) ¿Cómo se aplica el concepto de herencia en CSS?
Responder: La herencia es un concepto en el que la clase secundaria heredará las propiedades de su clase principal. Es un concepto que se ha utilizado en muchos lenguajes y es la forma más sencilla de volver a definir la misma propiedad.
Se utiliza en CSS para definir la jerarquía desde el nivel superior al inferior. Las propiedades heredadas pueden ser anuladas por la clase de los niños si el niño usa el mismo nombre.
Ejemplo:
Cuerpo {font-size: 15pt;}
Y otra definición se está definiendo en la clase secundaria.
Cuerpo {font-size: 15pt;}
H1 {tamaño de fuente: 18pt;}Todo el texto del párrafo se mostrará utilizando la propiedad y se definirá en el cuerpo, excepto el estilo H1, que mostrará el texto solo en la fuente 18.
Q # 33) Diferenciar entre el ID y la clase.
Responder: Tanto la ID como la clase se utilizan en HTML y asignan el valor de CSS.
A continuación, encontrará las diferencias:
- El ID es un tipo de elemento que asigna de forma única un nombre a un elemento en particular, mientras que la clase tiene un elemento con un cierto conjunto de propiedades que se pueden usar para el bloque completo.
- La identificación se puede usar como un elemento porque puede identificarlo de manera única, mientras que la clase también se define para bloquear los elementos y aplica demasiadas etiquetas donde sea que se use.
- ID proporciona la restricción para usar sus propiedades para un elemento específico, mientras que en la clase, la herencia se aplica a un bloque o grupo específico del elemento.
Conclusión
Esta lista de preguntas y respuestas de la entrevista le ayudará a descifrar la entrevista de desarrollador web para obtener un nivel más fresco y de experiencia. Estas son las preguntas frecuentes que se hacen en la entrevista.
Espero que este artículo ayude a resolver y afrontar cualquier entrevista relacionada con CSS para un desarrollador web.
Lectura sugerida = >> Preguntas y respuestas de la entrevista del desarrollador web
¡¡Te deseamos todo el éxito !!
Lectura recomendada