Tema 8. Aplicaciones web Flashcards
Utilidad de la etiqueta HTML5 <details></details>
Zona de información “plegable”, pone el “título” de la zona desplegable, se usa junto a la etiqueta <summary>
¿Qué es Tailwind?
Framework de CSS (del estilo Bootstrap)
En CSS, ¿cuál es la property para cambiar el icono/círculo de un <li> dentro de un <ul> u <ol>
list-style-type
En CSS, ¿a qué se refiere el selector p:first-child {…}?
Esto NO se refiere al primer hijo de un <p> si no al propio <p> como primer hijo en otro contenedor.
Afecta al primer <p> de esta estructura:
<div>
<p></p> --> Aplica solo a este
<p></p>
</div>
En CSS qué hace .X
Selector de clase, donde X es el nombre de la clase
En CSS qué hace #X
Selector de id, donde X es el nombre del id
En CSS qué hace X ~ Y
Aplica en Y si es hermano de X (sólo aplica en Y)
En CSS qué hace X + Y
Aplica en Y si es hermano DIRECTO de X (sólo aplica en Y)
En CSS qué hace X > Y
Aplica a todas las etiquetas de Y que estén JUSTO DEBAJO de X (sólo aplica en Y)
En CSS qué hace X Y
Aplica a todas las etiquetas de Y que estén en cualquier nivel debajo de X (sólo aplica en Y)
¿Qué frameworks de CSS conoces?
Bootstrap (desarrollado por Twitter), Materialize (desarrollado por Google), Foundation, Tailwind, Bulma
¿Puede haber varios <main> dentro del <body>?
Sí, pero todas menos 1 tienen que tener el atributo <hidden></hidden>
Diferencias entre:
visibility: hidden;
display: none;
visibility: hidden; El elemento está pero no se ve, el hueco que ocuparía si se viese se queda en blanco en la página.
display: none; Desaparece por completo, el hueco que ocuparía en la página desaparece y carga el siguiente elemento.
NOTA: El código de ambos elementos se ven si le damos a “inspeccionar elemento”
Código para decirle al navegador que todas las media queries son relativas a ese viewpoint
<meta></meta>
¿Cómo importo una tipografía?
@font-face {
font-family: “Trickster”;
src:
local(“Trickster”),
url(“trickster-COLRv1.otf”) format(“opentype”) tech(color-COLRv1),
url(“trickster-outline.otf”) format(“opentype”),
url(“trickster-outline.woff”) format(“woff”);
}
Formas de expresar unidades
(Ejemplo: px = pixeles)
in: pulgadas
pc: picas
pt: puntos
px: pixeles
Q: ¼ de mm
em: tamaño actual de la fuente del contenedor padre
ex: relativo a la altura del carácter x
ch: ancho del cero
rem: tamaño fuente del elemento raíz
%: porentaje
vh/vw/vmax/vmin: relativas al viewport (responsive)
Propiedad display, diferencia entre
display: block
display: inline
display: block es la propiedad por defecto. Ocupa todo el ancho disponible en la línea y los elementos se colocan en VERTICAL.
display_inline Ocupa osolo el espacio necesario, los elementos se ponen en HORIZONTAL. Ignora width o height
¿A qué equivale esto?
margin 20px 10px;
margin 20px 15px 10px;
margin 20px 10px 20px 10px;
margin 20px 15px 10px 15px;
Utilidad del comando tabindex de HTML5
Uso de la etiqueta <object></object>
Insertar contenido externo (ej. PDF, Video(*), Flash…)
Nota: Este contenido necesita un plugin en el navegador.
(*) Hoy en día no hace falta plugin para video ni audio, tenemos etiquetas específicas para eso
¿Como se indica que el valor de un campo input es obligatorio rellenarlo?
<input></input>
¿Es posible conseguir imagenes adaptativas con la etiqueta <img></img>?
Si, al igual que hacemos con <picture> + <source></source> porque tenemos disponibles los atributos "srcset y sizes"</picture>
