Brainscape's Knowledge GenomeTM

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


See full index

Repaso > Repaso-HTML5-CSS3 > Flashcards

Repaso-HTML5-CSS3 Flashcards

1
Q

Atributos principales de la etiqueta form

A
  • action (url del servicio/programa que procesará los datos del formulario)
  • method (metodo de envio segun el protocolo HTTP, tipicamente en un form tendriamos GET o POST)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

¿Que tipo de producto es Blink?

A

Motor de renderizado (procesa HTML+CSS)
NOTA: Es un componente del navegador Chromium y derivados
NOTA: Fue el sustituto de WebKit

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

Uso de la etiqueta <header> y <head>

A
  • header –> etiqueta semantica que indica zona de cabecera en un documento,main,section,…
  • head –> etiqueta que nos sirve para especificar metadatos, enlazar css, …
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Uso de la etiqueta <pre> y <code></code>

A
  • pre –> conservar el formato (saltos de linea, etc) de un “parrafo”
  • code –> para especificar que un texto es un bloque de un lenguaje de programacion
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

¿Como se enlaza una hoja de estilos con una pagina HTML?

A
  • <link></link>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Enumere 6 posibles valores para el atributo “type” de <input></input>

A

password, tel, email, number, time, color, text, date

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

Uso del atributo placeholder

A

texto que ponemos dentro de la caja como ayuda contextual (desaparece en cuando el usuario escribe dentro)

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

¿Como se especifica que un <input></input> es obligatorio?

A

atributo required
NOTA: ojo con la sintaxis de los atributos Boolean
NOTA: tiene mucha relacion con la pseudoclase :valid e :invalid

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

¿Cuando usamos el atributo “style” o “class”?

A
  • style lo usamos para dar estilo (inline) a un elemento particular
  • class cuando queremos definir unos estilo “reutilizables” y asignables a un conjunto de elementos
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Etiquetas utilizadas para crear una tabla

A
  • TIPICAS –> <table> <tr> <td> <th>
  • OTRAS –> <caption> <thead> <tfoot>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

¿Como se especifica que al cargar la pagina el foco se situe sobre un <input></input> especifico?

A

autofocus
NOTA: recordar el atributo tabindex
NOTA: relacion con la pseudoclase :focus
NOTA: eventos de javascript (onfocus,onblur)

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

Formas de añadir una imagen a una pagina HTML

A
  • <img></img>
  • <picture>
    </picture>
  • <svg>
    </svg>
  • <figure>
    </figure>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Funcion del API Web Worker, Web Storage y Server-Sent Events

A
  • Web Worker –> lanzar “tareas” asincronas y asi no bloquear el hilo principal del navegador
    NOTA: El API Ajax y Fetch valen para lanzar PETICIONES DE DATOS asincronas al servidor (para recuperar info)
    (ej. GET /empleados/100/nomina/6 )
  • Web Storage –> capacidad desde javascript para guardar datos “clave-valor” en una pestaña o en el navegador
    NOTA: Los objetos que se usan en este API se llama sesionStorage y localStorage
    • Server-Sent Events –> Envio de notificaciones desde el servidor al cliente (PUSH)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Uso de la etiqueta <ul> ¿Alguna alternativa?

A
  • lista no ordenadas (hijos de tipo li ….)
    NOTA: la alternativa “mas semantica” seria la etiqueta <menu> (hijos de tipo li ….)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Uso de la etiqueta <search> y <h7></h7></search>

A
  • <search> --> define una zona de busqueda (semantico)
    </search>
  • <h7> --> esto NO EXISTE llehan hasta h6
    </h7>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Significado de las unidades de tamaño de CSS rem, em, vw y vh

A

a) rem –> unidad relativa a la raiz (etiqueta <html>)
b) em –> unidad relativa al tamaño que heredas del padre
section {
font-size:40px;
}

 p {
        font-size:0.5em;
     }

<div>
<section>
<p> <!-- el p tendria un tamaño de fuente efectivo de 20px -->

c) vw y vh --> unidad relativa al tamaño del "viewport"
</p></section></div>

17
Q

Para que usamos la declaración !important

A

Para aumentar la prioridad de ese estilo dentro de la “cascada”

18
Q

Propiedades que definen al “modelo de caja”

A
  • margin (TRBL)
  • border tamaño estilo color (ej 2px dashed red)
  • padding
19
Q

¿Como podemos poner en color rojo todos los parrafos que haya directamente dentro de un div?

A

div > p {
color:red;
}

20
Q

¿Como se define el selector para un elemento cuyo valor de atributo “id” es “abc”?

A

abc {

        estilos;
    }
21
Q

En que consiste el posicionamiento “sticky”?

A

Es un posicionamiento de un bloque que “sobrevive” al posible scroll de la pagina

22
Q

¿En que consiste el mecanismo de la herencia?

A

Que los hijos heredan de forma automatica ciertas properties del padre
OPINION: font-size es de las properties mas importantes que se heredan (con esto se entiende bien “em”)

23
Q

¿Cual es la utilidad de un preprocesador CSS? ¿y de un framework CSS? –> ejemplos

A

1.- ayudar al desarrollador a confeccionar hojas de estilo con una sintaxis MAS POTENTE que CSS
NOTA: tenemos que realizar un proceso de “traduccion” a css porque el navegador estos lenguajes no los entiende
Ej. less/sass/stylus

2.- conjunto de clases de estilos predefinidas (posicionamiento, botones, componentes,…)
Ej. Bootstrap, TailWind, Material, Foundation, Bulma
NOTA: Bootstrap es de Twitter y Material de Google

24
Q

¿Como se especifica en CSS que queremos en cursiva una fuente?

A

font-style:italic

25
Q

¿Como se podrian definir unos estilos que unicamente tengan efecto a partir de una cierta resolucion?

A

@media screen and (min-width: 900px) {
}

26
Q

¿Como podemos hacer para que los parrafos empiecen por mayuscula?

A

p {
text-transform:capitalize;
}
ó
p::first-letter {
text-transform:uppercase;
}

27
Q

¿Podemos asignarle dos clases de estilos diferentes a un cierto elemento?

A

<elemento> .
</elemento>

27
Q

Podemos importar dentro de una css el contenido de otra?

A

@import url(“…../estilos.css”)

28
Q

¿Como se pueden aplicar estilos a los enlaces cuando pasas el raton por encima?

A

a:hover {

    }
29
Q

Si tenemos dos selectores que afectan a un <button> (uno en estilos1.css y otro en estilos2.css) ¿Cual tendrá más preferencia?</button>

A

Sin mas datos, tendria mas preferencia el ultimo que se haya “enlazado” (NOTA: <link rel=… href=…)

Repaso (5 decks)

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