Crear una tabla
Crear listado
Cargar imagen
Crear enlace, enlazar con otro HTML
Crear enlace a una página web
Crear enlace a una pagina web y abrir en otra pestaña nueva
Crear formulario, para pedirle al usuario que ingrese datos (input)
Agrupar elementos por clase (si se pueden repetir, menos los id)
Input en bloque, se usa <div> para dividir en bloques y no quede en línea,
salto de línea.
Para que en el input aparezca lo que va escrito, placeholder=”Escribe tu
apellido”
Contraseña, para que no se muestre al escribir, type=”password”
Type=”numer” para ingresar números
Type=”email” para ingresar correos
Para crear lista de opciones desplegada seleccionables
Para selección única en línea (sin div para no saltarse una línea)
Para multielección
Para crear un cuadro de texto en blando de input
Para crear botón
Selectores para elementos, clases y id
Referenciar nuestro css en html
CSS
Para cambiar la letra, el tamaño y el color a todo el cuerpo de html
Para alinear texto a la izquierda, derecha o centrar se usa uno de estos
Para texto subrayado, en cursiva, tachado o sin formato
Cambiar el color hexadecimal
Modelo de caja, no se herederan, a no ser que le apliques la misma clase a
todo
Para crear padding y border
Para crear padding por lado o en todos los lados manecillas del reloj
Poner margen 0 en body y en h1
Eliminar borde de fieldest
Aplicarle borde, padding y margen a fieldset
Poner en negritas el título
Anchura y margen de abajo de separación en input que están dentro de la
clase .formElement
Ancho y alto de un elemento
Para poner una imagen de fondo
Borde solido negro, dotted para borde puntado.
Redondes del borde de un elemento, 0 es sin borde.
Para centrar un texto en un objeto redondo se usa line-height debe ser igual al
ancho y alto de la figura.
Para convertir elementos en línea a bloques display: block;
El span es para poner un elemento en linea, Registry form separados, para
editar form solo lo ponemos en una clase, por que esta dentro del span y de la
clase “especial”
Jerarquía de selectores, mientras más específico más jerarquía tiene
En la clase que están los botones, es para cambiar cursor al apretar un botón y
la opacidad del botón al pasar por encima
Selector hibrido, no se ocupa mucho, por que puedes asignar clases para que
sea más fácil. El primero colorea los padres de los li, y el de abajo todos los li
hacia abajo.
nePuedes seleccionar varios elementos para aplicarles el mismo formato,
separándolos por una coma.
Cuando dos elementos en línea no quieren ponerse en línea y se saltan una
línea y quedan en bloques. Si no quieres que pase y que se adapte a donde
esta, usa box-sizing: border-box:
Poner una clase u objeto, el titulo en una posición fija y con 0 de pixeles de
separación en el top (arriaba de la página), puede ser con lef:0, right:0 o
button:0 o combinando dos.
Poner margen a los párrafos (que están en esa clase) para que no queden
pegados al titulo fijado en una posición
Para editar posición a un objeto dentro de otro, hay que poner position: relative
para que funcione el position: absolute
z-index: numero de que tan al frente estará 1 esta debajo de 2, aquí el titulo
queda en 2 y el mensaje en 1 ósea debajo.
Aquí usamos en inline-block, y quedan espacios en blanco que no alcanza la
última figura en el contenedor, haciendo que se salte un espacio.
Aquí aplicamos display: flex para que eliminar el espacio de separado
automáticamente y quede dentro del contenedor en la misma línea, alinear
objetos en una misma línea y se adapte automáticamente al contenedor
ajustando el tamaño de los objetos.
En el repositorio o contenedor (que tenga más elementos dentro) aplicamos
display: flex y flex-direction: column es por defecto (hacia abajo, en una sola
columna) y flex-direction: row es por filas (hacia la derecha). Display: flex es
obligatorio para los siguientes códigos.
Si es flex-direction: row, con el justify-content: flex-start es para dejarlos a la
izquierda, justify-content: center (para el centro) y para la derecha justify-
content: flex:end. Display: flex es obligatorio para los siguientes códigos.
Si es flex-direction: column, con el justify-content: flex-start es para dejarlos
arriba, justify-content: center es para dejarlo al medio y el justify-content: flex-
end es para dejarlo abajo. Display: flex es obligatorio para los siguientes
códigos.
En justify-content: space-between es para tener el mismo espacio entre los
elementos del contenedor o repositorio, sin espacio el inicio ni el fin, solo el
mismo espacio entre los elementos.
En justify-content: space-araund es para agregarle el mismo espacio entre los
elementos y además le agrega espacio al inicio y al final es la mitad del
espacio de cada elemento al principio y al final.
En justify-content: space-evenly es para agregarle el mismo espacio entre los
elementos y en el inicio y final también. (todo igual la cantidad de espacio,
incluyendo el inicio y el final)
Agregarle espacio en pixeles solo para el espaciado o separación que hay entre
los elementos del contenedor.
Si es flex-direction: row para mover los elementos en el eje horizontal es
justify-content y para el eje vertical es aling-items. Y para el flex-direction:
column es al revés, justify-contenet para el vertical y aling-items es para el
horizontal.
Si quieres mover solo 1 elemento individual del contenedor, debes aplicar
aling-self, el ejemplo lo mueve hacia abajo.
Para usar el flex de abajo, se debe usar display: flex en el contenedor, para
main va a ser 4 veces mas grande que .menu que es la base, el primero
siempre es la base. Es para editar las proporciones de los elementos dentro de
un contenedor.
Un elemento se puede convertir en contenedor, siempre y cuando tenga mas
de un elemento dentro.
Para ponerlos del mismo tamaño a dos elementos en un contenedor, se aplica
el flex: 1 para los elementos dentro de un contenedor, en este caso hay dos
elementos en una clase llamada .noticia.
Cuando achicas la ventana del navegador y que salten a la siguiente línea
cuando no caben todos los objetos o elementos.
Ocultar elementos de un menú, una lista
Para quitarle el formato lista
overflow: hidden; y overflow: auto;
Ajustar elementos y moverlos dentro de un contenedor, como una torta,
repartir en fracciones. display: grid
Para no perder calidad de la imagen, object-fit: cover
Por ejemplo, que la imagen vaya de la línea 1 a la 5 en columna y fila también.
