Preguntas y respuestas de la entrevista de CSS

1. ¿Qué es CSS?

Las hojas de estilo en cascada , conocidas cariñosamente como CSS , son un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web sean presentables. CSS le permite aplicar estilos a las páginas web. Más importante aún, CSS le permite hacer esto independientemente del HTML que conforma cada página web. CSS es fácil de aprender y comprender, pero brinda un poderoso control sobre la presentación de un documento HTML.

2. ¿Por qué usamos CSS?

Usamos CSS por las siguientes razones:

• CSS ahorra tiempo: puede escribir CSS una vez y reutilizar la misma hoja en varias páginas HTML.
• Fácil Mantenimiento: Para hacer un cambio global simplemente cambie el estilo, y todos los elementos en todas las páginas web se actualizarán automáticamente.
• Motores de búsqueda: CSS se considera una técnica de codificación limpia, lo que significa que los motores de búsqueda no tendrán que luchar para «leer» su contenido.
• Estilos superiores a HTML: CSS tiene una gama de atributos mucho más amplia que HTML, por lo que puede dar una apariencia mucho mejor a su página HTML en comparación con los atributos HTML.
• Navegación sin conexión: CSS puede almacenar aplicaciones web localmente con la ayuda de un caché sin conexión. Usando esto podemos ver sitios web fuera de línea.

3. ¿Cuáles son las ventajas de CSS?

• CSS juega un papel importante, al usar CSS simplemente debe especificar un estilo repetido para un elemento una vez y usarlo varias veces porque CSS aplicará automáticamente los estilos requeridos.
• La principal ventaja de CSS es que el estilo se aplica de manera consistente en una variedad de sitios. Una instrucción puede controlar varias áreas que son ventajosas.
• Los diseñadores web necesitan usar algunas líneas de programación para cada página, lo que mejora la velocidad del sitio.
• La hoja en cascada no solo simplifica el desarrollo del sitio web, sino que también simplifica el mantenimiento, ya que un cambio de una línea de código afecta a todo el sitio web y al tiempo de mantenimiento.
• Es menos complejo por lo que el esfuerzo se reduce significativamente.
• Ayuda a formar cambios espontáneos y consistentes.
• Los cambios de CSS son aptos para dispositivos. Con personas que emplean un lote de varios dispositivos inteligentes para acceder a sitios web a través de la web, existe un requisito para el diseño web receptivo.
• Tiene el poder de reposicionamiento. Nos ayuda a determinar los cambios en la posición de los elementos web que hay en la página.
• Estos ahorros de ancho de banda son cifras sustanciales de etiquetas insignificantes que no se distinguen de un montón de páginas.
• Fácil para el usuario personalizar la página en línea
• Reduce el tamaño de la transferencia de archivos.

4. ¿Cuáles son las desventajas de CSS?

• CSS, CSS 1 hasta CSS3, crean confusión entre los navegadores web.
• Con CSS, lo que funciona con un navegador puede no funcionar siempre con otro. Los desarrolladores web deben probar la compatibilidad, ejecutando el programa en varios navegadores.
• Existe una escasez de seguridad.
• Después de realizar los cambios, necesitamos confirmar la compatibilidad si aparecen. Un cambio similar afecta a todos los navegadores.
• El mundo de los lenguajes de programación es complicado para los no desarrolladores y los principiantes. Los diferentes niveles de CSS, es decir, CSS, CSS 2, CSS 3, suelen ser bastante confusos.
• Compatibilidad con navegadores (algunas hojas de estilo son compatibles y otras no).
• CSS funciona de manera diferente en diferentes navegadores. IE y Opera admiten CSS como lógica diferente.
• Puede haber problemas entre navegadores al usar CSS.
• Hay múltiples niveles que crean confusión para los no desarrolladores y los principiantes.

5. ¿Cuál es la versión actual de CSS?

CSS3 es la última versión de CSS

6. ¿En qué se diferencia CSS de CSS 3?

7. Enumere los marcos CSS.

Los mejores frameworks CSS son:

• Oreja
• Base
• bulma
• kit de interfaz de usuario
• IU semántica
• Materializar
• Puro
• CSS viento de cola

8. ¿Cuál es la sintaxis de CSS?

Una regla de estilo CSS consta de un selector, una propiedad y su valor. El selector apunta al elemento HTML donde se aplicará el estilo CSS. La propiedad CSS está separada por punto y coma.

Sintaxis:

selector { 
    Property: value; 
}

9. ¿De cuántas maneras podemos agregar CSS a nuestro archivo HTML?

La hoja de estilo en cascada (CSS) se utiliza para establecer el estilo en las páginas web que contienen elementos HTML. Establece el color de fondo, el tamaño de fuente, la familia de fuentes, el color, etc., propiedades de los elementos de una página web.
Hay tres tipos de CSS que se dan a continuación:

• CSS en línea: el CSS en línea contiene la propiedad CSS en la sección del cuerpo adjunta con el elemento conocido como CSS en línea. Este tipo de estilo se especifica dentro de una etiqueta HTML utilizando el atributo de estilo.
• CSS interno o incrustado: esto se puede usar cuando un solo documento HTML debe tener un estilo único. El conjunto de reglas CSS debe estar dentro del archivo HTML en la sección principal, es decir, el CSS está incrustado dentro del archivo HTML.
• CSS externo: el CSS externo contiene un archivo CSS separado que contiene solo propiedades de estilo con la ayuda de atributos de etiquetas (por ejemplo, clase, id, encabezado, etc.). La propiedad CSS está escrita en un archivo separado con extensión .css y debe vincularse al documento HTML mediante la etiqueta de enlace . Esto significa que para cada elemento, el estilo se puede establecer solo una vez y se aplicará a todas las páginas web.

10. ¿Qué tipo de CSS tiene la prioridad más alta?

CSS en línea tiene la prioridad más alta, luego viene Internal/Embedded seguido de External CSS que tiene la menor prioridad. Se pueden definir varias hojas de estilo en una página. Si para una etiqueta HTML, los estilos se definen en varias hojas de estilo, se seguirá el siguiente orden.

• Dado que Inline tiene la prioridad más alta, los estilos Inline anulan cualquier estilo definido en las hojas de estilo internas y externas.
• Interno o incrustado ocupa el segundo lugar en la lista de prioridades y anula los estilos en la hoja de estilo externa.
• Las hojas de estilo externas tienen la menor prioridad. Si no hay estilos definidos en la hoja de estilo interna o en línea, se aplican las reglas de la hoja de estilo externa para las etiquetas HTML.

11. ¿Qué son los selectores CSS?

Selectores de CSS: Los selectores de CSS se utilizan para seleccionar elementos HTML en función de su nombre de elemento, id, atributos, etc. Puede seleccionar uno o más elementos simultáneamente.

Selector de elementos: El selector de elementos en CSS se utiliza para seleccionar elementos HTML que deben tener estilo. En una declaración de selector, está el nombre del elemento HTML y las propiedades CSS que se aplicarán a ese elemento se escriben entre corchetes {}.

Sintaxis:

element_name {
    // CSS Property
}

Selector de id: El selector #id se usa para establecer el estilo de la identificación dada. El atributo id es el identificador único en un documento HTML. El selector de ID se utiliza con un carácter #.

Sintaxis:

#id_name { 
    // CSS Property
}

selector de clase: El selector .class se utiliza para seleccionar todos los elementos que pertenecen a un atributo de clase en particular. Para seleccionar los elementos con una clase en particular, use el carácter (.) con la especificación del nombre de la clase. El nombre de la clase se usa principalmente para establecer la propiedad CSS en la clase dada.

Sintaxis:

.class_name {
    // CSS Property
}

12. ¿Cómo podemos agregar comentarios en CSS?

Los comentarios son las declaraciones en su código que son ignoradas por el compilador y no se ejecutan. Los comentarios se utilizan para explicar el código. Hacen que el programa sea más legible y comprensible.

Sintaxis:

/* content */

Los comentarios pueden ser de una sola línea o de varias líneas.

13. ¿Qué significa la ‘a’ en rgba?

RGBA contiene A (Alfa) que especifica la transparencia de los elementos. El valor de alfa se encuentra entre 0,0 y 1,0, donde 0,0. representa totalmente transparente y 1.0 representa no transparente.
Sintaxis:

h1 {
    color:rgba(R, G, B, A);
}

14. ¿Qué son los colores CSS HSL?

HSL: HSL significa Tono, Saturación y Luminosidad respectivamente. Este formato utiliza el sistema de coordenadas cilíndricas.

• Tono: el tono es el grado de la rueda de colores. Su valor se encuentra entre 0 y 360, donde 0 representa rojo, 120 representa verde y 240 representa un color azul.
• Saturación: Toma un valor porcentual, donde 100% representa completamente saturado, mientras que 0% representa completamente insaturado (gris).
• Luminosidad: Toma un valor porcentual, donde el 100% representa el blanco, mientras que el 0% representa el negro.

Sintaxis:

h1 {
    color:hsl(H, S, L);
}

Ejemplo:

<html> 
    <head> 
        <title>CSS hsl color property</title> 
        <style> 
            h1{ 
                color:hsl(120, 100%, 30%); 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <h1> 
            GeeksforGeeks 
        </h1> 
    </body> 
</html>                     

Salida :

15. ¿Qué son los fondos CSS, enumere las propiedades?

Las propiedades de fondo de CSS se utilizan para definir los efectos de fondo de los elementos.

Las propiedades de fondo de CSS son las siguientes:

1. background-color : esta propiedad especifica el color de fondo de un elemento.
2. background-image: esta propiedad especifica una imagen para usar como fondo de un elemento. Por defecto, la imagen se repite para que cubra todo el elemento.
3. background-repeat: por defecto, la propiedad de imagen de fondo repite la imagen tanto horizontal como verticalmente.
4. background-attachment: esta propiedad se utiliza para fijar la imagen de fondo del suelo. La imagen no se desplazará con la página.
5. background-position: esta propiedad se utiliza para establecer la imagen en una posición particular.

16. ¿Cuáles son las diferentes propiedades de borde CSS?

Las propiedades de borde CSS nos permiten establecer el estilo, el color y el ancho del borde.

• Estilo de borde: la propiedad de estilo de borde especifica el tipo de borde. Ninguna de las otras propiedades de borde funcionará sin establecer el estilo de borde.
• Ancho del borde: el ancho del borde establece el ancho del borde. El ancho del borde puede ser en px, pt, cm o fino, medio y grueso.
• Color del borde: esta propiedad se utiliza para establecer el color del borde. El color se puede configurar usando el nombre del color, el valor hexadecimal o el valor RGB. Si no se especifica el color, el borde hereda el color del propio elemento.

17. ¿Qué significa margen: 40px 100px 120px 80px ?

Los márgenes CSS se utilizan para crear espacio alrededor del elemento. Podemos establecer los diferentes tamaños de márgenes para lados individuales (superior, derecho, inferior, izquierdo).

Las propiedades de margen pueden tener los siguientes valores:

1. Longitud en cm, px, pt, etc.
2. Ancho % del elemento.
3. Margen calculado por el navegador: automático.

Por lo tanto, margen: 40px 100px 120px 80px significa:

1. arriba = 40px
2. derecha = 100px
3. abajo = 120px
4. izquierda = 80px

18. ¿Cuál es la diferencia entre margen y relleno?

• El margen se usa para crear espacio alrededor de los elementos y el relleno se usa para crear espacio alrededor de los elementos dentro del borde.
• Podemos establecer la propiedad de margen en automático, pero no podemos establecer la propiedad de relleno en automático.
• En la propiedad Margen podemos permitir números negativos o flotantes, pero en el relleno no podemos permitir valores negativos.
• El margen y el relleno apuntan a los 4 lados del elemento. El margen y el relleno también funcionarán sin la propiedad de borde. La diferencia será más clara con el siguiente ejemplo.

Ejemplo:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        h2 { 
            margin:50px; 
            border:70px solid green; 
            padding:80px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GEEKSFORGEEKS</h1> 
    <h2> 
        Padding properties 
    </h2> 
</body> 
</html> 

Producción:

19. ¿Qué es el modelo de caja CSS?

El modelo de caja CSS es un contenedor que contiene varias propiedades, incluidos los bordes, el margen, el relleno y el contenido en sí. Se utiliza para crear el diseño y la maquetación de las páginas web. Se puede utilizar como un conjunto de herramientas para personalizar el diseño de diferentes elementos. El navegador web representa cada elemento como un cuadro rectangular de acuerdo con el modelo de cuadro CSS.
Box-Model tiene múltiples propiedades en CSS. Algunos de ellos se dan a continuación:

• fronteras
• márgenes
• relleno
• Contenido

La siguiente figura ilustra el modelo de caja.
 

• Área de Borde: Es el área entre el relleno y el margen de la caja. Sus dimensiones vienen dadas por el ancho y alto del borde.
• Área de margen: esta área consiste en el espacio entre el borde y el margen. Las dimensiones del área Margen son el ancho del cuadro de margen y la altura del cuadro de margen. Es útil para separar el elemento de sus vecinos.
• Padding Area: Incluye el padding del elemento. Esta área es en realidad el espacio alrededor del área de contenido y dentro del cuadro de borde. Sus dimensiones están dadas por el ancho de la caja de relleno y la altura de la caja de relleno.
• Área de contenido: esta área consta de contenido como texto, imágenes u otro contenido multimedia. Está delimitado por el borde del contenido y sus dimensiones vienen dadas por el ancho y la altura del cuadro de contenido.

20. ¿Cuál es la diferencia entre el borde y el contorno CSS?

• Las propiedades de borde CSS nos permiten establecer el estilo, el color y el ancho del borde.
• La propiedad de contorno CSS nos permite dibujar una línea alrededor del elemento, fuera del borde.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>      
        p {
            outline: 5px solid #ddd;
            border: 1px solid #000;
        }
    </style>
</head>
  
<body>
    <p>This is a paragraph.</p>
</body>
  
</html>

Producción:

Diferencias:

• A diferencia de los bordes, los contornos no nos permiten configurar cada borde con un ancho diferente, o establecer diferentes colores y estilos para cada borde. Un contorno es el mismo en todos los lados.
• Los contornos no pueden ser circulares.
• Los contornos no ocupan espacio, porque siempre se colocan encima de la caja del elemento.

21. ¿Cómo podemos dar formato al texto en CSS?

Las propiedades de formato de texto CSS se utilizan para dar formato y estilo al texto.
El formato de texto CSS incluye las siguientes propiedades:

1. Color de texto
2. Alineación del texto
3. Decoración de texto
4. Transformación de texto
5. sangría de texto
6. Espaciado de letras
7. Altura de la línea
8. Dirección del texto
9. Sombra de texto
10. Espaciado entre palabras

22. ¿Cuáles son los diferentes estados de enlace CSS?

Un enlace es una conexión de una página web a otra página web. La propiedad CSS se puede usar para diseñar los enlaces de varias maneras diferentes.

Estados de enlace: antes de discutir las propiedades de CSS, es importante conocer los estados de un enlace. Los enlaces pueden existir en diferentes estados y pueden diseñarse utilizando pseudoclases.
Hay cuatro estados de enlaces que se indican a continuación:

• a:link: Este es un enlace normal, no visitado.
• a:visited: este es un enlace visitado por un usuario al menos una vez
• a:hover: este es un enlace cuando el mouse pasa sobre él
• a:activo: este es un enlace en el que se acaba de hacer clic.

23. ¿Podemos agregar una imagen como marcador de elemento de lista?

Para agregar una imagen como marcador de elemento de lista en una lista, usamos la propiedad list-style-image en CSS. 

Sintaxis:

list-style-image: none | url | initial | inherit;

24. ¿Cómo podemos ocultar un elemento en CSS?

La propiedad de visualización de estilo se usa para ocultar y mostrar el contenido de HTML DOM accediendo al elemento DOM usando JavaScript/jQuery.

Para ocultar un elemento, establezca la propiedad de visualización de estilo en «ninguno».

display: "none";

Para mostrar un elemento, establezca la propiedad de visualización de estilo en «bloquear».

display:"block";

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .visible {
            display: block;
        }
          
        .hidden {
            display: none;
        }
    </style>
</head>
  
<body>
    <h1 class="visible">visible heading</h1>
    <h1 class="hidden">hidden heading</h1>
    <p>
        Note: The h1 element with display: none; 
        does not take up any space.
    </p>
</body>
  
</html>

Producción:

La propiedad de visibilidad se utiliza para ocultar o mostrar el contenido de los elementos HTML. La propiedad de visibilidad especifica que el elemento está actualmente visible en la página. El valor ‘oculto’ se puede utilizar para ocultar el elemento. Esto oculta el elemento pero no elimina el espacio ocupado por el elemento, a diferencia de la propiedad de visualización.

Sintaxis:

visibility : 'hidden';
visibility :'visible';

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .visible {
            visibility: visible;
        }
  
        .hidden {
            visibility: hidden;
        }
    </style>
</head>
  
<body>
    <h2 class="visible">This heading is visible</h2>
    <h2 class="hidden">This heading is hidden</h2>
    <p>Note: The hidden element still takes up space.</p>
</body>
  
</html>

Producción:

25. ¿Cuál es la diferencia entre mostrar: ninguno y visibilidad: oculto?

Ambas propiedades son bastante útiles en CSS. La visibilidad: “oculta”; La propiedad se utiliza para especificar si un elemento es visible o no en un documento web, pero los elementos ocultos ocupan espacio en el documento web. La visibilidad es una propiedad en CSS que especifica el comportamiento de visibilidad de un elemento y la visualización: la propiedad «ninguna» se usa para especificar si un elemento existe o no en el sitio web.

Sintaxis:

• Propiedad de visibilidad:

visibility: visible| hidden | collapse | initial | inherit;

• Mostrar propiedad:

display: none |  inline | block | inline-block;

Entonces, la diferencia entre mostrar: «ninguno»; y visibilidad: “oculto”; , directamente desde el nombre en sí, podemos notar la diferencia como visualización: «ninguno», elimina por completo la etiqueta, ya que nunca había existido en la página HTML, mientras que la visibilidad: «oculto»; , solo hace que la etiqueta sea invisible, seguirá estando en la página HTML ocupando espacio, simplemente es invisible.

26. ¿Podemos superponer elementos en CSS?

Crear un efecto de superposición simplemente significa juntar dos div en el mismo lugar, pero ambos div aparecen cuando es necesario, es decir, mientras se desplaza o al hacer clic en uno de los div para que aparezca el segundo. Las superposiciones son muy limpias y le dan a la página web un aspecto ordenado. Se ve sofisticado y es simple de diseñar. Las superposiciones se pueden crear usando dos propiedades CSS simples:

La propiedad del índice z se utiliza para desplazar elementos en el eje z, es decir, dentro o fuera de la pantalla. Se utiliza para definir el orden de los elementos si se superponen entre sí.

Sintaxis:

z-index: auto|number|initial|inherit;

La propiedad position en CSS informa sobre el método de posicionamiento de un elemento o una entidad HTML. 

27. ¿Cuáles son las diversas propiedades de posicionamiento en CSS?

La propiedad position en CSS informa sobre el método de posicionamiento de un elemento o una entidad HTML. Hay cinco tipos diferentes de propiedades de posición disponibles en CSS:

1. Fijado
2. Estático
3. Pariente
4. Absoluto
5. Pegajoso

El posicionamiento de un elemento se puede realizar mediante las propiedades top , right , bottom e left . Estos especifican la distancia de un elemento HTML desde el borde de la ventana gráfica. Para establecer la posición por estas cuatro propiedades, tenemos que declarar el método de posicionamiento.

Hablemos de cada uno de estos métodos de posición en detalle:

1. Corregido: cualquier elemento HTML con posición: la propiedad fija se colocará en relación con la ventana gráfica. Un elemento con posicionamiento fijo le permite permanecer en la misma posición incluso mientras nos desplazamos por la página. Podemos establecer la posición del elemento usando la parte superior, derecha, inferior e izquierda.

2. Estático: este método de posicionamiento está configurado de forma predeterminada. Si no mencionamos el método de posicionamiento para ningún elemento, el elemento tiene la posición: método estático por defecto. Al definir Estático, la parte superior, derecha, inferior e izquierda no tendrán ningún control sobre el elemento. El elemento se colocará con el flujo normal de la página.

3. Relativo: Un elemento con posición: relativo se posiciona relativamente con los otros elementos que se encuentran encima de él. Si configuramos su parte superior, derecha, inferior o izquierda, otros elementos no llenarán el espacio dejado por este elemento.

4. Absoluto: Un elemento con posición: absoluto se posicionará con respecto a su padre. El posicionamiento de este elemento no depende de sus hermanos o de los elementos que están al mismo nivel.

5. Sticky: Elemento con posición: sticky y top: 0 desempeña un papel entre fijo y relativo según la posición en la que se coloca. Si el elemento se coloca en el medio del documento, cuando el usuario se desplaza por el documento, el elemento adhesivo comienza a desplazarse hasta que toca la parte superior. Cuando toque la parte superior, se fijará en ese lugar a pesar de seguir desplazándose. Podemos pegar el elemento en la parte inferior, con la propiedad bottom .

28. ¿Qué es el desbordamiento de CSS?

El desbordamiento de CSS controla el gran contenido. Indica si se debe recortar el contenido o agregar barras de desplazamiento. El desbordamiento contiene la siguiente propiedad:

• visible
• oculto
• Desplazarse
• auto

1. Visible: el contenido no se recorta y es visible fuera del cuadro del elemento.

2. Oculto: el desbordamiento se recorta y el resto del contenido es invisible.

3. Desplazamiento: el desbordamiento se recorta pero se agrega una barra de desplazamiento para ver el resto del contenido. La barra de desplazamiento puede ser horizontal o vertical.

4. Automático: Agrega automáticamente una barra de desplazamiento cuando sea necesario.

Overflow-x y Overflow-y: esta propiedad especifica cómo cambiar el desbordamiento de elementos. x se ocupa de los bordes horizontales y y se ocupa de los bordes verticales.

29. ¿Qué hace la propiedad float de CSS?

Float es una propiedad CSS escrita en un archivo CSS o directamente en el estilo de un elemento. La propiedad float define el flujo de contenido. A continuación se muestran los tipos de propiedades flotantes:

30. ¿Qué hace display:inline-block?

Inline-block: esta función utiliza ambas propiedades: block e inline. Entonces, esta propiedad alinea el div en línea, pero la diferencia es que puede editar la altura y el ancho del bloque. Básicamente, esto alineará el div tanto en bloque como en línea.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS | Display property</title>
        <style>
        #main{
                height: 100px;
                width: 200px;
                background: teal;
                display: inline-block;
              
            }
            #main1{
                height: 100px;
                width: 200px;
                background: cyan;
                display: inline-block;
              
            }
            #main2{
                height: 100px;
                width: 200px;
                background: green;
                display: inline-block;
            }
            .gfg {
                margin-left:200px;
                font-size:42px;
                font-weight:bold;
                color:#009900;
            }
            .geeks {
                font-size:25px;
                margin-left:210px;
            }
            .main {
                margin:50px;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <div class = "geeks">display: Inline-block; property</div>
        <div class = "main">
            <div id="main"> BLOCK 1 </div>
            <div id="main1"> BLOCK 2</div>
            <div id="main2">BLOCK 3 </div>
        </div>
    </body>
</html>                 

Producción:

31. ¿Cómo podemos centrar verticalmente un texto en CSS?

Esta solución funcionará para una sola línea y varias líneas de texto, pero aún requiere un contenedor de altura fija:

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 2px dashed #f69c55;
}
span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
div{
    GeeksforGeeks 
}

32. ¿Cómo podemos centrar una imagen en CSS?

Dada una imagen y la tarea es configurar la imagen para que se alinee al centro (vertical y horizontalmente) dentro de un div más grande. Se puede hacer usando la propiedad de posición del elemento.

Ejemplo: Este ejemplo usa la propiedad de posición para hacer que la imagen se alinee al centro.

<!DOCTYPE html> 
<html> 
  
<head>     
    <title> 
        Horizontal and Vertical alignment 
    </title> 
      
    <!-- Style to set horizontal and 
        vertical alignment -->
    <style> 
        #Outer { 
            border: 2px solid black; 
            height: 300px; 
            position: relative; 
        } 
        img { 
            position: absolute; 
            margin: auto; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0; 
        } 
    </style> 
</head> 
  
<body> 
    <div id = "Outer"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/gfgbg.png"/> 
    </div> 
</body> 
  
</html>                     

Salida :

33. ¿Qué son los Combinadores CSS?

Los combinadores CSS explican la relación entre dos selectores. Los selectores de CSS son los patrones utilizados para seleccionar los elementos con fines de estilo. Un selector CSS puede ser un selector simple o un selector complejo que consta de más de un selector conectado mediante combinadores.
Hay cuatro tipos de combinadores disponibles en CSS que se analizan a continuación:

• Selector general de hermanos (~)
• Selector de hermanos adyacentes (+)
• Selector de niños (>)
• Selector de descendientes (espacio)

Selector de hermanos general: el selector de hermanos general se utiliza para seleccionar el elemento que sigue al primer elemento selector y también comparte el mismo padre que el primer elemento selector. Esto se puede utilizar para seleccionar un grupo de elementos que comparten el mismo elemento principal.

Selector de hermanos adyacentes: el selector de hermanos adyacentes se utiliza para seleccionar el elemento que es adyacente o el elemento que está al lado de la etiqueta de selector especificada. Este combinador selecciona solo una etiqueta que está justo al lado de la etiqueta especificada.

Selector de niños: este selector se usa para seleccionar el elemento que es el niño inmediato de la etiqueta especificada. Este combinador es más estricto que el selector descendiente porque selecciona solo el segundo selector si tiene el primer elemento selector como padre.

Selector de descendientes: este selector se utiliza para seleccionar todos los elementos secundarios de la etiqueta especificada. Las etiquetas pueden ser el hijo directo de la etiqueta especificada o pueden estar muy profundas en la etiqueta especificada. Este combinador combina los dos selectores de manera que los elementos seleccionados tienen un ancestro igual que el primer elemento selector.

34. ¿Qué son las pseudoclases en CSS?

Una clase Pseudo en CSS se usa para definir el estado especial de un elemento. Se puede combinar con un selector de CSS para agregar un efecto a los elementos existentes en función de sus estados. Por ejemplo, cambiar el estilo de un elemento cuando el usuario se desplaza sobre él o cuando se visita un enlace. Todo esto se puede hacer usando Pseudo Clases en CSS.

Tenga en cuenta que los nombres de las pseudoclases no distinguen entre mayúsculas y minúsculas.

Sintaxis:

selector: pseudo-class{
     property: value;
}

Hay muchas pseudoclases en CSS, pero las que se usan más comúnmente son las siguientes:

• :hover Pseudo-clase: Esta pseudo-clase se usa para agregar un efecto especial a un elemento cuando el puntero del mouse está sobre él. El siguiente ejemplo demuestra que cuando su mouse ingresa al área del cuadro, su color de fondo cambia de amarillo a naranja.
• :pseudoclase activa: esta pseudoclase se utiliza para seleccionar un elemento que se activa cuando el usuario hace clic en él. El siguiente ejemplo demuestra que cuando hace clic en el cuadro, su color de fondo cambia por un momento.
• :focus Pseudo-clase: Esta pseudo-clase se utiliza para seleccionar un elemento que actualmente está enfocado por el usuario. Funciona en los elementos de entrada del usuario utilizados en los formularios y se activa tan pronto como el usuario hace clic en él. En el siguiente ejemplo, el color de fondo del campo de entrada que actualmente está enfocado cambia.
• :seudoclase visitada: esta pseudoclase se utiliza para seleccionar los enlaces que ya han sido visitados por el usuario. En el siguiente ejemplo, el color del enlace cambia una vez que se visita.

35. ¿Qué son los pseudo-elementos en CSS?

Pseudo elementos: el pseudo elemento en CSS se usa para agregar estilo a partes específicas de un elemento. Ejemplo: Usar estilo antes o después de un elemento.

Sintaxis:

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

Uso de pseudoelemento: a continuación se muestran algunos ejemplos para describir el uso de pseudoelemento.

• ::before Pseudo-element: Se usa para agregar alguna propiedad CSS antes de un elemento cuando se llama a ese elemento.
• ::after Pseudo-element: Se usa para agregar alguna propiedad CSS después de un elemento cuando se llama a ese elemento.
• ::first-letter Pseudo-element: Se utiliza para realizar cambios en la primera letra de un elemento.
• ::Pseudo-elemento de primera línea: Se utiliza para realizar cambios en la primera línea de un elemento.

36. ¿Cómo podemos agregar gradientes en CSS?

Hay dos tipos de degradados:

1. Gradientes lineales: incluye las transiciones de color suaves para subir, bajar, izquierda, derecha y en diagonal. Se requiere un mínimo de dos colores para crear un degradado lineal. Pueden ser posibles más de dos elementos de color en degradados lineales. El punto de partida y la dirección son necesarios para el efecto degradado.

Sintaxis:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

2. Gradientes radiales CSS: un degradado radial difiere de un degradado lineal. Comienza en un solo punto y emana hacia afuera. De forma predeterminada, el primer color comienza en la posición central del elemento y luego se desvanece hasta el color final hacia el borde del elemento. El desvanecimiento ocurre a la misma velocidad hasta que se especifica.
Sintaxis:

background-image: radial-gradient(shape size at position, start-color, ..., l

37. ¿Podemos agregar transformaciones 2D a nuestro proyecto usando CSS?

Sí, podemos, una transformación modifica un elemento por su forma, tamaño y posición. Transforma los elementos a lo largo del eje X y el eje Y.
Hay seis tipos principales de transformaciones 2D que se enumeran a continuación:

• translate()
• girar()
• escala()
• sesgarX()
• sesgadoY()
• array()

38. ¿Podemos agregar transformaciones 3D a nuestro proyecto usando CSS?

Sí, permite cambiar elementos mediante transformaciones 3D. En la transformación 3D, los elementos se giran a lo largo del eje X, el eje Y y el eje Z.

Hay tres tipos principales de transformación que se enumeran a continuación:

• rotarX()
• rotarY()
• rotarZ()

39. ¿Qué son las transiciones CSS?

Las transiciones en CSS nos permiten controlar la forma en que se produce la transición entre los dos estados del elemento. 

La transición nos permite determinar cómo se produce el cambio de color. Podemos usar las transiciones para animar los cambios y hacer que los cambios sean visualmente atractivos para el usuario y, por lo tanto, brindar una mejor experiencia de usuario e interactividad. En este artículo, le mostraremos cómo animar la transición entre las propiedades CSS.

Hay cuatro propiedades CSS que debe usar, en su totalidad o en parte (al menos dos, la propiedad de transición y la duración de la transición, son imprescindibles), para animar la transición. Todas estas propiedades deben colocarse junto con otras propiedades CSS del estado inicial del elemento:

• propiedad de transición: esta propiedad le permite seleccionar las propiedades CSS que desea animar durante la transición (cambio).

Sintaxis:

transition-property: none | all | property | property1,
property2, ..., propertyN;

• transición-duración: esta propiedad le permite determinar cuánto tiempo llevará completar la transición de una propiedad CSS a la otra.

Sintaxis:

transition-duration: time;

Aquí, el tiempo puede estar en segundos o milisegundos (ms), debe usar ‘s’ o ‘ms’ después del número (sin comillas).

• transición-tiempo-función: Esta propiedad le permite determinar la velocidad de cambio y la forma de cambio, durante la transición. Por ejemplo, el cambio debe ser rápido al principio y lento al final, etc.

Sintaxis:

transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|
step-start|step-end;

• transición-retraso: esta propiedad le permite determinar la cantidad de tiempo de espera antes de que la transición realmente comience a tener lugar.

Sintaxis:

transition-delay: time;

Aquí, nuevamente, el tiempo puede estar en segundos o milisegundos (ms), y debe usar ‘s’ o ‘ms’ después del número (sin comillas).

• La propiedad abreviada Puede combinar las cuatro propiedades de transición mencionadas anteriormente en una sola propiedad abreviada, de acuerdo con la sintaxis que se proporciona a continuación. Esto nos ahorra escribir códigos largos y evita que nos ensuciemos. Tenga en cuenta el orden de propiedad, tiene importancia.

Sintaxis:

transition: (property name) | (duration) | (timing function) | (delay);

40. ¿Cómo podemos animar usando CSS?

CSS Animations es una técnica para cambiar la apariencia y el comportamiento de varios elementos en las páginas web. Se utiliza para controlar los elementos cambiando sus movimientos o visualización. Tiene dos partes, una que contiene las propiedades CSS que describen la animación de los elementos y la otra contiene ciertos fotogramas clave que indican las propiedades de animación del elemento y los intervalos de tiempo específicos en los que deben ocurrir.

La regla @keyframes: Los fotogramas clave son la base con la ayuda de la cual funciona CSS Animations. Definen la visualización de la animación en las etapas respectivas de toda su duración. Por ejemplo: en el siguiente código, el párrafo cambia de color con el tiempo. Al 0% de finalización es rojo, al 50% de finalización es de color naranja y al 100% de finalización es marrón.

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            #gfg { 
                animation-name: color; 
                animation-duration: 25s; 
                padding-top:30px; 
                padding-bottom:30px; 
                font-family:Times New Roman; 
            } 
            #geeks { 
                font-size: 40px; 
                text-align:center; 
                font-weight:bold; 
                color:#090; 
                padding-bottom:5px; 
            } 
            #geeks1 { 
                font-size:17px; 
                font-weight:bold; 
                text-align:center; 
            } 
            @keyframes color { 
                0% { 
                    background-color: red; 
                } 
                50% { 
                    background-color: orange; 
                } 
                100% { 
                    background-color: brown; 
                } 
            } 
        </style> 
    </head> 
    <body> 
        <div id = "gfg"> 
            <div id = "geeks">GeeksforGeeks</div> 
            <div id = "geeks1">A computer science portal for geeks</div> 
        </div> 
    </body> 
</html>                                                             

Producción:

41. ¿Qué hace la propiedad de tamaño de caja CSS?

La propiedad CSS de tamaño de cuadro define cómo el usuario debe calcular el ancho y el alto total de un elemento, es decir, el relleno y los bordes, si se incluirán o no.

Sintaxis:

box-sizing: content-box|border-box;

Valores de propiedad :

• cuadro de contenido: este es el valor predeterminado de la propiedad de tamaño de cuadro. En este modo, las propiedades de ancho y alto incluyen solo el contenido. El borde y el relleno no están incluidos, es decir, si establecemos el ancho de un elemento en 200 píxeles, el cuadro de contenido del elemento tendrá 200 píxeles de ancho y el ancho de cualquier borde o relleno se agregará al ancho renderizado final.
• cuadro de borde: en este modo, las propiedades de ancho y alto incluyen contenido, relleno y bordes, es decir, si establecemos el ancho de un elemento en 200 píxeles, esos 200 píxeles incluirán cualquier borde o relleno que hayamos agregado, y el cuadro de contenido se reducirá a absorber ese ancho extra. Por lo general, esto hace que sea mucho más fácil cambiar el tamaño de los elementos.

42. ¿Cómo podemos hacer que nuestro sitio web responda usando CSS?

La consulta de medios se utiliza para crear un diseño web receptivo. Significa que la vista de una página web difiere de un sistema a otro según la pantalla o los tipos de medios.

Las consultas de medios se pueden usar para verificar muchas cosas:

• ancho y alto de la ventana gráfica
• ancho y alto del dispositivo
• Orientación
• Resolución

Una consulta de medios consta de un tipo de medio que puede contener una o más expresiones que pueden ser verdaderas o falsas. El resultado de la consulta es verdadero si el medio especificado coincide con el tipo de dispositivo en el que se muestra el documento. Si la consulta de medios es verdadera, se aplica una hoja de estilo.

Sintaxis:

@media not | only mediatype and (expression) {
    // Code content
}

43. ¿Qué es CSS flexbox?

También se le llama modelo de caja flexible. Es básicamente un modelo de diseño que proporciona una forma fácil y limpia de organizar elementos dentro de un contenedor. Flexbox es diferente del modelo de bloque que tiene sesgo vertical y el en línea que tiene sesgo horizontal. Flexbox se creó para diseños a pequeña escala y hay otro estándar llamado cuadrículas que está más orientado a diseños a gran escala. Funciona de manera similar a como funciona el sistema de cuadrícula de arranque de Twitter. Flexbox es receptivo y compatible con dispositivos móviles. Para comenzar con flexbox, primero cree un contenedor flexible. Para crear un contenedor flexible, establezca la propiedad de visualización en flex.

Sintaxis:

.main-container {
    display: flex;
}

Propiedades flexibles:

• dirección de flexión
• envoltura flexible
• flujo flexible
• justificar-contenido
• alinear elementos
• alinear-contenido

44. ¿Qué es CSS Grid?

Es una propiedad de CSS que ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin flotadores ni posicionamiento.

Sintaxis:

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|
grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] 
grid-auto-rows / grid-template-columns|initial|inherit;

45. ¿Cuál es la diferencia entre flexbox y grid?

1. Dimensionalidad y Flexibilidad:

• Flexbox ofrece un mayor control sobre la alineación y la distribución del espacio entre los artículos. Al ser unidimensional, Flexbox solo se ocupa de columnas o filas.
• La cuadrícula tiene capacidades de diseño de dos dimensiones que permiten anchos flexibles como unidad de longitud. Esto compensa las limitaciones de Flex.

2. Alineación:

• Flex Direction permite a los desarrolladores alinear elementos vertical u horizontalmente, lo que se usa cuando los desarrolladores crean e invierten filas o columnas.
• CSS Grid implementa unidades de medida fraccionarias para la fluidez de la cuadrícula y la funcionalidad de palabras clave automáticas para ajustar columnas o filas automáticamente.

3. Gestión de artículos

• Flex Container es el elemento principal, mientras que Flex Item representa a los elementos secundarios. Flex Container puede garantizar una representación equilibrada ajustando las dimensiones de los elementos. Esto permite a los desarrolladores diseñar para tamaños de pantalla fluctuantes.
• Grid admite la colocación de contenido tanto implícito como explícito. Su automatización incorporada le permite extender automáticamente elementos de línea y copiar valores en la nueva creación desde el elemento anterior.

46. ​​¿Cuál es la mejor manera de incluir un archivo CSS? ¿Por qué usar @importar?

La hoja de estilo externa (usando la etiqueta HTML <link>) es el mejor método que se usa para vincular el elemento. Mantener y reutilizar el archivo CSS en diferentes páginas es fácil y eficiente. La etiqueta <link> se coloca en el elemento HTML <head>. Para especificar un tipo de medio = «texto/css» para un atributo de hoja de estilo en cascada <tipo> que se utiliza para ignorar los tipos de hoja de estilo que no son compatibles con un navegador.

Regla @import: la regla @import se usa para importar una hoja de estilo a otra hoja de estilo. Esta regla también admite consultas de medios para que el usuario pueda importar la hoja de estilo dependiente de los medios. La regla @import debe declararse en la parte superior del documento después de cualquier declaración @charset.

Características de @import:

• La regla @import se utiliza para importar una hoja de estilo a una página HTML oa otra hoja de estilo.
• La regla at @import también se usa para agregar consultas de medios, por lo tanto, la importación depende de los medios.
• Siempre debe declararse en la parte superior del documento.

Sintaxis:

@import url|string list-of-mediaqueries;

47. ¿Cuán sensible a mayúsculas y minúsculas es CSS?

Todas las hojas de estilo CSS no distinguen entre mayúsculas y minúsculas, excepto las partes que no están bajo el control de CSS. Por ejemplo, la distinción entre mayúsculas y minúsculas debido a los valores de los atributos HTML «id» y «clase», nombres de fuente y URI se encuentra fuera del alcance de esta especificación. 

48. ¿Qué permite CSS Animations?

CSS permite la animación de elementos HTML sin usar JavaScript. Una animación permite que un elemento cambie sistemáticamente y con el tiempo adecuado de un estilo a otro. Puede cambiar las propiedades de CSS que desee y finalizar el número de veces que desee. Para usar la animación CSS, primero debe especificar algunos @keyframes para la animación. @keyframes describirá qué estilos tendrá ese elemento en momentos específicos. Usaremos un ejemplo básico como la animación de la carga de una batería.

La propiedad @keyframes tiene la opción de dividir el tiempo de animación en partes/porcentajes y realizar una actividad que se especifica para esa parte de la duración total de la animación. La propiedad @keyframes se otorga a cada animación según el nombre de esa animación. También te permite ejecutar la animación infinitamente.

49. ¿Para qué se usa @keframes?

Los fotogramas clave son los cimientos con la ayuda de los cuales funciona CSS Animations. Definen la visualización de la animación en las etapas respectivas de toda su duración. Por ejemplo: en el siguiente código, el párrafo cambia de color con el tiempo. Al 0% de finalización es rojo, al 50% de finalización es de color naranja y al 100% de finalización es marrón.

Ejemplo:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        div { 
            width: 200px; 
            height: 200px; 
            margin: 200px; 
            border-radius: 100px; 
            background-color: red; 
            animation: circle 8s infinite; 
        } 
  
        @keyframes circle { 
            0% { 
                background-color: red; 
            } 
  
            25% { 
                background-color: yellow; 
            } 
  
            50% { 
                background-color: blue; 
            } 
  
            100% { 
                background-color: green; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <div></div> 
</body> 
  
</html> 

Producción:

50. ¿Qué son los contadores CSS?

Los contadores en CSS son básicamente variables que se pueden usar para numerar y los valores de los contadores CSS se pueden incrementar mediante reglas CSS. Por ejemplo, los contadores CSS se pueden usar para incrementar la numeración de los encabezados automáticamente. En HTML, la etiqueta <ol> se usa para dar los números ordenados a los elementos de la lista, pero CSS contiene un contador para dar los elementos de orden de alguna otra manera.

Propiedades de los contadores CSS : Los contadores CSS contienen las siguientes propiedades:

• counter-reset: Se utiliza para poner a cero un contador.
• counter-increment: Básicamente incrementa el valor de un contador.
• contenido: Se utiliza para generar contenido.
• Función counter() o counters(): el valor de un contador se puede mostrar usando la función counter() o counters() en una propiedad de contenido. Estas dos funciones básicamente se utilizan para agregar el valor de un contador al elemento.

Inicialización del contador CSS: Para usar la propiedad del contador CSS, primero debe crearse con la propiedad counter-reset y el primer paso es restablecer el contador. El contador se inicializa de forma predeterminada en un valor 0 (cero) con la propiedad de restablecimiento del contador.

Sintaxis:

counter-reset: myCounter;

Incremento y uso del contador de CSS: para incrementar el contador, utilice la propiedad de incremento de contador de CSS.

Sintaxis:

counter-increment: myCounter;

La función contador() o contadores() en el contenido se utiliza para mostrar el contenido en un orden particular.

Sintaxis:

content: counter(myCounter);

51. ¿Qué se entiende por selector universal?

El selector * en CSS se usa para seleccionar todos los elementos en un documento HTML. También selecciona todos los elementos que están dentro de otro elemento. También se le llama el selector universal.

Sintaxis:

* {
    // CSS property
} 

52. ¿Qué es RWD?

El diseño web receptivo comprende dos palabras, es decir, receptivo y diseño web. Responsive significa responder y diseño web significa diseñar un sitio web. Por lo tanto, el diseño web receptivo generalmente significa el sitio web que responde, cambia de tamaño o se ajusta según el tamaño de la pantalla a través de la que se ve. Se ajusta automáticamente para adaptarse a la pantalla del usuario, ya sea de escritorio, portátil, móvil, tableta, etc. Solo usa un diseño para una página web y se puede hacer usando CSS y HTML o CSS3 y HTML5.  

53. ¿Cuál es la diferencia entre selector de clase e id?

Selector de identificación («#»): el selector de identificación selecciona el atributo de identificación de un elemento HTML para seleccionar un elemento específico. Una identificación siempre es única dentro de la página, por lo que se elige para seleccionar un elemento único y único. Se escribe con el carácter hash (#), seguido del id del elemento.

• Sintaxis:

#element_id_name{
    // CSS properties
}

Selector de clase («.»): El selector de clase selecciona elementos HTML con un atributo de clase específico. Se utiliza con un carácter de punto “.” (símbolo de punto) seguido del nombre de la clase.

• Sintaxis:

.element_class_name{
    // CSS properties
}

Diferencia entre los selectores de clase («.») e id («#»):

54. ¿Cómo podemos usar la paginación en CSS?

La paginación es el proceso de dividir el documento en páginas y proporcionarles números.

Tipos de paginación: Hay muchos tipos de paginación en CSS. Algunos de ellos se dan a continuación:

1. Paginación simple
2. Paginación activa y desplazable
3. Botones activos y flotantes redondeados
4. Efecto de transición flotante
5. Paginación bordeada
6. Paginación de borde redondeado
7. Paginación centrada
8. Espacio entre paginación
9. Tamaño de paginación

Paginación simple: Esta es la forma básica de paginación.

Sintaxis:

.pagination {
    display:type
}
.pagination body {
    color:colorname
    decoration:type
}

55. ¿Qué es el reflejo de la imagen CSS?

La propiedad box-reflect se utiliza para crear un reflejo de imagen.

Atributos:

• abajo: para crear un reflejo debajo de la imagen original
• arriba: para crear un reflejo sobre la imagen original
• izquierda: para crear un reflejo en el lado izquierdo de la imagen original
• derecha: para crear un reflejo en el lado derecho de la imagen original

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <style>
        img {
            -webkit-box-reflect: right;
        }
    </style>
</head>
  
<body>
    <h1>CSS Image Reflection</h1>
    <p>Shows the reflection of the image on right side:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210322123023/gfg2.png">
</body>
  
</html>

Producción:

56. ¿Cómo podemos crear varias columnas de periódicos con formato de texto usando CSS?

Las columnas múltiples se utilizan para crear diseños de columnas en las páginas web. Hay muchas propiedades de columna en CSS que se enumeran a continuación: 

• recuento de columnas
• espacio entre columnas
• estilo de regla de columna
• columna-regla-ancho
• columna-regla-color
• regla de columna
• vano de columna
• ancho de columna

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>Column-count property</title>
        <style>
        .geeks_content {
            -webkit-column-count: 3;
            -moz-column-count: 3;
            column-count: 3;
            padding-top:35px;
            text-align:justify;
        }
        .gfg {
            text-align:center;
            font-size:40px;
            font-weight:bold;
            color:green;
        }
        .geeks {
            text-align:center;
        }
        </style>
    </head>
    <body>
        <div class="gfg">GeeksforGeeks</div>
        <div class = "geeks">A computer science portal for geeks</div>
        <div class="geeks_content">
            Sudo Placement: Prepare for the Recruitment
            drive of product based companies like Microsoft,
            Amazon, Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to be
            asked in the interviews & make your upcoming 
            placement season efficient and successful. 
            Placement preparation solely depends on the
            company for which you are preparing. There 
            are basically three different categories 
            into which we can divide the companies visiting 
            campuses for placements based on their recruitment 
            process. Mass Recruiters, Tech Giants, Others / Start-ups
            Companies belonging to the above categories have 
            their own recruitment process. In this course, we
            will try to cover every possible detail required
            to know for cracking interview of the companies 
            falling in each of the above categories.
        </div>
    </body>
</html>                 

Producción:

57. ¿Cómo podemos dar un efecto de sombra a nuestro texto en CSS?

El enfoque de este artículo es agregar una sombra usando la propiedad text-shadow en CSS. Esta propiedad acepta una lista de sombras separadas por comas que se aplicarán al texto. El valor predeterminado de la propiedad text-shadow es «ninguno».

Sintaxis:

text-shadow: h-shadow v-shadow blur-radius color|none|initial|

58. ¿Qué es importante?

La propiedad !important en CSS se usa para proporcionar más peso (importancia) que la propiedad normal. En CSS, !important significa que “esto es importante”, ignora todas las reglas posteriores y aplica !important rule y la palabra clave !important debe colocarse al final de la línea, inmediatamente antes del punto y coma.

• En otras palabras, agrega importancia a todas las subpropiedades que representa la propiedad abreviada.
• En el uso normal, una regla definida en una hoja de estilo externa que es anulada por un estilo definido en el encabezado del documento, que a su vez, es anulado por un estilo en línea dentro del propio elemento (suponiendo la misma especificidad de los selectores).
• Definición de una regla con el atributo !important que descarta las preocupaciones normales con respecto a la regla posterior que anula las anteriores.
• Por lo tanto, se usa para anular los estilos que se declararon previamente en otras fuentes de estilo, para lograr un diseño determinado.

Sintaxis:

element {
    color: blue  !important;
    font-size: 14px !important; 
    ...
}

59. ¿Qué es la especificidad en CSS?

Cuando se aplica más de un conjunto de reglas CSS al mismo elemento, el navegador tendrá que decidir qué conjunto específico se aplicará al elemento. Las reglas que sigue el navegador se denominan colectivamente Especificidad

Las reglas de especificidad incluyen:

• El estilo CSS aplicado al hacer referencia a una hoja de estilo externa tiene la prioridad más baja y se reemplaza por CSS interno y en línea.
• El CSS interno se anula con el CSS en línea.
• El CSS en línea tiene la prioridad más alta y anula todos los demás selectores.

Jerarquía de Especificidad: Cada selector de elemento tiene una posición en la Jerarquía.

1. Estilo en línea: el estilo en línea tiene la máxima prioridad.
2. Identificadores (ID): ID tiene la segunda prioridad más alta.
3. Clases, pseudoclases y atributos: las clases, pseudoclases y atributos han venido después.
4. Elementos y pseudoelementos: Los elementos y pseudoelementos tienen la prioridad más baja.

60. ¿Qué son los selectores de atributos?

El selector de atributos CSS se utiliza para seleccionar un elemento con algún atributo o valor de atributo específico. Es una excelente manera de diseñar los elementos HTML agrupándolos en función de algunos atributos específicos y el selector de atributos seleccionará aquellos elementos con atributos similares.
Hay varios tipos de selectores de atributos que se analizan a continuación:

• Selector [atributo]: este tipo de selector de atributo se utiliza para seleccionar todos los elementos que tienen el atributo especificado y aplica la propiedad CSS a ese atributo. Por ejemplo, el selector [clase] seleccionará todos los elementos con el atributo de estilo.
• [atributo = “valor”] Selector: Este selector se utiliza para seleccionar todos los elementos cuyo atributo tiene el valor exactamente igual al valor especificado.
• Selector [atributo~=”valor”]: Este selector se utiliza para seleccionar todos los elementos cuyo valor de atributo es una lista de valores separados por espacios, uno de los cuales es exactamente igual al valor especificado.
• Selector [atributo|=”valor”]: Este selector se utiliza para seleccionar todos los elementos cuyo atributo tiene una lista de valores separados por guiones que comienzan con el valor especificado. El valor tiene que ser una palabra completa sola o seguida de un guión.
• Selector [attribute^=”value”]: Este selector se utiliza para seleccionar todos los elementos cuyo valor de atributo comienza con el valor especificado. El valor no necesita ser una palabra completa.
• Selector [attribute$=”value”]: Este selector se utiliza para seleccionar todos los elementos cuyo valor de atributo termina con el valor especificado. El valor no necesita ser una palabra completa.
• Selector [atributo*=”valor”]: Este selector selecciona todos los elementos cuyo valor de atributo contiene el valor especificado presente en cualquier lugar. El valor no necesita ser una palabra completa.