Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

DP_TAI COPY 4 > b3t8 - CSS3 > Flashcards

b3t8 - CSS3 Flashcards

1
Q

Cuándo se espera la versión CSS4? Por qué?

A

No se espera, ya que CSS se evoluciona desde la versión 3 mediante la adición de nuevos modules

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Qué modelos de colocación se incluyen en CSS3?

A

FlexBox y Grid

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Cómo se activa el modelo de caja flexible en CSS3?

A

Con la propiedad “display: flex” del contenedor

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Qué properties principales se usan en flexbox?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Cómo se amplía la funcionalidad de CSS3?

A

Mediante la creación de nuevos modules, tematizados, que a su vez tienen versiones

css3-color
selectors-3
selectors-4
…

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

En CSS2, cómo es el modelo de posicionamiento?

A

Absoluto, relativo …

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

En qué versión de CSS se incluyen las capas y cómo se llama la propiedad para controlarlas

A

En CSS2, con la propiedad z-index

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Cuál es el mime type de css?

A

text/css

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Qué 3 principales preprocesadores CSS se usan? Qué son y para qué sirven

A

LESS ( Leaner Style Sheets)
SASS (Syntactically Awesome Style Sheets)
STYLUS

PostCSS

Son otro lenguaje que añade nuevas funcionalidades que no tiene CSS, como variables, bucles, anidamientos, mixins, extends … y sirven para desarrollar CSS de forma más sencilla. Requieren luego pasarles un proceso para convertir el documento del preprocesador a uno CSS

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Cuál es la extensión de un archivo de lenguaje SASS

A

SCSS

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Qué es Chocolatey? Y Brew?

A

Chocolatey: Es un gestor de paquetes para windows
Brew: Es un gestor de paquetes para mac y linux

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Para qué sirve el concepto de mixin de los preprocesadores CSS?

A

Sirve para crear “macros” o plantillas, a las que le puedes pasar parámetros para aplicar esa plantilla o macro pero con diferencias. Por ejemplo para crear el mixin “card” a la que le pasas parámetros de ancho, color, borde, … y que luego puedes aplicar a selectores por ejemplo.
En LESS o SASS o similar, se usan los mixin con “@include [nombremixin] (parametros)”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Qué hace la sentencia “lessc styles.less styles.css”

A

Compila un fichero del preprocesador less a un fichero css

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Qué 4 principales frameworks de CSS3 existen?

A

Bootstrap
Foundation
Bulma
Materialize

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

En Bootstrap, qué breakingpoints o prefijos para construir elementos responsive¿

A

(ninguno) : X-small
sm: small
md: medium
lg: large
xl: xtra large
xxl: extra extra large

Por ejemplo “container-md” para aplicar esta clase a un elemento html

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Qué tres formas hay de dar estilos a una página html con CSS?

A
  • Externo: definir un fichero css y relacionarlo en la página html con
  • Interno: dentro del nodo head de un html, incluir el nodo y dentro definir los estilos css
  • local: dentro de un elemento de html, incluir el atributo “style”
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Qué tres tipos de selectores donde se especifican varias etiquetas hay?

A
  1. Agrupamiento: Para poner selectores independientes-→ p, div, i{…}
  2. Contextuales: Para aplicar a etiquetas que están dentro de otras etiquetas a cualquier nivel de profundidad -→ div p {…}. Aquí se aplica a los p que están dentro de div aunque haya hijos intermedios
  3. Hijos directos Para aplicar a etiquetas que están dentro de otras etiquetas directamente-→ div > p {…}. Aquí se aplica a los p que están dentro de div, pero solo si es un hijo directo
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Qué 5 selectores básicos hay para aplicar estilos a un elemento

A
  • * { propiedad: valor; propiedad:valor;} → Aplica a todos los elementos
  • etiqueta { propiedad: valor; propiedad:valor;} → Aplica a ese tipo de etiqueta
  • # identificador { propiedad: valor; propiedad:valor;} → Aplica al elemento con ese id
  • .clase { propiedad: valor; propiedad:valor;} → Aplica a cualquier etiqueta que aplique esa clase
  • etiqueta.clase { propiedad: valor; propiedad:valor;} →Aplica a las etiquetas de ese tipo, que apliquen esa clase
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Qué significa este selector?
a ~ b

y este?

a + b

A

a ~ b: aplica el estilo a b, siempre que sea hermano, directo o no, de a, y además b esté DESPUÉS de a

a + b: aplica el estilo a b, siempre que sea hermano DIRECTO o adyacente de a, y además b esté DESPUÉS de a

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Cómo es el selector para seleccionar todos los elementos que tengan definido un atributo?

A

etiqueta[atributo] {..estilo..}

a[title] {color = red;}

a[class~=pestaña] {color = red;} (este selecciona los elementos a que tengan entre sus clases aplicadas la clase pestaña)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Qué es el método querySelector?

A

Es un método javascript que tienen el nodo “document” del arbol DOM, al que se le pasa como parámetro una expresión “selector” de CSS y devuelve el primer elemento HTML que seleccione la expresión

document.querySelector(‘a.enlaceImportante’);

también existe querySelectorAll, para que traiga todos los nodos seleccionados por la expresión

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Qué es una pseudoclase para un selector? Qué sintaxis se usa? Nombra algunas pseudoclases

si el elemento seleccionado está activo
si se le pasa el ratón por encima
si se ha visitado ya
cuando tienen expresiones regulares y si no los cumplen
obligatorio
el primer hijo
coincide con uno o más elementos en función de su posición entre un grupo de hijos.
los que no cumplan el selector
seleccionar en función del idioma que se le pase
representa al elemento raíz (en HTML es el elemento html)

A

Es una palabra clave que se le añade a un selector para indicar un estado especial y de esta forma forma filtrar más el selector, indicándole otra característica:
La sintaxis es selector : pseudoclase → p:hover {color:red;)

  • active → si el elemento seleccionado está activo
  • hover → si se le pasa el ratón por encima
  • visited
  • invalid → cuando tienen expresiones regulares y si no los cumplen
  • required
  • first-child → el primer hijo
  • nth-child → coincide con uno o más elementos en función de su posición entre un grupo de hijos.
  • not (selector) → los que no cumplan el selector
  • lang () → seleccionar en función del idioma que se le pase
  • root → representa al elemento raíz (en HTML es el elemento html)
23
Q

Qué es una pseudoelementos para un selector? Qué sintaxis se usa? Nombra algunos pseudoelementos

A

Es una forma de referirse a elementos que no existen en el árbol DOM html, creándolos en CSS

La sintaxis es selector::pseudoelemento

  • after → crea un pseudoelemento en el DOM después del elemento seleccionado por el selector, con el atributo content
    • por ej: a::after { content: “→”;}
  • before→ similar a after, pero para antes
  • first-line → toma como un pseudoelemento la primera línea de un elemento, y le puede aplicar estilo sólo a esa línea
    • por ej: p::first-line {color:red; size:10px;}
  • first-letter → similar al anterior, para la primera letra
24
Q

Cómo sería la tabla de prioridades de la cascada de CSS aplicadas a nivel de navegador, usuario y autor

A

De menos a más:

ORIGEN + IMPORTANCIA

  1. user agent (navegador) + normal
  2. user + normal
  3. author + normal
  4. author + !important
  5. user + !important
  6. user agent (navegador) + !important

!important se pone detrás de la propiedad:valor dentro del estilo css

p {
background-color: red !important;
}

25
Q

Cómo afecta la palabra !important a la prioridad de dos estilos, que ambos son definidos por el author, y que tienen entre ellos tienen distinta especificidad?

A

Si se le pone !important al estilo con menos especificidad, aún así tiene mayor prioridad, porque es más importante

Primero se resuelve la importancia. A igual importancia se aplica la especificidad. Pero como en este ejemplo no son igual de importantes, da igual la especificidad

26
Q

Cómo se resuelve la prioridad de los estilos CSS cuando se está en un mismo nivel de prioridad (por ejemplo en nivel author)? Cómo se llama este concepto? Qué niveles tiene de menos a más importantes?

A

Se resuelve con la ESPECIFIDAD

  1. estilos inline
  2. identificadores
  3. clases, pseudoclases, atributos
  4. elementos
27
Q

Cómo se resuelve un conflicto de estilos en el mismo nivel de prioridad, atendiendo a la especifidad?

A

Se suman los valores totales del selector, en función de un peso de cada una de sus partes. Estos pesos varían por cada nivel de especifidad

  1. estilos inline → 1000
  2. identificadores → 100
  3. clases, pseudoclases, atributos → 10
  4. elementos → 1
28
Q

Cómo se resuelve un conflicto de importancia en la cascada de estilos CSS, cuando es el mismo nivel de prioridad y además el mismo nivel (peso) de especifidad?

A

Por el orden. El navegador se queda con el ÚLTIMO que haya leído

29
Q

Qué es la herencia en CSS

A

Es la capacidad de que elementos hijos hereden el valor de ciertos atributos del padre que son heredables, siempre que el hijo no especifique ese atributo, en cuyo caso se aplica el del hijo y no el heredado

Por ejemplo se heredan los atributos color, font-, text-, …

30
Q

Cómo se puede forzar la herencia de un atributo de CSS, que por sí mismo no es heredable de forma nativa?

A

con el valor inherit en el atributo del elemento que lo quiere heredar.

En el siguiente ejemplo, los elementos p heredarán el background de su elemento padre

p {

background: inherit;

}

31
Q

En qué se diferencia la propiedad display:none con visibilty:hidden de un elemento html?

A

display: none no renderiza nada, ni el hueco del elemento
visibility: hidden sí deja el hueco

32
Q

Cuándo se espera la versión CSS4? Por qué?

A

No se espera, porque a partir de CSS3 la funcionalidad se amplía mediante modules, que agrupan funcionalidades. A su vez estos modules crecen con sus propias versiones

33
Q

Qué modelos de colocación se incluyen en CSS3?

A

FlexBox y Grid

34
Q

Cómo se activa el modelo de caja flexible en CSS3?

A

En el contenedor se pone el atributo display:flex al contenedor

.container { display: flex; /* or inline-flex */ }

35
Q

Qué properties principales se usan en flexbox para el contenedor flexbox?

A
  • display: activa al contenedor como un flexblox, es decir, sus hijos se ordenaran de forma flexible
  • flex-direction: indica el eje y el sentido de la ordenación (row, row-reverse, column, column-reverse)
  • flex-wrap: cómo se trata cuando no caben los hijos en una sola línea (nowrap (todo en una línea), wrap (salto de línea), wrap-reverse
  • flex-flow: unifica el concepto flex-direction y flex-wrap
  • justify-content: alinea en horizontal los elementos (flex-start, flex-end, start, end, center, …)
  • align-items -> alinea en vertical los elementos
  • align-content -> alinea en vertical las filas de elementos

https://www.yunbitsoftware.com/blog/2017/03/30/flexbox-css3-tutorial-des

36
Q

Qué properties principales se usan en flexbox para los item dentro del contenedor flexbox?

A
  • order: se le asigna un nº, por defecto todos tienen cero
  • flex-grow: permite crecer si hay espacio
  • flex-shrink
  • flex-basis
  • flex: las tres anteriores juntas
  • align-self: sobreescribe el alineamiento definido en el contenedor para un elemento

https://www.yunbitsoftware.com/blog/2017/03/30/flexbox-css3-tutorial-des

37
Q

Cómo se amplía la funcionalidad de CSS3?

A
38
Q

Qué significan las siguientes unidades relativas en CSS3?

em

ex

ch

rem

%

vw

vh

A

em → proporción respecto al font-size del elemento (el font-size se hereda)
Se suele poner al html un font-size:100% que son 16px, por lo que en sus hijos 1em = 16px

ex → la mitad de em

ch → el ancho del cero

rem → como em, pero siempre respecto de root (html)
Por tanto en cualquier elemento hijo a cualquier profunidad 1 rem = font-size de html, no a font-size del elemento

% → Porcentaje respecto del contenedor padre

vw → 1% respecto a la anchura del viewport en pixeles

vh → 1% respecto a la altura del viewport en pixeles

39
Q

Qué significan en CSS3 las siguientes unidades absolutas?

in

cm

pc

mm

pt

px

Q

A

in → pulgadas

cm

pc → pica (12 pt)

mm

pt → punto (0.35 mm)

px

Q → ¼ de mm

40
Q

Cómo se llaman en CSS los “recursos” a través de los cuales podemos determinar unos estilos diferentes en función del alto, ancho, … del dispositivo?

A

Media queries. Se usan para

Ejemplo media query

@media only screen and (max-width: 414px) {

.deviceWidth {width:280px!important; padding:0;}

.center {text-align: center!important;}

}

41
Q

En CSS3, cuando se ponen todos los tamaños de margen o de padding, de los cuatro lados en la misma propiedad, en qué orden se expresan?

A

En sentido de las agujas del reloj desde TOP

TOP

RIGHT

BOTTOM

LEFT

{margin: 100px, 10px, 15px, 370px } → top, right, bottom, left

Si solo ponen 3, es → top, right-left, bottom

Si solo ponen, 2 es → top-bottom, right-left

Si solo ponen 1 sin especificar cuál, es → para todos igual

42
Q

En qué orden de cercanía están el borde, el margen y el relleno del elemento en HTML/CSS?

A

Elemento → Padding → Borde → Margen

43
Q

Qué significa que en una propiedad de un selector de CSS3 tenga prefijo, como:

  • webkit-box-shadow:..
  • moz-box-shadow:…
A

Que aplican según el navegador o motor de renderizado

44
Q

Qué mecanismo surgió ya en CSS2 para determinar estilos según el tipo de medio por el que se va a visualizar la información?

A

Los Media Types:

@media print{….}

@media screen{…]

45
Q

Qué mecanismo surgió ya en CSS3 para determinar estilos según el tipo y tamaño del dispositivo visualizar la información y hacerla responsive?

A

Media Query (responsive)

46
Q

Cómo se llama el tipo de programas que convierten el código de un “superlenguaje” como los preprocesadores de CSS (LESS, SASS, SYTLUS), a código CSS?

A

Transpiladores, o también se usa más en este mundo css Compiladores

47
Q

En las propiedades definidas en los selectores, es necesario poner punto y coma?

A

Es opcional, es una buena práctica

p {

valor: (es);

}

48
Q

En CSS3, qué cosas se expresan con @? “reglas at”

para MediaQuery, para responsive en función del tamaño pantalla

definir los estilos/formatos de la pagina cuando vamos a imprimirla

Importar css desde otros ficheros css

definir el charset

usar fuentes personalizadas

Sirve para agrupar estilos y dar prioridades entre esos grupos

A

@media → para MediaQuery, para responsive en función del tamaño pantalla

@page → definir los estilos/formatos de la pagina cuando vamos a imprimirla

@import → Importar css desde otros ficheros css

@charset → definir el charset

@font-face → usar fuentes personalizadas

@layer → Sirve para agrupar estilos y dar prioridades entre esos grupos

49
Q

En Javascript/DOM, ¿Conoces algun metodo para obtener un elemento(s) del DOM en base a su Id?

¿Y en base a un valor de algun atributo dado? Por ej. dame todos los nodos que tengan el valor true en su atributo aria-expanded

A
    • document.getElementById(‘…’)
    • documento.querySelector(‘…’)
50
Q

Cómo se definen en CSS3 variables personalizadas?

A

se declara y se le asigna valor: –variable:valor;

Se usa: var(–variable)

51
Q

Qué atributos se heredan por defecto y cuáles no?

A

Principalmente se heredan los que tienen que ver con el texto y no se heredan los que tienen que ver con margenes, bordes, etc ..

Sí heredan:

color, font, font-family, font-size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform,white-space, y word-spacing.

No heredan: padding, border, margin, …

52
Q

Repasar los atributos típicos de CSS para el examen: background, color, text- ….

A
53
Q

Leer la guía css3 para estar al tanto de los atributos tipicos de cara al examen

A

https://zbrain-academy.es/pluginfile.php/76302/mod_resource/content/2/guia_css3_emezetapdf.pdf

DP_TAI COPY 4 (60 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions