HTML/CSS Flashcards
Resumen del tema html css
Motor de renderizado Microsoft Edge
Trident -> EdgeHTML -> Blink
Motor de renderizado Chrome
Webkit -> Blink
Motor de renderizado Firefox
Gecko -> Quantum
Motor de renderizado Opera
Presto-> Blink
Motor de renderizado Safari
Webkit
¿Que tipo de etiquetas existen en HTML 5?
APIs
Semantica
Multimedia
¿Qué elementos conforman una arquitectura web?
HTML
CSS
JAVASCRIPT
¿Qué preprocesadores de CSS conoces?
LESS
SASS
STYLUS
Qué es un lenguaje transpilado
El proceso convierte de código a código
Typescript, Coffescritp, ES6
¿Cómo harias una lista enlazada ordenada en html?
1, Deportes de equipo
1. Fútbol
2. Baloncesto
3. Balonmano
2. Deportes individuales
1. Tenis
2. Boxeo
<ol>
<li>Deportes de equipo</li>
<ol>
<li>Fútbol</li>
<li>Baloncesto</li>
<li>Balonmano</li>
</ol>
<li>Deportes individuales</li>
<ol>
<li>Tenis</li>
<li>Boxeo</li>
</ol>
</ol>
¿Cómo harias una lista enlazada NO ordenada en html?
*, Deportes de equipo
+. Fútbol
+. Baloncesto
+. Balonmano
*. Deportes individuales
+. Tenis
+. Boxeo
<ul>
<li>Deportes de equipo</li>
<ul>
<li>Fútbol</li>
<li>Baloncesto</li>
<li>Balonmano</li>
</ul>
<li>Deportes individuales</li>
<ul>
<li>Tenis</li>
<li>Boxeo</li>
</ul>
</ul>
4 Frameworks MVVM
Angular
ReactJS
VUE
Ember
Puedes nombrar 3 lenguajes transpilados
Typescript
Coffeescript
ES6
Dos herramientas de automatización
Gulp
Grunt
Tres herramientas de gestión de dependencias
Bower
Yarn
Rpm
Conoces algún editor de html/css
ATOM
Sublime
VSCode
APIs html5
Geolocation
Canvas
WebSocket / Server side events
Drag and Drop
IndexedDB
Web Storage (Local, session)
File (control de uploads)
WebWorker
Selector (css)
Microdata/Dataset
Etiquetas semanticas html
secction
article
nav
aside
header
footer
Etiquetas básicas html
< div> -> Bloque
< span> -> Inline
< table> -> tabla
< pre> -> texto con formato
< blockquote> -> citas
< ul> / < ol> / < dl> -> Desordenadas / ordenadas / definición
< a> -> Enlaces
< img> -> Imagenes
< iframe> ->
< embed> / < object> -> recursos externos
Etiquetas multimedia html
<audio>
<video>
<track></track> -> hijo de audio y video, subtitulos / karaoke
<canva> -> lienzo para dibujar
<svg> -> dibujo vectorial en xml
</svg></canva></video></audio>
Etiquetas de encabezado
< meta name=”keyword / author” charset=”utf-8” >
< link rel=”alternate / stylesheet / prev / next” href=”url enlazada” hreflang=”en / es / fr” media=”only screen and …–para impresion–”
Etiquetas de Formulario
< label >
< input min/max=”10” pattern=”{a-z}” multiple placeholder=”texto alt” autofocus autocomplete required
type =”
text
number
range
search
tel
radio
checkbox
selection
time
email
pwd
color
date
datetime
submit
“ >
< textarea >
< button type =”submit / button / reset”>
¿Que atributos para elementos de formulario conoces y que uso tienen?
autofocus -> se posa el cursor a cargar la pagina
autocomplete-> activa la opción de autocompletado del navegador
min / max -> Minimo valor / Maximo valor
pattern (regex) -> formato del campo
multiple -> selección multiple
placeholder-> Texto explicativo que desaparece al hacer focus
required -> campo obligatorio
¿Cómo se definen atributos personalizados en html ?
data-XXXX
Ej.:
< td data-catergoria=”unaCategoria”
A través de DATASET API de javascript-> objetotd.dataset.categoria
¿Podemos definir semantica de tipos de datos? ¿Cómo?
https://schema.org
Ej.:
< secction itemscope itemtype:”http://schema.org/peson” >
<p>
< img itemprop="image" src="foto.gif">
< span itemprop="email" />
< span itemprop="name" />
</p>
Atributos html 5 globales
id -> Identificador de elemento
class -> Estilo que se le aplica al elemento
title -> Información al pasar al ratón
translate -> yes/no, si debe ser traducido
sytle -> Se aplican los estilos directmanete al elemento
dir -> Dirección del texto. ltr-> derecha a izquierda. rtl ->
lang -> idioma del elemento
contenteditable
tabindex -> Orden de profundidad del elemento
draggable -> Se puede arrastrar. Hay que poner true/false
spellcheck -> corrección ortografica.. Hay que poner true/false
hidden -> elemento oculto
¿Existen atributos para accesibilidad?
Si, role y aria-*
Commonly used examples include aria-describedby, aria-haspopup, aria-hidden, aria-label, and aria-labelledby
DOM: dos propiedades
Firstchild
childnodes
DOM: métodos
NODE -> appendChild()
NODE -> hasAttributes()
DOC -> getElementByName()
DOC -> createElement()
DOC -> getElementById()
DOC -> getElementByTagName()
DOC -> getElementByClassName()
DOC -> querySelector(selector)
Diagrama DOM
¿Qué es polyfills?
Cuando un navegador no implementa de forma nativa un API se puede simular con unos pug-in js llamados polyfills
En que versión está CSS y como ha sido su evolución
CSS1 -> Modelo de cajas, estilo de Fuentes, Colores, Texto, Cascada, Psudoclases
CSS2.x -> Posicionamiento: Absoluto, Relativo + float / clear
Tipos de media: @media print / @media screen
Capas: z-Index
Selectores avanzados
Efectos -> sombras, transformaciones
CSS3 -> Media Querys (responsive) FlexBox / Grid
Modules (IMP)
Animaciones / Efectos / Nuevos Selectores
Frameworks CSS
Conjunto de estilos y funcionalidades ya creados para ser usados
Bootstrap
Foundation
Bulma
Materialize
Cómo funciona un preprocesador como SASS
Con un ejemplo:
mixin card($ancho, $alto, $bg, $borde){
with: $ancho;
height: $alto;
background: $bg;
border: $borde
}
.card1 {
@include card(300px, 200px, yellow, red 2px solid);
}
.card2 {
@include card(400px, 300px, blue, black 1px dotted);
}
¿En qué tres ubicaciones es posible definir estilos css?
Fichero: Los estilos están contenidos en un ‘fichero.css’.
HTML: Los estilos están definidos en el propio fichero html. < style> </ style>
TAG: Los estilos están definidos en la propia etiqueta con el atributo ‘style’. <p style=""></p>
Cómo se resuelve un estilo si un elemento html tiene varios estilos definidos
Se resuelve en cascada desde menos prioritario a más prioritario
Estilos predefinidos Navegador
Estilos definidos por el Usuario
Estilos definidos por la Página
Estilos definidos por la Página !important
Estilos definidos por el Usuario !important
*Hay que tener en cuenta, si tenemos hoja de estilos y definimos en la propria página con se resolverá por orden, es decir, si importo la hoja.css antes de los estilos en style serán más prioritarios. Si por el contrario importo la hoja.css despues de la etiqueta <style> los estilos de la hoja serán más prioitarios si hay conflicto.
En el caso de añadir el estilo directamente en el elemento (<p style="..........." >), este será el prioritario</style>
¿Qué selectores existen en CSS?
etiqueta {….}
#identificador {….}
.clase {….} —> <h1 class="XXXX"></h1>
etiqueta.clase {….} —> la clase se aplica a la etiqueta
etiqueta1, etiqueta2 {….} —> Agrupamiento, selectores independientes mismo estilo
etiqueta1 etiqueta2 {….} —> contextuales, aplica a etiqueta2 dentro de etiqueta1 a cualquier nivel
etiqueta1 > etiqueta2 {….} —> etiqueta2 dentro de etiqueta1 directamente
a ~ b {….} —> Aplica si b es hermano de a
a + b {….} —> Aplica si b es hermano ‘directo’ de a
E[ atr^ = algo ] —> que empieza por ‘algo’
E[ atr$ = algo ] —> que termina por ‘algo’
E[ atr* = algo ] —> que contenga ‘algo’
E[ atr~ = val1 ] —> que contenga en la lista ‘val1’ =>
E[ atr ] —> que tenga definido el atributo
Qué significa el selector: etiqueta {….}
Aplica el estilo al elemento/s con etiqueta ‘etiqueta’
Qué significa el selector: #identificador {….}
Aplica el estilo al elemento con identificador ‘#identificador’
Qué significa el selector: .clase {….}
Se selecciona la clase en el elemento <h1 class="XXXX"></h1>
Qué significa el selector: etiqueta.clase {….}
La clase se aplica a la etiqueta que quiera aplicar esa clase
Qué significa el selector: etiqueta1, etiqueta2 {….}
Agrupamiento, selectores independientes mismo estilo
Qué significa el selector: etiqueta1 etiqueta2 {….}
Contextuales, aplica a etiqueta2 dentro de etiqueta1 a cualquier nivel
Qué significa el selector: etiqueta1 > etiqueta2 {….}
Etiqueta2 dentro de etiqueta1 directamente
Qué significa el selector: a ~ b {….}
Aplica si b es hermano de a
Qué significa el selector: a + b {….}
Aplica si b es hermano ‘directo’ de a
Qué significa el selector: E[ atr^ = algo ]
Que el atributo empiece por ‘algo’
Qué significa el selector: E[ atr$ = algo ]
Que el atributo termine por ‘algo’
Qué significa el selector: E[ atr* = algo ]
Que el atributo contenga ‘algo’
Qué significa el selector: E[ atr~ = val1 ]
Que el atributo sea una lista y que este en ella ‘val1’ => ATR=”val1 val2 val3….”
Qué significa el selector: E[ atr ]
Que tenga definido el atributo ‘atr’
¿Que es una pseudo-clase?
Parte del selector que hace referencia a una acción/propiedad sobre el selector
selector:pseudoClase {………}
Ej.:
:active
:hover
:visited
:invalid
:empty
:required
:first-child
:nth-child()
:not(selector)
:lang()
Qué significa la pseudo-clase :active
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, “activation” typically starts when the user presses down the primary mouse button.
