HTML ORDEN SEMANTICO
<!DOCTYPE html>
<html>
<head> DENTRO DEL HEAD VA TODO EL CODIGO INVISIBLE EN UNA PAGINA WEB
<link rel="stylesheet" type="text/css" href="styles.css">ESTE LINK LLAMA AL ARCHIVO CSS
<meta charset="utf-8"> ESTE META CORRIGE LOS ERRORES ORTOGRAFICOS DEL CODIGO
<meta name="viewport" content="width=device-width, initial-scale=1.0">DEFINE EL AREA DE
PANTALLA DEL CUERPO DEL CODIGO
<script src="https://kit.fontawesome.com/7086fe80f4.js" crossorigin="anonymous"></script> ESTE
SCRIPT LLAMA AL CODIGO DE ICONOS PARA TU CODIGO
<title>GUIA DE PAGINA WEB</title>
</head>
<body>
<header> es el encabezado y al agregarle el nav toma mejor semantica</header>
<nav>nav es el navegador de la pagina deberia ir en el header para colocar los enlaces de la barra deberiamos una
lista desordenada y dentro de esta ingresar los elementos li(<ul><li><a href="seccionesde la pagina">creadas en paginas a
parte</a></li></ul>)</nav>
<article>es un articulo justamente y puede ser dividido por secciones <section>se usa para dividir los articulos ejemplo:
(<article><section><h1></h1><h2></h2><p></p></section></article>)</section></article>
<aside>barra de navegacion secundaria o un contenido extra </aside>
<footer>pie de pagina</footer>
PRUEBA DE UN NAVEGADOR
<header>
<nav class="nav">
<ul class="menu">
<li class="nav-li fas fa-home"><a href="">Inicio</a></li>
<li class="nav-li fas fa-id-card-alt"> <a href="">Sobre nosotros</a></li>
<li class="nav-li fas fa-hand-holdng-usd"> <a href="">Gana dinero</a></li class="nav-li">
<li class="nav-li fas fa-question-circle"> <a href="">Ayuda</a></li>
</ul>
<ul class="responsive-menu">
<li class="nav-li-responsive fas fa-home"> <a href="">Inicio</a></li>
<li class="nav-li-responsive fas fa-id-card-alt"> <a href="">Sobre nosotros</a></li>
<li class="nav-li-responsive fas fa-hand-holdng-usd"> <a href="">Gana dinero</a></li>
<li class="nav-li-responsive fas fa-question-circle"> <a href="">Ayuda</a></li>
</ul>
</nav>
</header>
</body>
</html>
CSS APUNTES
css es un lenguaje que trabaja con hojas de estilo en cascada y se utiliza para darle estilo a las hojas de
codigo ya sea html o cualquier lenguaje compatible con css
Estructura CSS
el css se estructura eligiendo el selector luego las llaves {y dentro de las llaves la propiedad} el selector seria
la la etiqueta o clases del html y la propiedad es como cambiar el selector
Tipos de Selectores de css
selector universal (*) selecciona todos los elementos del htm y es *
selector de tipo son los que seleccionamos por elemento por ejemplo el h1 button etc etc
luego podemos seleccionar por clases (.) que son los atributos de html.
selector por id (#) deben ser unicos
selector por atributo [y se coloca el atributo creado en el html]
selector por descendencia se usa colocando la etiquita que se encuentra mas afuera hacia adentro por
ejemblo (<div><h1><p>ffdsfs</p></h1></div>) colocando div > h1 >p estariamos seleccionando el p para
darle estilo
selector por pseudo clases las cuales por ejemplo hace que cuando paso el mouse por algun elemento este
cambie y se llama con los dos puntos (:)
TEORIA DE ESPECIFIDAD
En css la teoria de especifidad significa que si una seleccion de estilo tiene mas orden jerarquico que otra a
la que le demos un estilo anteriormente o posteriormente esta toma el orden jerarquico mas alto
!importan
estilos en linea
identficadores(id)
{clases
pseudo-clases
atributos}estan en el mismo nivel jerarquico
{elementos
pseudo- elementos}mismo nivel jerarquico
METODOLOGIA BEM
BEM CSS es una metodología de nomenclatura para definir las clases en los nodos HTML del
documento.
Es decir, es una manera de nombrar las clases de los nodos de tu HTML para posteriormente
atacarlos con CSS de una manera fácil, sencilla y clara.
evita seleccionar muchas clases se selecciona y se selecciona con 2 guiones bajos para la etiqueta y con 2
guiones medios marcas que uno es distinto como por ejemplo
<!-- EJEMPLO 1 --><div class="block">
<div class="block__element">Elem 1</div>
<div class="block__element">Elem 2</div>
<div class="block__element block__element--modifier">Elem 3</div></div>
<!-- EJEMPLO 2 --><div class="item item--modifier">
<div class="item__element">Elem 1</div>
<div class="item__element">
<div class="item__another-element">Elem 2</div>
<div class="item__another-element">Elem 3</div>
</div>
<div class="item__element item__element--modifier">Elem 4</div></div>
Y asi quedaria css con la metodologia bem aplicada
// EJEMPLO 1.block{ color: inherit; }.block__element{ color: inherit;
}.block__element--modifier{ color: inherit; }
// EJEMPLO 2.item{ color: inherit; }.item--modifier{ color: inherit;
}.item__element{ color: inherit; }.item__element--modifier{ color: inherit;
}.item__another-element{ color: inherit; }
Teoria de Medidas
unidades relativas son las que pueden variar y se adaptan a las distintas plataformas con responsive design
son rem y em 1 em son 16 px por defecto pero se puede cambiar heredando declarando en la caja
contenedora mas grande a la propiedad
unidades fijas serian px cm mm pt
font-size: tamaño de letra
font-family: tipo de letra
line-heigth: indica el espacio que ocupa la letra hacia arriba y hacia abajo
font-weigth: cambia el grosor de la letra
Normalize
NORMALIZE es un archivo con estilos que normaliza el diseño del navegador y es importante resetear el
estilo para que poder trabajar sin problemas en css
¿Cómo usarlo en nuestros proyectos?
Para usarlo en nuestros proyectos es muy sencillo, basta con seguir los siguientes pasos:
1) Descargar el fichero desde su página oficial http://necolas.github.io/normalize.css/ y colocarlo en la carpeta
de nuestra web.
Archivo Normalize CSS
2) Al tratarse de una hoja de estilo (.css), debe ser tratado como tal, y por tanto simplemente hay que
referenciarlo en el <head> del documento html <link rel="stylesheet" href="normalize.css" />.
Muy importante colocar la referencia a este fichero antes que cualquier otro estilo.
3) Listo!, ya tendríamos normalizada nuestra página web, sin configuraciones ni instalaciones. Ya se debería
ver igual en todos los navegadores.
box-sizing: border-box hace que una caja sea siempre sea del mismo tamaño que la definimos antes en
cualquier navegador
Teoria de cajas
teoria de cajas hay 2 tipos en lineas y en bloque
las de bloque se ajustan al ancho del bloque
mientras los de linea solo ocupan el espacio que usa el contenido de la caja
con la propiedad display se puede cambar el comportamiento de estos elementos en line o en bloque
Propiedades de cajas
propiedades de caja son aquellas que modifican las cajas del html
background-color: cambia el color de fondo de la caja
pading es la distancia entre el texto y los bordes de la caja
padding-top distancia entre texto y borde superior de la caja
padding-left distancia entre texto y borde derecho de la caja
padding-rigth distancia entre texto y borde izquerdo de la caja
padding-bottom distancia entre texto y borde inferior de la caja
el padding se puede dar tambien con simplemente padding para darle y hay que comprender el orden de
cada tamaño
top rigth botom y left
heigth: alto
width: ancho
margin: es la distancia entre 2 cajas y tiene las misma propiedades que el padding
border-radio redonde los bordes de la caja contenedora
border es el borde de la caja hay muchos tipos pero el mas comun es solid
box-shadow: sombra de la caja y movemos el eje x 2px eje y 5px tamaño de desenfoque o tamaño de
sombra el borde que va a tener la sombra 0 y el color por ultimo
text-shadow es lo mismo solo que no tiene el relleno
transform: rotate(rota la caja con los grados que le demos 45 deg) el transform tiene muchas propiedades
outline es un shourhan que significa que es una propiedad acortada como el padding o sea que solo con
outline se puede definir
el outline genera un border sin afectar a la caja por lo que no la modifica solo resalta el objeto
position tenemos distntas propiedades de ella y cuando algo esta posicionado significa que afecta el flujo
de html que es orden de los elementos
position: relative te mueve la caja sin modificar el espacio por lo que si uno la baja el lugar de la caja aun se
va a mantener para esto se le debe dar un
top left rigth bottom estas tienen jerarquia ya que top y left son de mayor lvl jerarquico
position : absolute hace que el espacio reservado ya no este reservado por lo que si le colocas esta
propiedad a una caja la de abajo sube
con esta propiedad la caja se ajusta al tamaño del contenido
en esta propiedad el top sera el contenedor de esta y asi lo mismo con las propiedades de esta caja
position: fixed es igual que el absolute pero este queda fijado por ende fija la caja en una poscion de la
ventana windows
position:stcky es una mezcla entre relative y fixed
PROPIEDAD DISPLAY
MODIFICA EL COMPORTAMIENTO DE LAS CAJAS TIENE MUCHAS PROPIEDADES PERO LAS MAS IMPORTANTES SON
BLOCK = ORDENA LOS ELEMENTO EN EL BLOQUE POR EJEMPLO H1 Y LAS COLOCA UNA DEBAJO DE LA OTRA
INLINE = ORDENA LOS ELEMENTOS EN LA LINEA DEL CONTENIDO POR EJEMPLO DE UN B Y SE USA MAS QUE NADA PARA TEXTO
Y LAS COLOCA UNA AL LADO DE LA OTRA Y ES PARA EL CONTENIDO SOLAMENTE
INLINE-BLOCK = SE LE PUEDE DAR UN ANCHO Y ALTO A LA CAJA MEZCLA EL INLINE Y EL BLOCK MOSTRANDO LA CAJA Y EL
CONTENIDO
FLEX = FLEX Y GRID SE COMPORTAN CASI COMO EL BLOCK
GRID =
INLINE-FLEX
INLINE-GIRD
OVERFLOW
HACE QUE EL SOBRANTE DE UNA CAJA CONTENEDORA SE ENCIERRE EN LA MISMA Y PERMITIRTE SCROLEAR EN ELLA O SEA
CORRE CON LA RUEDITA DEL MOUSE EL TEXTO
SEGUN LAS PROPIEDADES QUE LE PONGAMOS
FLOAT
La propiedad CSS float ubica un elemento al lado izquierdo o derecho de su contenedor,
permitiendo a los elementos de texto y en línea aparecer a su costado. El elemento es removido
del normal flujo de la página, aunque aún sigue siendo parte del flujo (a diferencia del
posicionamiento absoluto).
EL USO VIABLE ES EL DE COLOCAR UNA IMAGEN ENVUELTA EN TEXTO
Pseudo Elementos
PSEUDO-ELEMENTOS SE APLICAN A UN ELEMENTO
Y ELEGIMOS LA CLASE DEL ELEMENTO + :: Y LA PROPIEDAD DEL PSEUDO ELEMENTO
::FIRST-LINE MARCA LA PRIMERA LINEA DE UN ELEMENTO
::FIRST-LETTER PRIMERA LETRA DE UN ELEMENTO
::PLACEHOLDER ES LO QUE APARECE DENTRO DE LOS INPUT Y CON EL PSEUDO ELEMENTO DEL MISMO SE LE PUEDE DAR EL
ESTILO QUE QUERAMOS
::SELECTION ES PARA MODIFICAR EL ESTILO CUANDO SELECCIONAMOS CON EL MOUSE
::AFTER SON HIJOS DEL ELEMENTO AL QUE SE APLICAN Y NECESITAN LA PROPIEDAD CONTENT Y SON ELEMENTOS EN LINEAS
::BEFORE SON HIJOS DEL ELEMENTO AL QUE SE APLICAN Y NECESITAN LA PROPIEDAD CONTENT Y SON ELEMENTOS EN LINEAS
NO DEJA SELECCIONAR LO QUE COLOQUES EN EL BEFORE
after y before crean una etiqueta hijo dentro de otra etiqueta pero con acciones limitadas
Pseudo Clases
PSEUDO CLASES trabajan como los pseudo elementos y sus propiedades escuchan acciones
:hover hace un focus cuando pasas con el mouse por arriba
:link cambia el color de un link que aun no visitamos
:visited cambia el estilo de los link o elementos que ya vsite y juega con la jerarquia de css y esta por debajo
de id
:active al dejar apretado un boton cambia los estilos
:focus se aplica mas a los imputs y cambia mientras mantengo en focus el input
:lang es una funcion que se le debe pasar en el parametro el lenguaje y se usa para modificar el estilo de
una etiqueta a la que le demos el lenguaje
object-fit: se aplica a las imagenes principalmente
:Fil
:Contain hace que la resolucion de la imagen se ajuste al contenido centrandola en el mismo y dejando un
borde
:Cover se ajusta al contenedor sin dejar bordes
:None aplica las resoluciones por defecto
:Scale-Down aplica las resoluciones mas chicas ya sea de la caja o de la imagen
luego tenemos object-position que es para elegir la pocion de la imagen en el contenedor
cursor es una propiedad que cambia el cursor del mouse al estar en un elemento o caja
Colores
hexahecimal es un sistema que trabaja con 16 unidades
por lo que los f es el valor maximo y trabaja con 3 o 6 unidades y el minimo seria 0 y trabaja con numeros
hasta el 10 y con las letras hasta la f
hay una pagina de color picker que te da los colores
Responsive
responsive design adapta una resolucion con varios dispositivos
y mobile first que para el ceo de google es mejor crear una web adaptada a mobiles primeramente
para solucionar los problemas de resolucion se usa una media con @media only and(max-width: px)esto
hace que cuando la pantalla alcanze resoluciones a los pixeles que le demos va a cambiar
para que esto haga efecto es necesario activar en el html la etiqueta meta viewport
Flex box
Flex box viene de caja flexible con flex box se maqueta y maneja el layout en una sola
dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo
bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.
Flex requiere de 2 cosas el flex container y el flex bloque
Flex box trabaja sobre los ejes x e y(+)donde para seleccionar cada eje se hace a travez
de sus propiedades Donde main axis seria el eje horizontal o eje x obviamente este debe tener
un inicio y un final donde el inicio se declara como main-start y el final como main-end.
Y luego tenemos el cross axis donde tambien tiene un inicio y fin donde el inicio se declara
como cross-starr y cross-end Y con css podemos cambiar este flujo de direcciones
Y con display:flex para trabajar que es el que usaremos para que un contenedor tenga los flex
items y con estos los oredenaremos en nuestra pagina usando el flex box para colocarlos donde
queramos sobre el eje x o eje y haciendo que en base al contenido se mantenga la altura
haciendo que 2 cajas tengan la misma altura
para cambiar la direccion de un eje debemos usar la propiedad
Propiedades de main-axis
flex-direction: esta tiene varias posciones:
row que dice que se mantenga como va las filas
row-reverse hace que los items vayan sobre el mismo eje x pero iniciando desde el main-end
column que hace que los items se comporten como columnas
column-reverse hace lo mismo que el row-reverse pero en columna
flex-wrap:wrap hace que un item flex no cambie su resolucon si no que se pase hacia abajo
flex-flow:flow es una mezcla de flex wrap y flex direcction haciendo mas optimo el codigo
justify-contain te centra el item flex y tiene varios valores los cuales son
justify-contain:center centra el contenido
justify-contain:space-arround trabaja casi como un margin:auto donde centra todo con un espacio
entre cajas
justify-contain:space-between hace que las cajas tengan la mayor cantidad de espacio entre ellas
posible
justify-contain:space-evenly da un margin especifico para que cada caja tenga exactamente el
mismo espacio dentro del viewport
Propiedades de cross-axis
align-items: se usa solo cuando hay solo una linea de items que son flex items
align-items:fles-start alinea el flex items ajustandoce al contenido del flex item
align-items:center hace que se centre verticalmente
align-items:flex-end lo lleva al final del eje y
align-items:stretch
align-items:baseline genera casi el mismo efecto que wrap pero en end de y
align-contain: se usa cuando hay mas de una linea de items que son flex items
Propiedades de los items
align-self: te alinea un item flex sobre el cross-axis
flex-grow: el espacio sobrante lo reparte entre todas las cajas y a cada caja se le puede asignar si
queremos cierta cantidad de espacio sobrante
con numeros
flex-shrink: decide que espacio va a ocupar cada caja diciendo cuanto espacio puede ceder
segun el width que le demos
flex-basis: es como el width pero lo toma como mas importante dentro de los flex box
flex agrupa las anteriores en una sola o sea es un shourjan
flex: flex-grow
flex: flex-shrink
flex: flex-basis
Order: es como un z index pero en el eje en que pociociona en el main axis
GRID
grid es un estilo de layout y es un valor de la Propiedad de display y se trabaja en grilla por lo que
se dice que se trabaja por celdas
conceptos basicos
grid container es como el flex container y hace que cuando le doy a un contenedor padre la
propiedad grid container este se comporte por grilla
grid item son todos los elementos dentro del grid container y son los hijos directos del
conntenedor
grid cell son las celdas que le asignamos a los items
grid tracks(column y row)son las filas o columnas del contenedor grid
grid area son las areas que nosotros seleccionamos o defnimos dentro del contenedor
grid line(column line y row line)son las lineas de cada linea del contenedor ya sean las de cada
columna o cada fila
Propiedades de grid container
grid-template-rows : le da una medida a cada fila dandole el alto de esta
grid-template-columns le da una medida a las columnas dandole el ancho de estas
el grid grid-template-columns tiene una propiedad repeat la cual con el numero que le asignemos
repitiendo la funcion (grid-template-rows:repeat(1,100px))
unidades auto y fr lo que hacen por ejemplo fr darle el espaco que sobra a las filas o columnas
donde se aplique trabajando asi como el flex row
grid-row-gap es una especie de margin pero entre celdas
grid-column-gap
grid-gap: row column
Propiedades de grid item
grid-row-start
grid-row-end
grid-column-start
grid-column-end
grid-column con esta propiedad podemos seleccionar el area de trabajo por ejemplo el tamaño de
2 celdas siendo seleccionadas por columnas(1/2) y lo selecciona por lineas
grid-row es igual que el column pero selecciona el tamaño de filas tambien posee una propiedad
llamada span que esta hace que ocupe el espacio por columna o filas y no por lineas
GRID IMPLCITO Y EXPLICITO
AGREGA 3 PROPIEDADES NUEVAS DEL GRID IMPLICITO
GRID-AUTO-ROWS(IGUAL QUE EL TEMPLATE)
GRID-AUTO-COLUMNS(IGUAL QUE EL TEMPLATE)
GRID-AUTO-FLOW: row(Default), column y dense
GRID DINAMICO
minmax() le da el ancho y mnimo o maximo a la selda implementado en el repeat
mincontent valores que se colocan generalmente en el repeat (grid-template-columns:
repeat(3,max-content O si no min-content)) y esto hace que la celda se ajuste al contenido
max-content
cantidad:
auto-fill hace que genere la cantidad de columnas posbles en el contenedor
auto-fit tira las columnas hacia abajo y las escala
----------Alineacion y Control de Flujo-------
Diferencia con Flex: es que hay varios tipos de alineacion individual por contenedor y por ITEM
la alineacion es dentro de cada celda y no alineacion total del flex container
cada celda seria un "flex container"
("Propiedades del grid-container")
justify-items (horizontalmente)
align-items(verticalmente)
stretch(default) - star - center - end
place-items: align-items justify-items
________alineacion de filas y columnas_________
justify-content (horizontalmente)
align-content(verticalmente)
stretch(default) - star - center - end
mas las de flex:
space-arround
space-between
space-evenly
APLICADO AL GRID ITEM
align-self
justify-self
place-self: align-self justify-self
stretch(default) - start - center - end
oreder (igual que en flex)
GRID AREA
AL GRID CONTAINER
grid-template-area: "nombre del area o areas"
AL GRID ITEM
grid-area:"nombre del area"
NOMBRES A LAS LINEAS
[line-name]
se puede reemplazar en grid.row | grid-column
SHORTHAND
grid-template: row / columns (grid container)
grid-template: area unidad
______________RESPONSIVE DESIGN (COMPLETO)______________
Estructuras flexibles (contenedores flexibles, imagenes y videos flexibles)
Media Queries
@Media se usa en consultas de medios para aplicar diferentes estilos para diferentes tipos /
dispositivos de medios.
_ancho y alto de la ventana grafica
_ancho y altos del dispositivo
_orientacion (¿la tableta / telefono esta en modo horzontal o vertical?)
_resolucion
all
Apto para todos los dispositivos.
print
destinado a material impreso y visualizacion de documentos en una pantalla en el
modo vista previa de impresion.
screen
Destinado principalmente a las pantallas.
speech
Destinado a sintetizadores de voz.
Operadores AND | OR
orientation: landscape y portrait
mobile first crea una web primero para mobile
__________TRANSITION_________
transition es 1 propiedad que permite realizar transicones en los cambios
transition:
transition-property: property/ies - all - none
transition-duration: duration/s
transition-delay: delay/s
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end |
steps(int, start,end) | initial | inherit;
transition:
__________ANMACONES___________
funciona como las transition solo que requiere de la propiedad
@keyframs
anmation-name:name
animation-duration: duration
animation-delay: delay
animation-timing-function: (transition values)(y cubic besier para cambiar el tipo de animacion)
animation-iteration-count: number
animation-fill-mode: none | forwards | backwards | both | inithial | inerith;
animation-direction: normal | reverse | alternate | alternate-reverse
____________TRANSFORM_______
transform: translateX(x) - translateY(y) translate(x-y)(si usamos porcentajes son porcentajes
relativos al elemento)-recomendado para animar
transform: scale(xy - x,y) - scaleX(x) - scaleY(y)
transform: rotate(angleUnit) - rotateX(angleUnit) - rotateZ(angleUnit) - rotate3D(angleUnit) ||
angleUnit=deg - grad - rad - turn
transform: skew(angleUnit)
buscar en w3school
con clip phat generator en google le podemos dar otras formas
_____Background____
background-color: color(le da el color al fondo del contenedor)
background-image: url()(con la url le da la img al fondo del contenedor)
background-size: x,y,auto,cover,contain (hace que la imagen del url se ajuste al contenedor)
background-position: left-top-botom-right-center- ++ -left-top-botom-right-center()(mezcla 2 de las
propiedades en el fondo del contenedor disiendole donde ubicarse en la caja)
background-attachment: scroll(hace que se haga fondo del objeto contenedor) fixed(fija la imagen
haciendo que cuando uno scrolea se vea atras) inherit()
background-clip: border-box() padding-box() content-box()(dice desde donde muestra la img ya
sea desde el borde padding etc recortandola);
background-origin: origen del a foto(valores de arriba)lo mismo que clip pero crea la imagen a
partir de la propiedad
__________variables en css_______
una variablle es un espacio que se almacena en memoria
variables globales son las que se ajustan a cualquier selector iniciandola con :root{--var-name} y
se las llama en los estilos con la funcion var(--var-nombre)
--varName
var()
_________Filter____________
none
blur(px)
brightness(0 - 1)
contrast(number or %)
drop-shadow(medidas) le da el efecto de sombra a la imagen
grayscale(%)
hue-rotate(deg)
invert(%)
opacity(%)
saturate(%)
sepia(%)
url("flters.svg#filter-id");
CURIOSIDADES DE CSS
direction: ltr(por defecto) | rtl(efecto espejo en un texto) | initial() | inherit;
letter spacing: separa las letras la cxantidad que digamos en px
scroll-behavior aliviana o no el movimiento del scroll dandole al body en un enlace
user-selected hace que se pueda o no seleccionar el texto
text-shadow le da sombra al texto
------- attr() -------
selectores: buscar en w3school+
