Repaso-HTML5-CSS3 Flashcards
Atributos principales de la etiqueta form
- 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)
¿Que tipo de producto es Blink?
Motor de renderizado (procesa HTML+CSS)
NOTA: Es un componente del navegador Chromium y derivados
NOTA: Fue el sustituto de WebKit
Uso de la etiqueta <header> y <head>
- header –> etiqueta semantica que indica zona de cabecera en un documento,main,section,…
- head –> etiqueta que nos sirve para especificar metadatos, enlazar css, …
Uso de la etiqueta <pre> y <code></code>
- 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
¿Como se enlaza una hoja de estilos con una pagina HTML?
- <link></link>
Enumere 6 posibles valores para el atributo “type” de <input></input>
password, tel, email, number, time, color, text, date
Uso del atributo placeholder
texto que ponemos dentro de la caja como ayuda contextual (desaparece en cuando el usuario escribe dentro)
¿Como se especifica que un <input></input> es obligatorio?
atributo required
NOTA: ojo con la sintaxis de los atributos Boolean
NOTA: tiene mucha relacion con la pseudoclase :valid e :invalid
¿Cuando usamos el atributo “style” o “class”?
- 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
Etiquetas utilizadas para crear una tabla
- TIPICAS –> <table> <tr> <td> <th>
- OTRAS –> <caption> <thead> <tfoot>
¿Como se especifica que al cargar la pagina el foco se situe sobre un <input></input> especifico?
autofocus
NOTA: recordar el atributo tabindex
NOTA: relacion con la pseudoclase :focus
NOTA: eventos de javascript (onfocus,onblur)
Formas de añadir una imagen a una pagina HTML
- <img></img>
- <picture>
</picture> - <svg>
</svg> - <figure>
</figure>
Funcion del API Web Worker, Web Storage y Server-Sent Events
- 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)
Uso de la etiqueta <ul> ¿Alguna alternativa?
- lista no ordenadas (hijos de tipo li ….)
NOTA: la alternativa “mas semantica” seria la etiqueta <menu> (hijos de tipo li ….)
Uso de la etiqueta <search> y <h7></h7></search>
- <search> --> define una zona de busqueda (semantico)
</search> - <h7> --> esto NO EXISTE llehan hasta h6
</h7>
Significado de las unidades de tamaño de CSS rem, em, vw y vh
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>
Para que usamos la declaración !important
Para aumentar la prioridad de ese estilo dentro de la “cascada”
Propiedades que definen al “modelo de caja”
- margin (TRBL)
- border tamaño estilo color (ej 2px dashed red)
- padding
¿Como podemos poner en color rojo todos los parrafos que haya directamente dentro de un div?
div > p {
color:red;
}
¿Como se define el selector para un elemento cuyo valor de atributo “id” es “abc”?
abc {
estilos;
}
En que consiste el posicionamiento “sticky”?
Es un posicionamiento de un bloque que “sobrevive” al posible scroll de la pagina
¿En que consiste el mecanismo de la herencia?
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”)
¿Cual es la utilidad de un preprocesador CSS? ¿y de un framework CSS? –> ejemplos
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
¿Como se especifica en CSS que queremos en cursiva una fuente?
font-style:italic
¿Como se podrian definir unos estilos que unicamente tengan efecto a partir de una cierta resolucion?
@media screen and (min-width: 900px) {
}
¿Como podemos hacer para que los parrafos empiecen por mayuscula?
p {
text-transform:capitalize;
}
ó
p::first-letter {
text-transform:uppercase;
}
¿Podemos asignarle dos clases de estilos diferentes a un cierto elemento?
<elemento> .
</elemento>
Podemos importar dentro de una css el contenido de otra?
@import url(“…../estilos.css”)
¿Como se pueden aplicar estilos a los enlaces cuando pasas el raton por encima?
a:hover {
}
Si tenemos dos selectores que afectan a un <button> (uno en estilos1.css y otro en estilos2.css) ¿Cual tendrá más preferencia?</button>
Sin mas datos, tendria mas preferencia el ultimo que se haya “enlazado” (NOTA: <link rel=… href=…)
