Brainscape's Knowledge GenomeTM

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


See full index

B3 Desarrollo de sistemas > Tema_8_CSS3 > Flashcards

Tema_8_CSS3 Flashcards

1
Q

Nombra 4 Frameworks o Entornos de trabajo de CSS

A
  • Bootstrap
  • Foundation
  • Bulma
  • Material UI
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Propiedad Display en CSS:

A

La propiedad Display especifica si es mostrado y como lo es un elemento.
Todos los elementos tiene un valor por defecto para ser mostrados, que puede ser en Bloque o Inline.

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

¿ Cual de estos es un elemento inline ?

p

div

a

h1

A

a

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

¿Qué tres formas hay de insertar un CSS en un HTML?

A
  • Externa→ El CSS, está en un archivo aparte, con extensión .CSS.
  • Interna → El estilo CSS, se mete en el encabezado del HTML, en la etiqueta HEAD y dentro de STYLE, que en este caso es una etiqueta.
  • Local (Inline)→ Se define el estilo en la propia etiqueta, también con STYLE, pero en este caso es un ATRIBUTO.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

¿Qué nos permiten los “PREPROCESADORES” CSS, que no podemos hacer de forma nativa en CSS3?

A
  • Variables
  • Bucles
  • Anidamiento
  • Mixins
  • Extends
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

¿Qué son los módulos en CSS?

A
  • Ya no sale CSS4, si no que han partido CSS3 en trocitos, cada uno relacionado con un comportamiento.
  • Sirven para separar los estilos en pequeños módulos, según su contexto. Se ejecutan como si fueran clases java.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

¿Cuando dos o más reglas o estilos coinciden en el mismo elemento, qué prioridad se aplica?

A

De menos a más:

  1. Estilos por defecto del navegador (User Agent)
  2. Estilos especificados por el usuario
  3. Estilos relacionados con el documento: Archivo externo, en el encabezado, en un elemento específico.

Este orden, cambia si ponemos “! IMPORTANT” en el código. Y quedaría de la siguiente manera, de menos importante a más:
1. User-agent (Navegador)
2. Usuario
3. Desarrollador
4. Desarrollador (con ! important)
5. Usuario (con ! important)
6. User-agent (con ! important)

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

Como es el selector de una CLASE en CSS.

A

Con .”nombredeclase”

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

¿Qué es lo que genera un PREPROCESADOR CSS?

A

Un PSEUDOCÓDIGO CSS, que tiene que ser compilado, para que lo entienda el navegador.

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

¿Cual es la versión actual de CSS?

A

CSS3

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

¿Qué etiqueta usamos para poner un salto de línea?

A

Ponemos < br > al final de la línea.

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

¿Qué es Media Query (En español, Consulta de Medios) en CSS?

A

Se usan para modificar nuestra web o aplicación, en función del dispositivo (Impresora, pantalla) o de características y parámetros específicos (Como la resolución de la pantalla o el ancho del Viewport del navegador)

Se introdujo en CSS3.

Solo se activa si se cumple una condición, por ejemplo el tamaño de la pantalla.

Nos permite hacer lo siguiente:

  • Aplica estilos condicionales con las reglas-at @media e @import.
  • Indicar medios específicos en los elementos y otros HTML.
  • Testear y monitorizar los estados de los medios usando los métodos de JavaScript “Window.matchMedia()” y “MediaQueryList.addListener()”

A este tipo de maquetación web se le denomina:

Responsive Web Design

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

¿Para que se usa la etiqueta < style > y como se usa?

A

Para dar estilo. Se usa dentro de la etiqueta
< head >

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

Posicionamiento:

A

Propiedad Position:

  • static, El elemento se coloca, donde cae, según el flujo de la página. No obedece a top, bottom, left o right.
  • relative, Se establece, top, right, bottom, left, del elemento en función de su posición STATIC y NINGÚN otro objeto, ocupará el espacio que deja libre.
  • fixed, Fija el elemento en una posición fija que no cambia aunque hagamos scroll con la pantalla. El hueco que deja, SI que lo puede ocupar otro elemento.
  • absolute, Su posición dependerá de la de su padre. Si no lo tuviera, dependera del BODY del html. Se sacan del flujo normal y pueden superponerse a otros.
  • sticky, Cambia entre relative y fixed, moviéndose si se hace scroll y volviendo a su sitio cuando se deja el scroll.

https://codingbff.medium.com/difference-between-css-position-absolute-versus-relative-35f064384c6

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

¿Es CSS un modelo de CAJAS?

A

Si.

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

Unidades RELATIVAS en CSS3:

A

1EM →Relativo a la fuente del elemento actual.
1REM → Relativo al tamaño del ROOT ELEMENT.
1EX →Relat. a la altura de la “x” minúscula de la fuente actual.
1CH → Relat. al ancho del cero.
% → Relativo al elemento padre.
1VW → Relativo al 1% del hancho del viewport. Si pongo 30VW, es el 30% del ancho del Viewport.
1VH → Relativo al 1% del alto del viewport. Si pongo 25VH, es el 25% del alto del Viewport.
1VMIN → Relativo al 1% de la dimensión más pequeña del viewport.
1VMAX → Relativo al 1% de la dimensión más grande del viewport.

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

Unidades ABSOLUTAS en CSS3

A

CM → Centímetros
MM → Milímetros
IN → Pulgadas 1in=96pixels=2.54cm
PX → Píxeles
PT → Puntos
PC → Picas 1pc=12pt

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

¿A qué llamamos ESPECIFICIDAD?

A

Es la forma de decirle al navegador, qué estilo es más importante que el otro.

Hay 4 categorías:

  • Estilos en línea ocupa → 1,0,0,0 posición.
  • IDs ocupa → 0,1,0,0 posición
  • Clases, pseudoclases y atributos→ 0,0,1,0 posición
  • Elementos y pseudoelementos→ 0,0,0,1 posición

Pero si se pone ! IMPORTANT, vale más que todo lo anterior.
https://css-tricks.com/specifics-on-css-specificity/

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

¿Qué es Viewport?

A
  • Es el area de usuario, visible en pantalla y su tamaño depende del dispositivo donde se esté usando.
  • Responde al Responsive Web Design.
20
Q

¿Qué son las reglas AT en CSS3?

A

La regla AT, es una declaración CSS, que comienza con el símbolo @, seguido por un identificador.

Le dice a CSS, como comportarse o instrucciones a realizar.

21
Q

¿Qué partes forman una caja en CSS?

A

Desde el centro hacia afuera son:

  • CONTENIDO
  • RELLENO - PADDING
  • BORDE - BORDER
  • MARGEN - MARGIN
22
Q

¿Que significa el concepto DRY en los preprocesadores?

A

Don’t Repeat Yourself

23
Q

¿En CSS, se puede volver atrás en el árbol, para seleccionar el objeto padre?

A

NO.

24
Q

Nombra 4 PREPROCESADORES CSS

A
  • Less
  • Sass
  • Stylus
  • PostCSS
25
Q

¿Qué es un FRAMEWORK en CSS?

A
  • Un entorno de trabajo.
  • Es una biblioteca de hojas de estilos genéricos, que podemos usar para el diseño web, para no tener que rompernos la cabeza.
26
Q

¿Qué es Flexbox?

A

Nos permite crear una caja flexible, que se adapta al tamaño de la web, sin usar ninguna propiedad flotante o de posicionamiento.
La sintaxis sería:
/display: flex;

27
Q

Tipos de selectores en CSS3:

A
  1. Por NOMBRE de elemento → Se pone directamente el nombre.
  2. Por IDENTIFICADOR. La id es única, por lo que solo se selecciona un elemento. → Se pone #+id. En el HTML, el id se pone id=”….”
  3. Selector de CLASE → Se pone .nombreclase. Podemos aplicar varias clases a una etiqueta, por ejemplo: <p class=”center large”
  4. Selector UNIVERSAL → Selecciona todos los elementos de la página. Se pone *
  5. Selección de GRUPO → Se ponen los elementos que se quieren agrupar, ejemplo: p, h1, h2 {}
28
Q

¿Como se puede forzar una herencia en CSS?

A

Poniendo “INHERIT”.

29
Q

Metodologías para organizar los estilos CSS.

A

OOCSS (Object-Oriented CSS). Tiene dos reglas. Separar estructura del diseño y separar contenedor del contenido.
BEM, (Block Element Modifier) según el cual, la web, está compuesta de bloques como encabezado, pié y contenido.
SMACSS, (Scalable and Modular Architecture for CSS). Divide la WEB en varios elementos como, Base, Layout, Modules, State y Theme.

https://picodotdev.github.io/blog-bitix/2021/01/las-metodologias-oocss-bem-y-smacss-para-organizar-los-estilos-css/

30
Q

Selectores multiples:

A
  • Etiqueta1 , Etiqueta2 {..} → Selectores independientes.
  • Etiqueta1 Etiqueta2 {..} → Se aplica a todas las Etiqueta2, dentro de la Etiqueta1 a cualquier nivel.
  • Etiqueta1 > Etiqueta2 {..} → Se aplica a todas las Etiqueta2 hija directa de Etiqueta1.
  • Etiqueta1 ~ Etiqueta2 {..} → Se aplica a Etiqueta 2 si es hermano de Etiqueta 1, en ese orden de aparición, es decir, primero Etiqueta1 y después Etiqueta 2.
  • Etiqueta1 + Etiqueta2 {..} → Selecciona la Etiqueta2 que está inmediatamente depués de Etiqueta1. No qué esté dentro, si no depués. A cualquier nivel.
31
Q

¿Qué es z-index?

A
  • Determina el orden de superposición de los objetos.
  • Dota de profundidad a los elementos.
  • Los elementos con mayor valor z-index, cubren a aquellos con menor valor.
32
Q

Propiedad Float y propiedad Clear

A

Float, determina como flota un elemento. Tiene los valores, left, right, none, inherit. No es heredable.

Clear, determina que al usar la propiedad Float, el siguiente elemento, estará donde le digamos, con, none, left, right, both, inherit.

No heredable. Se aplica a elementos de bloque.

33
Q

Selectores de PSEUDOCLASES:

A

NO SON CASE SENSITIVE

:link ->
:visited -> Para dar estilo a un enlace ya visitado.
:hover -> Para resaltar un enlace al pasar el cursor sobre él.
:active -> Para mostrar activo un enlace al pulsarlo.
:invalid -> Para marcar un campo que tiene un valor introducido, no válido.
:empty -> Da estilo a un elemento vacío.
:required -> Es Booleano. Requiere introducir un valor.
:first-child -> Da estilo a cada elemento que es primer hijo.
:nth-child(n) -> Selecciona el hijo que determinemos con (n).
:not (selector) -> Excluye del estilo al (selector)
:lang() -> Selecciona y da estilo con lo que hay en ().

34
Q

Sintaxis de CSS.

A

A una declaración de CSS, que empieza por un SELECTOR y acaba en }, se le llama REGLA.

h1 {color:blue; font-size:12px;}

h1→ Es el SELECTOR
color:blue → Es una DECLARACIÓN, por estar separado por :
color → Es una PROPERTY
blue → Es un VALUE o VALOR

35
Q

Selector de PSEUDO-ELEMENTO:

A

::after→ Crea un pseudoelemento que es el último hijo.
::before→ Crea un pseudoelemento que es el primer hijo
::first-line→ Aplica estilo a la primera línea de un elemento bloque.
::first-letter→ Aplica estilo a la primera letra de la primera línea, sólo cuando no va precedido de otro contenido.

36
Q

¿Cual es el tipo/mime de CSS?

A

text/css

37
Q

¿En qué orden se colocan los cuatro bordes del margen?

A
  • TOP
  • RIGHT
  • BOTTOM
  • LEFT

Ejemplo:

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

OJO, SE SEPARAN CON ESPACIO Y SI SON MENOS DE CUATRO, SE VAN QUITANDO EN ORDEN INVERSO, ES DECIR PRIMERO LEFT, BOTTOM, RIGHT Y POR ÚLTIMO TOP.

38
Q

¿Qué es una PSEUDOCLASE?

A

Una pseudoclase se añade al selector y se usa para definir un estado especial de ese selector. Se pueden concatenar varias pseudoclases.
No son case-sensitive.

La sintaxis es:

selector:pseudo-class {
property: value;}

39
Q

¿Peculiaridades de pseudoclase :hover?

A
  • :link y :visited van ANTES QUE :hover
  • :hover VA ANTES que :active

Por lo tanto, el orden es:
* :link / :visited O :visited / :link
* :hover
* :active

40
Q

¿Qué property se usa para que funcionen los pseudoelementos ::before y ::after?

A

CONTENT

Por ejemplo
p::before {
content: “Tienes que leer esto” ;
}

41
Q

¿Qué es un PSEUDOELEMENTO?

A

Se usa para dar ESTILO a una parte concreta del elemento. Como por ejemplo, para darle color a la primera letra de una línea o a la primera línea de un elemento.
SOLO SE PUEDE USAR UN PSEUDOELEMENTO POR SELECTOR

42
Q

¿Cual es la sintaxis de la propiedades en CSS?

A

Por ejemplo, para darle propiedades a un DIV, sería:
div {
propiedad: valor; }
Se puede poner -webkit, antes de la propiedad si queremos que sea compatible con un navegador que use webkit.

43
Q

¿Qué son los preprocesadores de CSS?

A
  • Permiten al desarrollador, escribir su aplicación, no directamente con código CSS, si no con unas herramientas, que le permiten hacer cosas más avanzadas que con CSS puro. Después, el resultado, hay que traducirlo a CSS con los Transpiladores.
44
Q

¿A qué se le llama REGLAS en CSS?

A
  • Al conjunto de SELECTOR, más PROPIEDAD más VALOR. Es decir, a la estructura que usamos siempre en CSS para aplicar un estilo al HTML.
45
Q

¿Qué es WOFF en CSS?

A
  • Es un tipo de fuente que podemos añadir.
  • Es Web Open Font Format
  • Tipo MIME: font/woff o font/woff2
46
Q

¿Qué son TrueType y OpenType?

A
  • Son otro tipo de fuentes que podemos añadir, igual que WOFF
  • Tipo MIME de OpenType: font/otf o font/sfnt
  • Tipo MIME de TrueType: font/ttf o font/sfnt
47
Q

¿Para qué sirve @font-face?

A
  • Para instalar una fuente externa, como WOFF, TrueType u OpenType.

B3 Desarrollo de sistemas (17 decks)

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