WEB-CSS3

Question 1

¿De qué se trata y que hace el siguiente código?

a:hover {
background: red;
color: white;
text-decoration: none;
}

Answer 1

Es una pseudo-clase, porque va con “:”. Lo que está haciendo, es que al pasar el ratón por encima de ese ancla de referencia (a), está aplicando que el fondo lo ponga en rojo, el color de las letras sea blanco y con text-decoration está quitando el subrayado que hay por defecto en los anclas de referencia.

Question 2

Ejemplos de pseudo-clases

Answer 2

• :hover ( estilizar para cuando pase por encima del elemento con el cursor del ratón)
• :active (estilizar para cuando esté en estado de “activo”)
• :focus (de manera natural el navegador resalta el cuadro de texto, etc)
• :required (estilizar para indicar que es obligatorio)
• :first-child (selecciona el primer hijo del elemento)
• :nth-child () (selecciona el elemento hijo correspondiente a la posición que se indique en el paréntesis)
• :root (selecciona el elemento raíz, que normalmente es la etiqueta html y tiene más especificidad que ella de tal forma que se pueden definir detalles de toda la página)
• :lang() (selecciona párrafos en función del atributo “lang” del idioma)
• :not(selector) (selecciona los elementos que no coinciden con el elemento o selector indicado en el paréntesis)
• :has(selector) (selecciona el elemento padre del elemento o selector indicado en el paréntesis)

Question 3

Ejemplos de pseudo-elementos

Answer 3

• ::after
• ::before
  (añadir por CSS información antes o después de un elemento)
• ::first-line
• ::first-letter
  (primera línea o primera letra dentro de un párrafo, por ejemplo)

Question 4

¿Qué diferencia hay entre display:none y visibility:hidden?

Answer 4

• display:none (no renderiza ni el hueco)
• visibility:hidden (el contenido lo quita, y por lo tanto, no lo renderiza, pero el hueco sí
• atributo booleano “hidden”: no deja ni el contenido, ni el hueco, como display:none

Question 5

Diferencias entre display:inline, display:block y display:inline-block

Answer 5

• display:inline (elementos en horizontal si se puede)
• display:block (elementos uno debajo del otro)
• display:inline-block (en filas y columnas)

Question 6

Propiedades de posición

Answer 6

• position: static; (por defecto, no hace nada)
• position: relative; (posición relativa a la que debería ocupar en el flujo normal que marca el navegador)
• position: absolute; (posición absoluta respecto al contenedor padre o en su caso del documento)
• position fixed; (en base al documento)
• position sticky; (estilo para que los botones del menú se queden fijos en la parte del navegador cuando hacemos scroll)

Question 7

¿Con qué propiedad se puede dar de alta fuentes de tamaño?

Answer 7

Con @font-face

Question 8

Unidades absolutas en fuentes

Answer 8

• in (pulgadas)
• cm (centímetros)
• px (pixel)
• pc (picas)
• pt (puntos)
• Q (cuarto de mm)
• mm (milímetro)
• cm (centímetro)

Question 9

Unidades relativas en tamaños de fuentes

Answer 9

• rem (relativo a la raíz, que es el html)
• em (tamaño relativo al padre)
• % (porcentaje)
• ch y ex (son unidades de medida relativas en CSS basadas en la tipografía del elemento. ch se define por el ancho del carácter ‘0’ (cero) en la fuente del elemento, mientras que ex se define por la altura de la letra ‘x’ minúscula)

Question 10

Unidades relativas al Viewport. Unidades para el mundo responsive.

Answer 10

Viewport es la zona util del navegador, dando igual el tamaño del dispositivo que se está usando.
- vw (viewport width)
- vh (viewport height)
- vmax
- vmin

Question 11

Cabecera para decirle al navegador, que todas las reglas de @media queries que pongamos sean relativas al viewport

Answer 11

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

Question 12

¿Qué propiedades se heredan de padres a hijos por defecto?

Answer 12

Color, font, text- y line-height

Question 13

¿Que valor habría que darle a una propiedad CSS para hacer que un hijo herede una propiedad de su padre que no se hereda por defecto?

Answer 13

inherit

Ejemplo:

p{
background:inherit;
}

Question 14

Formatos conocidos que son soportados por los navegadores

Answer 14

• WOFF
• OTF
• TTF
• Ficheros que se enlazan dentro de @font-face para mayor compatibilidad. Ejemplo:
  src :
  url(‘mi-fuente.woff2’); format(‘woff2’)
  url(‘mi-fuente.woff’); format(‘woff’)
  url(‘mi-fuente.OTF’); format(‘opentype’)
  url(‘mi-fuente.TTF’); format(‘truetype’)

Question 15

¿Qué elementos son llamados at-rules (declaraciones CSS)?

Answer 15

• @charset (definir conjunto de caracteres usados en la hoja de estilos)
• @import (indica al motor CSS que oernuta incluir una hoja de estilos externa en la nuestra)
• @media (mediante media query para aplicar determinadas reglas si el dispositivo cumple los criterios definidos, es decir, permite aplicar estilos CSS cuando se cumplen ciertas condiciones)
• @font-face (para instalar nuevos formatos de fuente, es decir, permite importar y usar fuentes tipográficas personalizadas que no están instaladas en el ordenador del usuario)
• @page (para establecer estilos cuando queremos imprimir una página, es decir personalizar el aspecto de las páginas cuando se van a imprimir o generar en un formato paginado)

Question 16

¿Cual es el orden de prioridades dentro de la importancia?

Answer 16

1. User !important declaration
2. Author !importan declaration
3. Autor declaración
4. Usuario declaración
5. Navegador declaración por defecto

Question 17

Si el autor de una página ha puesto en una etiqueta <p> un atributo style definiendo el color azul para esa etiqueta, y al principio del documento consta una etiqueta style en la que define que las etiquetas <p> tengan el color rojo. ¿Qué prevalecerá en ese conflicto?

Answer 17

En la etiqueta <p> en la cual ha indicado el color azul dentro del atributo style, dado que tiene más especificidad

Question 18

¿Qué estilo tiene más prioridad? ¿El que está en un documento externo o el que está en el mismo documento?

Answer 18

Según el orden. El que aparece después en el documento. Si la declaración link rel… está después de la etiqueta style, tendría más prioridad lo definido en el documento externo

Question 19

Si definimos:
margin: 10px 15 px 10 px 15 px

¿A qué pertenece cada valor?

Answer 19

T R B L. (trébol)
Top Right Bottom Left

Vale tanto para margin como para padding

Question 20

¿De qué otra forma se puede especificar lo siguiente?

border-width: 2px;
border-color: red;
border-style: solid;

Answer 20

border: 2px red solid;

Question 21

Qué tipo de selector es #1234

Answer 21

Es un selector de identificador

id=”identificador”

Question 22

Qué tipo de selector es p {}

Answer 22

Se refiere a la etiqueta <p>

Question 23

Que tipo de selector es .equipo {}

Answer 23

Se refiere a una clase definida llamada equipo

<H1 class=”equipo”>

Question 24

Para aplicar una clase de estilo referida sólo a una etiqueta, ¿Como se indicaría?

Answer 24

nombreetiqueta.clase {}

Question 25

¿A cual de estos dos selectores de etiqueta se aplicarían las propiedades? etiqueta1, etiqueta2 {}

Answer 25

A ambos por separado. Es como poner: etiqueta1 {} etiqueta2 {}

Question 26

¿A cual selector de etiqueta se aplicarán las propiedades? etiqueta1 etiqueta2 {}

Answer 26

A la etiqueta 2 que esté dentro de la etiqueta 1 (que sea hija de 1)

Question 27

¿A cual selector de etiqueta se aplicarán los cambios? etiqueta1 > etiqueta2 {}

Answer 27

A la etiqueta 2 que sea hijo directo de la etiqueta 1, pero a ese nivel

Question 28

A cual se aplican las propiedades a ~ b {}

Answer 28

Se aplica a B si es hermano de A

Question 29

A cual se aplican las propiedades a + b {}

Answer 29

Aplica a B si es hermano directo de A (si no hay nada entre medias y son hermanos)

Question 30

Procesadores CSS

Answer 30

LESS, SASS, STYLUS

Question 31

Frameworks CSS. ¿En que consisten?

Answer 31

Bootstrap, Fundation, Bulma, Materialize y Tailwind Un framework es un conjunto de clases ya definidas

Question 32

En qué consiste el concepto DRY

Answer 32

0El concepto DRY, que significa Don't Repeat Yourself ("No te repitas"), es un principio de programación que busca evitar la duplicación de código. Por ello existen preprocesadores CSS.

Question 33

¿Qué es un preprocesador CSS?

Answer 33

Los preprocesadores CSS sirven para simplificar y optimizar el desarrollo de hojas de estilo, ya que añaden funcionalidades que no tiene CSS puro, como variables, funciones (mixins), anidamiento de selectores y la posibilidad de modularizar el código. Estos programas se ejecutan antes de que el navegador interprete el CSS, transformando su sintaxis propia a un archivo CSS estándar para que los navegadores puedan leerlo

Question 34

Qué significa document.querySelector (…)

Answer 34

Método de JavaScript que encuentra el primer elemento en un documento HTML que coincide con un selector CSS especificado, como un ID, una clase o una etiqueta Por ejemplo, document.querySelector('#miId') para seleccionar un elemento con el ID miId o document.querySelector('.miClase') para seleccionar el primer elemento con la clase miClase

Question 35

Que hace el selector E[atr~="valor"]

Answer 35

El selector [atributo~="valor"] en CSS selecciona elementos cuyo atributo contiene una lista de palabras separadas por espacios, y donde uno de esos valores es exactamente "valor"

Question 36

Que hace el selector E[atr*="valor"]

Answer 36

El selector [atributo*=valor] en CSS selecciona todos los elementos que tienen un atributo cuyo valor contiene la cadena de texto valor en cualquier parte

Question 37

Que hace el selector E[atr^="valor"]

Answer 37

El selector [atr^="val1"] en CSS selecciona elementos que tienen un atributo atr cuyo valor comienza con val1.

Question 38

Que hace el selector E[atr$="valor"]

Answer 38

El selector [attr$=val] en CSS selecciona elementos que tienen un atributo attr cuyo valor termina con val.

Question 39

Que hace el selector E[atr]

Answer 39

El selector E[atr] en CSS se utiliza para seleccionar todos los elementos E que tienen un atributo atr.

Question 40

Qué hace la pseudoclase :invalid

Answer 40

- :invalid (Permite aplicar estilos a campos de entrada (como <[](http://)input[](http://)>, <[](http://)select[](http://)> o <[](http://)textarea[](http://)>) que contienen datos incorrectos, como un correo electrónico sin formato de "@" o un campo obligatorio que no se ha rellenado. )

Question 41

Qué hace la pseudoclase :empty

Answer 41

- :empty (aplica estilos a elementos que no contienen nada)

Question 42

Qué hace la pseudoclase :nth-child

Answer 42

- :nth-clild (se utiliza para seleccionar elementos en función de su posición entre sus hermanos)

Question 43

Qué hace la pseudoclase :not

Answer 43

- :not (selector) = herramienta de negación que selecciona todos los elementos que no coinciden con un selector especificado dentro de sus paréntesis, ej: a:not(title) quiere decir que selecciona a los elementos "a" que no tengan el atributo title

Question 44

Qué hace la pseudoclase :has

Answer 44

- :has (selector) = permite estilizar el elemento padre si este contiene un selector específico dentro de sus argumentos

Question 45

Qué hace la pseudoclase :lang

Answer 45

- :lang() = identifica y estiliza elementos en función del idioma en el que se encuentran

Question 46

Qué hace la pseudoclase :root

Answer 46

- :root = selecciona el elemento raíz de un documento, que en HTML es . Se utiliza principalmente para definir variables CSS (propiedades personalizadas) con alcance global, lo que permite que sean accesibles en todo el documento

Question 47

Qué hace la pseudoclase :focus

Answer 47

- :focus = Se utiliza para cambiar la apariencia de un elemento cuando está activo y listo para recibir una entrada del usuario, cuando tiene el foco (de por sí, de manera natural, el navegador ya resalta el cuadro de texto al pulsar)

Question 48

¿Qué son las at-rules?

Answer 48

Las at-rules son instrucciones o declaraciones de CSS que comienzan con el símbolo @ y controlan el comportamiento de la hoja de estilos o definen metadatos, en lugar de aplicar estilos directamente a los elementos HTML.

Question 49

Diferencia entre pseudoclase y pseudoelemento

Answer 49

Las pseudoclases seleccionan elementos basándose en su estado (como :hover o :focus), mientras que los pseudoelementos seleccionan y estilizan partes específicas de un elemento que no existen en el HTML, como la primera letra de un párrafo o contenido que se añade antes o después de un elemento (::before, ::after). Por lo tanto, la diferencia principal radica en que las pseudoclases se refieren a estados, y los pseudoelementos a partes.

Question 50

¿Cómo se podría indicar que la primera letra de los párrafos debe de ser mayúscula?

Answer 50

- En primer lugar, con el pseudoelemento ::first-letter, por ejemplo, p::first-letter{text-transform: uppercase} Uppercase se refiere a todas las letras de una palabra en mayúscula, pero con el pseudoelemento ::first-letter estamos diciendo que lo haga en la primera letra dentro de los párrafos - También se podría sin pseudoelementos, con p{text-transform: capitalize} Capitalize se refiere a la primera letra en mayúsculas de una palabra.

Question 51

Diferencia entre transpilador y compilador

Answer 51

- Transpilador : programa que traduce código fuente en código fuente - Compilador : programa que traduce código fuente en código binario (lenguaje máquina)

Question 52

Comando para traducir un fichero LESS (preprocesador) en CSS

Answer 52

El comando se llama lessc (la c es de compilador, aunque lo más correcto sería decir transpilador, dado que no traduce a lenguaje máquina)

Question 53

Nombrar otro preprocesador a parte de LESS, SASS y STYLUS

Answer 53

POSTCSS

Question 54

Diferencia entre Display y Position

Answer 54

La principal diferencia es que display controla el comportamiento básico de un elemento (si es de bloque, en línea, etc.) y su flujo dentro del diseño general, mientras que position modifica cómo se ubica un elemento en relación con su posición por defecto o con su contenedor. En resumen: display afecta qué tipo de elemento es, mientras que position afecta dónde está, alterando su lugar en el flujo normal o sacándolo de él.

Question 55

¿Se puede asignar dos clases de estilos diferentes a un cierto elemento?

Answer 55

Sí. Ejemplo: <[](http://)p class="importante (una clase) noticias (otra clase)[](http://)> texto <[](http://)/p[](http://)> (separadas por espacio)

Question 56

Propiedades para tamaños de fuentes

Answer 56

- font-size: - font-family: - font-style: - font-weight: Por ejemplo, dentro de una declaración o at rule @font-face: @font-face { para instalar tipografías font-size: 1.5em; font-family: ”…”; font-style: normal; font-weight: 400; se refiere al grosor src: local (…) url(…) }

Question 57

Propiedades para textos

Answer 57

- letter-spacing: - text-indent: - line-height: - hyphens: - word-break: - text-align: - text-overflow: - text-transform: - text-decoration:

Question 58

Funciones

Answer 58

* max * calc * round * log * exp * clamp

Question 59

Ejemplo de uso de variables

Answer 59

* Declaración :root { --gris-corporativo: rgb(125 80 10); } * Uso p { color:var(--gris-corporativo) }