CSS

Question 1

Preprocesadores de CSS

Answer 1

herramientas que te permiten escribir código CSS de una manera más organizada, eficiente y potente. Extienden las capacidades del CSS estándar, añadiendo características como variables, funciones, mixins y anidamiento.
Ejemplos: .scss (Sass), .less (Less) o .styl (Stylus), PostCSS

Question 2

Compilador

Answer 2

Toma código fuente escrito en un lenguaje de alto nivel y lo traduce directamente a código máquina, que es el lenguaje que entiende la computadora. Traduce de alto nivel a bajo nivel.

Question 3

Transpilador

Answer 3

Traduce código fuente de un lenguaje de alto nivel a otro lenguaje de alto nivel. Traduce de alto nivel a otro alto nivel.

Question 4

Descompilador

Answer 4

Toma un archivo ejecutable (código máquina) y trata de reconstruir el código fuente original en un lenguaje de alto nivel

Question 5

Mixin

Answer 5

es como una “función” en CSS que te permite agrupar un conjunto de propiedades CSS y luego reutilizarlas en diferentes selectores

Question 6

Framework CSS

Answer 6

es como una caja de herramientas preconstruida que te ofrece una serie de estilos y componentes listos para usar en tus proyectos web
Ejemplos: Bootstrap, Tailwind CSS, Foundation, Bulma, Materialize

Question 7

Selectores CSS

Answer 7

son como punteros que utilizamos para apuntar a elementos específicos dentro de nuestro código HTML y aplicarles estilos. (permiten definir qué elementos de nuestra página web van a tener un determinado estilo)

Question 8

Selectores CSS por etiqueta

Answer 8

Tag {……} selecciona todas las etiquetas iguales

Question 9

Selectores CSS por #Id

Answer 9

id{…….} selecciona todos los elementos con ese id

Question 10

Selectores CSS por Clase

Answer 10

.clase{……} / tag.clase{……} selecciona todos esos elementos con esa clase

Question 11

Selectores CSS Combinadores

Answer 11

> (descendiente directo): Selecciona elementos que son hijos directos de otro elemento
~ (hermano general): Selecciona todos los hermanos siguientes del elemento especificado.
hermano adyacente
hijo directo

Question 12

Selectores CSS de Atributo

Answer 12

Permiten seleccionar elementos en función de la presencia o el valor de sus atributos (id, class, href, title, type, etc.).

Question 13

Selectores CSS de pseudo-clases

Answer 13

Se utilizan para definir el estado especial de un elemento
:hover: Cuando el cursor está sobre el elemento.
:active: Mientras el elemento está siendo pulsado.
:focus: Cuando el elemento tiene el foco (clic en un input).
:visited: Enlaces que el usuario ya ha visitado
:first-child / :last-child: Primer o último hijo de su padre.
:nth-child(n): Selecciona el hijo número “n”.
:not(selector): Selecciona lo que no coincide con el paréntesis.
:only-child: Selecciona un elemento solo si es el único hijo de su padre.

Question 14

Selectores CSS de pseudo-elementos

Answer 14

Se utilizan para dar estilo a partes específicas de un elemento
::first-letter: Da estilo a la primera letra (útil para letras capitulares).
::first-line: Da estilo a la primera línea de un texto.
::selection: Cambia el aspecto del texto cuando el usuario lo subraya con el ratón.
::before y ::after: Permiten insertar contenido antes o después del contenido del elemento mediante la propiedad CSS content. Son muy usados para iconos o decoraciones.

Question 15

Pseudo-clases

Answer 15

Son palabras clave que se añaden a los selectores CSS para seleccionar elementos basados en su estado o en su relación con otros elementos

Question 16

Pseudo-elementos

Answer 16

permiten seleccionar y estilizar partes específicas de un elemento, como la primera línea, el primer carácter o antes o después del contenido.

Question 17

La Cascada (El algoritmo de decisión)

Answer 17

es el proceso por el cual el navegador combina diferentes hojas de estilo y resuelve conflictos entre reglas que apuntan al mismo elemento según la siguiente prioridad:
1-Importancia: Se comprueba si existe la declaración !important.
2-Origen: (1º Estilos del autor, 2º Estilos del usuario, 3º Estilos del navegador).
3-Especificidad: Se calcula el “peso” de los selectores.
4-Orden de aparición: Si todo lo anterior coincide, el último estilo definido en el código es el que gana.