CSS

CSS:

• CSS EscuelaIT: Fundamentos Css Diana Acebes

• Display

• Posicionamiento

• Centrar

• Flexbox
• Propiedades:
• contenedor-flex: padre
• display:flex
• flex-direction: establece el eje principal del contenedor y su contenido
• flex-direction: row  (default)
• flex-direction: row-reverse 
• flex-direction: column
• flex-direction: column-reverse
• flex-wrap: determina la existencia o no de saltos de línea y su sentido
• flex-wrap: nowrap  (default)
• flex-wrap: wrap
• flex-wrap: wrap-reverse
• justify-content: establece la dirección de los items en el eje principal (reparto del espacio)
• justify-content: flex-start  (default)
• justify-content: flex-end
• justify-content: space-between
• justify-content: center
• justify-content: space-around
• align-items: establece la alineación de los items en el eje transversal (reparto de espacio)
• align-items: flex-start
• align-items: flex-end
• align-items: center
• align-items: baseline
• align-items: stretch  (default) Si defino el 'alto' lo respeta.
• align-content: establece la alineación de filas respecto del eje transversal (Importante: solo con más de una línea)
• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch  (default) Si defino el 'alto' lo respeta.
• flex-items: fills
• align-self: Sobreescribe" la propiedad ALIGN-ITEMS para el elemento.  
• align-self: auto  (default) (hace caso al resto de colegas)
• align-self: flex-start
• align-self: flex-end
• align-self: center
• align-self: baseline
• align-self: stretch
• flex-grow: default "0".
• Si hay espacio sobrante indica lo que puede crecer un elemento para ocuparlo.
• Esta propiedad solo se aplica si el espacio disponible es positivo (el tamaño del contenedor es mayor a la suma de los flex-items y sus márgenes).
• El número indica la proporción en la que se reparten.
• NO que vaya a ser el doble que el otro, sino que va a recibir el doble del espacio vacío
• Por defecto no crecen (0)
• flex-grow: n  (n= 0, 1, 2.....) ( no puede ser negativo)
• Espacio que va a crecer cada item con flex-grow= (Espacio disponible / 𝝨valores flex-grow) * valor-flexgrow
• flex-shrink: (default "1")
• Si hay desbordamiento establece la capacidad de "encoger". Por defecto, encogen (1)
• flex-basis: (default auto)
• Es el ancho que tienen los elementos antes de empezar a crecer o encoger.
• Tiene poco sentido sin flex-shrink y flex-grow, sobreescribiría el valor width si lo hubiera.
• .item { flex: flex-grow [flex-shrink] [flex-basis]; }
• order: (default "0")
• Cambia el orden de colocación que correspondería según su orden en HTML.
• Regla nemotécnica( pensar como z-index).
• Valores positivos y negativos.
• Positivos: colocan al final de la pila
• Negativos: colocan al principio de la pila
• Enlaces:
• Flex items: grow,shrink,base
• Solved by flexbox
• Css-Tricks:flexbox
• Flex
• Grid

• Página pruebas
• Página Triatlon
• Dados Flex:

• FlexBoxResponsive

• Pseudo elementos Before-After
• Pseudo-elementos ::before y ::after
• Añado contenido como primer hijo (BEFORE) o comoúltimo (AFTER) al elemento al que se lo aplico.
• Es INDISPENSABLE establecer la propiedad CONTENTpara que funcione, aunque esté vacía:
• Lo primero es definir el: content: ‘ ‘; LO PRIMERO , sino no sale nada
• Por defecto un pseudoelement tiene por defecto: display inline Es aconsejable establecer a continuación un display: inline-block, o, block, list-item, etc...
• Cada nodo del DOM, solo puede tener un pseudo-elemento before y after, excepto si el nodo no tiene contenido(ej: una imagen o un input no pueden tener pseudo-elementos, es decir una etiqueta sin cierre)
• NO EXISTEN EN EL DOM. Es contenido que se genera dinámicamente desde el CSS. (No puedo indicar cuál es en el HTML)
• Importante: Como los márgenes y paddings verticales en % no se refieren al alto de su padre, sino a su ancho, nos podemos aprovechar de ésto. Técnica utilizada en el link de 'cuadrados responsive'.
• Diferencias entre  pseudo-clases y pseudo-elememtos:
• pseudo-clases se indican con ":"
• pseudo-elementos se indican con "::"
• pseudo-clase es un estado temporal de un elemento que sí existe en el DOM
• un pseudo-elemento no existe en el DOM
• Triángulos css:

• Formas básicas: cuadrados, rectángulos, círculos....
• Formas básicas:
• Links animados
• Cuadrados responsive
• Iconos con pseudo-elements:
• ejemplo
• codigos "content":
• Caracteres especiales

• Iconos-SVG
• svg vs icon font:
• Apuntes:
• Ejemplo:
• svg menu rallita
• Free svg-icon:
• SVG:
• Icon Font:
• Material icons:
• Elegir el icono
• Descargarlo
• Pulsar enter para visualizar el icono
• Botón derecho y seleccionar: "Ver código fuente de la página".
• Añadirlo a un objeto: Ej: const icons = {  codigo icono-1 copiado, codigo icono-2 copiado, etc....}
• Técnica que utilizo en litElement
• Ejemplo:

• Transiciones y animaciones
• CSS Transform
• Modifican la visualización del elemento cambiando sus coordenadas y dimensiones.
• No veo la transformación
• CSS Transition
• El elemento pasa de un estado a otro donde cambian sus propiedades css.
• Sí veo y controlo el proceso de transformación
• Es una animación sencilla
• CSS Animation: animaciones complejas
• Tricks animation
• Entender animation-fill-mode
• Exemple Transform-Transition
• Exemple Animación-simple
• Exemple Animations for Awareness

• Responsive-Rem

• Simulador-browserstack
• <meta name="viewport" content="width=device-width, initial-scale=1">
• Anchos, margins y paddings en %, em, rem, vw o vh.
• TARGET / CONTEXTO = RESULTADO EN %
• ¿Cuándo %?
• Cuando necesito que el valor sea un porcentaje del alto o ancho del contenedor.
• OJO!!! padding y margin verticales se refieren al ANCHO del contenedor.
• OJO 2!!! height: 100% (o cualquier otro porcentaje) NO HACE NADASI EL PADRE NO TIENE ALTO ESPECIFICADO O HEREDA (REGLA PRESENTE) DE SUS ANCESTROS.
• Ejemplo %:
• PX, EM or REM Media Queries?

• REM: se refiere al tamaño de fuente establecido en el HTML y si no se ha establecido, al del NAVEGADOR. (R de root).
• Definición REM y EM:
• ¿Por qué REM y no EM?
• Cuando no quiera que un valor (height, line-height, padding, margin...) esté afectado por un cambio de font-size en el elemento o en sus ancestros. (Es un tamaño “fijo” hasta que cambie el font-size del HTML).
• ¿Por qué REM y no PX?
• Si un usuario incrementa o disminuye el tamaño de su fuente en el navegador, las proporciones del layout se mantendrán.
• Ejemplo REM:

• LAYOUT FLEXIBLE: EM VS REM
• EM: se refiere al tamaño de fuente establecido EN EL PROPIO SELECTOR y está afectado por la HERENCIA.
• ¿Cuándo EM?
• Cuando quiera que un valor (height, line-height, padding, margin...) crezca o disminuya proporcionalmente con un cambio de font-size en el elemento o en sus ancestros.
• En MEDIA QUERIES: Siempre EN LAS MEDIA QUERIES se refiere al font-size del NAVEGADOR
• Ejemplo EM:

• MEDIA QUERIES
• Establecemos condiciones a partir de las cuales se aplicarán reglas CSS distintas.
• MOBILE FIRST: Partimos del CSS que se aplicará en las resoluciones más pequeñas y modificamos con MIN-WIDTH.
• @media all/screen and (min-width: breakpoint){  }
• ¿DÓNDE?
• Agrupadas por breakpoints: más mantenible, menos líneas. Preferible para CSS estándar.
• En contexto: work-flow mucho más rápido, más flexible, con preprocesadores.
• IMÁGENES
• Las imágenes deben estar dentro de contenedor.
• MAX-WIDTH (max-height): Imágenes fluidas. Consigo que no salga de sucontenedor, pero que tampoco exceda SU PROPIO TAMAÑO para NO PIXELAR.
• img{ max-width: 100%; height: auto; }
• DISTINTOS TAMAÑOS: srcset, etiqueta picture, media queries... (mucha información en internet.
• css-tricks imagenes:
• Usar SVG cuando podamos: Ligeras y calidad óptima para todas las resoluciones.
• Ejemplo imágenes fluidas:

• Anexos:
• Formas básicas: cuadrados, rectángulos, círculos....
• Triangulos css:
• Enésimo hijo:
• Un poco de todo: Trigonometría, Arrastrar y soltar, Dibujar, Animación, Gráficos:

• CSS EscuelaIT: Taller flexbox

• Display Flex vs Display inline-flex
• Totales
• Centrado vertical uy central
• Items App sencillos
• Items App complejos
• Igualar altura de contenidos dentro de columnas de igual altura
• Split Layout
• Inputs con iconos

• CSS Grid Layout Escuela IT:

• En construcció

• myNormalice.css

• Selectores css
• Selectores básicos
• Complex selectors
• .prueba.grande{} : Se hace referencia al elemento .prueba que tiene también la clase .grande.
• .prueba .grande{} : Se hace referencia a cualquier descendiente del elemento .prueba que tenga la clase .grande.

• div:not(.box){background-color: yellow;}

• ss-TRICKS
• Remove the spaces inline-block
•  nav { font-size: 0;} nav a { font-size: 16px;}
• Truco line-height: si a un texto de una linea
• le damos el alto de su contenedor , el texto se centra en vertical.
•   line-height: 10rem; height : 10rem; text-align:center;
• 
  
Si quitamos "position:relative" del container, el width del content será el 30% del abuelo
.container { position:relative; width: 50%; }
.content { position:absolute; width: 30%; }


• Viewport units CSS: 
width:100vw; (anchura del 100% de la anchura de la ventana gráfica)
height:50vh; (altura del 50% de la altura de la ventana gráfica)
line-height:3vh; (altura de línea del 3% de altura de la ventana gráfica)



• Cuando un elemento tiene todos sus hijos flotando, pierde su altura
• Mejor solución si el contenido cabe: dar al padre: overflow:hidden
• en un menu con subopciones no iría bien
• Si no va bien la anterior solución, utilizar pseudo-elementos
• padre::after{content: ''; display: block; clear: both;} 
• De esta manera el padre ya no tiene todos los hijos flotando y no pierde la altura.  
•  Tecnicas limpiezas overflow
• Una vez se define overflow:hidden a un elemento, se crea un block-formating-context
• Para mas información: Block-formating-context




• Centrado horizontal: 
• Display inline-block + text-align center del padre
• Horizontal 1: 
• Ancho desconocido: display:table + margin lateral auto
• Horizontal 3:
• Ancho desconocido: position absolute left 50% + translatex(-50%) (¡¡¡ ojo con la anchura del padre:siempre que ponemos posiciones absolutas, si no tenemos mas hijos y no hemos definido altura, el padre se queda sin altura)
• Horizontal 4: recomendable




• Centrado vertical: cuadrados perfectos(dimensioines en em )
• Texto(de una sola línea sin espacios)+Alto del padre conocido ---> line-height = altura del padre.
• Vertical 1:
• Si puedo poner al padre display:table ---> display:table-cell+vertical-align:middle
• Vertical 2:
• Alto conocido ---> position:absolute 50% + margin top negativo 1/2 del alto(¡¡¡ NO porcentajes !!!)
• Vertical 3:
• Alto desconocido ---> position:absolute top:50% +transform:translatey(-50%)
• Vertical 4:
• Centrado en horizontal y vertical:
• Con tablas: display table-cell + vertical align middle + text align center
• Vertical-horizontal 1
• Dimensiones conocidas ---> position:absolute 50% 50% + margin negativo 1/2 ancho (¡¡¡ no porcentajes))
• Vertical-horizontal 2
• Todo desconocido ---> position absolute 50% 50% + translate(-50%, -50%)
• Links interesantes centrado
• How to center:
• Css-Tricks Centering guide:
• Css-Tricks:
• Ejemplo centrado:
• Abierto 24h